新增的虛擬 Home 指示條——你不得不考慮的設(shè)計(jì)元素之一
iPhone X 邁向了全面屏牌捷，移除了原本在手機(jī)底部的實(shí)體 Home 鍵，取而代之的是一條 134 x 5 pt 的虛擬 Home 指示條。「底端上劃」成為了全局性的系統(tǒng)操作秉版，它可以讓你返回桌面（原本的單擊 Home 鍵）拦赠，或者切換應(yīng)用程序（原本雙擊 Home 鍵）敬惦。我將這個虛擬 Home 指示條的特性總結(jié)為以下五點(diǎn)：
特性一：如影隨形
蘋果在最新的開發(fā)文檔中指出神凑，這個 Home 指示條是「至關(guān)重要的系統(tǒng)元素」，除了在某種特殊條件下竿报，這個指示條將永遠(yuǎn)伴隨著你的 App铅乡，成為強(qiáng)制的設(shè)計(jì)元素出現(xiàn)在屏幕中。這就意味著烈菌，在你的 App 設(shè)計(jì)中你將不得不為它保留位置隆判，并考慮好周圍元素與它的兼容關(guān)系。
特性二：黑白雙煞
什么僧界？你說你想做彩虹漸變指示條侨嘀？少俠你太天真了……這個虛擬 Home 指示條只有亮／暗兩種模式，它會自動根據(jù)周圍背景捂襟，選擇將自己變身成白色或是黑色咬腕，從而盡可能地和周圍背景有所區(qū)分。
特性三：真 · 全面屏
<img src="https://pic1.zhimg.com/50/v2-6b3d18a30a66b730a1c62c9260788c48_hd.png" data-rawwidth="3360" data-rawheight="1890" class="origin_image zh-lightbox-thumb" width="3360" data-original="https://pic1.zhimg.com/v2-6b3d18a30a66b730a1c62c9260788c48_r.png">
iOS 自帶的通訊錄是一個典型的帶有底部導(dǎo)航欄的 App葬荷，對比 iPhone 8 和 iPhone X涨共，你會發(fā)現(xiàn)在 iPhone X 上，底部導(dǎo)航欄并不在真正的「底部」宠漩，它是懸浮在虛擬 Home 條上方的举反。對擁有底部導(dǎo)航欄的 App 而言，iPhone X 這個全面屏的「下巴」并非可用區(qū)域扒吁，它并不真的「全面」火鼻。
但同時，Apple 的設(shè)計(jì)則例中也指出雕崩，如果 App 的底部是可滾動的內(nèi)容（比如一個長列表視圖）魁索，那么官方給出的建議是：放心大膽地霸占整個屏幕吧！發(fā)現(xiàn)文字和 Home 指示條重疊了盼铁？沒關(guān)系粗蔚！這是官方推薦的正確做法！事實(shí)上饶火，用戶依然可以點(diǎn)選最下方的列表?xiàng)l目鹏控。這種情況下致扯，全面屏才是真的「全面」了。
特性四：鳩占鵲巢
如果你的 App 帶有「底端上劃」這樣的炫酷操作……Apple 的建議是：少俠要不你還是重新考慮一下当辐？因?yàn)檫@個交互我們已經(jīng)占了抖僵！
美國著名的股票交易軟件 Robinhood 就使用了類似的交互。在買入／賣出股票這樣的關(guān)鍵操作里瀑构，它使用了「底部上劃」。盡管不是嚴(yán)格意義上的「底端上劃」刨摩，但虛擬 Home 指示條的介入無疑增加了誤操的機(jī)率寺晌。在 iPhone X 設(shè)計(jì)時，類似這樣涉及到屏幕底部上下滑動的交互都需要更謹(jǐn)慎的思考澡刹、更嚴(yán)格的測試呻征。
當(dāng)然，iPhone X 并沒有強(qiáng)制禁止這種交互操作罢浇。它給開發(fā)者們留了一條路：「在萬不得已必須要這樣做的情況下」陆赋，開發(fā)者可以開啟「邊緣保護(hù)」功能（Edge Protection）。開啟后嚷闭，第一次底端上劃將只是喚醒 Home 指示條攒岛，再次上劃才會激活原有功能。
特性五：自動隱身
在播放視頻時胞锰，開發(fā)者可以開啟虛擬 Home 條「自動隱藏」功能從而獲得沉浸式體驗(yàn)灾锯。開啟后，視頻播放時虛擬 Home 條將自動消失嗅榕；單擊屏幕后就又會出現(xiàn)顺饮。
「安全區(qū)」——這詞兒怎么聽起來有點(diǎn)耳熟？
看著新的 iOS 設(shè)計(jì)規(guī)范文檔凌那，一個陌生又熟悉的詞浮現(xiàn)在我的腦海中——出血（bleed）兼雄。
在平面印刷設(shè)計(jì)中，為了顧及之后紙張裁切過程中可能出現(xiàn)的誤差帽蝶，設(shè)計(jì)師會在畫布四周留出一點(diǎn)邊緣空間赦肋，這一圈額外的空間就叫做「出血」。同時励稳，設(shè)計(jì)師一般也會設(shè)置一個「安全區(qū)」金砍，確保設(shè)計(jì)稿中的重要內(nèi)容都出現(xiàn)在安全區(qū)內(nèi)。
對數(shù)字化時代下的 UI 設(shè)計(jì)師來說麦锯，我們本可以永遠(yuǎn)把「出血」和「安全區(qū)」的概念永遠(yuǎn)拋之腦后恕稠，因?yàn)槠聊徊挥貌们校∪澜缫苍S 99.99% 的手機(jī)屏都是規(guī)整的矩形扶欣，我們的安全區(qū)就是整塊矩形屏（安卓系統(tǒng)底部的虛擬按鍵可以近似理解為屏幕外鹅巍，設(shè)計(jì)時可以忽略）千扶。然而 iPhone X 這個妖蛾子的出現(xiàn)，又迫使我們重新找回那個久遠(yuǎn)的記憶……
讓我們來看看蘋果定義的 iPhone X 設(shè)計(jì)「安全區(qū)」吧：
手機(jī)縱向持握狀態(tài)下骆捧，安全區(qū)是從屏幕最頂端往下 44 pt 開始計(jì)算的澎羞，要注意的是，它并不是和「齊劉毫参」完全齊平的，而是要再往下一點(diǎn)枫攀。「下巴」位置上来涨，從下往上推 34 pt 以上的部分開始才被視為安全區(qū)。
縱向持握狀態(tài)下的安全區(qū)設(shè)計(jì)還比較容易理解技羔，但到了橫向持握狀態(tài)，安全區(qū)的概念就有點(diǎn)反直覺了：
橫向狀態(tài)下（假設(shè)是逆時針旋轉(zhuǎn) 90 度）藤滥，原本的「劉荷珩桑」部分到了左側(cè)，「出血」部分實(shí)際占用面積不變浦马，而盡管虛擬 Home 條挪到了下方的長邊上，屏幕最右邊雖然沒有任何系統(tǒng)及元素晶默，但蘋果依然建議將其設(shè)置為與左側(cè)「劉海」相對稱的「出血」磺陡。也就是說趴梢，在橫向狀態(tài)下，你的安全區(qū)是個半島币他，只有上方是連接到屏幕邊緣的坞靶。這又是為什么呢？為什么蘋果官方不建議設(shè)計(jì)師充分利用最右邊的空白面積呢蝴悉？為什么非要左右對稱地設(shè)置「出血」呢彰阴？尤其考慮到對于很多手機(jī)游戲來說，任何一點(diǎn)屏幕空間都是寶貴的拍冠，血條尿这，金錢簇抵，操作鍵，小地圖射众，大地圖等等碟摆，太多元素逼著設(shè)計(jì)師充分利用每一寸空間了。
蘋果官方給出的解釋是叨橱，由于你無法預(yù)測用戶在橫向持握下會把「劉旱渫桑」放在左邊還是右邊，如果安全區(qū)不是橫向居中放置的罗洗，會造成界面中元素與手機(jī)邊緣的相對位置不固定愉舔。他們認(rèn)為，用戶在使用手機(jī)時（尤其是玩游戲的時候）高度依賴手部的肌肉記憶栖博，不對稱設(shè)計(jì)盡管空間利用率更高屑宠，但與用戶的肌肉記憶相背厢洞，由此導(dǎo)致的失敗操作容易讓用戶沮喪。因此躺翻，蘋果向廣大設(shè)計(jì)師們高聲疾呼：請把按鍵全都放到安全區(qū)里來吧丧叽！
尺寸大了，比例變了公你，這意味著……
在 iPhone X 之前踊淳，盡管 iPhone SE，7 和 7 Plus 的屏幕尺寸大小不同陕靠，但都是 16:9 的屏幕迂尝。而 iPhone X 差不多是個 13:6 的屏幕（812 x 375 pt）。屏幕的絕對尺寸也變大了剪芥，從 4.7 吋增大到 5.8 吋——這些對設(shè)計(jì)來說意味著什么呢垄开？
「拇指盲區(qū)」更大了
喬布斯曾說溉躲，手持設(shè)備最理想的屏幕尺寸應(yīng)該是 3.5 吋锻梳。然而隨著喬老爺子英年早逝疑枯，蘋果在「越來越大」的路上越走越遠(yuǎn)（據(jù)說很大一部分原因是為了順應(yīng)亞洲市場的需求）神汹。iPhone 如今已經(jīng)增大到了驚人的 5.8 吋屁魏。
一般人大拇指大概 2.5 - 2.7 吋長氓拼，iPhone 7/8 Plus 是 5.5 吋桃漾，日常生活中我注意到撬统，廣大 Plus 用戶已經(jīng)發(fā)展出了一套獨(dú)特的手部微調(diào)動作恋追，來讓自己的拇指夠到左上角的「返回」鍵（為人類的適應(yīng)力感到驚嘆？啻选）撕彤。盡管如此羹铅，這么大的屏幕已經(jīng)超越了絕大多數(shù)普通用戶的拇指覆蓋范圍职员。
無論是在通勤地鐵上哥蔚，還是走在路上一手拿奶茶糙箍，另一手拿手機(jī)深夯，在很多情境下單手操作是無法避免的。蘋果在 iPhone 6 Plus 中第一次引入了兩次輕觸 Home 鍵將屏幕整體下移的交互設(shè)計(jì)雹拄。
然而滓玖，隨著 iPhone X 移除了實(shí)體 Home 鍵的势篡，這個精彩的交互設(shè)計(jì)也隨之消失了禁悠。雖然很多人已經(jīng)習(xí)慣了直接在 iPhone 上的左滑返回碍侦，但以下兩個因素阻礙了它成為事實(shí)標(biāo)準(zhǔn)的返回操作：
1）該交互方式的可見性為零瓷产，可發(fā)現(xiàn)性較低
2）App 自帶的橫滑操作可能造成交互沖突拦英。比如：郵件類 app 中的歸檔操作测秸，列表控件中的刪除操作霎冯，「走馬燈」控件（Carousel）的橫向滾動等等沈撞。
也許現(xiàn)在是時候重新思考左上角的返回鍵了缠俺。在這里提供一個特殊的應(yīng)用例子僅作拋磚之用：
在 5.8 吋的 iPhone X 上壹士，左上角的「拇指盲區(qū)」變得更大了躏救。而基于 F 型流動視線設(shè)計(jì)的很多 App崩掘，通常都會將它們最重要的功能入口置于左上角（用戶最先看到的內(nèi)容原本正好處于拇指舒適區(qū)的邊緣）苞慢。而到了 iPhone X 上枉疼，視線優(yōu)先和拇指舒適就未必重合了——iPhone X 給設(shè)計(jì)師出了一道難題骂维。
注意全屏圖
如果你的 App 中用到了全屏背景圖航闺，比如啟動畫面（Splash screen）潦刃，你需要注意不同屏幕比例的適配問題乖杠，確保圖片被切割后依然保留主體部分胧洒。如果你的啟動畫面里有人物模特卫漫，尤其需要注意屏幕比例變化造成的切割位置的變化（半身人像如果正好切到手肘的位置會顯得很奇怪）列赎。當(dāng)然包吝，有資源給兩種屏幕比例做適配素材的同學(xué)可以忽略這一條诗越。
矢量圖形 PDF 是你的朋友
iPhone X 的屏幕分辨率達(dá)到 1125px × 2436px（458 PPI）掺喻。更高屏幕畫質(zhì)意味著位圖素材的尺寸也要相應(yīng)變大褂乍。這種情況下即硼，盡可能多地使用 PDF 矢量圖形可以在更大程度上為 App 瘦身只酥，節(jié)省流量裂允。
給設(shè)計(jì)師唯一的好消息……
看到這里绝编，作為設(shè)計(jì)師的你也許會覺得：這 iPhone X 就是個大坑十饥！是的逗堵，我看完新的設(shè)計(jì)文檔確實(shí)也有這種感覺……
對設(shè)計(jì)師來說，有沒有什么好消息呢汁咏？
有（且可能僅有這一條）—— 那就是大家再也不用考慮打電話梆暖，WIFI 熱點(diǎn)分享等特殊狀態(tài)下的設(shè)計(jì)啦掂骏！因?yàn)?iPhone X 用狀態(tài)欄時間的背景顏色來統(tǒng)一表示這些特殊狀態(tài)（不再有高度變化）弟灼，喜大普奔！
總結(jié)
幾天后掩驱，當(dāng)你在設(shè)計(jì)軟件里新建出第一個形狀詭異的 iPhone X 畫布欧穴，請記得：
新增的虛擬 Home 指示條涮帘，將成為你不得不考慮的設(shè)計(jì)元素之一。希望你還能記得它的五個特性：如影隨形疮鲫、黑白雙煞俊犯、真 · 全面屏、鳩占鵲巢默责、自動隱身。
全面屏 iPhone 更大杖虾，也更瘦長了奇适。但對你來說嚷往，你要時刻牢記一個陌生又熟悉的詞——「安全區(qū)」皮仁，尤其是在橫向持握狀態(tài)下贷祈。
你盡可能多地使用矢量圖形了嗎喝峦？你的 App 安裝包變大了多少谣蠢？全屏圖片被奇怪地切割了嗎查近？你放在左上角的主功能鍵是否超出了拇指舒適區(qū)？有空的時候侥祭，不妨想一想茄厘，「返回」操作是否還有別的可能次哈？
每年夏末的蘋果發(fā)布會落幕窑滞，媒體離場哀卫，段子手退散趾撵，舞臺上留下的只有無數(shù)設(shè)計(jì)師共啃、產(chǎn)品經(jīng)理和開發(fā)者們究珊。他們打開Apple Developer剿涮，默默工作幔虏，以確保幾周之后，用戶可以在新 iPhone 上正常陷谱、愉悅地使用他們的產(chǎn)品。
也許你并不會買 iPhone X铺根，也許看著那道「齊劉呵撬蓿」你內(nèi)心的強(qiáng)迫癥小人已經(jīng)鬧翻位迂，但你還是一字一字看起了新的蘋果設(shè)計(jì)規(guī)范和這篇文章。盡管 iPhone X 讓你的工作更麻煩了详瑞，你還是會把每個設(shè)計(jì)稿做到像素級的精確 —— 因?yàn)槟闶且幻O(shè)計(jì)師掂林，你希望用自己的雙手，讓這個世界變得更好坝橡，哪怕是那么一點(diǎn)泻帮。
