蘋果iPhone X設計規範總結

04-19

9月13日，蘋果秋季新品發布會發布了iPhone X。儘管看到了蘋果久違的創新和進步，但除了調侃超高的售價和面部識別的段子外，設計師討論的更多是iPhone X的創新給設計和適配帶來的挑戰。下面是觀根據蘋果WWDC官方視頻和IOS Human Interface Guildlines總結一下官方推薦的設計規範。

閑話少敘，來張iPhone X鎮樓。

全面屏

全面屏算是自喬大爺仙去之後iPhone外觀最大的創新了。當然創新有風險，為了最大化顯示空間，蘋果去掉了標誌性的Home鍵，並使用了圓角屏幕，甚至頂部感測器區域留出了一個劉海。雖然一向的慣例是蘋果會使用新技術彌補或者革新就技術或設計的不足，但是很多地方確實給設計師帶來了不少挑戰。

屏幕尺寸

足夠誠意，在手機尺寸沒有變大的情況下，蘋果給iPhone X祭出了5.8寸的屏幕。儘管實際測量並去掉遮擋區域後， iPhone X的實際顯示面積要不iPhone 8 Plus小很多。

屏幕尺寸方面，在豎屏情況下5.8寸的iPhone X顯示寬度與4.7寸的iPhone 6、7、8寬度一致，不過iPhone X在豎向上高出了145pt，高出近20%。

解析度

iPhone X使用超視網膜屏，豎屏1125px × 2436px（375pt × 812pt @3x）像素解析度，458ppi的屏幕像素密度。官方推薦，最好為你的應用或遊戲所有視覺元素提供高解析度圖素。對於文字和其他矢量圖素最好使用與解析度無關的PDFs格式；對於點陣圖，需要提供@3x和@2x兩個版本的原圖。

長寬比

與其他16:9版本不同，iPhone X屏幕屏幕長寬比為 13：6，直追目前安卓比較流行的2：1和21：9。儘管蘋果提供的Autolayout為IOS各種設備的適配提供了解決方案，也許這個屏幕長寬比對普通的APP影響可能不大，但卻給需要自定義的遊戲UI設計帶來了極大的挑戰。這代表很多界面需要壓黑邊或者內容兩邊顯示大量留白。具體方案請參照後面的支配推薦。

狀態欄

雖然劉海看起來很奇怪，不過在豎屏的情況下，劉海和兩邊的時間、網路和電源等狀態倒是不錯。不僅如此，iPhone X狀態欄的特殊狀態也做了優化，通過對時間背景的變化來表現打電話和熱點接入狀態，再也它們帶來的高度變化導致UI高度變化了。

Home指示條

Home鍵的消失算是iPhoneX除了全面屏外最大的改變之一了。在iPhoneX之前，物理Home鍵一直是蘋果產品的標誌性設計。Home承載了太多功能，如單擊喚醒手機、返回主屏；雙擊喚出多任務；三擊喚出輔助快捷鍵；長按啟動Siri；輕按指紋識別解鎖或支付等。正因為如此，Home鍵過度使用帶來的失靈等問題，才常常被詬病。

而現在一條全新的Home指示條取代了物理Home鍵，並用低端上劃手勢實現返回桌面和切換程序功能。

蘋果最新文檔指出，Home指示條至關重要，除了特定條件下，它將永遠在屏幕底部（無論豎屏還是橫屏），這意味著你在設計中必須考慮它的存在。注意它與導航欄或底部內容的衝突和融合。與很多蘋果其他界面元素一樣，Home指示條會隨背景自動改變成明暗狀態，提供黑白兩種顏色。官方明確不建議開發者為Home指示條進行自定義。

那麼是不是就代表開發者無法使用這個區域，屏幕中導航條就一直存在，且屏幕上劃功能就無法使用了呢？如果是的話，蘋果的全面屏不就不全面了嗎？所以答案當然是否定的。首先，蘋果指示建議核心內容和功能放在安全區內，而類似列表和圖片集等功能是可以現在到屏幕底部的。

其次，為了為給照片和視頻等應用提供沉浸體驗，蘋果允許開發者可以開啟Home指示條自動隱藏功能。開啟後幾秒鐘不觸碰屏幕，指示條會自動隱藏。觸控屏幕後再次出現。官方建議，這個功能應該只在被動觀看體驗時（播放視頻或照片幻燈等）啟用。官方並沒有遊戲界面的處理方式，所以對於遊戲而言，這個指示條要常駐顯示。

再次，蘋果允許開發者在必要的情況下開啟邊界保護功能。 開啟後，第一次上劃喚醒Home指示條，再次滑動會激活開發者設定的功能。但筆者依然不建議您這麼做，因為這是系統獨佔的功能。一是操作會變得繁瑣並可能會誤操作，而是使用它難以為您的應用形成必要的操作關聯。

圓角和劉海

為了最大化利用機身為屏幕提供更大的空間，iPhoneX使用了之前從來沒有使用過的圓角屏幕（半徑44pt）和存放各種感測器的劉海（高度等級30pt）。這代表您放在角落的內容極有可能被裁剪而造成顯示不全，從而影響查看和體驗。

當然對於大多數使用標準的、系統提供的UI元素的應用這不是什麼問題，IOS給出了官方布局如下，很好的規避了裁切的問題。

