總結(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做為基準去做一稿設(shè)計，唯一變化的是可能我們需要采用更高的導(dǎo)航欄冶伞，更高的底部標簽欄新症。所以，iPhone X將延用@3x响禽，不會采用@4x徒爹！
二、布 局
在設(shè)計iPhone X的界面時芋类，您必須確保布局填滿屏幕隆嗅，并且不會被設(shè)備的圓角，傳感器外殼或被主屏幕的指示燈遮蔽侯繁。
iPhone X 屏幕底部任意位置上滑可以返回主屏或者進入任務(wù)切換界面胖喳，屏幕底部有一個home指示器固定顯示在app上層。
大部分使用系統(tǒng)提供的標準UI元素（如導(dǎo)航欄）的APP會自動適應(yīng)iPhone X贮竟！Navigation bar丽焊、tab bar和tool bar會擴展到屏幕頂部和底部弧形區(qū)域。
左圖：4.7英寸iPhone? 右圖：iPhone X
水平布局時咕别，table view全屏顯示技健，內(nèi)容只在中間安全區(qū)顯示，iOS 11新增了一種布局叫做「Safe Area layout guide」惰拱。（下圖藍色+紅色區(qū)域是安全區(qū)域雌贱，紅色是margin，注意水平布局時不顯示狀態(tài)欄，安全區(qū)底部仍然要留出home指示器的位置）
如果app使用自定義控件或非標準布局帽芽，要在iPhone X上運行良好需要一點修改删掀。
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)的核心交互雏吭，會強制顯示，針對淺色和深色背景會改變顏色陪踩。
底部按鈕要避開home指示器杖们，home指示器不需要特殊強調(diào)（不要duang！）
應(yīng)用可以打開edge protection（邊緣保護肩狂？）摘完，第1次操作拉出home指示器，第2次退出應(yīng)用婚温。
在底部的點擊操作不會觸發(fā)home指示器描焰，即使app內(nèi)容在指示器下層，也可以被點擊栅螟。
全屏模式時指示器自動隱藏荆秦，觸摸屏幕可以顯示。
在使用圖片時力图，請注意長寬比差異步绸。iPhone X具有不同于其它iPhone的長寬比，因此吃媒，全屏其它iPhone圖片在iPhone X上全屏顯示時會出現(xiàn)裁剪瓤介。同樣吕喘，全屏iPhone X圖片在其它iPhone也會出現(xiàn)裁剪，所以請注意兩種設(shè)備適配刑桑。
還有要注意不要將交互控件放置在屏幕底部和角落氯质。因為這些區(qū)域是用戶不好操作的位置，或者操作起來不舒服祠斧！
三闻察、圖 標 設(shè) 計
底部導(dǎo)航欄圖標，過去的做法是當前激活模塊的圖標為剪影風格琢锋，其他圖標為線性風格辕漂。設(shè)計師需要做兩套圖標。分別是一套剪影吴超，一套線性钉嘹。而現(xiàn)在統(tǒng)一為剪影，而當前激活模塊的圖標使用平鋪色代表激活鲸阻。
四跋涣、配 色
iPhone X上的顯示器支持P3色彩空間，可以產(chǎn)生比sRGB更豐富鸟悴，更飽和的顏色仆潮。使照片和視頻的顏色更加逼真，增強視覺體驗遣臼！
