【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 AssetPlugins
好像 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 的企業介面般美美又好用！
