釋出會謝幕了，媒體們也發完了新聞稿，朋友圈也熱鬧過了，接下來的工作該輪到設計師了。 iPhone X 11 月才發貨，但您也許已經接到設計任務了。在這之前，讓我們先來看看這個 iPhoneX，對 UI 設計師的日常工作有什麼影響。新增的虛擬 Home 指示條——您不得不考慮的設計元素之一 iPhone X 邁向了全面屏，移除了原本在手機底部的實體 Home 鍵，取而代之的是一條 134x 5pt 的虛擬 Home 指示條。「底端上劃」成為了全域性性的系統操作，它可以讓您返回桌面（原本的單擊 Home 鍵），或者切換應用程式（原本雙擊 Home 鍵）。我將這個虛擬 Home 指示條的特性總結為以下五點：特性一：如影隨形
蘋果在新的開發檔案中指出，這個 Home 指示條是「至關重要的系統元素」，除了在某種特殊條件下，這個指示條將永遠伴隨著您的 WordPress APP，成為強制的設計元素出現在螢幕中。這就意味著，在您的 WordPress APP 設計中您將不得不為它保留位置，並考慮好周圍元素與它的相容關係。
特性二：黑白條
這個虛擬 Home 指示條只有亮/暗兩種模式，它會自動根據周圍背景，選擇將自己變身成白色或是黑色，從而儘可能地和周圍背景有所區分。
特性三：全面屏
iOS 自帶的通訊錄是一個典型的帶有底部導航欄的 WordPress APP，對比 iPhone 8 和 iPhone X，您會發現在 iPhone X 上，底部導航欄並不在真正的「底部」，它是懸浮在虛擬 Home 條上方的。對擁有底部導航欄的 WordPress APP 而言，iPhone X 這個全面屏的「下巴」並非可用區域，它並不真的「全面」。 但同時，WordPress APPle 的設計則例中也指出，如果 WordPress APP 的底部是可滾動的內容（比如一個長列表檢視），那麼官方給出的建議是：放心大膽地霸佔整個螢幕吧！發現文字和 Home 指示條重疊了？沒關係！這是官方推薦的正確做法！事實上，多使用者依然可以點選下方的列表條目。這種情況下，全面屏才是真的「全面」了。
特性四：底部上劃美國著名的股票交易軟體 Robinhood 就使用了類似的互動。在買入/賣出股票這樣的關鍵操作裡，它使用了「底部上劃」。儘管不是嚴格意義上的「底端上劃」，但虛擬 Home 指示條的介入無疑增加了誤操的機率。在 iPhone X 設計時，類似這樣涉及到螢幕底部上下滑動的互動都需要更謹慎的思考、更嚴格的測試。
當然，iPhone X 並沒有強制禁止這種互動操作。它給開發者們留了一條路：「在萬不得已必須要這樣做的情況下」，開發者可以開啟「邊緣保護」功能（Edge Protection）。開啟後，次底端上劃將只是喚醒 Home 指示條，再次上劃才會啟用原有功能。
特性五：自動隱身
在播放視訊時，開發者可以開啟虛擬 Home 條「自動隱藏」功能從而獲得沉浸式體驗。開啟後，視訊播放時虛擬 Home 條將自動消失；單擊螢幕後就又會出現。
「安全區」——這詞兒怎麼聽起來有點耳熟？
看著新的 iOS 設計規範檔案，一個陌生又熟悉的詞浮現在我的腦海中——出血（Bleed）！！！
在平面印刷設計中，為了顧及之後紙張裁切過程中可能出現的誤差，設計師會在畫布四周留出的一點邊緣空間，這一圈額外的空間就叫做「出血」。同時，設計師一般也會設定一個「安全區」，確保設計稿中的重要內容都出現在安全區內。對數字化時代下的 UI 設計師來說，我們本可以永遠把「出血」和「安全區」的概念永遠拋之腦後，因為螢幕不用裁切！全世界也許 99.99% 的手機屏都是規整的矩形，我們的安全區就是整塊矩形屏（安卓系統底部的虛擬按鍵可以近似理解為螢幕外，設計時可以忽略）。然而 iPhone X 這個妖蛾子的出現，又迫使我們重新找回那個久遠的記憶……讓我們來看看蘋果定義的 iPhone X 設計「安全區」吧：
手機縱向持握狀態下，安全區是從螢幕頂端往下 40 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 寸——這些對設計來說意味著什麼呢？
「拇指盲區」更大了喬布斯曾說，手持裝置理想的螢幕尺寸應該是 4 寸。然而隨著喬老爺子英年早逝，蘋果在「越來越大」的路上越走越遠（據說很大一部分原因是為了順應亞洲市場的需求）。 iPhone 如今已經增大到了驚人的 5.8 寸。
一般人大拇指大概 2.5 – 2.7 寸長，iPhone 7/8 Plus 是 5. 5 寸，日常生活中我注意到，廣大 Plus 多使用者已經發展出了一套獨特的手部微調動作，來讓自己的拇指夠到左上角的「返回」鍵（為人類的適應力感到驚歎！）。儘管如此，這麼大的螢幕已經超越了絕大多數普通多使用者的拇指覆蓋範圍。
無論是在通勤地鐵上，還是走在路上一手拿奶茶，另一手拿手機，在很多情境下單手操作是無法避免的。蘋果在 iPhone 7/7 Plus 中設計了兩次輕觸 Home 鍵將螢幕整體下移的精彩互動。
然而，隨著 iPhone X 移除了實體 Home 鍵的，這個精彩的互動設計也隨之消失了。雖然很多人已經習慣了直接在 iPhone 上的左滑返回，但以下兩個因素阻礙了它成為事實標準的返回操作：1）該互動方式的可見性為零，可發現性較低 2）WordPress APP 自帶的橫滑操作可能造成互動衝突。比如：郵件類 WordPress APP 中的歸檔操作，列表控制元件中的刪除操作，「走馬燈」控制元件（Carousel）的橫向滾動等等。也許現在是時候重新思考左上角的返回鍵了。在這裡提供一個特殊的應用例子僅作拋磚之用：
在 5.8 寸的 iPhone X 上，左上角的「拇指盲區」變得更大了。而基於 F 型流動視線設計的很多 WordPress APP，通常都會將它們重要的功能入口置於左上角（多使用者先看到的內容原本正好處於拇指舒適區的邊緣）。而到了 iPhone X 上，視線優先和拇指舒適就未必重合了——iPhone X 給設計師出了一道難題。注意全屏圖
如果您的 WordPress APP 中用到了全屏背景圖，比如啟動畫面（Splash screen），您需要注意不同螢幕比例的適配問題，確保圖片被切割後依然保留主體部分。如果您的啟動畫面裡有人物模特，尤其需要注意螢幕比例變化造成的切割位置的變化（半身人像如果正好切到手肘的位置會顯得很奇怪）。當然，有資源給兩種螢幕比例做適配素材的同學可以忽略這一條。
向量圖形 PDF 是您的朋友
iPhone X 的螢幕解析度達到 1125px × 2436px（458 PPI）。更高螢幕畫質意味著點陣圖素材的尺寸也要相應變大。這種情況下，儘可能多地使用 PDF 向量圖形可以在更大程度上為 WordPress APP 瘦身，節省流量。
對設計師的好資訊……看到這裡，作為設計師的您也許會覺得：這 iPhone X 就是個大坑！是的，我看完新的設計檔案確實也有這種感覺……對設計師來說，有沒有什麼好資訊呢？
有（且可能僅有這一條）—— 那就是大家再也不用考慮打電話，WIFI 熱點分享等特殊狀態下的設計啦！因為 iPhone X 用狀態列時間的背景顏色來統一表示這些特殊狀態（不再有高度變化），喜大普奔！
總 結幾天後，當您在設計軟體裡新建出個形狀詭異的 iPhone X 畫布，請記得：新增的虛擬 Home 指示條，將成為您不得不考慮的設計元素之一。全面屏 iPhone 更大，也更瘦長了。但對您來說，您要時刻牢記一個陌生又熟悉的詞——「安全區」，尤其是在橫向持握狀態下。您儘可能多地使用向量圖形了嗎？您的 WordPress APP 安裝包變大了多少？全屏圖片被奇怪地切割了嗎？您放在左上角的主功能鍵是否超出了拇指舒適區？有空的時候，不妨想一想，「返回」操作是否還有別的可能？每年夏末的蘋果釋出會落幕，媒體離場，段子手退散，舞臺上留下的只有無數設計師、產品經理和開發者們。他們默默工作，以確保幾周之後，多使用者可以在新 iPhone 上正常、愉悅地使用他們的產品。