iPhone X 搭載了超大,高清晰度,大圓角,無邊框的顯示屏,又一次刷新了我們對內(nèi)容優(yōu)先的沉浸式體驗的認識。——翻譯自《Human Interface Guiidelines》
屏幕尺寸
我們熟知的iPhone系列開發(fā)尺寸概要如下:
△ iPhone各機型的開發(fā)尺寸
轉(zhuǎn)化成我們熟知的像素尺寸:
△ 每個機型的多維度尺寸
倍圖其實就是像素尺寸和開發(fā)尺寸的倍率關(guān)系,但這只是外在的表現(xiàn)。倍圖核心的影響因素在于PPI(DPI),了解屏幕密度與各尺寸的關(guān)系有助于我們深度理解倍率的概念: 《基礎(chǔ)知識學(xué)起來!為設(shè)計師量身打造的DPI指南》
iPhone8在本次升級中,屏幕尺寸和分辨率都遺傳了iPhone6以后的優(yōu)良傳統(tǒng);
然而 iPhone X 無論是在屏幕尺寸、分辨率、甚至是形狀上都發(fā)生了較大的改變,下面以iPhone 8作為參照物,看看到底iPhone X的適配我們要怎么考慮。
我們看看iPhone X尺寸上的變化:
△ iPhone 8與X 開發(fā)尺寸比對
開發(fā)尺寸上可以發(fā)現(xiàn)X和8的寬度一致,然而在垂直方向上多了145 pt,這就意味著首屏可以展示更多的內(nèi)容,多出20%的垂直空間。對于京東淘寶而言這應(yīng)該就意味著更高的商品曝光率或者是更高的運營位價值。
從整體設(shè)計尺寸看:iPhone 8的像素尺寸是750*1334 px(@2X),而iPhone X的像素尺寸是1125*2436 px(@3X),同樣的寬度 一個用@2X圖,一個用@3X圖,表現(xiàn)出了更高的清晰度。
△ 不同倍圖在表現(xiàn)區(qū)域一致時的效果
iPhone X的屏幕密度為458ppi。
有一種說法:認為肉眼可識別的最高密度為300ppi。而iPhone X的458ppi在手機屏幕歷史可能僅次于HTC one的468ppi(2013年),不過三星Galaxy系列的PPI都到522了,看樣子iPhone X連最清晰的手機也不能吹噓了。
布局
我們再來看看設(shè)計師和移動端開發(fā)工程師要考慮到的布局:
保證你的設(shè)計布局能夠填充整個屏幕。
注意你的核心內(nèi)容不要被設(shè)備的大圓角、傳感器(齊劉海)、以及底部訪問主屏幕的指示燈遮擋。
△ iPhone X設(shè)計應(yīng)當填充整個屏幕
△ 注意X的大圓角和傳感器
設(shè)計布局要填充整個屏幕,這里有兩塊區(qū)域需要額外考慮:
屏幕頂部,即StatusBar部分
這條狀態(tài)欄本來并沒有可發(fā)揮的空間,但是iPhone的StatusBar與NavigationBar(以下簡稱NavBar)背景是可以通欄的,以達到一種完全沉浸式體驗的設(shè)計。
大部分的APP應(yīng)該也是沒有影響的(主流NavBar都采用純色背景,StatusBar背景沿用NavBar的背景),但是對于那些做了NavBar視覺效果的設(shè)計師就要考慮了,你的漸變色背景、或者帶底紋的背景、還包括電商平臺商品圖是通欄展示的商品圖,多少會對實際效果產(chǎn)生一些影響。
比如,NavigationBar是漸變色背景的,由于iPhoneX的Status+Nav高度增加,我們1242*192(@3X)的背景圖會被等比例拉伸至這兩塊區(qū)域并且剪輯多余部分。
△ NavBar與StatusBar背景圖適配上的表現(xiàn)
屏幕底部
△ 訪問主屏幕的指示燈區(qū)域——來自WWDC
屏幕底部的虛擬區(qū),替代了Home鍵,高度為34pt。
指示燈區(qū)域是一個帶著系統(tǒng)功能的內(nèi)容顯示區(qū)域,這就意味著它可以展示內(nèi)容;同時如果你的底部是TabBar,那么指示燈區(qū)域背景會來自于TabBar背景的延伸;如果我們是一個feed流的頁面,底部則會展示次屏feed流的局部。
△ 指示燈區(qū)域
鑒于圓角、傳感器、指示燈區(qū)域的影響,iPhone X給出了設(shè)計布局的安全區(qū)意見:
△ 以iPhone8作為參考的安全區(qū)
△ iPhoneX全屏的安全區(qū)(375*734 pt)
再考慮必要的NavBar、TabBar,主題內(nèi)容顯示的安全區(qū)需要根據(jù)設(shè)計需求進行考慮。根據(jù)實際需要,我們添加的所有控件都應(yīng)當在安全區(qū)內(nèi),如各類型的Button、Edit Menu、Pickers、Sliders等等。
△ 所有的控件應(yīng)當放置在安全區(qū)域內(nèi)
△ 安全區(qū)域內(nèi)控件的示范
總結(jié)
注意你的內(nèi)容不要被裁切:建議內(nèi)容為居中對稱以不被圓角或傳感器等遮擋。使用系統(tǒng)提供的的元素以及自動布局來構(gòu)建頁面獲得更好的適配效果。
注意StatusBar的高度:iPhoneX的狀態(tài)欄高度會更高,如果有開發(fā)伙伴對NavgationBar的位置是通過固定值進行位置的定位的,建議進行APP升級。
如果你的APP是隱藏StatusBar的,建議重新考慮:iPhoneX為用戶在垂直空間上提供了更多展示余地,且狀態(tài)欄中也包含了用戶需要知道的信息,除非能通過隱藏狀態(tài)欄帶給用戶額外的價值,否則蘋果建議大家將狀態(tài)欄還給用戶。
本文轉(zhuǎn)載自網(wǎng)絡(luò),版權(quán)歸原作者所有!
文章轉(zhuǎn)載請保留網(wǎng)址:http://16qt59sf.cn/news/industry/1905.html