史上最詳細(xì)的iPhoneX視覺分析。

從iPhone6發(fā)布以后，果粉們就開始期待這款十周年紀(jì)念版的iPhoneX，究其原因無非是蘋果在新品iPhone6上的外觀、技術(shù)上太保守了，外觀設(shè)計(jì)用了三年。 從果不其然，蘋果公司還是聽取了用戶的聲音，帶來了蘋果史上技術(shù)最大程度的突破。iPhoneX.由于機(jī)型外觀做了重大改變。那么隨之UI界面設(shè)計(jì)和交互細(xì)節(jié)也會(huì)有非常多的改變。做為設(shè)計(jì)師我們需要緊跟這些變化。那么，這些改變對于UI設(shè)計(jì)師的有哪些影響了？

外觀變化

變化1：取消了實(shí)體的 Home 鍵

X 讀作「10 / ten」，這是第一款「全面屏」iPhone，也許是受小米的刺激，推出了這款全面屏幕也不一定。

變化2：雙面玻璃設(shè)計(jì)的回歸

還記得以前iPhone4驚艷的雙面玻璃嗎，這次蘋果又回歸這種設(shè)計(jì)的。iPhoneX采用了前后玻璃 + 不銹鋼邊框的外觀，5.8寸的屏幕，因?yàn)槭褂昧巳嫫聊?，所以屏幕?8Plus 更大，但機(jī)身確是小于8 Plus的。

硬件變化

變化1：屏幕

首次使用OLED 屏幕，分辨率達(dá)到2436×1125，PPI達(dá)到驚人的458ppi

所以，帶來的視覺效果會(huì)更加精細(xì)。

變化2：處理器

搭載6核A11仿生處理器，這個(gè)強(qiáng)大的處理器可以支持更強(qiáng)勁的游戲效果。

變化 ： 攝像頭

前置攝像頭升級(jí)為原深感攝像頭，也能拍景深照片，后置豎排雙攝像頭，都有光學(xué)防抖，人像模式加入專業(yè)打光功能人像光效；

這個(gè)攝像頭還能識(shí)別面部表情做動(dòng)態(tài) Emoji，蘋果官方叫做動(dòng)話表情。

變化4：充電

iPhoneX比iPhone續(xù)航提升了2個(gè)小時(shí)，支持無線充電，發(fā)布了可同時(shí)充 3個(gè)設(shè)備的 AirPower 充電枕

交互變化

變化1：臉部識(shí)別解鎖

沒有 Touch ID，全新 Face ID（面容識(shí)別）以后用戶可以刷臉就能解鎖；

變化2：返回主屏幕的操作

去掉了home鍵，當(dāng)用戶在一個(gè)應(yīng)用內(nèi)部時(shí)，從底部向上輕掃，即可返回主屏幕。

變化3：激活多任務(wù)操作

當(dāng)用戶需要啟用多任務(wù)時(shí)，只需屏幕向上輕掃并停頓一下，就能激活多任務(wù)界面。

變化4：激活控制中心

之前打開控制中心的手勢是從上往下拉出，現(xiàn)在則更改為從屏幕的右上角向下輕掃。

變化5：激活Siri

沒有了實(shí)體的Home鍵，用戶想要激活 Siri，變?yōu)榱碎L按側(cè)邊的實(shí)體鍵。

變化6：激活A(yù)pple Pay

用戶打開Apple Pay 的式更改為連按兩下側(cè)邊按鍵。

設(shè)計(jì)總結(jié)

因?yàn)閷?shí)體的Home鍵的取消，交互變化是巨大的。更多的運(yùn)用到了掃屏幕這個(gè)操作，以及側(cè)邊實(shí)體按鍵的組合運(yùn)用。

界面設(shè)計(jì)

很多設(shè)計(jì)師最關(guān)注的就是這個(gè)部分了。新的硬件出來，到底對原來設(shè)計(jì)有多大影響。我的答案是有影響，但是影響沒有你想的那么大。

變化1：頂部標(biāo)簽欄的高度

iPhoneX最顯眼的莫過于那個(gè)劉海頭了。因?yàn)閯⒑ｎ^的存在，遮蔽了原有的電池狀態(tài)欄，包括頂部的導(dǎo)航欄部分的視覺面積。

所以從iOS11開始，導(dǎo)航欄中間的文字，被挪到下面去了。用了更大更粗的字體顯示。所以這個(gè)視覺設(shè)計(jì)風(fēng)格的更替還是來源于硬件的變化。

