iT邦幫忙

2021 iThome 鐵人賽

DAY 8
1
Modern Web

前端?後端?你早晚都要全端的,何不從現在開始?系列 第 8

[Day 8] 設計UI畫面-Figma

昨天已經把功能規畫完了,
接下來就需要畫成UI,前端開發時會比較方便
也避免程式寫完後才發現畫面不合心意,
又要改改改
( 雖然通常有UI圖還是很常做完又改改改

要用什麼才可以畫UI?

那畫UI其實有蠻多工具的,
從最簡單的紙&筆,
還有電腦都有的 小畫家,
甚至還有人用PowerPoint畫 XD

基本上可以讓你快速、有效率,又能畫出符合需求的UI圖的 都ok
通常如果是那種一手包辦的(完)全端工程師,
就是需要系統設計、前端、後端、DB設計全包的,
很多都紙筆大概畫一畫,自己能理解就好

但是如果是一個專案團隊,有分前、後端,
或是要跟客戶討論畫面的,
就會需要出到比較精細的UI圖,
基本上要精細到跟最後完成品一模一樣,
有的還需要出Prototype,就是按鈕都可以點擊、畫面也會移動的

那如果要能做到這種效果,就需要仰賴一些UI工具了

像我都是使用

Figma 官網

https://ithelp.ithome.com.tw/upload/images/20210923/20140745qc3ZcNr9HK.png

這個好用的點在他是線上的工具,不管你在哪台電腦
只要登入就可以繼續畫圖

如果要Demo,貼個連結給對方就好
不用傳一堆圖或是檔案很大的PPT
還有一個很讚的部分是 他的 Community

上面有很多前輩分享好用的Plugin跟畫好的組件,
一些常用的框架或是第三方庫都有,
只要挑好後到自己的專案,複製貼上就可以使用了

可以說是相當低省時間呀!
像我這次要使用的Vue第三方庫-Vuetify也有

https://ithelp.ithome.com.tw/upload/images/20210923/20140745yLnoYZ2AiV.png

點擊Duplicate後,就會進到編輯的畫面
在左邊這排Pages的地方,他們會把不同的UI Component分開放
要找的時候就hen方便啦~

詳細的操作說明可以參考 Figma教學

https://ithelp.ithome.com.tw/upload/images/20210923/20140745UtcKOkdJ4v.png

不知道怎麼設計的話,可以參考現有的網站

因為web開發出來是要給人用的,
可以增加一些小巧思,但是大部分的操作介面還是以簡單、直覺化為主,
最好是不需要任何教學,所有年齡層都能輕鬆使用的

以下舉例幾個類似主題的網站

  1. 城市通

這個網站的活動清單設計得還不錯

資料欄位都跟我串接的api很相似,所以有參考他來設計

https://ithelp.ithome.com.tw/upload/images/20210923/201407454eMck0NNba.png

  1. 高雄市立美術館

這個網站搜尋是用下拉展開的

感覺挺有質感的,也列入參考

https://ithelp.ithome.com.tw/upload/images/20210923/20140745OdHYpk6h1l.png

  1. 華山1914

這個是每個活動右下角會標註他是什麼類別,

也是可以參考用

https://ithelp.ithome.com.tw/upload/images/20210923/20140745UhP0jV9LXz.png

  1. 台北世界貿易中心

這個就是純文字的列表,因為api中,有附圖片網址的活動不多,

可能大部分會只有純文字,因此也列入參考對象

https://ithelp.ithome.com.tw/upload/images/20210923/20140745Ix5OjjAII2.png

UI 設計

鉛筆稿

我個人習慣先用鉛筆畫草稿,再畫到Figma上面

https://ithelp.ithome.com.tw/upload/images/20210923/201407458EHZ6GTS26.jpg

https://ithelp.ithome.com.tw/upload/images/20210923/20140745mnJQS5ORyK.jpg

Figma連結 Demo

因為時間比較趕一點,所以我沒有畫得很細節

大概畫一下位置在哪裡而已

後續有時間會再回來補上

首頁
https://ithelp.ithome.com.tw/upload/images/20210923/20140745OyR0lPsT7e.png

找活動
https://ithelp.ithome.com.tw/upload/images/20210925/20140745qJsSJ4c4bR.png

活動細節
https://ithelp.ithome.com.tw/upload/images/20210925/20140745sEnEPtGGdY.png

9/25補圖 主題推薦頁面
https://ithelp.ithome.com.tw/upload/images/20210925/201407458dbZxjc64R.png


工程師要懂UI設計?

可能很多人會覺得,畫UI 不是 UI / 美工 / (PM) 的事嗎?
為甚麼工程師也要會畫UI?
這就跟有的人說 PM 也要稍微懂一點程式一樣

其實因為立場不同,UI設計師跟工程師很容易在溝通上有問題
那寫程式的人自己畫UI會有個優點,
就是他畫出來的UI,前端一定做得出來 (畢竟沒有人會畫自己做不出來的東西嘛

舉例來說,我這次開發用的是 Vutify 套件,他本身已經有多個組件可以使用
只需要敲幾句程式碼就可以變出現成的組件,
如果 UI 以 Vutify 擁有的組件來設計頁面,
那前端就可以快速做出來,甚至還能做到100%相同

相反的,如果今天 UI 自己畫組件、配色、排版,
前端就需要一個個去對照切版、找相似的套件
甚至有可能會做不出來

不會畫也沒關係
多少懂一點去跟UI溝通的時候比較有底氣 XD


ok UI畫完了 明天就要開工啦~


上一篇
[Day 7] 系統功能規劃
下一篇
[Day 9] 前端環境建置 WebStorm、Vue
系列文
前端?後端?你早晚都要全端的,何不從現在開始?31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言