設(shè)計干貨：iPhone X 界面設(shè)計尺寸和適配【完整版】
來源：ZCOOL 站酷
作者：海邊來的設(shè)計師
iPhone X適配分析——
被iPhone X刷了一天屏，到下午實在受不了各種假帖。標(biāo)題寫著“iPhone X 適配、指南、設(shè)計稿” 內(nèi)容卻是發(fā)布會回顧和手機介紹。索性自己去官網(wǎng)找素材寫一篇只針對iPhone X適配的貼子，與設(shè)計圖無關(guān)的內(nèi)容通通不提……
昨夜發(fā)布的iPhone 8屬于常規(guī)升級，屏幕與以往的iPhone6、6S、7系列相同。在昨天發(fā)布的新機中，只有iPhone X的分辨率發(fā)生了變化，但變化僅限于物理像素層面。在真正決定屏幕內(nèi)容的邏輯像素層面，新版的iPhone X與過去我們熟知的iPhone 4.7''、iPhone 5.5'' 放大模式寬度相同。通俗的說，iPhone X可看做是iPhone 4.7'' 的加長版。
然而，事情并不是設(shè)計圖加長這么簡單。
過去，我們拿到的手機是方方正正的矩形，所以整個屏幕都可以看做是安全區(qū)域Safe Area，而如今由于iPhone X屏幕上的“劉?！币约捌聊凰闹懿捎脠A角的設(shè)計，需要設(shè)計師對繪圖區(qū)域做出調(diào)整。
蘋果給出的安全區(qū)域如下：
頁面內(nèi)容不能超出安全區(qū)域（Safe Area）。
避免將觸發(fā)交互行為的按鈕放在屏幕的底部，人們會在屏幕底端使用手勢進入主屏或切換應(yīng)用。（底部橫條是Home鍵）
頁面頂部和底部變化如下：
右上圖可以看到為了回避“劉海”和圓角，iPhone X的頂部狀態(tài)欄和底部菜單欄都進行了增高。
值得注意的是，iPhone X 底部操作欄目進行了細(xì)微的放大。除了常見的底部導(dǎo)航欄外，Safari底部操作欄也有放大。
講完豎屏，再說橫屏。
和豎屏一樣，橫屏的內(nèi)容也要放置在Safe Area中。
避免將觸發(fā)交互行為的按鈕放在屏幕的角落中。人們會在屏幕底端使用手勢進入主屏或切換應(yīng)用。這些系統(tǒng)的全局操作優(yōu)先于App的操作。如果把功能放在角落里，用戶操作起來也很費勁，盡量在用戶手指可及區(qū)域內(nèi)設(shè)計功能。
最后說下最核心的問題，Safe Area 范圍有多大？
下午我比對了官網(wǎng)上所有與iPhone X相關(guān)的界面，可以確定，Safe Area區(qū)間如下：
對于習(xí)慣用750x1334作圖的設(shè)計師而言，iPhone X的到來并不會帶來太大影響，iPhone X與iPhone 4.7’’之間的差異甚至不及當(dāng)年iPhone 4和iPhone 5之間的差異。
iPhone 4.7 與iPhone X 的Safe Area高度僅相差67 Point（134 px，@2x）
對于大多數(shù)采用瀑布流的頁面來說，僅僅是屏幕高度上的變化，可以無視。但對于如：新手引導(dǎo)頁、音樂播放器等需要單屏顯示的界面就需要重新布局。
由于 iPhone X的屏幕比例發(fā)生變化，對于長期靠“等比縮放”完成適配的H5活動頁而言也有不小的影響，需要對頁面結(jié)構(gòu)進行適當(dāng)微調(diào)。
最后，如果應(yīng)用程序需要隱藏狀態(tài)欄，請重新考慮iPhone X上的布局。iPhone X的顯示高度相對于iPhone 4.7''提供了更多的內(nèi)容高度，狀態(tài)欄和底部可以帶來更多的空間。但需要就屏幕內(nèi)容進行適當(dāng)?shù)恼{(diào)整。
如果不是特別需要沉浸式體驗的界面，如視頻、看圖片，建議不要隱藏狀態(tài)欄。
最后附上官方視頻
轉(zhuǎn)載請在文章開頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請至數(shù)英微信公眾號(ID: digitaling) 后臺授權(quán)，侵權(quán)必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）