【2020 UI design 工具】網頁必備UI設計工具 創科巨頭都在用的免費UI工具 附介面設計教學 | 文章 – 滙豐機滙
作為老闆的你,有沒想過你的企業都可擁有如Uber,Github這些創科巨頭的程式介面?其實你都可以動手設計到~即使你直接聘請UI designer製作介面,還是自己設計好再轉給coder,都需要理解 UI的實際運作,才可靈活地與第三方溝通,往下一文看清何為UI、其重要性,及逐步教你用平台設計介面!

隨着科技發展及疫下經濟,網店及網頁平台如雨後春筍,與網頁設計息息相關的 UI design 開始嶄露頭角。作為老闆的你,可以自己擔當起 UI designer 的角色,將理想介面設計好再轉給 programmer,又或者直接聘請 UI Designer,再將設計交給 programmer。無論是哪一種,你都需要理解 UI 設計的重要性及實際運作,才可更靈活地與第三方合作做好介面,下文將介紹何為UI、其重要性,及逐步教你用平台設計介面。
UI & UX 101
|source|
要知道 UI 是什麼要首先了解 UI 及 UX 的關係。
UX(user experience)是用户體驗,指用户於你的頁面或產品的體驗(例如營銷電郵、網店、APP) 。頁面或產品與用户的互動、易用性、錯誤率、流暢度,這些都構成用户的主觀體驗。
UI(user interface) 即用户介面,它局限於網絡上的視角體驗,包括 APP 每一個按鈕放什麼位置、字型、各個元素的顏色、圖像選擇等。故此,UI 就如 UX 幕後的齒輪,每項設定都會影響 UX:
UI is the saddle, the stirrups, and the reins. UX is the feeling you get being able to ride the horse.
— Dain Miller, Web Developer
UI 工具 Figma 新手到資深用家都趨之若騖
說 UI 是用户體驗幕後的齒輪,那要設計起上來豈不是很花功夫?心思當然少不了,但一個易用流𣈱的介面卻可以省卻許多功夫。傳統的 UI design 工具如 Adobe Illustrator 圖像處理或繪圖,Sketch 則較適用畫線框圖、Zeplin 便於傳遞檔案標註予第三方。故不同的應用程式都於 UI 各施其職,但設計好一個介面要用上四、五個平台,程序繁複之餘,對 cross team 合作亦不方便。
|figmaXUber|近年冒起的 UI 設計平台 Figma ── 可以說是集合了以上平台的各項優勢,加上靈活的頁面互動設計功能,成為不少 techy 企業不能缺少的設計工具,包括 Uber、GitHub、Zoom、Deliveroo、Airbnb、Microsoft 等。這些企業都有一個共通點,就是都十分依賴網絡平台的 UX 來維持客源,一定要選上一線的設計工具;另外一個重點是,Figma 比起一般傳統的 UI 設計工具還要易用,且免費就可以做到。接下來就為你簡單走一趟 Figma,由零開始設計出手機 APP 介面。
5 步一覽用 Figma 設計平台介面
選用計劃
在 Figma 登記用户時,你需要選取免費或付費計劃:你可以因應需要選用計劃,免費及付費計劃在設計功能上沒有大的差異,小編選用的是免費計劃。
選定你要的介面尺寸
第一步是為你的設計定好大小。先按左上的 “region tool”,再在右邊 “design” 一欄選上你設計會呈現的電子產品。你亦可以多選幾個用作不同的電子產品,或多選幾個一樣的大小,設計整個用家家流程。設計元素
為你的介面設計元素,你可以在左上選定形狀,再在右下自訂顏色。加入其他元素
加入圖片
一些較複雜的元素則可以自備圖片完成設計:▲插入圖片放到介面
▲Drag & drop 便可以 resize 圖片或按 Ctrl+T resize
加入文字:
▲輸入文字,有海量字型供選擇*如果想於 Figma 字型選項加入你本機的所有字型,則可以在帳户設定內下載 Figma desktop 版,線上平台在 F4 後便會自動加入你電腦的所有字型:
互動設計
為頁面設計互動,你可以在 “Prototype” 中選擇所在頁面的互動動作(如「按下」、「經過」、「長按」等),並選擇它以什麼形式 trigger 下一個動作(如「轉換頁面」,「開啓連結」)。▲按 Prototype 進入設計互動版面
▲各種互動設定
經過反複設計,小編完成了一個模擬咖啡店 APP 版面(粗略板):

