總結(jié)一下最近超火的iPhoneX設(shè)計規(guī)范，設(shè)計師們燥起來吧！
內(nèi)容以《designing for iPhone X》視頻為主，視頻前半部分與新版HIG/Overview/iPhoneX部分內(nèi)容相同，白色配圖來自HIG，黑色配圖來自視頻截圖。部分內(nèi)容來自知乎用戶bigyang。
（為方便閱讀，以下內(nèi)容文字在前圖片在后）
官方設(shè)計規(guī)范視頻連接：
Designing for iPhone X - Fall 2017 - Videos - Apple Developer
————————正文分割線————————
一、尺?寸
在縱向方向上，iPhone X上的顯示屏的寬度與iPhone 6，iPhone 7和iPhone 8的4.7英寸顯示屏的寬度相匹配。然而，iPhone X上的顯示屏比4.7英寸顯示屏高145pt，大約20％的內(nèi)容垂直空間。
屏幕分辨率 1125 x 2436px（375pt×812pt @3x）
所以從頁面視覺來看，我們依然采用老辦法，從2x的iPhone7做為基準(zhǔn)去做一稿設(shè)計，唯一變化的是可能我們需要采用更高的導(dǎo)航欄，更高的底部標(biāo)簽欄。所以，iPhone X將延用@3x，不會采用@4x！
二、布 局
在設(shè)計iPhone X的界面時，您必須確保布局填滿屏幕，并且不會被設(shè)備的圓角，傳感器外殼或被主屏幕的指示燈遮蔽。
iPhone X 屏幕底部任意位置上滑可以返回主屏或者進(jìn)入任務(wù)切換界面，屏幕底部有一個home指示器固定顯示在app上層。
大部分使用系統(tǒng)提供的標(biāo)準(zhǔn)UI元素（如導(dǎo)航欄）的APP會自動適應(yīng)iPhone X！Navigation bar、tab bar和tool bar會擴(kuò)展到屏幕頂部和底部弧形區(qū)域。
左圖：4.7英寸iPhone? 右圖：iPhone X
水平布局時，table view全屏顯示，內(nèi)容只在中間安全區(qū)顯示，iOS 11新增了一種布局叫做「Safe Area layout guide」。（下圖藍(lán)色+紅色區(qū)域是安全區(qū)域，紅色是margin，注意水平布局時不顯示狀態(tài)欄，安全區(qū)底部仍然要留出home指示器的位置）
如果app使用自定義控件或非標(biāo)準(zhǔn)布局，要在iPhone X上運(yùn)行良好需要一點(diǎn)修改。
1、全屏顯示
iPhone X和4.7寸iPhone屏幕長寬比不同，提供 Fill 和 Fit 2種圖片縮放方式。
2、重新設(shè)置關(guān)鍵交互和關(guān)鍵信息的位置。
交互元素不要靠近角落（發(fā)現(xiàn)大量我比蘋果設(shè)計師聰明系列）
屏幕邊緣的視覺元素要移動位置，部分情況下要重新設(shè)計。
iPhone X 狀態(tài)欄高度更高，在電話和定位等后臺任務(wù)時，高度不會變化（就是打電話和導(dǎo)航時，原先頂部增加的彩色帶，現(xiàn)在變成時間信息底部的彩色氣泡，見下圖）
水平布局時，交互元素兩側(cè)距離相等，左側(cè)右側(cè)旋轉(zhuǎn)時位置固定，方便用戶記憶。
最后，底部指示器是系統(tǒng)的核心交互，會強(qiáng)制顯示，針對淺色和深色背景會改變顏色。
底部按鈕要避開home指示器，home指示器不需要特殊強(qiáng)調(diào)（不要duang?。?/p>
應(yīng)用可以打開edge protection（邊緣保護(hù)？），第1次操作拉出home指示器，第2次退出應(yīng)用。
在底部的點(diǎn)擊操作不會觸發(fā)home指示器，即使app內(nèi)容在指示器下層，也可以被點(diǎn)擊。
全屏模式時指示器自動隱藏，觸摸屏幕可以顯示。
在使用圖片時，請注意長寬比差異。iPhone X具有不同于其它iPhone的長寬比，因此，全屏其它iPhone圖片在iPhone X上全屏顯示時會出現(xiàn)裁剪。同樣，全屏iPhone X圖片在其它iPhone也會出現(xiàn)裁剪，所以請注意兩種設(shè)備適配。
還有要注意不要將交互控件放置在屏幕底部和角落。因?yàn)檫@些區(qū)域是用戶不好操作的位置，或者操作起來不舒服！
三、圖 標(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)使用平鋪色代表激活。
四、配 色
iPhone X上的顯示器支持P3色彩空間，可以產(chǎn)生比sRGB更豐富，更飽和的顏色。使照片和視頻的顏色更加逼真，增強(qiáng)視覺體驗(yàn)！
