行動裝置使用者介面設計不能只靠美術畫面與色彩配置，還要先理解使用者任務、使用情境、產品目標與互動流程。讀《UI進化論：行動裝置使用者介面設計》時，我最有收穫的是它把設計工作拆成產品定位、使用者研究、流程圖、原型與視覺設計，這些步驟對工程師規劃 App 介面也很有幫助。
這本書比較像寫給專業產品設計師的工作手冊，內容會談設計團隊管理、設計流程、設計師頭銜、藝術感訓練，也補了一些掌上型行動設備的基礎知識。從程式師角度讀，有些偏設計管理的章節不一定每段都用得上，但若目標是理解「怎麼把一個行動產品從想法推到可操作介面」，書中的方法仍然值得整理。
書籍資訊可參考博客來頁面：UI進化論：行動裝置使用者介面設計。
行動裝置 UI 設計的核心是什麼？
行動裝置 UI 設計的核心，是把使用者想完成的任務轉成清楚、可操作、符合情境的流程。介面不是先畫漂亮畫面，而是先確認產品要解決什麼問題。
這本書主要從設計師角度討論：如何成為能推動產品的人，並把產品從想法發展到設計流程。對工程師來說，最值得帶走的不是單一畫面技巧，而是「設計前要先拆任務」這件事。
如果只看視覺，很容易把 UI 設計誤解成配色、圖示或版面。但行動裝置的使用環境很碎，使用者可能在會議中、通勤中、家裡或等待時操作同一個 App。不同情境會直接影響按鈕位置、資訊密度、回饋方式與容錯設計。
使用者會如何看待一個產品？
使用者通常不是用功能清單評價產品，而是用「能不能順利達成目的」來判斷產品好不好。合格、優秀、卓越三個層級，差別在體驗是否超出基本可用。
書中用三種產品層級說明使用者感受。合格的產品能完成任務，但不一定讓人留下印象；優秀的產品不只可用，也更順手；卓越的產品會讓功能、情緒與品牌印象連在一起。
從這個角度看，工程師在實作前也可以先問三個問題：
- 使用者打開這個 App 時，第一個想完成的任務是什麼？
- 使用者完成任務時，哪一步最容易卡住？
- 產品除了「能用」，還要留下什麼感覺？
怎麼把設計變成可商品化的產品？
設計商品化要先觀察市場需求，再做使用者研究，最後理解目標市場的文化脈絡。行動產品不是把功能做出來就結束，還要讓使用者相信產品符合當下目的。
書中整理的設計商品化流程，可以拆成三個方向。
| 方向 | 要觀察什麼 | 對 UI 設計的影響 |
|---|---|---|
| 市場需求觀察 | 人口特徵、使用行為、利潤潛力、價值觀、動機、購買因素、使用場合、地理位置 | 決定產品定位、功能優先順序與畫面資訊密度 |
| 使用者研究 | 目標族群身份、使用場合、使用者覺得「好商品」的條件、產品與使用者的情感連結 | 決定流程、互動回饋與是否需要情緒化設計 |
| 文化脈絡 | 不同地域、文化背景、社會環境中的介面風格與期待 | 影響文案語氣、圖示語意、色彩選擇與品牌表現 |
我覺得其中最容易被工程團隊低估的是「使用者買這個 App 的目的」。功能寫得再完整，如果不符合使用者想像中的目的，產品還是會被當成不好用。
使用者分析可以用哪些方法？
行動介面設計可以用任務分析法、情境設定法與社會性研究法來拆解。這三種方法分別處理操作步驟、使用場景與外部文化因素，能幫助團隊少靠直覺猜測。
我最喜歡的是使用者分析與研究這一段，因為它提供了規劃行動介面動線的方法。當團隊想做一個行動介面的產品設計圖，除了美術畫面和色彩設計，對使用者的分析也同樣重要。
- 任務分析法：把特定任務分成多個階段。先想清楚 App 要提供哪些功能，再把每個功能拆成步驟。書中用穿襯衫舉例：雙手抓住襯衫領子、把襯衫披在肩上、右手穿進袖子、左手穿進袖子、把後襟拉平、把左右門襟對齊。這種拆法可以讓介面流程更接近使用者實際動作。
- 情境設定法：設定角色、地點與劇情。使用者在哪裡、發生什麼事、什麼狀況下會操作系統，都會影響設計。例如會議中需要靜音模式，在家裡則可能更重視輕鬆與方便。
- 社會性研究法：研究社會事件、使用心得、銷售狀況與文化背景如何影響產品。不同地域與文化環境下，使用者對介面風格的理解可能不同。
書中也列出一些心智模型工具，例如物理符號系統、諾爾曼模型、流程認知模型、SOAR 模型、心智的社會模型、動力振盪理論模型與大腦協調學。這些名詞不一定每個專案都會用到，但提醒了同一件事：行動 UI 的流程不是畫面接畫面而已，背後其實有使用者如何理解任務的問題。
MP3 播放器範例怎麼拆互動流程？
MP3 播放器範例可以先定義產品功能，再畫互動設計流程圖，接著做介面原型與視覺設計。這個順序能避免一開始就陷入按鈕樣式與色彩細節。
書中用 MP3 播放器示範設計流程，我覺得這個例子很適合工程師理解 UI 文件應該怎麼落地。它不是先畫漂亮畫面，而是先把功能和流程拆清楚。
MP3 播放器的流程可以整理成四步：
- 定義產品功能：明確列出產品需要哪些功能。
- 繪製互動設計流程圖：把使用者如何進入、切換與完成操作畫出來。
- 繪製介面原型：先做最簡單的版面元件位置配置。
- 做視覺設計：先決定 App 主要使用哪些色彩，再繪製介面細節。
這個順序也很像工程開發。先定義需求，再拆流程，再做原型，最後才處理精緻化。若流程還沒清楚就開始調色，常常只是把不確定性往後延。
圖形介面要怎麼做得更有創意？
圖形介面的創意不只來自新奇造型，也來自人性化、情感因素、互動特效與臨場體驗。產品、體驗與品牌最好被使用者感覺成同一件事。
書中提到，介面設計不能只停在美學本能或功能主義。比較好的做法，是營造一種感覺，讓使用者把產品和品牌連在一起。
我會把這段理解成五個提醒：
- 介面要更人性化，讓操作方式接近使用者的直覺。
- 情感化因素不能忽視，尤其是品牌想留下記憶點時。
- 互動特效可以引入，但要服務操作理解，而不是只為了炫技。
- 產品、體驗與品牌其實會互相塑造。
- 使用者的臨場體驗會影響購買意願。
對前端或 App 開發來說，互動特效最容易失控。好的特效會讓使用者理解狀態變化；不好的特效只是讓畫面變慢。這個界線在行動裝置上尤其明顯，因為螢幕小、注意力短，任何多餘等待都會被放大。
視覺設計有哪些基本原則？
行動 UI 的視覺設計原則是清楚、減少記憶負擔、提供線索、保持一致，並控制色彩數量。這些原則看起來基礎，卻會直接影響使用者能不能快速完成任務。
書中整理的視覺設計原則很樸素，但都很實用。
| 原則 | 說明 |
|---|---|
| 介面清楚明瞭 | 使用者一眼要看得懂主要操作 |
| 減少短期記憶負擔 | 讓機器幫助記憶，不要要求使用者記住太多前一步資訊 |
| 依賴認知而非記憶 | 例如列印圖示、播放圖示等常見符號，要讓使用者能辨識 |
| 提供視覺線索 | 透過位置、大小、顏色與狀態提示引導操作 |
| 完善視覺清晰度 | 文字、圖示與背景需要有足夠辨識度 |
| 介面協調一致 | 按鈕位置、確認與取消、內容擺放要保持規律 |
| 色彩與內容對應 | 整體設計不要超過五個色系，相近色系表示相似意義 |
這些原則其實也能轉成工程檢查項。例如元件狀態是否一致、主要動作是否固定位置、錯誤訊息是否出現在使用者看得到的地方、顏色是否只靠色彩傳達含義。設計原則一旦能變成檢查項，就比較容易落進開發流程。
設計流程應該怎麼制定？
設計流程的價值，是讓多個設計師或多個產品維持一致產出。流程不是限制創意，而是讓創意可以被討論、檢查、展示與實作。
書的最後幾章很強調設計流程的重要性。從工程師角度看，這有點像程式開發中的流程圖與 code review：不是為了讓人照表操課，而是確保產出能被理解、比較和維護。
書中整理的流程大致包含十步：
- 制定流程。
- 確定工作內容。
- 討論圖示風格，第一次會議用 brainstorming，先讓點子越多越好，不急著評斷優劣。
- 做首次檢查，由主導者引導討論設計方向，讓設計師說明概念，再決定主要圖示方向。
- 定義介面風格，包含色彩、解析度、關鍵介面數量、介面元素與通用性。
- 定義互動特效，並同時考慮互動模型、視覺呈現與最終實作難度。
- 讓設計師分別完成介面設計。
- 準備演練展示。
- 製作互動模型，例如用 Flash 做 demo。
- 進行最終提案，決定採用哪一個介面。
其中 brainstorming 的段落讓我想到自己以前寫過的遊戲開發心得：第一次討論先不要急著收斂，讓所有人把想到的風格與 idea 都提出來；第二次討論再反過來，由主導者判斷各個點子的優劣。這種一放一收的節奏，比一開始就批評點子更容易產生可用方向。
工程師讀行動 UI 設計書可以帶走什麼？
工程師讀行動 UI 設計書，不一定是為了變成設計師，而是為了更早理解產品決策。懂得任務、情境與流程後，工程實作比較不容易只剩下照稿切版。
這本書有些內容偏設計師職涯與團隊管理，對程式師而言不是每段都立刻派上用場。不過只要正在做 App、遊戲或行動 Web，使用者研究、互動流程圖、介面原型與視覺一致性都會回到工程現場。
我自己的讀後結論是：工程師至少要看得懂設計流程中的「為什麼」。當設計稿要求某個按鈕固定在某個位置、某段流程少一步、某個互動要更明顯時，如果只把它當成美術要求，很容易錯過背後的使用情境。
常見問題
行動裝置 UI 設計第一步應該先做什麼？
行動裝置 UI 設計第一步應該先釐清使用者任務，而不是先畫畫面。先確認 App 要解決什麼問題、使用者在哪些情境操作、哪一步最容易卡住，再進入流程圖與原型設計。
工程師需要讀 UI 設計書嗎？
工程師不一定要把 UI 設計書當成設計師訓練，但需要理解使用者研究與互動流程。當工程師知道設計決策背後的任務與情境，實作時比較能判斷哪些細節不能省。
任務分析法適合用在哪些 App？
任務分析法適合用在有明確操作流程的 App，例如播放器、購物流程、表單填寫、預約系統或遊戲教學。任務分析法會把一個功能拆成多個步驟，幫助團隊找出可以合併、刪除或提示的地方。
行動 UI 為什麼要考慮使用情境？
行動裝置常在零碎時間與不同環境中被使用，同一個功能在會議中、通勤中或家裡會有不同需求。使用情境會影響靜音、單手操作、提示強度、資訊密度與錯誤恢復方式。
UI 視覺設計可以只看好不好看嗎？
UI 視覺設計不能只看好不好看，還要看使用者是否看得懂、記得住、操作得順。清楚的視覺線索、一致的元件位置與有限的色彩系統，通常比複雜裝飾更能改善行動介面的可用性。
延伸閱讀
- 外行人也能學會的 App 企劃法
- Marty Cagan 談產品系列影片心得
- 製作一個全球熱銷的遊戲
- iOS 7 App 轉換指南：舊 App 升級前要檢查哪些項目？
- Auto Layout 介紹：iOS 7 介面排版為什麼要用約束？
最後更新： 2026-08-28
關於作者 {#author}
Claire Chang ｜ 企業 AI 導入與流程轉型顧問。專注於 AI Agent 架構設計、ERP 系統整合與企業 AI 治理。
首次發布：2014-03-02