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

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

外觀變化

變化1：取消了實體的 Home 鍵

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

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

還記得以前iPhone4驚艷的雙面玻璃嗎，這次蘋果又回歸這種設(shè)計的。iPhoneX采用了前后玻璃 + 不銹鋼邊框的外觀，5.8寸的屏幕，因為使用了全面屏幕，所以屏幕比 8Plus 更大，但機身確是小于8 Plus的。

硬件變化

變化1：屏幕

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

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

變化2：處理器

搭載6核A11仿生處理器，這個強大的處理器可以支持更強勁的游戲效果。

變化 ： 攝像頭

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

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

變化4：充電

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

交互變化

變化1：臉部識別解鎖

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

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

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

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

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

變化4：激活控制中心

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

變化5：激活Siri

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

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

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

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

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

界面設(shè)計

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

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

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

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

因為有這個小劉海的存在，為了文字不被遮蔽，所以導(dǎo)航欄的高度也會相應(yīng)被拉高。

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

雖然官方的模板標(biāo)題字是如此大，但是我預(yù)言在國內(nèi)，設(shè)計師會根據(jù)具體情況選擇小點的字號。因為國內(nèi)還是喜歡高信息密度的設(shè)計。這個道理就好像安卓的Material design，人人叫好，但是國內(nèi)沒幾個設(shè)計師愿意去使用這個設(shè)計語言去設(shè)計應(yīng)用，因為信息密度太低了。

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

變化3：底部標(biāo)簽欄的圖標(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)使用平鋪色代表激活。

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

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

變化4：留白間距的控制

對于新的iPhoneX，因為上下多了一個圓角，且頭部多了一個小劉海，因為這些硬件的差異，導(dǎo)致界面設(shè)計需要考慮到這些因素。所以無論橫豎屏，都需要考慮兩邊留白的間距問題，需要留出足夠的間距，保證元素不被遮蔽。

設(shè)計的適配

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

從頁面的寬高比例來說：

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

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

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

設(shè)計的測試

雖然界面設(shè)計的流程依然沒有變化。但是因為有了小劉海的出現(xiàn)，設(shè)計師需要付出更多的時間來測試頁面，看看在橫豎屏切換的時候，有沒有元素遮蔽的現(xiàn)象。

源文件下載：

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

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

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

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