因?yàn)橛羞@個(gè)小劉海的存在，為了文字不被遮蔽，所以導(dǎo)航欄的高度也會(huì)相應(yīng)被拉高。

變化2：頂部標(biāo)簽欄的文字

雖然官方的模板標(biāo)題字是如此大，但是我預(yù)言在國內(nèi)，設(shè)計(jì)師會(huì)根據(jù)具體情況選擇小點(diǎn)的字號(hào)。因?yàn)閲鴥?nèi)還是喜歡高信息密度的設(shè)計(jì)。這個(gè)道理就好像安卓的Material design，人人叫好，但是國內(nèi)沒幾個(gè)設(shè)計(jì)師愿意去使用這個(gè)設(shè)計(jì)語言去設(shè)計(jì)應(yīng)用，因?yàn)樾畔⒚芏忍土恕?/p>

如下圖使用Material design設(shè)計(jì)語言的淘寶和目前的淘寶，哪個(gè)信息密度高？所以淘寶首頁寸土寸金的首屏，不會(huì)為了放幾個(gè)字浪費(fèi)了這么一大塊面積。

變化3：底部標(biāo)簽欄的圖標(biāo)設(shè)計(jì)

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

底部標(biāo)簽欄的高度也加大，為了適應(yīng)新的硬件屏幕設(shè)計(jì)，視覺區(qū)域也相應(yīng)加大。

這樣表面看起來是減少了設(shè)計(jì)師的負(fù)擔(dān)，不過我認(rèn)為對設(shè)計(jì)師的圖標(biāo)設(shè)計(jì)基本功提出了更高的要求。畢竟形態(tài)變化少了，需要在剪影本身上下的功夫需要更多。所以對圖標(biāo)形體的設(shè)計(jì)練習(xí)依然不可少。這是我之前帶學(xué)生做的剪影線性的切換練習(xí)。

變化4：留白間距的控制

對于新的iPhoneX，因?yàn)樯舷露嗔艘粋€(gè)圓角，且頭部多了一個(gè)小劉海，因?yàn)檫@些硬件的差異，導(dǎo)致界面設(shè)計(jì)需要考慮到這些因素。所以無論橫豎屏，都需要考慮兩邊留白的間距問題，需要留出足夠的間距，保證元素不被遮蔽。

設(shè)計(jì)的適配

過去我們設(shè)計(jì)頁面，采用的方法是基于iPhone7的2X倍率進(jìn)行設(shè)計(jì)，以2X的基準(zhǔn)做設(shè)計(jì)稿，也就是750×1334。然后切圖輸出2X、3X的圖片資源給開發(fā)。如果不知道倍率是什么意思?？梢匀タ次业腢I設(shè)計(jì)師《術(shù)與道移動(dòng)應(yīng)用設(shè)計(jì)必修課》，這是2016年全年銷量第一的UI設(shè)計(jì)書籍。新的iPhoneX分辨率是1125×2436。

從頁面的寬高比例來說：

• 新的iPhoneX寬度1125/3=375，而iPhone7的寬度750/2=375，兩個(gè)的寬度一致，
• 新的iPhoneX高度2436/3=812，而iPhone7的高度1334/2=667，新的iPhoneX是比iPhone7要長一截。

所以從頁面視覺來看，我們依然采用老辦法，從2X的iPhone7做為基準(zhǔn)去做一稿設(shè)計(jì)，唯一變化的是可能我們需要采用更高的導(dǎo)航欄，更高的底部標(biāo)簽欄。

原有的頁面相當(dāng)于現(xiàn)在的頁面設(shè)計(jì)，信息密度可能降低了。因?yàn)閮?nèi)容顯示區(qū)域變少了點(diǎn)。

設(shè)計(jì)的測試

雖然界面設(shè)計(jì)的流程依然沒有變化。但是因?yàn)橛辛诵⒑５某霈F(xiàn)，設(shè)計(jì)師需要付出更多的時(shí)間來測試頁面，看看在橫豎屏切換的時(shí)候，有沒有元素遮蔽的現(xiàn)象。

源文件下載：

最后更新一下我從國外網(wǎng)站找到的最新iPhoneX的PSD模板，下載地址：https://pan.baidu.com/s/1bplNkpp（密碼:?53sk）

作者：余振華（網(wǎng)名：風(fēng)尾竹），UI設(shè)計(jì)師，站酷推薦設(shè)計(jì)師，微信公眾號(hào)“聊設(shè)計(jì)”（ID： liaosheji2010），歡迎交流

本文由 @余振華 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自蘋果官網(wǎng)