UI Design的6個階段
用戶界面UI Design是一個涉及多種技能和知識的複雜過程，它從無到有，將設計概念最終形成網站、電腦、網頁應用或手機應用的產品界面。這篇文章將帶介紹整個UI設計過程，了解每個設計階段的目的。
階段1 - Sketching
Photo source: Anguel Giozov
Sketching是以最快和最低成本的方式開始界面設計的第一步，設計師將腦內對產品的初步想法繪畫到紙張或屏幕上。首先，設計師可以粗略地劃出框架，然後再畫出頁面上各個原素的位置，最後用線條來代表圖像、文字和相片，非常簡單地將每一個界面繪畫出來。
Sketching的功能是讓設計師初步呈現自己的設計概念出來，然後構想有什麼原素可以添加或減少。
這個階段的工作可以簡單的用紙和筆、Figma Jam或各種平板電腦的繪圖應用程式來完成。
階段2 - Wireframing
Photo source: Visme
Wireframing是將先前畫好的草圖用設計程式簡單地畫出來，通常是用單色或黑白灰色來表達，讓人們看到產品界面布局和元素擺放位置的設計圖。設計師用簡單的方型創建框架原素、輸入Dummy文字，應用單色的圖標及代表相片的圖案進行排板設計。
Wireframing的功能是將產品建立視覺化布局，方便設計師與各持分者如管理層、項目經理及軟件工程師等溝通，讓他們了解設計師的想法，從而給予意見及建立信任。
這個階段的工具包括JustInMind等Wireframing 設計應用程式或UI設計應用程式，如Sketch、Figma和Adobe XD。
階段3 - Component Design
Photo source: Kevin Bhagat
Component是指產品前台HTML的組件，如Form、List、Checkbox、Radio Button和Table等。設計師將這些界面組件的外觀美化、解決可用性，無障礙和響應性等問題。
Component Design的功能是將設計師的美學想法轉化為產品設計系統化，並可以更容易和準確地在團隊間共享。
這個階段的工具包括UI設計應用程式，如Sketch、Figma和Adobe XD。
階段4：User Flow
Photo source: Leanplum
User Flow是使用者應用產品來完成目標的每一步流程，這個階段是關於理解用戶使用產品界面時的心理，設計師會用Flow Diagram流程圖以導航路線方式將各個界面串連來表達，
User Flow的目的是方便團隊檢查界面流程的友善性及流暢度，並可將客戶旅程的入口、出口和決策點視覺化。
這個階段的工具包括Flowmapp、Wireflow或JustInMind等應用程式。
階段5：Mock-ups
Photo source: Good Mockups
Mock-ups是將先前Wireframing訂立好的每一個界面進行真實的美術設計，模擬顯示最終產品中的所有內容。設計師需要設計完美像素 (pixel perfection)的界面，確保排版和組件的一致性，為界面加入品牌原素如象徵品牌價值的顏色及字體，選擇相片或繪畫圖案及添加真實的文字。
Mock-ups的功能是讓每一個持分者清楚知道產品面世後的每個界面的最終外觀，給予建議及微調。
這個階段的工具包括Sketch、Figma、Adobe XD及圖片素材庫。
階段6：Prototyping
Photo source: Kathryn Grayson Nanz
Prototyping是將所有界面綁定在一起，並顯示產品最終預期的外觀和流程。設計師在Prototype軟件將所有屏幕和流程鏈接在一個模擬環境中，確保所有界面在進入編程之前看起來美觀，操作良好，並按照預期流動。
這個階段的工具包括Sketch、Figma、Adobe XD。
[延伸閱讀: 5點優化網站UI Design的目標及技巧]
總結，UI Design設計階段並不一定是線性過程，而是根據正在進行的項目的獨特要求、時間和預算，設計師可能需要在這些階段之間跳來跳去，關鍵是熟悉所有這些階段並習慣於這個流程。
[讀者如有意為公司的網站優化UI/UX或更新網頁設計，可點撃點雅互動 Dhost Interactive的網頁設計服務或發電郵向我們查詢]