iPhone X 響應(yīng)式UI界面應(yīng)該如何設(shè)計？

iPhone X 的出現(xiàn)無疑又一次顛覆了我們隊內(nèi)容有限的沉浸式體驗(yàn)認(rèn)識，它采用了超大，高清晰度，大圓角，無邊框的顯示屏，這讓我們很多設(shè)計師感覺有點(diǎn)焦慮，其實(shí)iPhone X 適配并沒有想象的那么復(fù)雜，今天創(chuàng)新互聯(lián)一起來分析下UI該如何設(shè)計。
屏幕尺寸：
iPhone系列開發(fā)尺寸我們了解的如下：

下面是我們應(yīng)用的像素尺寸：

手機(jī)型號	屏幕尺寸	屏幕密度	開發(fā)尺寸(UI界面設(shè)計尺寸)	像素尺寸	倍圖
4/4S	3.5英寸	326ppi	320*480 pt	640*960 px	@2X
5/5S/5C	4英寸	326ppi	320*568 pt	640*1136 px	@2X
6/6S/7/8	4.7英寸	326ppi	375*667 pt	750*1334 px	@2X
6+/6S+/7+/8+	5.5英寸	401ppi	414*736 pt	1242*2208 px	@2X
X	5.8英寸	458ppi	375*812 pt	1125*2436 px	@3X

每個機(jī)型的尺寸雖有不同，所以在做網(wǎng)站的時候我們的瀏覽器判斷也是需要@media 進(jìn)行多種判斷，確保界面在不同尺寸上有較好的顯示效果。
而iPhone 8 屏幕尺寸則和分辨率都沿用了iPhone 6 版本尺寸。
此次升級iPhone X 不僅改變了屏幕尺寸、分辨率、就連同外觀上都也發(fā)生了較大的改變，下面我們拿iPhone 8作為參考，來分析下iPhone X具體有什么區(qū)別，那么我們就來看看iPhone X在尺寸上的變化：

在尺寸上我們可以明顯的看出來，與iphone 8雖然差異不大，但在高度上多了145 pt，這樣也就意味了我們能展示的內(nèi)容更多了，相當(dāng)于多出了20%的垂直空間。這對于像京東、淘寶這種產(chǎn)品展示網(wǎng)站而言，又多了次商品曝光率或者是更高的運(yùn)營位價值。
從整體尺寸分析來看，iPhone 8的像素尺寸是750*1334 px(@2X)，而iPhone X的像素尺寸是1125*2436 px(@3X)，同樣的寬度 一個用@2X圖，一個用@3X圖，表現(xiàn)出了更高的清晰度。

這一看就能感受出來，大屏、高清時代已經(jīng)開始，458ppi在手機(jī)上僅次于早年的HTC one（468ppi 2013），然而三星Galaxy系列早已做到PPI522了。
布局
我們再來看看設(shè)計師和移動端開發(fā)工程師要考慮到的布局：
保證你的設(shè)計布局能夠填充整個屏幕。
注意你的核心內(nèi)容不要被設(shè)備的大圓角、傳感器(齊劉海)、以及底部訪問主屏幕的指示燈遮擋。


設(shè)計布局要填充整個屏幕，這里有兩塊區(qū)域需要額外考慮：
屏幕頂部，即StatusBar部分
這條狀態(tài)欄本來并沒有可發(fā)揮的空間，但是iPhone的StatusBar與NavigationBar(以下簡稱NavBar)背景是可以通欄的，以達(dá)到一種完全沉浸式體驗(yàn)的設(shè)計。
大部分的APP應(yīng)該也是沒有影響的（主流NavBar都采用純色背景，StatusBar背景沿用NavBar的背景），但是對于那些做了NavBar視覺效果的設(shè)計師就要考慮了，你的漸變色背景、或者帶底紋的背景、還包括電商平臺商品圖是通欄展示的商品圖，多少會對實(shí)際效果產(chǎn)生一些影響。
比如，NavigationBar是漸變色背景的，由于iPhoneX的Status+Nav高度增加，我們1242*192(@3X)的背景圖會被等比例拉伸至這兩塊區(qū)域并且剪輯多余部分。
屏幕底部

屏幕底部的虛擬區(qū)，替代了Home鍵，高度為34pt。指示燈區(qū)域是一個帶著系統(tǒng)功能的內(nèi)容顯示區(qū)域，這就意味著它可以展示內(nèi)容；同時如果你的底部是TabBar，那么指示燈區(qū)域背景會來自于TabBar背景的延伸；如果我們是一個feed流的頁面，底部則會展示次屏feed流的局部。

鑒于圓角、傳感器、指示燈區(qū)域的影響，iPhone X給出了設(shè)計布局的安全區(qū)意見：


再考慮必要的NavBar、TabBar，主題內(nèi)容顯示的安全區(qū)需要根據(jù)設(shè)計需求進(jìn)行考慮。根據(jù)實(shí)際需要，我們添加的所有控件都應(yīng)當(dāng)在安全區(qū)內(nèi)，如各類型的Button、Edit Menu、Pickers、Sliders等等。

總結(jié)
注意你的內(nèi)容不要被裁切：建議內(nèi)容為居中對稱以不被圓角或傳感器等遮擋。使用系統(tǒng)提供的的元素以及自動布局來構(gòu)建頁面獲得更好的適配效果。
注意StatusBar的高度：iPhoneX的狀態(tài)欄高度會更高，如果有開發(fā)伙伴對NavgationBar的位置是通過固定值進(jìn)行位置的定位的，建議進(jìn)行APP升級。
如果你的APP是隱藏StatusBar的，建議重新考慮：iPhoneX為用戶在垂直空間上提供了更多展示余地，且狀態(tài)欄中也包含了用戶需要知道的信息，除非能通過隱藏狀態(tài)欄帶給用戶額外的價值，否則蘋果建議大家將狀態(tài)欄還給用戶。

標(biāo)題名稱：iPhone X 響應(yīng)式UI界面應(yīng)該如何設(shè)計？
URL標(biāo)題：http://www.muchs.cn/news23/89573.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、網(wǎng)站排名、微信公眾號、品牌網(wǎng)站制作、做網(wǎng)站、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)