如何評價新版 iPhone X 的設計規範？

11-26

Designing for iPhone X - Fall 2017 - Videos - Apple Developer

10 個設計師里 9 個強迫症，剩下那個去設計了 iPhone X……

發布會謝幕了，媒體們也發完了新聞稿，朋友圈也熱鬧過了，接下來的工作該輪到設計師了。iPhone X 11月才發貨，但你也許已經接到做適配設計的任務了。在這之前，讓我們先來看看這個 iPhone X，對 UI 設計師的日常工作有什麼影響。

新增的虛擬 Home 指示條——你不得不考慮的設計元素之一

iPhone X 邁向了全面屏，移除了原本在手機底部的實體 Home 鍵，取而代之的是一條 134 x 5 pt 的虛擬 Home 指示條。「底端上劃」成為了全局性的系統操作，它可以讓你返回桌面（原本的單擊 Home 鍵），或者切換應用程序（原本雙擊 Home 鍵）。我將這個虛擬 Home 指示條的特性總結為以下五點：

特性一：如影隨形

蘋果在最新的開發文檔中指出，這個 Home 指示條是「至關重要的系統元素」，除了在某種特殊條件下，這個指示條將永遠伴隨著你的 App，成為強制的設計元素出現在屏幕中。這就意味著，在你的 App 設計中你將不得不為它保留位置，並考慮好周圍元素與它的兼容關係。

特性二：黑白雙煞

什麼？你說你想做彩虹漸變指示條？少俠你太天真了……這個虛擬 Home 指示條只有亮／暗兩種模式，它會自動根據周圍背景，選擇將自己變身成白色或是黑色，從而儘可能地和周圍背景有所區分。

特性三：真 · 全面屏

iOS 自帶的通訊錄是一個典型的帶有底部導航欄的 App，對比 iPhone 8 和 iPhone X，你會發現在 iPhone X 上，底部導航欄並不在真正的「底部」，它是懸浮在虛擬 Home 條上方的。對擁有底部導航欄的 App 而言，iPhone X 這個全面屏的「下巴」並非可用區域，它並不真的「全面」。

但同時，Apple 的設計則例中也指出，如果 App 的底部是可滾動的內容（比如一個長列表視圖），那麼官方給出的建議是：放心大膽地霸佔整個屏幕吧！發現文字和 Home 指示條重疊了？沒關係！這是官方推薦的正確做法！事實上，用戶依然可以點選最下方的列表條目。這種情況下，全面屏才是真的「全面」了。

特性四：鳩佔鵲巢

如果你的 App 帶有「底端上劃」這樣的炫酷操作……Apple 的建議是：少俠要不你還是重新考慮一下？因為這個交互我們已經佔了！

美國著名的股票交易軟體 Robinhood 就使用了類似的交互。在買入／賣出股票這樣的關鍵操作里，它使用了「底部上劃」。儘管不是嚴格意義上的「底端上劃」，但虛擬 Home 指示條的介入無疑增加了誤操的機率。在 iPhone X 設計時，類似這樣涉及到屏幕底部上下滑動的交互都需要更謹慎的思考、更嚴格的測試。

當然，iPhone X 並沒有強制禁止這種交互操作。它給開發者們留了一條路：「在萬不得已必須要這樣做的情況下」，開發者可以開啟「邊緣保護」功能（Edge Protection）。開啟後，第一次底端上劃將只是喚醒 Home 指示條，再次上劃才會激活原有功能。

特性五：自動隱身

在播放視頻時，開發者可以開啟虛擬 Home 條「自動隱藏」功能從而獲得沉浸式體驗。開啟後，視頻播放時虛擬 Home 條將自動消失；單擊屏幕後就又會出現。

「安全區」——這詞兒怎麼聽起來有點耳熟？

看著新的 iOS 設計規範文檔，一個陌生又熟悉的詞浮現在我的腦海中——出血（bleed）。

在平面印刷設計中，為了顧及之後紙張裁切過程中可能出現的誤差，設計師會在畫布四周留出一點邊緣空間，這一圈額外的空間就叫做「出血」。同時，設計師一般也會設置一個「安全區」，確保設計稿中的重要內容都出現在安全區內。

