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

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

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

特性一：如影隨形

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

特性二：黑白雙煞

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

特性三：真 · 全面屏

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

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

特性四：鳩占鵲巢

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

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

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

特性五：自動隱身

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

「安全區(qū)」——這詞兒怎么聽起來有點耳熟？

看著新的 iOS 設計規(guī)范文檔，一個陌生又熟悉的詞浮現(xiàn)在我的腦海中——出血（bleed）。

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

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

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

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

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

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

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

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

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

「拇指盲區(qū)」更大了

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

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

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

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

1.該交互方式的可見性為零，可發(fā)現(xiàn)性較低。

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

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

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

注意全屏圖

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

矢量圖形 PDF 是你的朋友

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

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

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

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

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

總結

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

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

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

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

「最全面的iPhone X 設計資源」

1. 《最新版iOS 11設計規(guī)范發(fā)布了，來下載官方源文件！》
2. 《優(yōu)設首發(fā)！iPhone X 官方人機交互指南中文版》
3. 《優(yōu)設首發(fā)！800M高質量的iPhone X+8展示模板免費打包下載》

掃描二維碼或微信內搜索「UXCoffee」，關注 UX Coffee 設計咖 微信公眾賬號：

【優(yōu)設網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設旗下優(yōu)質中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網(wǎng)址導航，設計師必備：http://hao.uisdc.com