Figma 用後感 ── 非常適合商用介面的設計平台
比 AI 及 Photoshop 更易操作
Figma 本來就以介面互動為一大賣點,AI & Photoshop 在這方面並沒特別優勢,但撇開這特色來看,Figma 在介面設計來說還是比 AI & Photoshop 優勝:
- Drag & drop、resize 更順手,處理圖片或各種元素,步驟簡單直接
- 以電子屏幕直接設計,省卻處理 Adobe artboard 尺吋變動
- 輸出圖像時直接連同電子產品框架,Adobe 需要人手配置
- 圖層清晰,自動以電子產品歸類,highlight 物件就自動顯示圖層:
自動記錄所用過的顏色,便於建立一貫的品牌顏色:
注:其實 Adobe 都有這項功能,不過容易跟內置顏色混淆。
- 頁面流暢,沒有 lag 機情況,並不會遺失檔案。用 Adobe 程式設計,檔案大小或電腦型號及新舊都會影響流暢度,最可怕的是意外關閉後可能會流失進度;但 Figma 則完全沒有卡機情況,萬一意外關閉,進度都已即時同步到雲端,無論何時再進入檔案都可以重返上一次進度。
實時協作、留言及儲存,適合 cross team 合作
Figma 像一個 cloud/Google Doc 版的 UI 設計平台,有備註功能、Cloud 同步、版本歷史、實時分享及 Team Library。
實時分享、備註、同步協作
與 Google Doc 類似,用家可以於 Figma 與其他用户共享檔案,並實時看到大家的 input 及備註:▲實時分享功能
▲實時備註功能
▲觀察夥伴另外,檔案每個更改都會線上自動儲存,即使視窗意閃退都不會遺失進度。
Team Library每個品牌都應該有屬於它的一系列顏色、字型及類似的圖片風格,以配合其品牌形像,Figma 的 Team Library 就可以幫助介面貫切風格。你可以在 Team Library 加入品牌想常用的圖像或各種元素,協作者都可以隨時在 Library 將元素 drag and drop,非常方便:
▲Team Library Asset
▲Update Team Library Asset
▲Update Team Library Asset
Plugins
好像 Google Chrome 的附加功能 ── Google Chrome Extensions 一樣,Figma 都設有 Plugins 頁面,你可以在製作過程獲得更輔助,例如 icon 庫、SVG 生成器(即高清圖格式方便以 Adobe 程式後製)、background remover 、color picker 等等,這些 plugins 都可以在下載後,即時應用在製作過程中。這些 plugins 會不斷更新,並有新的加入,你亦可以在一些網站推薦找到最新、最受歡迎的 plugins。Figma plugins
不過 Figma 有一個缺點,就是選字型時沒法預覽效果:▲比較快的方法是先到自己 local drive 的字型庫預覽字型效果,再在 Figma 選用;
▼或在 Figma 先按 Text box 中的字型,然後一直按鍵盤 ↓ 預覽字型,不過也相當費時,建議使用第一個方法。
其實一個設計介面程式可以做到那麼人性化是很不容易,Figma 讓用家覺得 UI design 沒想像中那麼繁複可怕,即使是對 Adobe 從未熟悉的商家,都不怕對 UI design 無從入手。簡單幾個步驟,就能設計出簡易平台介面,你亦可藉此更易與設計師或 programmer 協作。你都來踏出第一步,你的平台都可以像以上 techy 的企業介面般美美又好用!