App設計的流程大致是：先釐清誰在什麼情境下使用、要完成哪些任務，再畫出資訊架構與流程圖、線框稿，接著建立視覺風格與設計系統，做成可點擊的互動原型請真人試用，修正後把標註、切圖與元件規格交付開發。過程中要依 Apple 人機介面指南與 Material Design 調整各平台的操作慣例，並在設計稿階段就納入觸控尺寸、色彩對比與放大文字等無障礙要求，不要等開發完才補。
設計前的輸入：使用情境、任務與平台
手機 App 的使用情境和電腦不同。Apple 的設計指南提到，使用者通常以單手或雙手持握 iPhone，會在直向與橫向之間切換，有時只花一兩分鐘查看資訊。動手畫之前，先把下列輸入整理成一頁文件：
- 使用情境：在哪裡、什麼狀態下打開 App，例如通勤時單手操作、在門市櫃檯出示畫面、戶外強光下閱讀。
- 核心任務排序：打開 App 要完成的事依重要性排列，排在前面的任務放在容易觸及的位置。
- 平台與裝置：首版支援 iOS、Android 或兩者，是否要支援平板與橫向畫面。
- 品牌與資料：既有的標誌、色彩、字體，以及後台能提供哪些資料欄位。
功能範圍與需求文件的整理方式，可參考App開發流程的需求階段。
資訊架構與流程圖：決定畫面怎麼串接
資訊架構決定功能放在哪一層、使用者怎麼在畫面之間移動。這個階段要產出三樣東西：
- 畫面清單：列出所有畫面與彈出視窗，標出各自屬於哪個任務。
- 導覽結構：決定主要分頁與層級。Apple 的指南提到，空間變大時可以把分頁列改成側邊欄，但功能本身不應因空間大小而改變。
- 使用者流程圖：每個核心任務畫一條流程，把分支畫出來，例如尚未登入、資料送出失敗、權限被拒絕時要去哪個畫面。
內容較多的畫面，可用漸進揭露的方式，先顯示主要資訊，次要選項收在選單或下一層，畫面會比較好操作。
線框稿到視覺設計：建立設計系統
流程確認後，先用灰階線框稿排出每個畫面的區塊與層級，不處理顏色與圖片，讓討論集中在結構。版面通過後再進入視覺設計，並同步整理成設計系統，讓之後每個新畫面都用同一套規則：
- 基礎樣式：Material Design 的主題由色彩配置、字體排版與形狀組成，iOS 端也可用同樣的分類整理品牌色、字級與圓角。
- 淺色與深色：兩套色值都要定義，並各自檢查對比。Android 的動態色彩會依使用者桌布產生配色，要決定是否採用。
- 元件庫：按鈕、輸入欄、清單、對話框等元件，連同一般、按下、停用、錯誤等狀態一起設計。
- 命名一致：色彩與元件的名稱和工程端對齊，交付時才不會各說各話。
iOS與Android：依平台規範調整操作方式
品牌一致展現在色彩、字體與插圖，操作方式則要跟隨各平台的慣例，使用者才不必重新學習。依 Apple 人機介面指南，iOS 設計要注意：
- 減少畫面上的控制項，讓使用者專注在主要任務，次要動作放在容易找到的地方。
- 適應裝置方向、深色模式與動態字體的變化。
- 常用控制項放在畫面中下方較容易觸及，並讓使用者能用滑動返回。
- 內容避開安全區域外的系統列與硬體區域，版面依可用空間的尺寸類別調整，而不是依裝置類型。
Android 端以 Material Design 為準，優先使用官方元件，許多元件已內建足夠的觸控範圍。網頁的介面規劃與 App 不同，可另外參考網頁設計UI UX。
無障礙基本要求：設計稿就要做到
- 觸控尺寸：Apple 建議 iOS 控制項預設為四十四乘四十四點，下限二十八乘二十八點；Android 建議互動元素至少四十八乘四十八 dp。控制項之間的間距和尺寸一樣重要。
- 色彩對比：依兩個平台的建議，小字的文字與背景對比至少四點五比一，較大的文字至少三比一；粗體的門檻兩邊不同，Apple 不論字級都列為三比一，Android 的粗體字小於十四 sp 時仍要四點五比一，深淺模式都要檢查。
- 不只靠顏色：狀態差異要加上形狀或圖示，例如錯誤不只變紅色。
- 放大文字：Apple 建議理想上讓文字至少能放大到兩倍；版面要允許文字換行、欄位長高，不被裁切。
- 輔助說明：圖示按鈕要有給 VoiceOver 與 TalkBack 朗讀的說明文字，設計稿就要寫出來。
- 操作替代：滑動手勢要有按鈕替代，自動播放與大量動態效果要能停止或減少。
互動原型與使用者測試
視覺稿完成後，把核心任務串成可點擊的互動原型。靜態畫面看不出點擊順序與轉場是否合理，原型能讓決策者與目標使用者在寫程式前實際操作。測試時請受測者完成真實任務，例如從首頁找到預約入口並送出，觀察他在哪裡猶豫、點錯或找不到按鈕；找人、寫任務與記錄的方法可參考UX測試的流程。
原型要放在手機上測，才看得出拇指搆不搆得到、強光下看不看得清楚。也要用放大文字與深色模式各看一次，確認版面沒有跑掉。依測試結果修改後再測一輪，直到主要流程沒有卡關，再進入交付。
交付開發：各階段產出物與標註清單
| 階段 | 產出物 | 誰確認 |
|---|---|---|
| 使用情境與任務 | 情境描述、任務優先順序 | 業主 |
| 資訊架構 | 畫面清單、導覽結構、流程圖 | 業主與工程 |
| 線框稿 | 各畫面版面與狀態 | 業主 |
| 視覺設計 | 視覺稿、設計系統、元件庫 | 業主與工程 |
| 互動原型 | 可點擊原型、轉場說明、測試紀錄 | 業主與受測者 |
| 交付開發 | 標註、切圖、元件規格、無障礙說明 | 工程 |
交付時，工程師需要的不只是漂亮的畫面：間距與字級標註、依平台規格輸出的圖示、每個元件的狀態、轉場與互動說明、長文字的換行規則、輔助說明文字，以及深色模式的色值。工程實作後，再由設計師對照設計稿驗收一次。
常見問題
App設計和網頁設計差在哪？
App 要遵循 iOS 與 Android 各自的操作慣例與系統元件，還要考慮安全區域、單手操作與放大文字；網頁則在瀏覽器裡跨裝置使用。兩者的使用者研究與測試方法是相通的。
iOS 和 Android 可以用同一套設計稿嗎？
品牌色彩、插圖與資訊架構可以共用，但元件與操作方式建議依各平台規範調整，兩邊的觸控尺寸建議與系統元件並不相同。共用一套時，至少要在兩種裝置上實機檢查。
委託設計前要準備什麼資料？
目標使用者與使用情境、核心任務清單、品牌規範，以及要顯示的資料欄位和後台能提供的內容；也可以附上喜歡與想避免的 App 範例。資料越完整，修改輪數越少。
每個畫面都要做互動原型嗎？
不必每個畫面都做，但核心任務的流程建議做成原型。原型能在寫程式前找出漏掉的步驟與不清楚的按鈕，這時修改只要調整設計檔，成本比開發後再改低。
App設計公司要怎麼評估？
看作品是否實際上架、能否說明各平台規範的取捨、交付物是否包含設計系統與標註，以及是否配合使用者測試。設計原始檔的交付方式與權利歸屬，也要寫進合約。
本文由京采數位科技整理。我們自 2005 年起提供官網設計、系統開發與 Google SEO 服務，實際案例可見成果與案例。
想直接討論你自己的網站狀況，或需要一份初步的搜尋機會評估？
相關主題
下一步
開始設計前，建議先整理使用情境、核心任務與品牌規範，並決定首版要支援的平台與裝置。京采的網頁設計服務可以協助需求釐清與 App 介面規劃，同步規劃背後的後台管理系統與 API，並在交付開發前把畫面、狀態與元件規格整理清楚；想討論專案範圍，歡迎與我們聯繫。
