iPhone X 適配指南
文章整理了一些關于iPhone X 適配法則,希望對你有所幫。
iPhone X 11月才發(fā)貨,但現(xiàn)在也許你就已經(jīng)接到適配任務了。
官方已經(jīng)出了「Designing for iPhone X」視頻,結(jié)合官方文檔「人機交互指南」,你需要的適配指南墨刀為你整理出來啦!
文章較長,建議先馬后看。
注:文中圖片大部分來自官方視頻截圖和文檔配圖,請放心食用。
好了,我們開始梳理重點吧!
更高更清晰的屏幕
1、比例變化
iPhone X 的顯示寬度與 4.7 寸的 iPhone 6、7、8 相一致。不過 iPhone X 的顯示屏比 4.7 寸顯示屏高 145pt,為內(nèi)容增加了大約 20% 的垂直顯示空間。
對于更加狹長的屏幕,按鈕和內(nèi)容是否需要重新排布都需要再做考量。
另外,在我們做全屏圖的時候,需要注意長寬比的差異,尤其需要注意屏幕比例變化造成的切割位置的變化。
看了看切割示意,感覺還是老老實實做單獨適配 iPhone X 的圖片比較穩(wěn)妥……
2、Super Retina
iPhone X 達到了 2436 x 1125 像素分辨率,458 ppi,官方稱之為 Super Retina 屏。
更高屏幕畫質(zhì)意味著位圖素材的尺寸也要相應變大。
對于 Super Retina 屏,官方建議盡可能多使用 PDF 矢量圖形,這將會獲得更好的展示,同時還可以減小 App 所占容量。
全面屏的妥協(xié)產(chǎn)物:「留?!古c安全區(qū)
讓強迫癥為止顫抖的「留?!箍梢哉f是蘋果為了全面屏的一個妥協(xié)。同時,為了讓屏幕能盡可能大,屏幕四個角全變成了圓角。
異形屏幕無疑讓產(chǎn)品設計師感到抓狂,官方對此提出的解決方案是:「安全區(qū)布局」(Safe Area Layout Guide)。
1、安全區(qū)布局
「安全區(qū)」顧名思義,就是一塊你可以把重要元素放在里面,而不用擔心由于屏幕異形導致交互問題的區(qū)域。
對于 iPhone 8 和以往的 iPhone,由于屏幕規(guī)規(guī)整整的矩形,安全區(qū)就是整塊屏幕。但對于 iPhone X,圓角、留海、Home 指示條都讓屏幕交互非常棘手。
這里可以參考國外網(wǎng)友對「留?!菇换サ膼焊悖?/p>
為了不出現(xiàn)這樣反人類的交互,我們需要在異形屏基礎上劃分出矩形安全區(qū)來放置重要內(nèi)容。
2、安全區(qū)數(shù)值
手機縱向時,安全區(qū)上沿是從屏幕最頂端往下 44 pt,所以,安全區(qū)并不是和「齊劉海」完全齊平,而是要再往下一點點。
「下巴」位置上,為了給 Home 指示條足夠的空間,從下往上推 34 pt 開始才被視為安全區(qū)。
把屏幕橫過來的時候,「安全區(qū)」又產(chǎn)生了變化:Home 指示條挪到了屏幕下方,而「留海」和「下巴」的安全范圍保持不變。也就是說,橫向的安全區(qū)被“壓縮”得更狹長了。
對于指示條位移但縱向安全區(qū)不變,官方給出的解釋是:
用戶在使用手機時非常依賴肌肉記憶(比如你可以不看鍵盤打字),不對稱的設計盡管可以更有效地利用屏幕,但卻與用戶肌肉記憶相悖,容易引起誤操作。水平布局時,交互元素兩側(cè)距離相等,左側(cè)右側(cè)旋轉(zhuǎn)時位置固定,可以方便用戶記憶。
能想到那么細節(jié)的問題,還是要給蘋果點個贊。
綠色區(qū)域是安全區(qū)域,藍色是 margin
3、例外情況
不過也有個例外,如果是滾動的長列表,為了達到全屏展示效果,文案和按鈕是可以超出安全區(qū)的。
安全區(qū)看起來很煩,但是,如果你想把安全區(qū)外涂黑,把留海藏起來,是不可以滴。因為這樣會讓你的 App 看起來比別的 App 小,并且和 iOS 系統(tǒng)沒有統(tǒng)一的整體感。
Home?Indicator
為了達成全面屏,蘋果移除了實體 Home 鍵,取而代之的是一條 134 x 5 pt 的虛擬 Home 指示條。參照 Macbook Pro 的 Touch Bar,感覺庫克對可以滑動的 Bar 真是有迷之熱愛。
總之,原先需要 Home 鍵達成的操作,都將由這個?Home Indicator?承擔。為了和 Home Indicator 兼容,你需要做到:
1、避免交互干擾
「底端上劃」成為了全局性的系統(tǒng)操作,用以返回桌面、切換程序。所以在你的 App 中就需要避免出現(xiàn)這個操作,以免和指示條的交互打架。
不過,在以往的 iPhone 中,「底端上劃」也是用來調(diào)用控制中心的手勢,所以對廣大產(chǎn)品設計師來說,應該也不會在 App 里進行這樣的交互。
另外值得注意的是,不建議在屏幕底部放置太多交互式控件。Home?Indicator?周圍的間距純粹是為手勢觸碰創(chuàng)建的,將按鈕放在指示條附近,用戶很可能意外的觸碰到指示條,或是在使用指示條時誤觸 App 按鈕,造成操作干擾。
2、融為一體
Home Indicator?將根據(jù)背景的顏色變化改變成白/黑兩種顏色,從而與背景區(qū)分。不要在指示條上做特殊強調(diào),這將被視官方為異類,小心審核不給你通過哦!
Face ID
正如 Home 鍵的按鍵功能被 Home Indicator 取代,Home 鍵的 Touch ID 被 Face ID 取代。所以使用 Touch ID 的應用,一定要記得將?Touch ID 改為? Face ID。
本文由 @?墨刀 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自PEXELS,基于CC0協(xié)議
- 目前還沒評論,等你發(fā)揮!