Apple Human Interface Guidelines：為什麼好的 iPhone App 看起來自然又不用教

有些 iPhone App 第一次打開，不需要看教學，就大概知道怎麼用。

你知道左上角通常是返回、底部頁籤可以切換主要區域、表單會叫出適合的鍵盤、危險操作通常會有明確警告。

這種「不用教」的感覺，很大一部分來自平台慣例（Platform Convention）。

Apple Human Interface Guidelines 的作用，就是讓設計者不要每個畫面都重新發明一套互動語言，而是把使用者早已在 iPhone 上學會的習慣，直接變成產品的一部分。

好的 iPhone 應用程式，重點在行為符合使用者預期

HIG 最容易被誤解成一份視覺規格表：圓角要多大、字體要幾點、按鈕要放哪裡。

這些細節確實重要，但更核心的是「預期一致」。

使用者在系統 App 與其他 iOS App 裡，早就學會很多行為：

• 頁籤負責切換主要區域。
• 推進式導覽用來進入下一層內容。
• 工作表（Sheet）適合處理暫時、聚焦的任務。
• 分享、搜尋、刪除等常見動作有熟悉的符號與位置。
• 系統文字可以跟著使用者設定放大。

當你的 App 跟這些慣例一致，使用者不必重新學一套規則。

清楚性：每一個畫面都要讓人知道「現在在哪裡、能做什麼」

介面自然的第一個條件，是清楚。

標題、按鈕、圖示、內容層級與狀態，都應該讓使用者很快理解現在發生什麼事。

例如一個付款頁如果同時出現三個同樣醒目的按鈕，使用者就必須停下來判斷哪一個才是主要動作。

Apple 對按鈕的最新指引也強調，不要讓畫面塞滿太多同等重要的突出按鈕，因為選項越多，使用者需要思考的時間越長。

這和一般 UX 原則是一致的：目前最重要的動作要先說清楚，不需要把所有功能同時露出來。

安全區域：內容可以延伸，互動不能被硬體與系統區域擋住

iPhone 有不同螢幕尺寸，也可能有動態島、狀態列、Home Indicator 等系統區域。

所以版面不能只看某一支手機截圖來決定。

Apple 目前的 HIG 仍然強調要尊重系統定義的安全區域（Safe Area）、Margins 與 Layout Guide，讓介面可以隨裝置與視窗尺寸調整。

背景圖片、色塊或裝飾可以視需要延伸到安全區域之外，但重要文字、按鈕與輸入控制，不能因為追求滿版效果而被系統區域遮住或變得難按。

不要為某一支 iPhone 畫死版面，要讓版面能適應

現在的 Apple 平台不只面對不同尺寸 iPhone，也要考慮文字放大、旋轉、不同視窗尺寸與 iPad。

如果設計稿只有一張固定尺寸，再要求工程師「照像素做」，上線後很容易遇到：

• 字一放大就被截斷。
• 按鈕被推到螢幕外。
• 不同裝置出現奇怪空白。
• 橫向或多工視窗下排版失效。

比較好的思路是先定義層級、間距關係與可伸縮規則，而不是只定義一組固定座標。

44×44 pt：看起來能按，不代表真的好按

在 iPhone 上，手指不是滑鼠游標。

Apple 最新的按鈕指引仍然建議，按鈕的點按區域（Hit Region）一般至少要有 44×44 pt，讓人比較容易準確選取。

這不代表每個圖示都要畫成 44 pt 大；圖示本身可以比較小，但實際可點擊範圍需要足夠。

常見失敗包括：

• 右上角關閉按鈕只剩一個很小的 X。
• 列表裡兩個小圖示靠得太近。
• 次要文字被做成連結，但可點範圍只有文字本身。

這些在設計稿上可能很精緻，真機上卻容易誤觸。

動態字體：字體不是設計師決定一個大小就結束

很多使用者會在 iPhone 系統裡調整文字大小。

Apple 的動態字體（Dynamic Type）就是讓 App 文字可以跟著使用者偏好放大或縮小。

因此 HIG 不只是在說「Body 幾點、Title 幾點」，更重要的是使用語意文字樣式（Semantic Text Style），並讓版面在文字變大後仍然成立。

