文章整理了一些關(guān)于iPhone X 適配法則，希望對(duì)你有所幫。

iPhone X 11月才發(fā)貨，但現(xiàn)在也許你就已經(jīng)接到適配任務(wù)了。

官方已經(jīng)出了「Designing for iPhone X」視頻，結(jié)合官方文檔「人機(jī)交互指南」，你需要的適配指南墨刀為你整理出來(lái)啦！

文章較長(zhǎng)，建議先馬后看。

注：文中圖片大部分來(lái)自官方視頻截圖和文檔配圖，請(qǐng)放心食用。

好了，我們開始梳理重點(diǎn)吧！

更高更清晰的屏幕

1、比例變化

iPhone X 的顯示寬度與 4.7 寸的 iPhone 6、7、8 相一致。不過(guò) iPhone X 的顯示屏比 4.7 寸顯示屏高 145pt，為內(nèi)容增加了大約 20% 的垂直顯示空間。

對(duì)于更加狹長(zhǎng)的屏幕，按鈕和內(nèi)容是否需要重新排布都需要再做考量。

另外，在我們做全屏圖的時(shí)候，需要注意長(zhǎng)寬比的差異，尤其需要注意屏幕比例變化造成的切割位置的變化。

看了看切割示意，感覺(jué)還是老老實(shí)實(shí)做單獨(dú)適配 iPhone X 的圖片比較穩(wěn)妥……

2、Super Retina

iPhone X 達(dá)到了 2436 x 1125 像素分辨率，458 ppi，官方稱之為 Super Retina 屏。

更高屏幕畫質(zhì)意味著位圖素材的尺寸也要相應(yīng)變大。

對(duì)于 Super Retina 屏，官方建議盡可能多使用 PDF 矢量圖形，這將會(huì)獲得更好的展示，同時(shí)還可以減小 App 所占容量。

全面屏的妥協(xié)產(chǎn)物：「留?！古c安全區(qū)

讓強(qiáng)迫癥為止顫抖的「留海」可以說(shuō)是蘋果為了全面屏的一個(gè)妥協(xié)。同時(shí)，為了讓屏幕能盡可能大，屏幕四個(gè)角全變成了圓角。

異形屏幕無(wú)疑讓產(chǎn)品設(shè)計(jì)師感到抓狂，官方對(duì)此提出的解決方案是：「安全區(qū)布局」（Safe Area Layout Guide）。

1、安全區(qū)布局

「安全區(qū)」顧名思義，就是一塊你可以把重要元素放在里面，而不用擔(dān)心由于屏幕異形導(dǎo)致交互問(wèn)題的區(qū)域。

對(duì)于 iPhone 8 和以往的 iPhone，由于屏幕規(guī)規(guī)整整的矩形，安全區(qū)就是整塊屏幕。但對(duì)于 iPhone X，圓角、留海、Home 指示條都讓屏幕交互非常棘手。

這里可以參考國(guó)外網(wǎng)友對(duì)「留海」交互的惡搞：

為了不出現(xiàn)這樣反人類的交互，我們需要在異形屏基礎(chǔ)上劃分出矩形安全區(qū)來(lái)放置重要內(nèi)容。

2、安全區(qū)數(shù)值

手機(jī)縱向時(shí)，安全區(qū)上沿是從屏幕最頂端往下 44 pt，所以，安全區(qū)并不是和「齊劉?！雇耆R平，而是要再往下一點(diǎn)點(diǎn)。

「下巴」位置上，為了給 Home 指示條足夠的空間，從下往上推 34 pt 開始才被視為安全區(qū)。

把屏幕橫過(guò)來(lái)的時(shí)候，「安全區(qū)」又產(chǎn)生了變化：Home 指示條挪到了屏幕下方，而「留?！购汀赶掳汀沟陌踩秶３植蛔儭Ｒ簿褪钦f(shuō)，橫向的安全區(qū)被“壓縮”得更狹長(zhǎng)了。

對(duì)于指示條位移但縱向安全區(qū)不變，官方給出的解釋是：

用戶在使用手機(jī)時(shí)非常依賴肌肉記憶（比如你可以不看鍵盤打字），不對(duì)稱的設(shè)計(jì)盡管可以更有效地利用屏幕，但卻與用戶肌肉記憶相悖，容易引起誤操作。水平布局時(shí)，交互元素兩側(cè)距離相等，左側(cè)右側(cè)旋轉(zhuǎn)時(shí)位置固定，可以方便用戶記憶。

能想到那么細(xì)節(jié)的問(wèn)題，還是要給蘋果點(diǎn)個(gè)贊。

綠色區(qū)域是安全區(qū)域，藍(lán)色是 margin

3、例外情況

不過(guò)也有個(gè)例外，如果是滾動(dòng)的長(zhǎng)列表，為了達(dá)到全屏展示效果，文案和按鈕是可以超出安全區(qū)的。

安全區(qū)看起來(lái)很煩，但是，如果你想把安全區(qū)外涂黑，把留海藏起來(lái)，是不可以滴。因?yàn)檫@樣會(huì)讓你的 App 看起來(lái)比別的 App 小，并且和 iOS 系統(tǒng)沒(méi)有統(tǒng)一的整體感。

Home?Indicator

為了達(dá)成全面屏，蘋果移除了實(shí)體 Home 鍵，取而代之的是一條 134 x 5 pt 的虛擬 Home 指示條。參照 Macbook Pro 的 Touch Bar，感覺(jué)庫(kù)克對(duì)可以滑動(dòng)的 Bar 真是有迷之熱愛(ài)。

總之，原先需要 Home 鍵達(dá)成的操作，都將由這個(gè)?Home Indicator?承擔(dān)。為了和 Home Indicator 兼容，你需要做到：

1、避免交互干擾

「底端上劃」成為了全局性的系統(tǒng)操作，用以返回桌面、切換程序。所以在你的 App 中就需要避免出現(xiàn)這個(gè)操作，以免和指示條的交互打架。

不過(guò)，在以往的 iPhone 中，「底端上劃」也是用來(lái)調(diào)用控制中心的手勢(shì)，所以對(duì)廣大產(chǎn)品設(shè)計(jì)師來(lái)說(shuō)，應(yīng)該也不會(huì)在 App 里進(jìn)行這樣的交互。

另外值得注意的是，不建議在屏幕底部放置太多交互式控件。Home?Indicator?周圍的間距純粹是為手勢(shì)觸碰創(chuàng)建的，將按鈕放在指示條附近，用戶很可能意外的觸碰到指示條，或是在使用指示條時(shí)誤觸 App 按鈕，造成操作干擾。

2、融為一體

Home Indicator?將根據(jù)背景的顏色變化改變成白/黑兩種顏色，從而與背景區(qū)分。不要在指示條上做特殊強(qiáng)調(diào)，這將被視官方為異類，小心審核不給你通過(guò)哦！

Face ID

正如 Home 鍵的按鍵功能被 Home Indicator 取代，Home 鍵的 Touch ID 被 Face ID 取代。所以使用 Touch ID 的應(yīng)用，一定要記得將?Touch ID 改為? Face ID。

本文由 @?墨刀 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自PEXELS，基于CC0協(xié)議