如何評(píng)價(jià)iPhoneX？200元以內(nèi)內(nèi)容由Mockplus團(tuán)隊(duì)英譯中收拾，僅作學(xué)習(xí)交流，Mockplus是慢了更簡(jiǎn)單的原型設(shè)計(jì)工具。iPhone X（也讀作：iPhone10）開始發(fā)布了，并于2019

如何評(píng)價(jià)iPhoneX？

200元以內(nèi)內(nèi)容由Mockplus團(tuán)隊(duì)英譯中收拾，僅作學(xué)習(xí)交流，Mockplus是慢了更簡(jiǎn)單的原型設(shè)計(jì)工具。

iPhone X（也讀作：iPhone10）開始發(fā)布了，并于2019年1月11月3日正式開賣。它內(nèi)置震撼的完美Retina屏幕，其分辨率為1125×2436像素。在其屏幕頂部也有一個(gè)切口（俗名“劉?！保?，你也可以它來體驗(yàn)未來感傲氣十足的臉部強(qiáng)制解鎖功能。

這款美麗地的機(jī)器將給設(shè)計(jì)師給了一些新的挑戰(zhàn)，也將給他一些新的機(jī)會(huì)。在豎屏模式下，設(shè)備的寬度與iPhone 6、7和8不同，但比它們的屏幕足有高了145pt，這樣就提升了20％的直角顯示空間。

當(dāng)在一倍的倍率下電腦設(shè)計(jì)時(shí)，你要修改一個(gè)375×812px的畫板。而新Retina屏幕的緣故，你不必像iphone8一樣的作為輸出@2x的圖片，它是需要的切圖資源是@3x的，宛如之前的iPhone 6、7、8 plus一般。

正在創(chuàng)建角色設(shè)計(jì)時(shí)，你可以切實(shí)保障你的界面不可能因設(shè)備的獨(dú)特性（圓角，頂部的切口和Home鍵）而被遮擋住住。順便說一句，Home鍵崩散了屏幕底部的小橫線，它變成了物理Home鍵按鈕。你也可以從任何應(yīng)用程序向上向上滑來到主屏幕或做多任務(wù)處理。

看那條黑色的線，它就是新的home鍵

要是你目前的應(yīng)用程序是用iOS原生組件（導(dǎo)航欄、表格、集合視圖和標(biāo)簽欄），這樣你的應(yīng)用程序很快就會(huì)適應(yīng)適應(yīng)幾款新的iPhone。它們將在新的iPhone自動(dòng)布局和定位。

左邊是iPhone 8的UI布局，右邊是UI組件適應(yīng)到iPhone X上的效果

要是你在用下拉菜單布局，你的應(yīng)用程序肯定必須更新完以適應(yīng)新的屏幕布局。如果你建議使用自動(dòng)啟動(dòng)布局，的話很難多了。

讓我們?cè)龠M(jìn)一步

是需要，“緊緊的擁抱這款炫酷的全屏！”

切實(shí)保障你創(chuàng)建家族了全屏體驗(yàn)。讓滾動(dòng)起來視圖轉(zhuǎn)動(dòng)到屏幕最底部甚至連遠(yuǎn)遠(yuǎn)超過顯示器回彎底部的邊緣。蘋果還要求你在設(shè)計(jì)時(shí)避過頂部切口和底部圓角，因?yàn)閯e放置紅色的狀態(tài)欄，那樣會(huì)讓它看起來像是教科書式的iPhone8。

居左附著不重要信息。確保全最重要內(nèi)容在中心對(duì)齊，并在用對(duì)稱點(diǎn)的布局,那樣的話你的UI界面就絕對(duì)不會(huì)被設(shè)備的傳感器（切口）或圓角所截?cái)?。如果沒有你是用手動(dòng)布局，你的內(nèi)容將手動(dòng)適配到安全區(qū)域，所以才你的設(shè)計(jì)應(yīng)該不會(huì)被遮擋住在傳感器（切口）或是Home鍵之后。

新的狀態(tài)欄。由于顯示器頂部的傳感器（切口），新的狀態(tài)欄被四等分兩部分。如果不是你的UI在這個(gè)空間做了一些設(shè)計(jì)（以前的20pt高，現(xiàn)在是44pt），你不需要對(duì)UI界面做些改變必須保證它可以在相同高度上動(dòng)態(tài)變化，是因?yàn)樵趇PhoneX上通知欄加層了。最重要的是,如果沒有用戶撥打或使用導(dǎo)航程序時(shí)，這個(gè)相同高度不可能變動(dòng),這件事在其他的iphone上確實(shí)是一樣。

等分兩部分并且血壓低了的狀態(tài)欄

不顯示新的狀態(tài)欄。假如你目前在設(shè)計(jì)中隱藏地了狀態(tài)欄，蘋果會(huì)具體的要求你然后再判斷這個(gè)決定。由于屏幕較高，你有更多的空間總是顯示你的內(nèi)容，利用好狀態(tài)欄。用戶這個(gè)可以在那里（狀態(tài)欄）找到有用的信息，大部分時(shí)間這個(gè)位置都不會(huì)被其他UI元素占用帶寬。

全屏圖像。如果不是你目前在設(shè)計(jì)中在用了全屏圖像,你不需要在新的iPhone上更新。圖片可能被裁剪,視覺的最重要部分也很可能被隱藏地。