例如：

• 原本橫向排列的兩個元件，文字放大後可能要改成上下排列。
• 固定高度的列表列，可能需要自動增高。
• 按鈕文字不能因為放大就被截掉。

支援動態字體的關鍵，不只是在畫面上把字放大，整個版面配置（Layout）也要維持可用。

系統元件之所以好用，是因為使用者早就學會了

切換開關、選擇器、頁籤列、導覽、工作表、警示與情境選單等系統元件，不只是 Apple 幫你畫好的 UI。

它們還包含：

• 使用者熟悉的行為。
• 系統狀態與互動回饋。
• 無障礙支援。
• 不同外觀與尺寸的適應。

如果沒有很強的理由，重新做一套外觀相似但行為不同的控制元件，通常只是增加學習成本。

這也是為什麼 App 想「做出品牌感」，不一定要把所有系統元件重畫一次。

品牌可以有個性，但不要破壞平台熟悉感

Apple 最新的 Branding 指引很清楚：品牌色、品牌字體與視覺個性可以存在，但不要壓過內容，也不要讓標準控制元件失去熟悉行為。

比較適合放品牌特色的地方，通常是內容、插圖、影像、語氣、資料視覺化與少量重點色。

導航、返回、刪除、分享、搜尋這些高度習慣化的功能，越熟悉越好。

如果你想進一步處理純視覺層級、間距與元件質感，可以延伸看Refactoring UI：沒有設計師，也能讓介面從業餘感變得專業嗎。

頁籤列是導覽，不是拿來放動作

Apple 目前對頁籤列（Tab Bar）的定義仍然很明確：它用來切換 App 的頂層區域。

例如首頁、搜尋、收藏、個人資料，這些都是不同內容區。

如果要執行「新增」「分享」「編輯」這類作用在目前內容上的動作，應該使用工具列、按鈕或其他適合的控制，而不是把它塞進頁籤列假裝成另一個區域。

這種區分看起來小，卻會直接影響使用者能不能建立穩定的心智模型。

導覽設計先看層級是否清楚，再決定元件

一個 App 如果同時有頁籤、側邊欄、工作表、導覽堆疊與彈出視窗，並不代表它比較完整。

應該先問：

• 哪些是最常使用的頂層區域？
• 哪些內容是從上一層深入？
• 哪些任務只是暫時打開，完成後就應該回去？
• 使用者現在是否隨時知道自己在哪裡？

導覽元件只是把這個資訊架構呈現出來。

系統符號的價值，是熟悉、可縮放、能跟文字一起工作

Apple 的 SF Symbols 提供大量標準符號，很多常見操作都已經有使用者熟悉的圖示。

使用這些符號的好處，不只在於畫風一致，也包括它們可以和系統字體、字重與尺寸一起適應。

但不要把「有圖示」當成「一定看得懂」。

陌生功能仍然可能需要文字標籤；高度關鍵的操作，也不應該只靠一個難猜的圖案。

深色模式不只是把白色變黑色

如果顏色全部寫死，深色模式一開，很容易出現文字看不清楚、卡片層級消失、品牌色過亮等問題。

比較好的方式，是使用語意色彩（Semantic Color），例如主要文字、次要文字、系統背景、次要背景，而不是直接假設背景永遠是白色。

這樣介面在淺色與深色外觀下，仍然能維持相同的資訊層級。

無障礙應該從設計階段就納入

Apple 把 VoiceOver、Dynamic Type、Switch Control、Voice Control 等無障礙能力視為平台體驗的一部分。

所以無障礙不應該在 App 做完後才問「還能不能補」。

設計階段就應該確認：

• 圖示按鈕有沒有清楚的 Accessibility Label。
• 資訊是不是只靠顏色區分。
• 文字放大後還能不能操作。
• VoiceOver 的閱讀順序是否合理。
• 錯誤訊息是否真的能被理解。

如果視覺上看起來很漂亮，但 VoiceOver 使用者無法完成付款或註冊，那就不能算完整的介面。

微互動讓操作有回應，但不要為了炫技一直動

按鈕按下去有狀態、儲存成功有回饋、載入中有進度、完成動作有適當觸覺回饋，這些細節會讓 App 感覺「有回應」。

