iPhoneX設(shè)計規(guī)范

蘋果近日發(fā)布了全新的iPhone X全面屏手機(jī),這也是首款采用OLED屏幕的iPhone手機(jī),它的正面設(shè)計被更多人吐槽,之前被戲稱為“劉海”的凹槽現(xiàn)在有了更多其他名稱,“眉毛”、“頭簾”等等。對于用戶而言,iPhone X 的劉海可能是讓人又愛又恨的設(shè)計。

???愛的是,這一劉海像司馬昭之心一樣傳達(dá)著「我在使用 iPhone X」這一個事實,正如 iPhone 7 的亮黑色一般。當(dāng)然,包括 Face ID 以及 Animoji 等在內(nèi)的新穎功能也會讓人愛不釋手。恨的原因,也很明顯,這個劉海讓屏幕不再方正圓潤,就像一塊膏藥般永遠(yuǎn)的貼在你的屏幕上。看視頻、看照片亦或其他,當(dāng)你使用大部分應(yīng)用時,它可能都會很顯眼。

???這幾天被iPhone X一頓刷屏,標(biāo)題寫著“iPhone X 適配、指南、設(shè)計稿” 內(nèi)容卻是發(fā)布會回顧和手機(jī)介紹。索性自己去官網(wǎng)找素材寫一篇只針對iPhone X適配的貼子,與設(shè)計圖無關(guān)的內(nèi)容通通不提,開始。

一、設(shè)計尺寸

屏幕尺寸

設(shè)計尺寸

???發(fā)布的iPhone 8屬于常規(guī)升級,屏幕與以往的iPhone6、6S、7系列相同。在發(fā)布的新機(jī)中,只有iPhone X的分辨率發(fā)生了變化,但變化僅限于物理像素層面。在真正決定屏幕內(nèi)容的邏輯像素層面,新版的iPhone X與過去我們熟知的iPhone 4.7''、iPhone 5.5'' 放大模式寬度相同。通俗的說,iPhone X可看做是iPhone 4.7'' 的加長版

屏幕對比

然而,事情并不是設(shè)計圖加長這么簡單。

屏幕對比

二、交互設(shè)計

???過去,我們拿到的手機(jī)是方方正正的矩形,所以整個屏幕都可以看做是安全區(qū)域Safe Area,而如今由于iPhone X屏幕上的“劉海”以及屏幕四周采用圓角的設(shè)計,對于開發(fā)者和設(shè)計師來說,這個劉海帶給他們的是更多的麻煩。Apple 更新了 Human Interface Guidelines來為開發(fā)者提供適配 iPhone X 指南,從中可以看出,Apple 希望開發(fā)者將這個劉海毫無遮掩地呈現(xiàn)在 iPhone X 的「腦袋上」。

指南一:當(dāng)為 iPhone X 適配應(yīng)用時,請確保布局填充整個屏幕,同時不被設(shè)備的圓角、傳感器和下方的 Home 條所遮擋。

確保布局填充整個屏幕

???在使用圖片時,請注意長寬比差異。iPhone X具有不同于其它iPhone的長寬比,因此,全屏其它iPhone圖片在iPhone X上全屏顯示時會出現(xiàn)裁剪。同樣,全屏iPhone X圖片在其它iPhone也會出現(xiàn)裁剪,所以請注意兩種設(shè)備適配。

指南二:不要嘗試去隱藏設(shè)備的圓角、劉海或 Home 條,比如故意在屏幕頂部和底部使用黑色素材。參考iOS 原生應(yīng)用可看出 Apple 的意思:劉海上下不要放任何內(nèi)容。

???大部分使用系統(tǒng)提供的標(biāo)準(zhǔn)UI元素(如導(dǎo)航欄)的APP會自動適應(yīng)iPhone X!Navigation bar、tab bar和tool bar會擴(kuò)展到屏幕頂部和底部弧形區(qū)域。如果app使用自定義控件或非標(biāo)準(zhǔn)布局,要在iPhone X上運行良好需要一點修改。

蘋果給出的安全區(qū)域如下

安全區(qū)域圖示

頁面內(nèi)容不能超出安全區(qū)域(Safe Area)

???iPhone X 狀態(tài)欄高度更高,在電話和定位等后臺任務(wù)時,高度不會變化(就是打電話和導(dǎo)航時,原先頂部增加的彩色帶,現(xiàn)在變成時間信息底部的彩色氣泡,見下圖)

iPhone X 狀態(tài)欄高度更高

iPhone X 狀態(tài)欄高度更高

iPhone X tabbar

iPhone X tabbar