對數字化時代下的 UI 設計師來說，我們本可以永遠把「出血」和「安全區」的概念永遠拋之腦後，因為屏幕不用裁切！全世界也許 99.99% 的手機屏都是規整的矩形，我們的安全區就是整塊矩形屏（安卓系統底部的虛擬按鍵可以近似理解為屏幕外，設計時可以忽略）。然而 iPhone X 這個妖蛾子的出現，又迫使我們重新找回那個久遠的記憶……

讓我們來看看蘋果定義的 iPhone X 設計「安全區」吧：

手機縱向持握狀態下，安全區是從屏幕最頂端往下 44 pt 開始計算的，要注意的是，它並不是和「齊劉海」完全齊平的，而是要再往下一點。「下巴」位置上，從下往上推 34 pt 以上的部分開始才被視為安全區。

縱向持握狀態下的安全區設計還比較容易理解，但到了橫向持握狀態，安全區的概念就有點反直覺了：

橫向狀態下（假設是逆時針旋轉 90 度），原本的「劉海」部分到了左側，「出血」部分實際佔用面積不變，而儘管虛擬 Home 條挪到了下方的長邊上，屏幕最右邊雖然沒有任何系統及元素，但蘋果依然建議將其設置為與左側「劉海」相對稱的「出血」。也就是說，在橫向狀態下，你的安全區是個半島，只有上方是連接到屏幕邊緣的。這又是為什麼呢？為什麼蘋果官方不建議設計師充分利用最右邊的空白面積呢？為什麼非要左右對稱地設置「出血」呢？尤其考慮到對於很多手機遊戲來說，任何一點屏幕空間都是寶貴的，血條，金錢，操作鍵，小地圖，大地圖等等，太多元素逼著設計師充分利用每一寸空間了。

蘋果官方給出的解釋是，由於你無法預測用戶在橫向持握下會把「劉海」放在左邊還是右邊，如果安全區不是橫向居中放置的，會造成界面中元素與手機邊緣的相對位置不固定。他們認為，用戶在使用手機時（尤其是玩遊戲的時候）高度依賴手部的肌肉記憶，不對稱設計儘管空間利用率更高，但與用戶的肌肉記憶相背，由此導致的失敗操作容易讓用戶沮喪。因此，蘋果向廣大設計師們高聲疾呼：請把按鍵全都放到安全區里來吧！

尺寸大了，比例變了，這意味著……

在 iPhone X 之前，儘管 iPhone SE，7 和 7 Plus 的屏幕尺寸大小不同，但都是 16:9 的屏幕。而 iPhone X 差不多是個 13:6 的屏幕（812 x 375 pt）。屏幕的絕對尺寸也變大了，從 4.7 吋增大到 5.8 吋——這些對設計來說意味著什麼呢？

「拇指盲區」更大了

喬布斯曾說，手持設備最理想的屏幕尺寸應該是 3.5 吋。然而隨著喬老爺子英年早逝，蘋果在「越來越大」的路上越走越遠（據說很大一部分原因是為了順應亞洲市場的需求）。iPhone 如今已經增大到了驚人的 5.8 吋。

一般人大拇指大概 2.5 - 2.7 吋長，iPhone 7/8 Plus 是 5.5 吋，日常生活中我注意到，廣大 Plus 用戶已經發展出了一套獨特的手部微調動作，來讓自己的拇指夠到左上角的「返回」鍵（為人類的適應力感到驚嘆！）。儘管如此，這麼大的屏幕已經超越了絕大多數普通用戶的拇指覆蓋範圍。

無論是在通勤地鐵上，還是走在路上一手拿奶茶，另一手拿手機，在很多情境下單手操作是無法避免的。蘋果在 iPhone 6 Plus 中第一次引入了兩次輕觸 Home 鍵將屏幕整體下移的交互設計。

然而，隨著 iPhone X 移除了實體 Home 鍵的，這個精彩的交互設計也隨之消失了。雖然很多人已經習慣了直接在 iPhone 上的左滑返回，但以下兩個因素阻礙了它成為事實標準的返回操作：

1）該交互方式的可見性為零，可發現性較低

2）App 自帶的橫滑操作可能造成交互衝突。比如：郵件類 app 中的歸檔操作，列表控制項中的刪除操作，「走馬燈」控制項（Carousel）的橫向滾動等等。

也許現在是時候重新思考左上角的返回鍵了。在這裡提供一個特殊的應用例子僅作拋磚之用：

