發布會(huì)謝(xiè)幕了(le)，媒體(tǐ)們也(y ≤♣ě)發完了(le)新聞稿，朋(péng)友(yǒu)圈也(yě)熱(r≤ è)鬧過了(le)，接下(xià)來(lái₹>&)的(de)工(gōng)作(zuò)該輪到(d &ào)設計(jì)師(shī)了(le)。iPhone X 11月∑£(yuè)才發貨，但(dàn)你(nǐ)也(yě)許已經接¶∑<₩到(dào)設計(jì)任務了(le)。♥ ✔在這(zhè)之前，讓我們先來(lái)看(kàn)看(δkàn)這(zhè)個(gè)iPhoneX，對(∑ "duì)UI設計(jì)師(shī)的(d↓∑$σe)日(rì)常工(gōng)作(zuò)有(yǒu)什(α✔shén)麽影(yǐng)響。新增的(de)虛拟 Home 指示條——你(nǐ)不(bù)得(de)不(b <¥ù)考慮的(de)設計(jì)元素之一(yī)iPhone X 邁向了(le)全面屏，移除了(le)★≠π§原本在手機(jī)底部的(de)實體(tǐ)Home鍵，→♣♠取而代之的(de)是(shì)一(yī)條 134x 5pt≠©π≈ 的(de)虛拟Home指示條。「底端上(shàng)劃」成為(wèi)了(le)全局性的(d∏e)系統操作(zuò)，它可(kě)以讓你(nǐγγ®←)返回桌面（原本的(de)單擊Home鍵），或者切換應用(yòng)程序（原本π₽★雙擊Home 鍵）。我将這(zhè)個(gè€∏ε)虛拟Home指示條的(de)特性總結為(wèi)↕Ω以下(xià)五點：特性一(yī)：如(rú)影(yǐng)随形
蘋果在新的(de)開(kāi)發文(wén)檔中指出，這(zhè)個≤®'(gè) Home 指示條是(shì)「至關重要(yào)的(de)系統元素™ε™」，除了(le)在某種特殊條件(jiàn)下(xià)，這(δ"<πzhè)個(gè)指示條将永遠(yuǎn)伴随著(zhe)你(¶↕®'nǐ)的(de) App，成為(wèi)強制(zhì)≠☆的(de)設計(jì)元素出現(xiàn)♥≥∑¥在屏幕中。這(zhè)就(jiù)意味著(zhe)，在你<β©φ(nǐ)的(de) App 設計(jì)中你(nǐ)将不(bù)得(dε™♦e)不(bù)為(wèi)它保留位置，并考慮好(hǎσ δo)周圍元素與它的(de)兼容關系。
特性二：黑(hēi)白(bái)條
這(zhè)個(gè)虛拟 Home 指示條隻有(yǒu)亮(liàng)/σ↕↓<暗(àn)兩種模式，它會(huì)自(zì)動根§Ωα據周圍背景，選擇将自(zì)己變身(shēn)∑•成白(bái)色或是(shì)黑(hēi)色，從(cóng)<ββ而盡可(kě)能(néng)地(dì)和★σ(hé)周圍背景有(yǒu)所區(qū)分(fēn)。
特性三：全面屏
iOS 自(zì)帶的(de)通(tōng)訊錄是(shì)一(yī)個(gè©Ω)典型的(de)帶有(yǒu)底部導航欄<↔↑的(de) App，對(duì)比 iPhone 8 和(hé)£α iPhone X，你(nǐ)會(huì)發現(xiàn)在 iPhon→<e X 上(shàng)，底部導航欄并不(✘±bù)在真正的(de)「底部」，它是(shì<•×γ)懸浮在虛拟 Home 條上(shàng)方的(de)。對(duì)擁±★Ωβ有(yǒu)底部導航欄的(de) App 而言，iPhone X ≤"這(zhè)個(gè)全面屏的(de)「↑ ✘≥下(xià)巴」并非可(kě)用(yòng)區(qū)域，它并不(bù)真↔←✔的(de)「全面」。
但(dàn)同時(shí)，Apple 的(de)設計(φαjì)則例中也(yě)指出，如(rú)果Ω'↕ App 的(de)底部是(shì)可(kě)滾動的(de)內 λ β(nèi)容（比如(rú)一(yī)個(gè)長(chá"∑↕ng)列表視(shì)圖），那(nà)麽官方給出的(de)建議₩≈(yì)是(shì)：放(fàng)心大(dà)膽地(dì)霸占整∑♣÷個(gè)屏幕吧(ba)！發現(xiàn)文(wén)字和(Ω÷ hé) Home 指示條重疊了(le)？沒↕β關系！這(zhè)是(shì)官方推薦的(de)正确做(♥€zuò)法！事(shì)實上(shàng)♥©€•，用(yòng)戶依然可(kě)以點選下(x∞$ià)方的(de)列表條目。這(zhè)種情況下(xià)，全面屏才是( ± ¥shì)真的(de)「全面」了(le)。
特性四：底部上(shàng)劃美(měi)國(guó)著名的(de)股票(pià•γ♠o)交易軟件(jiàn) Robinhood 就(jiù)使用(yòng)了(<↓le)類似的(de)交互。在買入/賣出股票(pi€™₽∏ào)這(zhè)樣的(de)關鍵操作(zuò)裡(lǐ)，它使用↓α(yòng)了(le)「底部上(shàng)劃」。盡管不λ€(bù)是(shì)嚴格意義上(shàng)的(de)「底≥÷端上(shàng)劃」，但(dàn)虛拟 Home 指示條的(d→♣€¥e)介入無疑增加了(le)誤操的(de)機(j£§¥★ī)率。在 iPhone X 設計(jì$≤✘©)時(shí)，類似這(zhè)樣涉及到(dào₩)屏幕底部上(shàng)下(xià)滑動的(de)交互都(∞↑dōu)需要(yào)更謹慎的(de)思考、更嚴格的(de)測試。
當然，iPhone X 并沒有(yǒu)β×強制(zhì)禁止這(zhè)種交互操作(zuò)。它給↕"<開(kāi)發者們留了(le)一(yī)條路(lù♥♣×)：「在萬不(bù)得(de)已必須要(yào)♥δ↕這(zhè)樣做(zuò)的(de)情況下(xià)」，開(kāi×₹')發者可(kě)以開(kāi)啓「邊緣保護」功能(n£₽éng)（Edge Protection）。開(kāi)啓後α₽™，次底端上(shàng)劃将隻是(shì)喚醒 Home ±★指示條，再次上(shàng)劃才會(huì)激活原有(yǒ© ≈u)功能(néng)。
特性五：自(zì)動隐身(shēn)
在播放(fàng)視(shì)頻(pín)時(s♣>hí)，開(kāi)發者可(kě)以開(λ♣kāi)啓虛拟 Home 條「自(zì)動隐藏」功σ能(néng)從(cóng)而獲得(de)沉浸式體("₽$tǐ)驗。開(kāi)啓後，視(shì)頻(pín)播放(fàn✘★∑g)時(shí)虛拟 Home 條将自(zì)動消失；單擊屏幕後就(ji™®'ù)又(yòu)會(huì)出現(xiàn)↕δΩ。
「安全區(qū)」——這(zhè)詞兒(ér)怎麽聽(tīng)起來(l®€ái)有(yǒu)點耳熟？
看(kàn)著(zhe)新的(de) iOS 設計(jγ§<ì)規範文(wén)檔，一(yī)個(gè)陌®≥生(shēng)又(yòu)熟悉的(de)詞浮現(xiàλ→n)在我的(de)腦(nǎo)海(hǎi)中——出血（Bleed）！！！
在平面印刷設計(jì)中，為(wèi)了(le)顧及之後紙(zhǐ)↕₩♣張裁切過程中可(kě)能(néng)出現(xiàn)的(de)誤差，設計(j'≥πβì)師(shī)會(huì)在畫(huà)布四周留出的(♥₽≤de)一(yī)點邊緣空(kōng)間(jiān)，這(zhè)一(yī)圈額♥ 外(wài)的(de)空(kōng)間(jiā•₽n)就(jiù)叫做(zuò)「出血」。同時(shí)，設計(jì)師Ω&≥φ(shī)一(yī)般也(yě)會(hu"뙥ì)設置一(yī)個(gè)「安全區(qū)」§±≥，确保設計(jì)稿中的(de)重要(yà±→αo)內(nèi)容都(dōu)出現(xiàn)在安全區(qū)內(÷πnèi)。對(duì)數(shù)字化(huà)時(shí)代下(×₹←xià)的(de) UI 設計(jì)師(sh✘≥ī)來(lái)說(shuō)，我們本可(kě)以永遠(yuǎn)♠¥βφ把「出血」和(hé)「安全區(qū)」的( •∞de)概念永遠(yuǎn)抛之腦(nǎo)後，因為(wèi)屏幕不 ♦•(bù)用(yòng)裁切！全世界也(yě$≤£)許 99.99% 的(de)手機(jī)屏都(↔♣↕♣dōu)是(shì)規整的(de)矩形，我們的(de)安全區(qū)就(j♥₹iù)是(shì)整塊矩形屏（安卓系統底部的(de)虛拟按鍵可(₹§≠kě)以近(jìn)似理(lǐ)解為(wèi)屏幕外(wài)，設計(jì)時←↓ (shí)可(kě)以忽略）。然而 iPhone X 這(zhèβ♣)個(gè)妖蛾子(zǐ)的(de)出現(xiàn₽)，又(yòu)迫使我們重新找回那(nà)∑&€個(gè)久遠(yuǎn)的(de)記憶……讓我們來(lái)看(kàn)看(kàn)蘋果定義的(de) iPhone X䶮÷ 設計(jì)「安全區(qū)」吧(ba)：¶"
手機(jī)縱向持握狀态下(xià)，安全區©≈☆™(qū)是(shì)從(cóng)屏幕頂端往✔™←β下(xià) 40 pt 開(kāi)始計(jì)算(suàn)的(de)，要±σ(yào)注意的(de)是(shì)，它并不(bù)是(shì)✘★"δ和(hé)「齊劉海(hǎi)」完全齊平的≤∑ (de)，而是(shì)要(yào)再往下(xià•®₽)一(yī)點。「下(xià)巴」位置上(Ω×>shàng)，從(cóng)下(xià)往上(shàng)推 34 p♣¥✔t 以上(shàng)的(de)部分(fēn♠)開(kāi)始才被視(shì)為(wèi)安全區(qū)。
縱向持握狀态下(xià)的(de)安全區(qū)設計(jì)還(háΩ₽$i)比較容易理(lǐ)解，但(dàn)到(dào¥ε)了(le)橫向持握狀态，安全區(qū)的(de)概念就(¥✘φ jiù)有(yǒu)點反直覺了(le)：
橫向狀态下(xià)（假設是(shì)逆→時(shí)針旋轉 90 度），原本的(de)εΩ ♠「劉海(hǎi)」部分(fēn)到(dào)了(le)左側，「↑φ出血」部分(fēn)實際占用(yòng)面積不(bù)變，而盡管虛φ≠拟 Home 條挪到(dào)了(le)下(xià)方的(de€α)長(cháng)邊上(shàng)，屏幕右↓≈↕∞邊雖然沒有(yǒu)任何系統及元素，但(dàn)蘋果依然建議(yì)将"≈其設置為(wèi)與左側「劉海(hǎi)」相(xiàng)對(du δ↑ì)稱的(de)「出血」。也(yě)就(jiù)是(shδ≤♦ì)說(shuō)，在橫向狀态下(xià)，你(↕πβnǐ)的(de)安全區(qū)是(shì)個(gè)半島，隻有(yǒu)上(γ≈₽shàng)方是(shì)連接到(dào$'ε)屏幕邊緣的(de)。這(zhè)又(yòu)是(shì)為(w 'èi)什(shén)麽呢(ne)？為(w"≥ ↑èi)什(shén)麽蘋果官方不(bù)建議(yì)設計(jì)師(shī₩✘π)充分(fēn)利用(yòng)右邊的(de)空(kōng)白(b≠γ¶ái)面積呢(ne)？為(wèi)什(shén)麽非要(yào)左右對(δα>↓duì)稱地(dì)設置「出血」呢(ne)？尤其考慮到(dào)↓'對(duì)于很(hěn)多(duō)手機(jī)遊戲來(lái)說(shΩπ☆×uō)，任何一(yī)點屏幕空(kōng)間(ji•≈→ān)都(dōu)是(shì)寶貴的(de)，血條，金(jī♠®n)錢(qián)，操作(zuò)鍵，小(x≠$<iǎo)地(dì)圖，大(dà)地(dì)圖等等，太多(duō)元素逼著→λ✔(zhe)設計(jì)師(shī)充分(fēn)利用(yòn<₩ g)每一(yī)寸空(kōng)間(jiān)了(le)。
蘋果官方給出的(de)解釋是(shì)，由于你(nǐ)無法預測用(yòngγ )戶在橫向持握下(xià)會(huì)把「劉海(hǎi)」放(fàng♥¥₩)在左邊還(hái)是(shì)右邊，如(rú)果安全區 ∞(qū)不(bù)是(shì)橫向居中放(fàng)置的(de×ε)，會(huì)造成界面中元素與手機(jī)邊緣的(de)相(xiàng)對®β€(duì)位置不(bù)固定。他(tā)¥ 們認為(wèi)，用(yòng)戶在使用★ε(yòng)手機(jī)時(shí)（尤其是(shì)玩(wán)遊戲的(dδ₹₩e)時(shí)候）高(gāo)度依賴手部的(de)肌肉記憶，¥≤∞™不(bù)對(duì)稱設計(jì)盡管空(kōng)間(jiān)利用(y≥©"òng)率更高(gāo)，但(dàn)與用(yò©δ©ng)戶的(de)肌肉記憶相(xiàng)背，由此導緻的(de)失敗操作(™∑zuò)容易讓用(yòng)戶沮喪。因此，Ω≤∏★蘋果向廣大(dà)設計(jì)師(shī)們高(gāo)≈≥♥聲疾呼：請(qǐng)把按鍵全都(dōu)放(fàng)到(dào)安✔✘全區(qū)裡(lǐ)來(lái)吧(b<∑∏a)！
尺寸大(dà)了(le)，比例變了(le)，這(zhè)•λ意味著(zhe)……
在 iPhone X 之前，盡管 iPhone SE，7 和(hé) 7σ☆ Plus 的(de)屏幕尺寸大(dà)小(π€✘xiǎo)不(bù)同，但(dàn)都(dōu)是(shì) 16:9 的☆↓↕(de)屏幕。而 iPhone X 差不(b™ù)多(duō)是(shì)個(gè) β≤σ13:6 的(de)屏幕（812 x 375 pt）。屏幕的(§↑¶de)絕對(duì)尺寸也(yě)變大(dà)了(le)，從(π×cóng) 4.7 寸增大(dà)到(dào) 5.8 寸——這↕←φ(zhè)些(xiē)對(duì)設計(jì)≥♦§來(lái)說(shuō)意味著(zhe)什(shén)麽呢(ne)★✘？
「拇指盲區(qū)」更大(dà)了(le)喬布斯曾說(shuō)，手持設備理(lǐ)想的(de)屏幕尺☆δ寸應該是(shì) 4 寸。然而随著(zhe)喬老(lǎo)爺子(z$$©ǐ)英年(nián)早逝，蘋果在「越來(lái)越大(dà)」↓α的(de)路(lù)上(shàng)越走越遠(yuǎn)（據說(sh≈™uō)很(hěn)大(dà)一(yī)部分(fēα×n)原因是(shì)為(wèi)了(le)順應亞洲市(s©↑hì)場(chǎng)的(de)需求）。iPho∑εne 如(rú)今已經增大(dà)到(dào)了(le)驚人(rén↓<€)的(de) 5.8 寸。
一(yī)般人(rén)大(dà)拇指大(dà)概 2.5>α& - 2.7 寸長(cháng)，iPhone 7≤©/8 Plus 是(shì) 5. 5 寸，日(rì)常生(shēn ✔ ♥g)活中我注意到(dào)，廣大(dà) Plus 用(yòng)戶±Ω®Ω已經發展出了(le)一(yī)套獨特的(de)手部微(wēi)調動作(z≥₩uò)，來(lái)讓自(zì)己的(de)拇指夠到(dào)左上(s£☆±hàng)角的(de)「返回」鍵（為(wèi)人(rén)類的(©σ©de)适應力感到(dào)驚歎！）。盡管如"₽'(rú)此，這(zhè)麽大(dà)的(de)屏幕已經超越了(le)絕大(♦★dà)多(duō)數(shù)普通(tōng)用(yòα≤δ♠ng)戶的(de)拇指覆蓋範圍。
無論是(shì)在通(tōng)勤地(dì)鐵(tiě)上(s≤←∏hàng)，還(hái)是(shì)走在路(lù)上(shàng)一(yī)→≤手拿(ná)奶茶，另一(yī)手拿(ná)手機(jī)，在很(hěn)多¥↓(duō)情境下(xià)單手操作(zuò§>§)是(shì)無法避免的(de)。蘋果在 iPhone 7/7 Plus 中δ&設計(jì)了(le)兩次輕觸 Home 鍵将屏幕整體(tǐ)下(xiφσà)移的(de)精彩交互。
然而，随著(zhe) iPhone X 移除了"<→(le)實體(tǐ) Home 鍵的(de)，這(zhè)個(gè)精彩的(d>✔∏e)交互設計(jì)也(yě)随之消失了(le)§€×。雖然很(hěn)多(duō)人(rén)已經習(xí)慣了(le)直接在γ↕ iPhone 上(shàng)的(de)左滑返回，✘π↓£但(dàn)以下(xià)兩個(gè)因素阻礙了(le)它成為(wèi)'∏α事(shì)實标準的(de)返回操作(zuò)：1）該交互方式的(de)可(kě)見(jiàn)性為(wèi)零，可(& ÷πkě)發現(xiàn)性較低(dī)2）App 自(zì)帶的(de)橫滑操作(zuò)可>←(kě)能(néng)造成交互沖突。比如(rú)：郵件(jià↓δ✘$n)類 app 中的(de)歸檔操作(zuò≠¶≠)，列表控件(jiàn)中的(de)删除操作(zuò)→₽，「走馬燈」控件(jiàn)（Carousel）的(de)橫向滾動≥÷¶等等。也(yě)許現(xiàn)在是(shì)時(shí)候重±$±新思考左上(shàng)角的(de)返回鍵了(le)。在這€(zhè)裡(lǐ)提供一(yī)個(gè)特殊的(de)應用(yòn πg)例子(zǐ)僅作(zuò)抛磚之用(yòng)：
在 5.8 寸的(de) iPhone Xε÷ π 上(shàng)，左上(shàng)角的(de)「拇指盲區(q€γū)」變得(de)更大(dà)了(le)。而基于 F 型流動視§δ(shì)線設計(jì)的(de)很(hě∏±n)多(duō) App，通(tōng)常都(dōu)€∑>↕會(huì)将它們重要(yào)的(de)φ 功能(néng)入口置于左上(shàng)角（用(yòng)戶先£←☆↕看(kàn)到(dào)的(de)內(nèi)容原本正好♦♥÷σ(hǎo)處于拇指舒适區(qū)的(de)邊緣）。而到(d∏↕ào)了(le) iPhone X 上(shàng)，÷ 視(shì)線優先和(hé)拇指舒适就(jiù)未必重合了(le)——✔♣iPhone X 給設計(jì)師(shī)出了(le)δβε一(yī)道(dào)難題。注意全屏圖
如(rú)果你(nǐ)的(de) App 中用(yòng)到(dào)βε了(le)全屏背景圖，比如(rú)啓動畫(hu "↓à)面（Splash screen），你(nǐ)需要(yào)注意不×π∑(bù)同屏幕比例的(de)适配問(wèn)題，确保圖片♥£被切割後依然保留主體(tǐ)部分(fēn)。如(rúλ∏₩±)果你(nǐ)的(de)啓動畫(huà)面•©♠裡(lǐ)有(yǒu)人(rén)物(wù)模 Ω特，尤其需要(yào)注意屏幕比例變化(huà)造成的(de)切割位置的(d₩£e)變化(huà)（半身(shēn)人(rén)像如(rú)果正好(hǎ☆'₽o)切到(dào)手肘的(de)位置會(huì)顯得(de)很∏₽(hěn)奇怪）。當然，有(yǒu)資源給兩₽≤£種屏幕比例做(zuò)适配素材的(de)同學可(kě)以忽δ ↔略這(zhè)一(yī)條。
矢量圖形 PDF 是(shì)你(nǐ)的(de)朋(péng)友™™÷(yǒu)
iPhone X 的(de)屏幕分(fēn)辨率達到(✘≤&dào) 1125px × 2436px（458 PPI）。更高(gāo)✔₹屏幕畫(huà)質意味著(zhe)位圖素材的(de)尺寸也(yě)♦¥φ要(yào)相(xiàng)應變大(dà)。這(zhè)種情況下(€↕xià)，盡可(kě)能(néng)多(duō)地(dìαγ≈¶)使用(yòng) PDF 矢量圖形可(kě)以在更大(dà)程度上(sh"¶α↓àng)為(wèi) App 瘦身(shēn)，節省流量。
對(duì)設計(jì)師(shī)的(de)好(₹ hǎo)消息……看(kàn)到(dào)這(zhè)裡(lǐ)，作₩↑(zuò)為(wèi)設計(jì)師(shī©↔₹)的(de)你(nǐ)也(yě)許會(huì)覺×♦得(de)：這(zhè) iPhone X 就(jiù)是(±α∑♥shì)個(gè)大(dà)坑！是(shì)的(de)，我看(kβ↔àn)完新的(de)設計(jì)文(wén)檔确實&¶βγ也(yě)有(yǒu)這(zhè)種感覺…♣↑φ&…對(duì)設計(jì)師(shī)來(lái)說ε ↑φ(shuō)，有(yǒu)沒有(yǒu)什(shén)麽好(hǎo)消₩→¶息呢(ne)？
有(yǒu)（且可(kě)能(néng)僅有(yǒu)這(zhè)一∏∞₽(yī)條）—— 那(nà)就(jiù)是(shì)大(dà)≥↓™σ家(jiā)再也(yě)不(bù)用(yòn₹☆g)考慮打電(diàn)話(huà)，WIFI 熱£π(rè)點分(fēn)享等特殊狀态下(xià☆§♠)的(de)設計(jì)啦！因為(wèi) iPhone X 用(yò♦ ☆<ng)狀态欄時(shí)間(jiān)的(de)背景顔色來(lái)統一(φ♥yī)表示這(zhè)些(xiē)特殊狀态（不(bù)再有(yǒu)高(gāo≤$)度變化(huà)），喜大(dà)普奔！
總 結幾天後，當你(nǐ)在設計(jì)軟件(j¥¶♠iàn)裡(lǐ)新建出個(gè)形狀詭異的(de) iPhone☆≤$ X 畫(huà)布，請(qǐng)記得<↕λ£(de)：新增的(de)虛拟 Home 指示條，将成為(wèi)你(nǐ)不(b∑≤←ù)得(de)不(bù)考慮的(de)設計(jì)元素之一(yī→)。全面屏 iPhone 更大(dà)，也(yě)更瘦長(ε&σβcháng)了(le)。但(dàn)對(∏♦duì)你(nǐ)來(lái)說(shuō)，你(nǐ)要(yào)時(shí✔γ)刻牢記一(yī)個(gè)陌生(shēng)又(yαφ₩òu)熟悉的(de)詞——「安全區(qū)」，尤其是(shì)在橫向持握 Ω狀态下(xià)。你(nǐ)盡可(kě)能(néng)多(duō)地(dì)使用≤∏✔β(yòng)矢量圖形了(le)嗎(ma)？你(nǐ)的(de) App 安裝£≥包變大(dà)了(le)多(duō)少(shǎo)？全屏圖片被奇怪地(dìγ$)切割了(le)嗎(ma)？你(nǐ)放(fàn♥↓g)在左上(shàng)角的(de)主功能(né↓←εng)鍵是(shì)否超出了(le)拇指舒适區(qū)？有(yǒu)空( ☆kōng)的(de)時(shí)候，不(bù)妨想一(≠>yī)想，「返回」操作(zuò)是(shì)否★×☆ 還(hái)有(yǒu)别的(de)可(kě)能(néngΩ')？每年(nián)夏末的(de)蘋果發布會(huì)落幕，媒體(tǐ)離Ω'(lí)場(chǎng)，段子(zǐ)手退散，舞(wǔ)台上(sh↑€σàng)留下(xià)的(de)隻有(yǒu)無數(shù)設計≠ ♣®(jì)師(shī)、産品經理(lǐ)和(hé)開(kāi)發者們↔λ≤。他(tā)們默默工(gōng)作(zuò)≈↕₩φ，以确保幾周之後，用(yòng)戶可(kě)以在新 iPhone 上(sh✔≤àng)正常、愉悅地(dì)使用(yòng)他(tā)們的♦φ(de)産品。
咨詢