UI設(shè)計(jì)師談：如何評(píng)價(jià) iPhone X 的設(shè)計(jì)規(guī)範(fàn)

【原文刊登于知乎，作者：Riceman 米飯俠，蘋果仁授權(quán)轉(zhuǎn)載】

10 個(gè)設(shè)計(jì)師里9 個(gè)強(qiáng)迫癥，剩下那個(gè)去設(shè)計(jì)了iPhone X……

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

新增的虛擬Home 指示條——你不得不考慮的設(shè)計(jì)元素之一

iPhone X 邁向了滿版螢?zāi)?，移除了原本在手機(jī)底部的實(shí)體Home 鍵，取而代之的是一條134 x 5 pt 的虛擬Home 指示條?！傅锥松蟿潯钩蔀榱巳中缘南到y(tǒng)操作，它可以讓你返回桌面（原本的單擊Home 鍵），或者切換App（原本雙擊Home 鍵）。我將這個(gè)虛擬Home 指示條的特性總結(jié)為以下五點(diǎn)：

特性一：如影隨形

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

特性二：黑白雙煞

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

特性三：真· 滿版螢?zāi)?p>iOS 自帶的通訊錄是一個(gè)典型的帶有底部導(dǎo)航欄的App，對(duì)比iPhone 8 和iPhone X，你會(huì)發(fā)現(xiàn)在iPhone X 上，底部導(dǎo)航欄并不在真正的「底部」，它是懸浮在虛擬Home條上方的。對(duì)擁有底部導(dǎo)航欄的App 而言，iPhone X 這個(gè)滿版螢?zāi)坏摹赶掳汀共⒎强捎脜^(qū)域，它并不真的「全面」。

但同時(shí)，Apple 的設(shè)計(jì)則例中也指出，如果App 的底部是可滾動(dòng)的內(nèi)容（比如一個(gè)長(zhǎng)列表視圖），那么官方給出的建議是：放心大膽地霸占整個(gè)螢?zāi)话?！發(fā)現(xiàn)文字和Home 指示條重疊了？沒關(guān)係！這是官方推薦的正確做法！事實(shí)上，用戶依然可以點(diǎn)選最下方的列表?xiàng)l目。這種情況下，滿版螢?zāi)徊攀钦娴摹溉妗沽恕?/p>

特性四：鳩占鵲巢

如果你的App 帶有「底端上劃」這樣的炫酷操作……Apple 的建議是：少俠要不你還是重新考慮一下？因?yàn)檫@個(gè)操作方式我們已經(jīng)佔(zhàn)了！

著名的股票交易軟體Robinhood 就使用了類似的操作方式。在買入／賣出股票這樣的關(guān)鍵操作里，它使用了「底部上劃」。儘管不是嚴(yán)格意義上的「底端上劃」，但虛擬Home 指示條的介入無疑增加了誤操的機(jī)率。在iPhone X 設(shè)計(jì)時(shí)，類似這樣涉及到螢?zāi)坏撞可舷禄瑒?dòng)的操作方式都需要更謹(jǐn)慎的思考、更嚴(yán)格的測(cè)試。

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

特性五：自動(dòng)隱身

在播放視頻時(shí)，開發(fā)者可以開啟虛擬Home 條「自動(dòng)隱藏」功能從而獲得沉浸式體驗(yàn)。開啟后，視頻播放時(shí)虛擬Home 條將自動(dòng)消失；單擊螢?zāi)缓缶陀謺?huì)出現(xiàn)。

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

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

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

對(duì)數(shù)字化時(shí)代下的UI 設(shè)計(jì)師來說，我們本可以永遠(yuǎn)把「出血」和「安全區(qū)」的概念永遠(yuǎn)拋之腦后，因?yàn)槲災(zāi)徊挥貌们?！全世界也許99.99% 的手機(jī)螢?zāi)欢际且?guī)整的矩形，我們的安全區(qū)就是整塊矩形螢?zāi)唬ò沧肯到y(tǒng)底部的虛擬按鍵可以近似理解為螢?zāi)煌?，設(shè)計(jì)時(shí)可以忽略）。然而iPhone X 這個(gè)妖蛾子的出現(xiàn)，又迫使我們重新找回那個(gè)久遠(yuǎn)的記憶……

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

手機(jī)縱向持握狀態(tài)下，安全區(qū)是從螢?zāi)蛔铐敹送?4 pt 開始計(jì)算的，要注意的是，它并不是和「齊劉?！雇耆R平的，而是要再往下一點(diǎn)。「下巴」位置上，從下往上推34 pt 以上的部分開始才被視為安全區(qū)。

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

橫向狀態(tài)下（假設(shè)是逆時(shí)針旋轉(zhuǎn)90 度），原本的「劉?！共糠值搅俗髠?cè)，「出血」部分實(shí)際佔(zhàn)用面積不變，而儘管虛擬Home 條挪到了下方的長(zhǎng)邊上，螢?zāi)蛔钣疫呺m然沒有任何系統(tǒng)及元素，但蘋果依然建議將其設(shè)置為與左側(cè)「劉?！瓜鄬?duì)稱的「出血」。也就是說，在橫向狀態(tài)下，你的安全區(qū)是個(gè)半島，只有上方是連接到螢?zāi)贿吘壍?。這又是為什么呢？為什么蘋果官方不建議設(shè)計(jì)師充分利用最右邊的空白面積呢？為什么非要左右對(duì)稱地設(shè)置「出血」呢？尤其考慮到對(duì)于很多手機(jī)游戲來說，任何一點(diǎn)螢?zāi)豢臻g都是寶貴的，血條，金錢，操作鍵，小地圖，大地圖等等，太多元素逼著設(shè)計(jì)師充分利用每一寸空間了。

蘋果官方給出的解釋是，由于你無法預(yù)測(cè)用戶在橫向持握下會(huì)把「劉?！狗旁谧筮呥€是右邊，如果安全區(qū)不是橫向居中放置的，會(huì)造成界面中元素與手機(jī)邊緣的相對(duì)位置不固定。他們認(rèn)為，用戶在使用手機(jī)時(shí)（尤其是玩游戲的時(shí)候）高度依賴手部的肌肉記憶，不對(duì)稱設(shè)計(jì)儘管空間利用率更高，但與用戶的肌肉記憶相背，由此導(dǎo)致的失敗操作容易讓用戶沮喪。因此，蘋果向廣大設(shè)計(jì)師們高聲疾呼：請(qǐng)把按鍵全都放到安全區(qū)里來吧！

前往下一頁：UI設(shè)計(jì)師談：如何評(píng)價(jià) iPhone X 的設(shè)計(jì)規(guī)範(fàn)？（二）