在 5.8 吋的 iPhone X 上，左上角的「拇指盲區」變得更大了。而基於 F 型流動視線設計的很多 App，通常都會將它們最重要的功能入口置於左上角（用戶最先看到的內容原本正好處於拇指舒適區的邊緣）。而到了 iPhone X 上，視線優先和拇指舒適就未必重合了——iPhone X 給設計師出了一道難題。

注意全屏圖

如果你的 App 中用到了全屏背景圖，比如啟動畫面（Splash screen），你需要注意不同屏幕比例的適配問題，確保圖片被切割後依然保留主體部分。如果你的啟動畫面里有人物模特，尤其需要注意屏幕比例變化造成的切割位置的變化（半身人像如果正好切到手肘的位置會顯得很奇怪）。當然，有資源給兩種屏幕比例做適配素材的同學可以忽略這一條。

矢量圖形 PDF 是你的朋友

iPhone X 的屏幕解析度達到 1125px × 2436px（458 PPI）。更高屏幕畫質意味著點陣圖素材的尺寸也要相應變大。這種情況下，儘可能多地使用 PDF 矢量圖形可以在更大程度上為 App 瘦身，節省流量。

給設計師唯一的好消息……

看到這裡，作為設計師的你也許會覺得：這 iPhone X 就是個大坑！是的，我看完新的設計文檔確實也有這種感覺……

對設計師來說，有沒有什麼好消息呢？

有（且可能僅有這一條）—— 那就是大家再也不用考慮打電話，WIFI 熱點分享等特殊狀態下的設計啦！因為 iPhone X 用狀態欄時間的背景顏色來統一表示這些特殊狀態（不再有高度變化），喜大普奔！

總結

幾天後，當你在設計軟體里新建出第一個形狀詭異的 iPhone X 畫布，請記得：

新增的虛擬 Home 指示條，將成為你不得不考慮的設計元素之一。希望你還能記得它的五個特性：如影隨形、黑白雙煞、真 · 全面屏、鳩佔鵲巢、自動隱身。
全面屏 iPhone 更大，也更瘦長了。但對你來說，你要時刻牢記一個陌生又熟悉的詞——「安全區」，尤其是在橫向持握狀態下。
你儘可能多地使用矢量圖形了嗎？你的 App 安裝包變大了多少？全屏圖片被奇怪地切割了嗎？你放在左上角的主功能鍵是否超出了拇指舒適區？有空的時候，不妨想一想，「返回」操作是否還有別的可能？

每年夏末的蘋果發布會落幕，媒體離場，段子手退散，舞台上留下的只有無數設計師、產品經理和開發者們。他們打開 Apple Developer，默默工作，以確保幾周之後，用戶可以在新 iPhone 上正常、愉悅地使用他們的產品。

也許你並不會買 iPhone X，也許看著那道「齊劉海」你內心的強迫症小人已經鬧翻，但你還是一字一字看起了新的蘋果設計規範和這篇文章。儘管 iPhone X 讓你的工作更麻煩了，你還是會把每個設計稿做到像素級的精確 —— 因為你是一名設計師，你希望用自己的雙手，讓這個世界變得更好，哪怕是那麼一點。

相關鏈接

Apple Developer
What is Your Smartphone Thumb Zone? | Experts Exchange

普通設計師一枚，總結一下官方文檔的內容，就當作筆記了……

內容以《designing for iPhone X》視頻為主，視頻前半部分與新版HIG/Overview/iPhone
X部分內容相同，後面用一些實例總結重點。白色配圖來自HIG，黑色配圖來自視頻截圖。括弧內容是本人的備註。

（為方便閱讀，以下內容文字在前圖片在後）

————————正文分割線————————

iPhone X 屏幕寬375pt，1125px@3x，高812pt，比iPhone 8 高度多出20%。（真正的@3x！）

為iPhone X設計需要確保布局填充屏幕，不被圓角、感測器和home指示器（下面有說明）所掩蓋。

iPhone X 屏幕底部任意位置上滑可以返回主屏或者進入任務切換界面，屏幕底部有一個home指示器固定顯示在app上層。

大多數app使用系統提供的UI元素，會自動適應iPhone X 的屏幕。Navigation bar、tab bar和tool bar會擴展到屏幕頂部和底部弧形區域。