避免將觸發(fā)交互行為的按鈕放在屏幕的底部,人們會在屏幕底端使用手勢進(jìn)入主屏或切換應(yīng)用。(底部橫條是Home鍵)

值得注意的是,iPhone X 底部操作欄目進(jìn)行了細(xì)微的放大。除了常見的底部導(dǎo)航欄外,Safari底部操作欄也有放大講完豎屏,再說橫屏。和豎屏一樣,橫屏的內(nèi)容也要放置在Safe Area中

橫屏放置的Safe Area

???避免將觸發(fā)交互行為的按鈕放在屏幕的角落中。人們會在屏幕底端使用手勢進(jìn)入主屏或切換應(yīng)用。這些系統(tǒng)的全局操作優(yōu)先于App的操作。如果把功能放在角落里,用戶操作起來也很費勁,盡量在用戶手指可及區(qū)域內(nèi)設(shè)計功能

Sout2322hEast.png

底部虛擬Home指示條

???作為去除實體Home按鍵后的衍生物,底部將出現(xiàn)一個虛擬的Home指示條,用以實現(xiàn)常用的交互功能,鎖屏狀態(tài)下向上滑動解鎖,應(yīng)用內(nèi)向上滑動回到主屏,向上滑動并停止片刻進(jìn)入多任務(wù)切換窗口,虛擬Home指示條大多數(shù)情況下將會存在于屏幕的下方,而這個虛擬Home指示條只有黑、白兩種顏色。在底部有導(dǎo)航欄的app中,將會形成屏幕內(nèi)的雙下巴,部分應(yīng)用如果具備從底部上滑的操作,為了和底部上滑回到主屏相區(qū)分,蘋果提供了一個邊緣保護(hù)的方案,第一次上滑是喚醒Home指示條,第二次才會激活原功能。而對于最受關(guān)注的全屏狀態(tài),虛擬Home指示條則會自動隱藏,不過尷尬的是,如果這時候是橫屏狀態(tài),虛擬Home指示條也會跟隨轉(zhuǎn)動,而安卓虛擬按鍵則會始終存在于屏幕下方。全屏狀態(tài)下點擊屏幕后,虛擬Home指示條才會顯示。

???最后說下最核心的問題,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之間的差異

底部高度

整體設(shè)計圖

整體設(shè)計圖

iPhone 4.7 與iPhone X 的Safe Area高度僅相差67 Point(134 px,@2x)

???對于大多數(shù)采用瀑布流的頁面來說,僅僅是屏幕高度上的變化,可以無視。但對于如:新手引導(dǎo)頁、音樂播放器等需要單屏顯示的界面就需要重新布局。

Sout22hEast.jpeg

S2outh2East.jpeg

???由于 iPhone X的屏幕比例發(fā)生變化,對于長期靠“等比縮放”完成適配的H5活動頁而言也有不小的影響,需要對頁面結(jié)構(gòu)進(jìn)行適當(dāng)微調(diào)。如果應(yīng)用程序需要隱藏狀態(tài)欄,請重新考慮iPhone X上的布局。iPhone X的顯示高度相對于iPhone 4.7''提供了更多的內(nèi)容高度,狀態(tài)欄和底部可以帶來更多的空間。但需要就屏幕內(nèi)容進(jìn)行適當(dāng)?shù)恼{(diào)整。

iPhone X可以提供更多的內(nèi)容高度

三、圖標(biāo)設(shè)計

???底部導(dǎo)航欄圖標(biāo),過去的做法是當(dāng)前激活模塊的圖標(biāo)為剪影風(fēng)格,其他圖標(biāo)為線性風(fēng)格。設(shè)計師需要做兩套圖標(biāo)。分別是一套剪影,一套線性。而現(xiàn)在統(tǒng)一為剪影,而當(dāng)前激活模塊的圖標(biāo)使用平鋪色代表激活。

全屏視圖設(shè)計

四、系統(tǒng)色系增強(qiáng)

???iPhone X上的顯示器支持P3色彩空間,可以產(chǎn)生比sRGB更豐富,更飽和的顏色。使照片和視頻的顏色更加逼真,增強(qiáng)視覺體驗!

色系描述

閱讀拓展

1、《designingforiPhoneX》

2、三分鐘弄懂iPhoneX設(shè)計尺寸和適配

3、iPhone X的全面屏 讓設(shè)計師操碎了心

4、iPhoneX設(shè)計規(guī)范

1、設(shè)計師如何設(shè)計iPhoneX視覺稿


原文地址:http://www.lxweimin.com/p/0f2516d165a3

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。