以下內(nèi)容由Mockplus團(tuán)隊(duì)翻譯整理，僅供學(xué)習(xí)交流叹侄，Mockplus是更快更簡(jiǎn)單的原型設(shè)計(jì)工具巩搏。
?
iPhone X（也讀作：iPhone 10）正式發(fā)布了，并定于11月3日開(kāi)賣(mài)趾代。它內(nèi)置震撼的超級(jí)Retina屏幕贯底，其分辨率為1125×2436像素。 在其屏幕頂部還有一個(gè)切口（俗稱(chēng)“劉喝銮浚”）禽捆，你可以通過(guò)它來(lái)體驗(yàn)未來(lái)感十足的臉部解鎖功能。
這款美麗的機(jī)器將給設(shè)計(jì)師帶來(lái)一些新的挑戰(zhàn)飘哨，也將帶來(lái)一些新的機(jī)會(huì)胚想。在豎屏模式下，設(shè)備的寬度與 iPhone 6杖玲、7 和 8 相同顿仇，但比它們的屏幕足足高了145pt，這樣就增加了20％的垂直顯示空間摆马。
當(dāng)在一倍的倍率下設(shè)計(jì)時(shí)臼闻，你需要?jiǎng)?chuàng)建一個(gè) 375×812px的畫(huà)板。由于新Retina 屏幕的緣故囤采，你不必像iphone8一樣輸出@2x的圖片述呐，它需要的切圖資源是 @3x 的，如同之前的 iPhone 6蕉毯、7乓搬、8 plus 一樣思犁。
開(kāi)始創(chuàng)建設(shè)計(jì)時(shí)，你必須確保你的界面不會(huì)因設(shè)備的獨(dú)特性（圓角进肯，頂部的切口以及Home鍵）而被遮擋住激蹲。順便說(shuō)一句，Home 鍵化為了屏幕底部的小橫線(xiàn)江掩，它取代了物理 Home 鍵按鈕学辱。你可以從任何應(yīng)用程序向上滑動(dòng)回到主屏幕或做多任務(wù)處理。
?
看那條白色的線(xiàn)环形，它就是新的home鍵
如果你目前的應(yīng)用程序是用iOS原生組件（導(dǎo)航欄策泣、表格、集合視圖和標(biāo)簽欄），那么你的應(yīng)用程序?qū)?huì)適應(yīng)這款新的iPhone。它們將在新的iPhone自動(dòng)布局和定位叠骑。
?左邊是 iPhone 8 的 UI 布局，右邊是 UI 組件適應(yīng)到 iPhone X 上的效果
如果你使用自定義布局危队，你的應(yīng)用程序可能需要更新以適應(yīng)新的屏幕布局。如果你使用自動(dòng)布局发侵，那就容易多了交掏。
讓我們?cè)龠M(jìn)一步
首先，“擁抱這款酷炫的全屏機(jī)吧刃鳄！”
確保你創(chuàng)建了全屏體驗(yàn)盅弛。讓滾動(dòng)視圖滾動(dòng)到屏幕最底部甚至超出顯示器彎曲底部的邊緣。蘋(píng)果還要求你在設(shè)計(jì)時(shí)避開(kāi)頂部切口和底部圓角叔锐，所以不要放置黑色的狀態(tài)欄挪鹏，這樣會(huì)讓它看起來(lái)像是教科書(shū)式的iPhone8。
居中嵌入重要信息愉烙。確保重要內(nèi)容在中心對(duì)齊讨盒，并使用對(duì)稱(chēng)的布局, 這樣你的UI界面就不會(huì)被設(shè)備的傳感器（切口）或圓角所截?cái)唷Ｈ绻闶怯米詣?dòng)布局步责，你的內(nèi)容將自動(dòng)適配到安全區(qū)域返顺，所以你的設(shè)計(jì)不會(huì)被遮擋在傳感器（切口）或者Home鍵之后。
?
新的狀態(tài)欄蔓肯。由于顯示器頂部的傳感器（切口）遂鹊，新的狀態(tài)欄被分成兩部分。如果你的UI 在這個(gè)空間做了一些設(shè)計(jì)（以前的 20pt 高蔗包，現(xiàn)在是 44pt）秉扑，你需要對(duì)UI界面做些改變確保它可以在高度上動(dòng)態(tài)改變，因?yàn)樵趇PhoneX上狀態(tài)欄加高了调限。最重要的是, 如果用戶(hù)撥打電話(huà)或使用導(dǎo)航程序時(shí)舟陆，這個(gè)高度不會(huì)改變, 這一點(diǎn)在其他的iphone 上也是一樣误澳。
?
分成兩部分并且增高了的狀態(tài)欄
顯示新的狀態(tài)欄。如果你目前在設(shè)計(jì)中隱藏了狀態(tài)欄秦躯，蘋(píng)果會(huì)要求你重新考慮這個(gè)決定忆谓。由于屏幕較高，你有更多的空間顯示你的內(nèi)容踱承，充分利用狀態(tài)欄陪毡。用戶(hù)可以在那里（狀態(tài)欄）找到有用的信息，大部分時(shí)間這個(gè)位置都不會(huì)被其他UI元素占用勾扭。
全屏圖像。如果你目前在設(shè)計(jì)中使用了全屏圖像, 你需要在新的 iPhone上更新铁瞒。圖片可能被裁切, 視覺(jué)的重要部分也可能被隱藏妙色。
?
不要在屏幕底部放置交互控件。Home鍵周?chē)拈g距僅僅是為手勢(shì)觸碰創(chuàng)建的慧耍，向上滑動(dòng)回到主屏幕身辨。將按鈕放在Home鍵或視屏底部圓角附近，都不是好選擇芍碧。用戶(hù)很可能意外的觸碰到Home鍵煌珊，很難進(jìn)入想去的用戶(hù)界面。你仍然可以使用標(biāo)簽欄和功能欄泌豆，但請(qǐng)記住定庵，它們的操作應(yīng)不干擾Home鍵。
?
不要隱藏Home鍵踪危。當(dāng)用戶(hù)幾秒鐘不觸碰屏幕時(shí)蔬浙，IOS可以在你的應(yīng)用程序中將Home鍵自動(dòng)隱藏。當(dāng)用戶(hù)再次觸摸屏幕時(shí), 它將重新出現(xiàn), 這主要應(yīng)用于如觀看視頻或照片這種身臨其境的場(chǎng)景贞远。Home鍵還會(huì)根據(jù)應(yīng)用程序的背景自動(dòng)更改顏色畴博。
?
色彩更豐富。新的超級(jí)Retina顯示屏蓝仲，可以顯示更多的顏色俱病，P3色彩模式代替了sRGB。這意味著它會(huì)顯示更豐富和更飽和的顏色袱结。特別是視頻和照片亮隙，看起來(lái)會(huì)更棒。
向上滑動(dòng)擎勘，注意手勢(shì)咱揍。由于取消了物理Home鍵，你通過(guò)手勢(shì)與你的iPhone互動(dòng)（比以往任何時(shí)候都更頻繁）棚饵。當(dāng)你向上滑動(dòng)時(shí)煤裙，你就可以回到主屏或者去到多任務(wù)視圖掩完。當(dāng)你在 Home鍵上向左和向右滑動(dòng)時(shí), 你可以在打開(kāi)的多任務(wù)程序之間切換。通過(guò)從屏幕頂部向下滑動(dòng), 你可以轉(zhuǎn)到推送通知或控制中心硼砰。在游戲中更是如此且蓬，你可以使用可能會(huì)覆蓋IOS原生手勢(shì)的自定義手勢(shì)。你可以通過(guò)實(shí)施“邊界保護(hù)”來(lái)實(shí)現(xiàn)自定義手勢(shì)题翰，但請(qǐng)謹(jǐn)慎使用恶阴，因?yàn)檫@將使用戶(hù)更難使用系統(tǒng)功能。
刷臉功能豹障。以前的iPhone有一個(gè)很好的功能Touch ID冯事，它允許用戶(hù)通過(guò)使用指紋來(lái)解鎖他們的設(shè)備或執(zhí)行密碼鎖定的操作。Touch ID 傳感器被隱藏在 Home 鍵內(nèi)部血公，由于iPhone X 的 Home 鍵已經(jīng)取消了昵仅，所以蘋(píng)果用更先進(jìn)和安全的方式來(lái)解鎖你的設(shè)備——Face ID（刷臉），它使用非常高深的算法來(lái)檢測(cè)你的臉部并解鎖你的設(shè)備累魔。進(jìn)入人臉識(shí)別模式摔笤，它使用了一些非常棒的算法來(lái)檢測(cè)你的面部并解鎖你的設(shè)備。這個(gè)會(huì)出現(xiàn)在一些新的APP界面中垦写，請(qǐng)確保你的iPhoneX用戶(hù)可以使用它吕世，同時(shí)確保不要在登錄或菜單中引用Touch ID，將其替換為Face ID梯投。
?
自定義鍵盤(pán)命辖。當(dāng)你在設(shè)計(jì)自定義鍵盤(pán)時(shí), 不應(yīng)該在鍵盤(pán)上添加表情或聽(tīng)寫(xiě)按鈕。因?yàn)樗鼤?huì)自動(dòng)添加到鍵盤(pán)下方的 Home鍵區(qū)域晚伙。
更大的導(dǎo)航欄吮龄。iOS 11 原生導(dǎo)航欄的設(shè)計(jì)得到了更新, 它們現(xiàn)在更高了。這款設(shè)計(jì)在iPhone X上將會(huì)非常出色咆疗，并將與新的狀態(tài)欄完美結(jié)合漓帚。所以考慮在你的設(shè)計(jì)中使用它。在滾動(dòng)時(shí)午磁，會(huì)有一些不錯(cuò)的原生動(dòng)畫(huà)效果呈現(xiàn)尝抖。
?
總結(jié)
? iPhone X的屏幕高出了145pt，所以設(shè)計(jì)為375×812pt而不是375x667pt迅皇；
? iPhone X 使用 @ 3x 圖片的切圖資源昧辽；
? 創(chuàng)建全屏體驗(yàn), 不要隱藏設(shè)備的獨(dú)有功能；
? 將重要內(nèi)容放置在屏幕中心區(qū)域, 以確保它始終可見(jiàn)且不被設(shè)備的傳感器或圓角所遮擋登颓；
? 分成兩部分的新?tīng)顟B(tài)欄搅荞，以前高22pt，現(xiàn)在高44pt；
? 全屏圖片應(yīng)該更新,咕痛，以保證其完全顯示痢甘；
? 不要在屏幕底部或靠近Home鍵的地方添加按鈕；
? 除非非常必要茉贡，否則不要隱藏Home鍵塞栅；
? 更豐富和更飽和的P3顏色配置；
? 注意在 Home鍵和狀態(tài)欄附近的自定義手勢(shì)腔丧，不要混淆原生手勢(shì)放椰；
? Face ID替換Touch ID，更新你的UI愉粤，并將替換原本使用Touch ID的頁(yè)面砾医；
? 自定義鍵盤(pán)不需要添加表情和聽(tīng)寫(xiě)按鈕；
? 較大的導(dǎo)航欄將在這塊更高的顯示屏上得到更好的視覺(jué)和動(dòng)畫(huà)效果衣厘；
原文作者：NIELS
原文地址：https://blog.prototypr.io/designing-for-the-iphone-x-4239d5ac736
Mockplus做原型藻烤，更快更簡(jiǎn)單，現(xiàn)在下載Mockplus头滔，免費(fèi)體驗(yàn)暢快的原型設(shè)計(jì)之旅。????