水平布局時，table view全屏顯示，內容只在中間安全區顯示，iOS 11新增了一種布局叫做「Safe Area layout guide」。（下圖藍色+紅色區域是安全區域，紅色是margin，注意水平布局時不顯示狀態欄，安全區底部仍然要留出home指示器的位置）

如果app使用自定義控制項或非標準布局，要在iPhone X上運行良好需要一點修改。

一、全屏顯示

iPhone X和4.7寸iPhone屏幕長寬比不同，提供 Fill 和 Fit 2種圖片縮放方式。

二、重新設置關鍵交互和關鍵信息的位置。

交互元素不要靠近角落（發現大量我比蘋果設計師聰明系列）

屏幕邊緣的視覺元素要移動位置，部分情況下要重新設計。

iPhone X 狀態欄高度更高，在電話和定位等後台任務時，高度不會變化（就是打電話和導航時，原先頂部增加的彩色帶，現在變成時間信息底部的彩色氣泡，見下圖）

水平布局時，交互元素兩側距離相等，左側右側旋轉時位置固定，方便用戶記憶。

最後，底部指示器是系統的核心交互，會強制顯示，針對淺色和深色背景會改變顏色。

底部按鈕要避開home指示器，home指示器不需要特殊強調（不要duang！）

應用可以打開edge protection（邊緣保護？），第1次操作拉出home指示器，第2次退出應用。

在底部的點擊操作不會觸發home指示器，即使app內容在指示器下層，也可以被點擊。

全屏模式時指示器自動隱藏，觸摸屏幕可以顯示。

———————如何評價的分割線———————

感覺對iPhone X 的評價點主要集中在「齊劉海」上，貼一個李楠的回答李楠：iPhone X 為什麼用「齊劉海」，而不是「窄額頭」？只是為了貴么？

設計規範內用了大量篇幅解決屏幕邊緣不規則帶來的問題，總結就是app盡量全屏顯示，但可交互內容限制在安全區內，底部要給home指示器留空間。至於說效果好不好，我覺得還是要上手用過之後才能評價。

這個時候需要轉一張it之家的圖片
純屬惡搞

仍認為 iPhone X 的「劉海」應該做平整，它有用，官方規範里叫「Sensor Housing」，內藏8個重要感測器。搞成異型明顯是向「全面屏」妥協，但並不討巧，反而對軟硬體層面都有影響：既在App設計時需額外考慮適配布局，也沒給未來可擴展的其他感測器預留空間。其實是個勞師動眾、性價比不高的設計決策。

另外，「安全區」正是一個受制於「劉海」的妥協產物，要投鼠忌器的避開「劉海」和「屏幕圓角」，在異型屏中切出一個上下左右對稱的矩形，其實降低了全面屏的實際利用率。同時，目前設計規範里關於「安全區」的定義比較模糊，那個 Margin 的寬度還是動態自適應的，怎麼個動態法？請繼續看開發文檔，這又導致進一步增加了設計開發的學習成本和工作量。…… 是不是平白無故搞出一場蝴蝶效應，因為一個劉海，引出了一堆本不需要的額外事端。

我覺得這裡面最大的疑點是為什麼home指示器要跟著屏幕一起旋轉。畢竟物理home鍵是一直保留在那個位置的，那麼把home指示器在橫屏的時候放到底下，用戶能不能習慣是個問題。

然後這麼做顯然是有drawback，就是損失了本來就有限的寬度空間。筆記本電腦上大家都說帶魚屏帶魚屏，現在倒好，iPhone X一橫大概只能稱之為水蛇屏了……

一看就知道兩邊是類似macbook pro 的 Touch Bar 的存在，單純的放信號和電量，還能有簡單的操作，有錢任性，強調的就是體驗。

可操作性 &>&> 照顧少部分人的審美

找個同樣大小的手機，試一試單手伸手去按四角邊緣的按鈕，能不能握緊手機都是問題。

至於被吐槽最多的頂部區塊，無非就是守舊的屏幕是方的的固有意識佔據了主流。而切割出了一小塊通知區域，其實反而讓主顯示區更加完整。

【以下內容發佈於9.26，更新於10.17】

注意：本回答不代表最終情況，所以大家看看就好僅供娛樂哦！離上市越近，離正式版系統越近，就越準確哦

硬體方面不好評價，就來評價下為iPhone X設計的特別版iOS11，跟8/8P上的iOS11還是有很大的區別的～

