史上最詳細的iPhoneX視覺分析。

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

外觀變化

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

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

變化2：雙面玻璃設計的回歸

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

硬件變化

變化1：屏幕

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

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

變化2：處理器

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

變化 ： 攝像頭

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

這個攝像頭還能識别面部表情做動态 Emoji，蘋果官方叫做動話表情。

變化4：充電

iPhoneX比iPhone續航提升了2個小時，支持無線充電，發布了可同時充 3個設備的 AirPower 充電枕

交互變化

變化1：臉部識别解鎖

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

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

去掉了home鍵，當用戶在一個應用内部時，從底部向上輕掃，即可返回主屏幕。

變化3：激活多任務操作

當用戶需要啟用多任務時，隻需屏幕向上輕掃并停頓一下，就能激活多任務界面。

變化4：激活控制中心

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

變化5：激活Siri

沒有了實體的Home鍵，用戶想要激活 Siri，變為了長按側邊的實體鍵。

變化6：激活Apple Pay

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

設計總結

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

界面設計

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

變化1：頂部标簽欄的高度

iPhoneX最顯眼的莫過于那個劉海頭了。因為劉海頭的存在，遮蔽了原有的電池狀态欄，包括頂部的導航欄部分的視覺面積。

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

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

變化2：頂部标簽欄的文字

雖然官方的模闆标題字是如此大，但是我預言在國内，設計師會根據具體情況選擇小點的字号。因為國内還是喜歡高信息密度的設計。這個道理就好像安卓的Material design，人人叫好，但是國内沒幾個設計師願意去使用這個設計語言去設計應用，因為信息密度太低了。

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

變化3：底部标簽欄的圖标設計

底部導航欄圖标，過去的做法是當前激活模塊的圖标為剪影風格，其他圖标為線性風格。設計師需要做兩套圖标。分别是一套剪影，一套線性。而現在統一為剪影，而當前激活模塊的圖标使用平鋪色代表激活。

底部标簽欄的高度也加大，為了适應新的硬件屏幕設計，視覺區域也相應加大。

這樣表面看起來是減少了設計師的負擔，不過我認為對設計師的圖标設計基本功提出了更高的要求。畢竟形态變化少了，需要在剪影本身上下的功夫需要更多。所以對圖标形體的設計練習依然不可少。這是我之前帶學生做的剪影線性的切換練習。

變化4：留白間距的控制

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

設計的适配

過去我們設計頁面，采用的方法是基于iPhone7的2X倍率進行設計，以2X的基準做設計稿，也就是750×1334。然後切圖輸出2X、3X的圖片資源給開發。如果不知道倍率是什麼意思。可以去看我的UI設計師《術與道移動應用設計必修課》，這是2016年全年銷量第一的UI設計書籍。新的iPhoneX分辨率是1125×2436。

從頁面的寬高比例來說：

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

所以從頁面視覺來看，我們依然采用老辦法，從2X的iPhone7做為基準去做一稿設計，唯一變化的是可能我們需要采用更高的導航欄，更高的底部标簽欄。

原有的頁面相當于現在的頁面設計，信息密度可能降低了。因為内容顯示區域變少了點。

設計的測試

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

源文件下載：

最後更新一下我從國外網站找到的最新iPhoneX的PSD模闆，下載地址：https:///s/1bplNkpp（密碼: 53sk）

作者：餘振華（網名：風尾竹），UI設計師，站酷推薦設計師，微信公衆号“聊設計”（ID： liaosheji2010），歡迎交流

本文由 @餘振華 原創發布于人人都是産品經理。未經許可，禁止轉載。

題圖來自蘋果官網

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部