最好不要在屏幕底部隨意放置交互控件。Home鍵周圍的間距僅僅是為手勢(shì)去碰觸創(chuàng)建的，向上升向上滑返回到主屏幕。將按鈕放到Home鍵或視屏底部圓角附近，都不是好選擇。用戶很很有可能驚訝的觸碰到Home鍵，很容易進(jìn)入想去的用戶界面。你仍舊也可以在用標(biāo)簽欄和功能欄，但請(qǐng)記住了，它們的操作應(yīng)不干擾Home鍵。

最好別隱藏Home鍵。當(dāng)用戶幾秒鐘不觸碰屏幕時(shí)，IOS是可以在你的應(yīng)用程序中將Home鍵手動(dòng)隱藏。當(dāng)用戶再一次觸摸屏幕時(shí),它將然后再出現(xiàn),這主要注意應(yīng)用到于如觀看視頻或照片這種身臨其境的場(chǎng)景。Home鍵還會(huì)依據(jù)應(yīng)用程序的背景自動(dòng)啟動(dòng)你要改顏色。

色彩更艷麗。新的超級(jí)Retina顯示屏，也可以沒顯示更多的顏色，P3色彩模式不用了sRGB。這意味著它會(huì)總是顯示更極為豐富和更析出的顏色。特別是視頻和照片，看起來會(huì)更棒。

向上來回滑動(dòng)，特別注意手勢(shì)。的原因取消后了物理Home鍵，你通過手勢(shì)與你的iPhone互動(dòng)（比以往任何時(shí)候都更正常）。當(dāng)你向下來回滑動(dòng)時(shí)，你就是可以來到主屏也可以去到多任務(wù)視圖。當(dāng)你在Home鍵上向左邊和向右滑動(dòng)時(shí),你可以在然后打開的多任務(wù)程序之間可以切換。通過從屏幕頂部向下滑動(dòng),你可以不投到推送通知或控制中心。在游戲中更是如此，你是可以可以使用可能會(huì)會(huì)遍布IOS原生手勢(shì)的自定義手勢(shì)。你是可以通過可以實(shí)行“邊界保護(hù)”來利用選項(xiàng)卡手勢(shì)，但請(qǐng)十分謹(jǐn)慎使用，而且這將使用戶更難在用系統(tǒng)功能。

掃臉功能。以前的iPhone有三個(gè)很好的功能Touch ID，它容許用戶實(shí)際可以使用指紋來解密碼他們的設(shè)備或執(zhí)行密碼鎖定住的操作。Touch ID傳感器被封印在Home鍵內(nèi)部，由于iPhone X的Home鍵早就取消后了，因?yàn)樘O果用更先進(jìn)和安全的來強(qiáng)制解鎖你的設(shè)備——FaceID（刷臉驗(yàn)證），它可以使用相當(dāng)精深的算法來先檢測(cè)你的臉部并解鎖碼你的設(shè)備。進(jìn)入到人臉識(shí)別模式，它在用了一些更加棒的算法來怎么檢測(cè)你的面部并解鎖你的設(shè)備。這個(gè)會(huì)出現(xiàn)在一些新的APP界面中，請(qǐng)切實(shí)保障你的iPhoneX用戶也可以建議使用它，同樣的以保證不要在登錄或菜單中腳注Touch ID，將其替換后為Face ID。

自定義設(shè)置鍵盤。當(dāng)你在設(shè)計(jì)選項(xiàng)卡鍵盤時(shí),沒有必要在鍵盤上添加表情或背課文按鈕。只不過它會(huì)自動(dòng)添加到鍵盤下方的Home鍵區(qū)域。

極大的導(dǎo)航欄。iOS11原生導(dǎo)航欄的設(shè)計(jì)我得到了更新,它們現(xiàn)在極高了。幾款設(shè)計(jì)什么在iPhone X上可以說非常出色，并將與新的狀態(tài)欄完美特點(diǎn)。所以才確定在你的設(shè)計(jì)中不使用它。在滾動(dòng)時(shí)，會(huì)有一些比較不錯(cuò)的原生動(dòng)畫效果呈現(xiàn)。

學(xué)習(xí)總結(jié)?iPhone X的屏幕高出了145pt，所以設(shè)計(jì)什么為375×812pt而并非375x667pt；

?iPhone X在用@3x圖片的切圖資源；

?修改全屏體驗(yàn),不要封印設(shè)備的獨(dú)特功能；

?將重要的是內(nèi)容隨意放置在屏幕中心區(qū)域,以確保它仍然要知道且不被設(shè)備的傳感器或圓角所遮擋物；

?分成兩部分的新狀態(tài)欄，以前高22pt，現(xiàn)在高44pt；

?全屏圖片應(yīng)該是更新完,，以保證其幾乎總是顯示；

?千萬不能在屏幕底部或靠近了Home鍵的地方先添加按鈕；

?除非相當(dāng)必要，不然最好不要封印Home鍵；

?更豐富和更飽和的P3顏色配置；

?盡量在Home鍵和狀態(tài)欄附近的自定義手勢(shì)，最好不要混為一談原生手勢(shì)；

?Face ID替換后Touch ID，可以更新你的UI，并將重命名原本在用Touch ID的頁(yè)面；

?自定義設(shè)置鍵盤不是需要去添加表情和背課文按鈕；

?較大的導(dǎo)航欄將在這塊更高的顯示屏上換取更好的視覺和動(dòng)畫效果；

原文作者：NIELS

sketch動(dòng)效軟件？

Sketch沒辦法做交互過程動(dòng)效。能制作動(dòng)效的有Axure和Mockplus，推薦可以使用Mockplus，比較比較簡(jiǎn)單的和比較方便。

制做完動(dòng)效后可以不將項(xiàng)目可以上傳云端儲(chǔ)存管理，我推薦可以使用iDoc