那麼關於布局官方指南又有哪些呢？

界面布局

上面介紹了iPhoneX全面屏帶來的新變化及帶來的新挑戰，那麼我們如何進行全面屏設計來避免內容被圓角、劉海以及Home指示條遮蓋和干擾呢？下面我們看看官方推薦

安全區

為了既能獲取全屏沉浸體驗，並避免自由設計造成的各種設計問題，蘋果首次引入了安全區的概念。那麼蘋果如何定義安全區呢？

如果你的應用是豎屏的，蘋果推薦屏幕的頂端和低端需要流出足夠的留白，細心的同學可能發現，上下好像不太一樣。你想的沒錯，上下並不是對稱的。安全區的頂端始於屏幕頂端44pt（132px）處，而下端距離屏幕底端34pt（102px）處。這很好理解，一是為了面遮擋，而是為了能為Home底端上劃操作和控制中心頂部下劃操作流出足夠空間，防止誤操作。如果你自己觀察官方應用的話，你會發現，豎屏的全安全區悄悄是iPhoneX與其他設備真正適配的內容區域。

如果你的應用是橫屏，蘋果不僅推薦左右需要留出足夠的空間，屏幕下端也要為Home指示條留出足夠的空間。與豎屏一樣，有劉海的一側留出44pt，無劉海的一側34pt。你可能會奇怪，右邊沒有什麼內容，為什麼也要留白呢？官方給出的解釋是，一般來說內容應該居中顯示，而且你無法預測劉海到底會在那一側，如果不居中放置，會造成屏幕翻轉時UI元素位置相對不固定。而用戶玩遊戲的時候是高度依賴肌肉記憶的，而不對稱的屏幕不利於玩家形成肌肉記憶，所以官方建議要把核心內容放到安全區里來。當然屏幕底部為Home指示條留出來的區域並不是不可以放置內容，而是盡量不要防止可交互的元素。

邊距

基於平衡視覺和適配兩方面的考量，iPhone X繼承了邊距（Margins）的概念。如果您從事過視覺設計或網站設計應該對這個概念不陌生。在iPhone X中，邊距與安全區的邊緣重合，但是上下貫通屏幕頂部和底部。

邊距的存在進一步規範了內容的布局方式，值得注意的是無論是安全區和邊距的存在主要是為了規範核心內容和主要交互功能，而不是無交互的背景或者場景。

適配

根據官方推薦，您的應用最好使用標準的系統提供的UI元素控制項以及AutoLayout自動布局構建界面。並應該遵循UIkit定義的安全區和布局邊距，這樣可以確保所有內容可以隨設備和情景合理內嵌。也能避免遮擋狀態欄、導航欄、工具欄以及標籤欄。更重要的是您的應用或遊戲在各個設備上可以自動適配。而不需要做專門的適配方案。

官方推薦不要通過屏幕頂部和底部壓黑邊嘗試隱藏設備的圓角、劉海（感測器殼體）或者Home指示條。同樣不要使用像貼邊支架、邊框、圖形或說明文字這樣的視覺裝飾特別處理這部分區域。

同樣官方推薦避免將交互元素放在屏幕底部或者角落。因為從屏幕底部上劃被用戶激活Home指示條並回到主屏或進入多任務切換，且系統會取消你在這個區域布局的手勢。而屏幕角落區域很難觸控。更不要設計非對稱布局。

當然如果您不遵循官方推薦，那麼您需要在界面的同時需還需要考慮系統的狀態欄等各種內容的顯示問題。所以，蘋果強烈不推薦您自定義。

核心內容及操作

如安全區中所講的一樣。為了更好地進行適配和良好的布局，官方推薦所有核心內容和操作需要內嵌在安全區內。從而避免與狀態欄、導航欄、工具欄及標籤欄重合。

但對於內容的推薦官方也推薦需要豎屏滑動的內容，比如列表或者照片庫等需要延伸到屏幕底部。

所以我們可以簡單地理解：對於需要頻繁操作的功能，官方建議不好超出安全區切除Margin的區域；而核心內容留好邊距後頂部依然需要尊徐安全區的頂端，但底部可以延伸到屏幕底部。

背景或場景

為了更好地全屏體驗和沉浸體驗，需要確保應用背景或類似遊戲的場景平鋪全屏。其實從官方演示的app中可以看出，這個遊戲的控制項並沒有嚴格遵循安全區的概念，估計當時並不清楚官方的設計規範。至少有一點我們可以知道，我們主要內容可以緊貼安全區的邊緣，也就是說如果你的內容是貼邊的，你可以忽略Margins。

全屏圖和視頻

關於全屏元素的適配，官方給出了下面兩種情況的適配方法，簡單來說就是寬度適配或者高度適配，以保證您的內容的正常顯示。但是我們知道iPhone X的長寬比與其他設備的解析度是差異是很大的。所以推薦兩種方式

基於16:9解析度適配

可以看出，如果使用較小的長寬比作為基礎的話，應該以寬度進行適配。

基於13:6解析度適配

同樣，如果使用較大的長寬比作為基礎的話，應該以高度進行適配。

但無論哪一種適配方式，需要保證重要的視覺內容現在是屏幕中間，這樣無論選擇哪種適配方式，在兩種屏幕上都不會因為適配裁剪而丟失。