先聲明，以下截圖絕對不是PS的，也不是生成的，知道是怎麼回事的大佬們給個面子別戳穿唄，不知道的當作是我提前拿到了X就好。（逃）看後覺得有趣的話點個讚唄~

1.截圖是規則的（強迫症患者找回一絲安慰）！！但會有下面的觸控條，大概像下面這樣。

2. 6P上引入的橫屏模式到8P都還有，但在屏幕更大的X上卻沒有了。。。包括主屏幕、設置、提醒事項等地方都取消了橫屏（分欄）模式，不過678上能橫屏的自帶App在X上應該都可以，例如聯繫人、信息、日曆、地圖、文件等等。

3.在Safari里瀏覽網頁的時候，左右兩邊會為劉海妥協而都留空，大概像下面這樣。。。（下面地條會自動隱藏的哦~不過豎屏的時候還沒有發現隱藏的案例。）

4.在通訊錄里也一樣，左右留空，上下劃的時候聯繫人不會左右動，不會有之前某個GIF那樣的效果。。。

5.因為沒有Home鍵，在長按調整App位置的時候，調整完之後本來是按Home鍵結束的嘛，然後變成了按劉海右邊的一個按鈕結束。

6.在多任務界面想關閉某個App時，操作和iPad上的iOS11 Beta1一樣繁瑣——先長按某個App，然後App縮略圖左上角會出現紅色的按鈕，點擊按鈕才能關閉，不過不出意外這個應該會改的。也不知道這樣是為了什麼……

7.長按側邊按鈕是呼出Siri，不知道怎麼關機了。。。難道一定要去設置里嗎。。。

8.在桌面的時候，調出多任務界面跟iPad上的iOS11一樣，從Dock上劃就行，不需要停頓。

9.在設置里，觸控條下面是可以顯示內容的，這塊區域下面也可以觸摸，估計以後遊戲也會適配成這樣。

10.從劉海左邊划下來是通知中心，從右邊划下來是控制中心，這個大家應該都知道了。

11.到現在為止也沒找到除了設置里之外可以關機的地方。。。

可能還有更多。。。

當然，X還沒有發售，上面說的這些會不會有變動還要看Craig的心情。。。如果到時候發售了之後發現說的不對打臉請輕點～

以上。

看題目，問的是設計規範。iphone x好不好你我都沒摸過，求別說。

我就有一個疑問，明年蘋果出的新手機，還帶不帶劉海兒。

如果以後都不帶，就iphone x帶，我說x是畸形怎麼了，來咬我？

明年買來手裡還沒捂熱呢，隔一年可能就沒人給你做適配了。

（16年3月發布的se，現在很多app適配都有點不上心了，投入產出比哇）

而且為了適應一款手機，去補充這麼多規範，大開白名單，我覺得不行！

iphone x的劉海丑，就丑在自己身上，不買就是了。

但是丑到ios 11的設計規範里，還得讓人去做額外的適配。

連sketch源文件都得出兩個份，iphone x一份，其他一份。

我只能說：excited！

明年蘋果大手一揮，ios 12一推送。

你說誰還記得ios 11裡面有iphone x這一節？

朋友們，好不容易通過自我奮鬥掙來的錢，買手機怎麼就不考慮歷史進程了呢？

那幫設計師現在跪舔蘋果一時爽，說劉海真雞兒好看。

兩年後人家忙著去跪舔真·全面屏，你還真指望這幫人去給你做劉海兒屏適配？

天吶，醒醒吧！

跑個題

屆時百度搜iPhoneX提示可能會是這樣的：iPhoneX下面哪一條線怎麼去掉？
iPhoneX下面為什麼會有一條線？

被殘酷的現實衝擊到……
無奈接受現實……
然後默默打開AssistiveTouch並無視那條線……

全民開啟AssistiveTouch時代………

—————分割—————
以上誇張了哈，不過手勢和AT屆時肯定是兩個對立陣營……

為什麼不把指示條放到兩個耳朵上？

左邊那條下滑桌面，右滑鎖定左滑解鎖
右邊那條下滑切換應用左滑鎖定右滑解鎖

同時兩個指示條保持常黑，顯示時間電量等

我覺得這樣好很多

我覺得，如果不是蘋果這樣做，風評一定會比現在差到不知哪去了。還是幫主遺澤啊，造就了一個努力證明蘋果不可質疑的群體

最近總結的iPhone X的設計規範，比樓主詳細全面一些，貼在這裡，大家一起討論。

