2022/03/25 (更新內容)
2023/03/24 (內容微調)
介面設計有幾個階段，第一個階段關心的是內容的呈現，重點在於畫面中會有哪些內容以及這些內容的呈現方式。一般而言，從User Story的驗收條件可以確認使用者預期看到或輸入哪些資料，所以，先根據user story去規劃畫面的內容。
第二個階段，就是畫面與畫面之間的關聯。在User Story的驗收條件中可以說明與其他User Story的關係，如果關係太複雜，可以利用流程圖說明User Story之間的關聯，也就是在這個階段就要思考在這個畫面中如何跳轉到其他相關畫面。可以利用文字說明，描述畫面的動作，以及與其他畫面之間的關係。
在第二個階段，也可以用靜態的圖表來說明畫面之間的關聯，例如，可以利用狀態圖 (State Diagram / State Chart Diagram / State Machine Diagram)來表示，也有人用活動圖來表示 (詳參: UML Activity Diagrams: Detailing User Interface Navigation)。
由於雛型工具越來越強大，越來越多人使用雛型工具(如:Figma、Axure)來設計使用者介面。現在，因為介面設計的工具越來越強，甚至就直接開發使用者介面。
雛型也有不同的目的與層次，一般而言，會先有Wireframe，Wireframe用來表示介面的配置與功能，所以不會考慮配色，而Mockup的重點是要讓使用者看到視覺效果，所以，一般會利用Mockup讓使用者看到系統的顏色(及樣式)及真實的內容，而Prototype的說法則有兩種，就畫面的設計流程而言，是先有Wireframe，加上配色後成為Mockup，加上簡單的互動就是Prototype，也就是循序的演進。另一種說法則認為Wireframe及Mockup都是靜態的，加了簡單的互動就是Prototype，所以，會有一種Prototype是動態的Wireframe，另一種Prototype則是動態的Mockup。
What Is the Difference Between Wireframe, Mockup and Prototype?
Wireframes, Prototypes, Mockups: what’s the difference?
Wireframes are typically used as the documentation of the project. Since they are static and simple, you could include short notes to explain the interaction or technical documentation.
Prototypes are used to their full potential in user testing. By simulating the final interaction, it allows you to check on the usability of the interface before the development actually begins.
Mockups are particularly useful if you want to get early buy-in from a stakeholder.
第三個階段，就是進入介面設計的細節，例如，在使用者介面設計時，必須要注意使用者經驗 (User eXperience, UX)。簡單的講，就是在設計系統時將使用者的經驗歷程考慮進去，從如何輸入資料一直到如何展現資訊都要以使用者為中心去設計。
除了使用者經驗之外，現在因為使用者端的載具相當多元，要注意不同螢幕大小(跨平台)的使用經驗，所以，現在會採用Responsive Web Design (RWD)來因應。開發的時候，如果公司沒有足夠資源有不同團隊去開發Android、iOS等不同的平台，會去思考採用跨平台的開發工具，例如，react native。或者，會去思考採用RWD搭配Progressive Web Application (PWA)的概念，讓以web browser為基礎的前端，可以具有native app一樣的行為(如:離線運作)。這也是在使用者介面開發時，要去思考的方向。
介面設計是件很複雜的事，除了過去大家學到的web前端的基本概念: HTML、CSS、javascript之外，為了要統一整個系統的風格，有些公司會建立設計系統。設計系統會包括一些設計原則，例如，元件的選擇原則、顏色的使用原則、文字的使用原則、排版原則，系統的互動設計原則。
排版會影響到使用者的注意力，有三個重要原則:可預期性、一致性、響應式 (在不同螢幕大小及解析度上不會跑版、不會無法或很難使用)，比較需要注意的是響應式設計。
Material Design提供了較深入的說明:
Principles
Predictable
Consistent
Responsive
導覽也會影響到使用者如何找到他/她想要找的內容。
Material Design提供了較深入的說明:
顏色在使用者介面設計是個很重要的元素，會影響到使用者的感受，顏色的運用是個學問，對於初學者而言，要注意的是:
選擇調色盤 (palette)，也就是決定使用色系以及顏色主題(theme)。
決定顏色的搭配，有幾個大原則，第一、顏色使用的一致性。第二、注意對比，例如:淺色的背景搭配深色的字，深色的背景盡量搭配淺色字。第三、利用顏色去搭配設計意圖。
在顏色的使用上要注意顏色的層次、品牌形象、意義、狀態
文字的可讀性
Material Design提供了較深入的說明:
Color usage and palettes
Color theme creation
Tools for picking colors
Principles
Consistent
Distinct
Intentional
Hierarchy
Brand
Meaning
State
文字在使用者介面設計是個很重要的元素，文字的運用影響了使用者是否能順暢使用系統，對於初學者而言，要注意的是:
Material Design提供了較深入的說明:
Input
Label
Select + Option
Textarea
多行文字輸入可使用textarea
Button
Datalist
text
讓使用者自由輸入
盡量不使用text，盡量讓使用者點選，可以減少很多輸入的錯誤
多行文字可使用textarea
輸入密碼，可利用password
輸入數字，可利用number或range
可設定最大值、最小值
日期及時間:使用date選取日期、month選取月年、week選週次、time或datetime-local 選取時間
輸入Email，可利用email
輸入URL，可利用url
上傳檔案，可利用file
輸入電話，可利用tel
選顏色，可利用color
checkbox
很多項目間是獨立選項時，可採用檢查方塊
UI cheat sheet: radio buttons, checkboxes, and other selectors
radio
很多項目間是互斥選項時，可採用radio
UI cheat sheet: radio buttons, checkboxes, and other selectors
選項
可使用select + option
h1, h2, h3 (heading)
利用字體大小的層次去協助使用者尋找資訊
list
利用list去整理資訊
Image
利用圖片去吸引使用者的眼光
UI cheat sheet: The 5 love languages of the web
Like
Save
Favorite
Rate
Views & listens
通知
更多資料
icon