但回饋的目的，是幫助使用者理解系統狀態，不是讓每個動作都有動畫。

如果你想進一步拆解觸發、規則、回饋、循環與模式，可以看Microinteractions：真正讓產品有質感的，常常是那些很小的互動。

文字也是介面：按鈕與錯誤訊息要直接說人話

Apple 的 HIG 把 Writing（介面文字）獨立當成設計主題，因為文字會直接影響使用者是否知道下一步。

像「發生未知錯誤」「操作失敗」這種訊息，只告訴使用者事情壞了，卻沒有告訴他怎麼恢復。

比較好的錯誤訊息至少回答：

• 發生什麼事。
• 使用者現在能做什麼。
• 如果需要等待，何時可以再試。

按鈕也一樣。「確定」「送出」有時太模糊，能寫成「建立帳號」「儲存變更」「刪除照片」時，通常更容易預測。

設計稿看起來沒問題，真機不一定真的好用

HIG 最後還是要回到真機驗收。

至少應該用不同裝置尺寸、淺色與深色外觀、最大文字尺寸與 VoiceOver，把主要任務完整走過一次。

還要真的用手指點按：關閉按鈕好不好按？鍵盤出現後會不會擋住主要動作？文字變大後，表單與列表還能不能完整操作？

模擬器很適合快速檢查版面，但觸覺回饋、手指精準度、實際握持與部分無障礙使用情境，仍然需要真實裝置才能感受到。

一個介面通過「漂亮截圖」不代表通過 HIG；驗收時更重要的是不同使用條件下仍然可以完成任務。

iPhone 應用程式感覺「不像 iPhone」時，可以先檢查這 8 件事

不要把介面設計規範當成不能違反的美術規章

HIG 不是要把所有 App 做成同一個樣子。

如果要偏離平台慣例，必須先知道換來了什麼，以及使用者要多付出多少學習成本。

品牌、遊戲、創作工具、專業軟體，都可能需要不同程度的客製化。

但客製化最好建立在使用者已經熟悉的基礎上，而不是為了「看起來不一樣」就重新發明導覽、按鈕與手勢。

如果你正在判斷某個介面到底是哪裡讓人迷路，可以延伸看Nielsen UX Heuristics：使用者看不懂、找不到、一直犯錯，可以怎麼檢查。

常見問題

做 iPhone 應用程式一定要完全照介面設計規範嗎？

不需要把每個畫面做得像系統 App，但導覽、基本控制、點按區域、文字縮放與無障礙等行為，越符合平台慣例，使用者通常越容易上手。

44×44 點的點按區域一定要這麼大嗎？

重點是可點擊區域。圖示視覺可以比較小，但 Hit Region 一般至少要讓手指容易準確選取。

動態字體只是為了無障礙嗎？

它首先是閱讀需求，也是無障礙的一部分。支援 Dynamic Type 可以讓使用者依自己的視力與偏好調整文字，不需要接受設計者固定的一種大小。

深色模式需要另外做一套設計嗎？

不一定要兩套完全不同的介面。比較好的做法是使用語意色彩與正確層級，讓系統能在不同外觀下維持可讀性與關係。

怎麼判斷應用程式有沒有「iOS 原生感」？

不要只看顏色與圓角。更值得測的是：第一次使用的人能不能順利導覽、知道哪裡可以按、出錯後知道怎麼恢復、文字放大仍可用，而且常見操作不需要重新學。

好的介面設計，最後會讓使用者忘記規範的存在

一個自然的 iPhone App，不會一直提醒使用者「我們遵守了 Apple 規範」。

它只是讓返回、切換、搜尋、輸入、錯誤處理、文字縮放與無障礙都符合使用者原本的預期。

當平台慣例替產品承擔掉一部分學習成本，設計團隊就能把更多注意力放在有差異的內容與功能上。

這也是 HIG 很有價值的地方：它替設計保留創意空間，同時避免把時間浪費在重新教使用者一套原本就已經會的操作方式。

參考資料

Apple：Human Interface Guidelines（Layout、Buttons、Tab Bars、Typography、Accessibility、Branding、Writing）。
Apple：SF Symbols 與 Apple Design Resources。