原文地址：iPhone X設計規範總結（根據官方規範和視頻）

iPhone X 設計規範總結

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解析度適配

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

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

Home 鍵

iPhone 7：為實體 Home 鍵。
iPhone X：官方稱呼為 Home Indicator，形狀為一根橫線，在主屏幕時是自動隱藏的。在使用軟體時，例如觀看視頻，如果手指長時間不觸碰屏幕也會自動隱藏。

△ 屏幕底部的橫線（Home Indicator）

主屏幕

iPhone 7：按下 Home 鍵。
iPhone X：從底部向上輕掃一下，即可返回主屏幕。

多任務

iPhone 7：雙擊 Home 鍵； iOS 10 中可以在屏幕邊緣使用 3D Touch 按壓進入多任務列表。
iPhone X：從底部向上輕掃並停頓一下，就能激活多任務界面。

快速切換回上一個應用

iPhone 7：重按（3D Touch）屏幕左邊緣，然後向右滑動，就能切換回上一個應用。
iPhone X：有兩種方式：從屏幕底部向上輕掃並停頓一下，然後向右滑動，就能切換回上一個應用。

△ 圖 / iMore 或者直接在屏幕底部的小橫線（Home Indicator）上左右滑動，也能快速切換應用。

△ 圖 / Apple

解鎖屏幕

iPhone 7：抬起手機點亮屏幕，按下 Home 鍵並同時完成 Touch ID 解鎖，識別後自動進入主屏幕。
iPhone X：抬起手機點亮屏幕（或用手指點一下屏幕來點亮），使用 Face ID 解鎖，識別後會停留在解鎖完成的界面，需要從底部向上輕掃才能進入主屏幕。

△ 圖 / The Verge

輔助功能快捷鍵

iPhone 7：在「設置 – 通用 – 輔助功能 – 輔助功能快捷鍵」中選擇需要使用的功能後（比如 VoiceOver），按三下 Home 鍵即可快速激活。
iPhone X：設置過程類似，激活方式改為連按三下側邊按鈕。

SOS 緊急聯絡

iPhone 7：iOS 10 中無 SOS 緊急聯絡功能；iOS 11 在「設置 – SOS 緊急聯絡」中打開，激活方式為連按五次電源鍵。
iPhone X：設置過程類似，長按側邊按鈕和音量上鍵來激活。

呼出 Siri

iPhone 7：長按 Home 鍵呼出 Siri ，或者對 iPhone 說「嘿，Siri」。
iPhone X：長按側邊按鈕（原「電源鍵」，後改名為「側邊按鈕」），就能呼出 Siri。

Apple Pay

iPhone 7：鎖屏狀態下雙擊 Home 鍵呼出 Wallet。
iPhone X：連按兩下側邊按鈕，即可使用 Apple Pay。

控制中心

iPhone 7：由屏幕底部向上滑動呼出控制中心。
iPhone X：從屏幕右上角向下輕掃。

通知中心

iPhone 7：由屏幕頂部向下滑動呼出通知中心。
iPhone X：從屏幕左上角或者中間向下輕掃即可（暫不清楚中間區域是否和控制中心對半分），關閉時向上輕掃。

（圖 / The Verge）

屏幕截圖

iPhone 7： Home 鍵和電源鍵同時按下，即可截圖。
iPhone X：因為 iPhone X 沒有實體 Home 鍵，所以改成同時按下側邊按鈕和音量上鍵。

關機

iPhone 7：長按電源鍵後，滑動關機滑塊；在「設置 – 通用」里滑到底部，有個「關機」按鈕；按 5 下側邊按鈕激活 SOS 緊急聯絡模式後，頂部有個關機滑塊。
iPhone X：在「設置 – 通用」里滑到底部，有個「關機」按鈕；長按側邊按鈕和音量上鍵激活 SOS 緊急聯絡模式後，頂部有個關機滑塊。

說了這麼多，但是周瑩少奶奶同款齊劉海還真是個性非凡~我認識的設計師裡面對這款卸妝不能開機，看著齊劉海想入非非的都已經躍躍欲試了，不知道11月真正發售以後會帶來如何令人震驚的使用體驗~

靜候佳（tu）音（cao）

iPhone X 狀態欄高度是 44points, 88px(@2x)

home 指示器高度是 34points, 68px(@2x)