提煉「iOS人機互動說明手冊」

編輯註記：本文來自許哲的學習筆記。作者通過自己的歸納摘取出了 iOS 設備人機互動說明手冊的精華。

相信對於產品設計人員來說，對於 iOS 人機互動說明手冊（iOS Human Interface Guidelines）應該都不陌生，作為蘋果官方出品的文檔對於我們在 iOS 以及移動產品設計上面有很大的指導和參考意義，值得每一個產品設計人員反覆閱讀。但由於該文檔篇幅較長、涉及的內容細則廣泛，所以這裡將其中提到的一些重點和值得注意的部分做了一個總結和大家分享

可點擊元素的最小尺寸是 44×44 點

以 iPhone 4S 為例，PPI為326，而PPI和屏幕大小的換算公式為PPI=√a^2+b^2/c^2（a、b為區域像素大小，c為尺寸大小）。所以，將公式反推就可以得到iPhone 4S的最小點擊區域的實際尺寸為0.19in。另外，我們知道1in=25.4mm，所以iPhone 4S的最小點擊尺寸在屏幕上的尺寸為：

0.19*25.4=4.8mm

也就是說在iPhone 4S上，我們的設計最終效果應該保證用戶可操作元素的最小尺寸不得小於4.8mmx4.8mm，大概是成年人食指的大小。

保持應用的一致性

一致性帶來的好處是界面UI的統一美觀，並且用戶可以沿用原來對於產品的理解很快上手，減少學習成本。文檔中具體提到三點：

• 是否與 iOS 系統保持統一
• 是否應用內系統保持統一
• 是否多版本之間保持統一

其中統一的部分概念比較廣泛，從交互方式、圖標定義、文案術語含義到UI組件、操作結果等等，最終的目的就是希望能夠讓用戶舒服的使用產品

對於用戶操作給予積極的反饋

iOS官方內置的程序會給用戶的每一個操作提供可視的反饋。例如，當用戶點擊列表項時，該項的背景會變成高光。同樣用戶也希望在我們的應用裡能得到類似的反饋，反饋告訴他們的操作會有何結果以及確定程序正在運行，所以我們應該：

• 對於用戶的操作給予即刻的反饋
• 對於較長流程的操作給予進度和運行狀態的反饋

要選擇和程序風格一致的狀態欄

官方提供三種不同的狀態欄樣式。如下圖：

所以，我們應該根據應用不同的風格來定義不同樣式的狀態欄，比如說導航欄不是透明的，就不要選用透明的狀態欄

導航欄的標準樣式

對於導航欄的樣式 iOS 有一定的標準和要求，下圖就是一個 iOS 標準的導航欄樣式：

其中 - 導航欄左側為返回按鈕，寫著上一級的標題 - 中間為當面這一屏頁面的標題 - 右側為與當前內容相匹配的控制項

不要創建分段的返回按鈕

如下圖：

使用分段返回按鈕會導致很多問題： - 分段控制項太長，都沒空放標題了 - 沒法展示某一段的選中狀態，段越多每一段的可點擊區域越小，用戶想按某一個不好按 - 當層級很深時，選擇層級的哪一部分來展示是個問題

在iPhone上，tab欄一次只能顯示 5 個以內的頁籤

如果程序有更多的tab，tab欄可以展示前四個，第五個放一個「更多」，用列表的方式呈現其餘的項目，如下圖：

另外，在iPad上，tab欄可以顯示多於5個tab

不要提供關閉浮出層的按鈕，浮出層上面不要展示任何東西

iOS 官方不建議在浮出層上提供關閉按鈕，而是應該當浮出層沒有必要存在的時候就應該消失。對於沒有必要存在的情況，官方是這樣定義的：

• 當用戶對浮出層的操作已經完成的時候
• 用戶點擊浮出層以外或召喚它的按鈕的時候
• 在編輯狀態下用戶點擊「取消」或「完成」的時候

另外，千萬不要在浮出層上面展示任何的東西，除非是警告框。當然更加不要在浮出層上面再展示浮出層

iOS 圖標的樣式要求

每一個程序都應該有一個程序的圖標，為了適應不同的設備我們需要創建不同尺寸的圖標：

為 iPhone 和 iPod touch - 57×57 - 114×114（高解析度） 為 iPad - 72×72

另外，由於當圖標顯示到用戶桌面時，iOS會自動為圖標添加高光、投影、圓角（可禁止）等效果，所以為確保我們的圖標與 iOS 提供的加強效果相配，我們製作的圖標應當:

最後，不管如何，設計規範是死的人是活的。這類文檔在我們產品設計的實際過程中應該是起到指導和參考的作用，而不是盲目的遵循從而被這些條條框框所框死。我們應該試著去理解其中每一個說明和條目背後的目的和意義，從而才能以此出發創造出更好的交貨和產品。另外，分享一個很好的iOS人機互動說明手冊中文翻譯版本，點我查看