總結(jié)一下最近超火的iPhoneX設(shè)計(jì)規(guī)范审磁，設(shè)計(jì)師們?cè)锲饋戆桑?br>
內(nèi)容以《designing for iPhone X》視頻為主桃煎，視頻前半部分與新版HIG/Overview/iPhoneX部分內(nèi)容相同辰妙，白色配圖來自HIG蝗岖，黑色配圖來自視頻截圖西土。部分內(nèi)容來自知乎用戶bigyang。
（為方便閱讀捞蚂，以下內(nèi)容文字在前圖片在后）
官方設(shè)計(jì)規(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è)計(jì)扩然，唯一變化的是可能我們需要采用更高的導(dǎo)航欄艘儒，更高的底部標(biāo)簽欄。所以夫偶，iPhone X將延用@3x界睁，不會(huì)采用@4x！
二兵拢、布 局
在設(shè)計(jì)iPhone X的界面時(shí)翻斟，您必須確保布局填滿屏幕，并且不會(huì)被設(shè)備的圓角说铃，傳感器外殼或被主屏幕的指示燈遮蔽访惜。
iPhone X 屏幕底部任意位置上滑可以返回主屏或者進(jìn)入任務(wù)切換界面，屏幕底部有一個(gè)home指示器固定顯示在app上層腻扇。
大部分使用系統(tǒng)提供的標(biāo)準(zhǔn)UI元素（如導(dǎo)航欄）的APP會(huì)自動(dòng)適應(yīng)iPhone X债热！Navigation bar、tab bar和tool bar會(huì)擴(kuò)展到屏幕頂部和底部弧形區(qū)域幼苛。
左圖：4.7英寸iPhone? 右圖：iPhone X
水平布局時(shí)窒篱，table view全屏顯示，內(nèi)容只在中間安全區(qū)顯示蚓峦，iOS 11新增了一種布局叫做「Safe Area layout guide」舌剂。（下圖藍(lán)色+紅色區(qū)域是安全區(qū)域济锄，紅色是margin暑椰，注意水平布局時(shí)不顯示狀態(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è)計(jì)師聰明系列）
屏幕邊緣的視覺元素要移動(dòng)位置监憎，部分情況下要重新設(shè)計(jì)。
iPhone X 狀態(tài)欄高度更高婶溯，在電話和定位等后臺(tái)任務(wù)時(shí)鲸阔，高度不會(huì)變化（就是打電話和導(dǎo)航時(shí)偷霉，原先頂部增加的彩色帶，現(xiàn)在變成時(shí)間信息底部的彩色氣泡褐筛，見下圖）
水平布局時(shí)类少，交互元素兩側(cè)距離相等，左側(cè)右側(cè)旋轉(zhuǎn)時(shí)位置固定渔扎，方便用戶記憶硫狞。
最后，底部指示器是系統(tǒng)的核心交互晃痴，會(huì)強(qiáng)制顯示残吩，針對(duì)淺色和深色背景會(huì)改變顏色。
底部按鈕要避開home指示器倘核，home指示器不需要特殊強(qiáng)調(diào)（不要duangＪ榔省）
應(yīng)用可以打開edge protection（邊緣保護(hù)？）笤虫，第1次操作拉出home指示器旁瘫，第2次退出應(yīng)用。
在底部的點(diǎn)擊操作不會(huì)觸發(fā)home指示器琼蚯，即使app內(nèi)容在指示器下層酬凳，也可以被點(diǎn)擊。
全屏模式時(shí)指示器自動(dòng)隱藏遭庶，觸摸屏幕可以顯示宁仔。
在使用圖片時(shí)，請(qǐng)注意長寬比差異峦睡。iPhone X具有不同于其它iPhone的長寬比翎苫，因此，全屏其它iPhone圖片在iPhone X上全屏顯示時(shí)會(huì)出現(xiàn)裁剪榨了。同樣煎谍，全屏iPhone X圖片在其它iPhone也會(huì)出現(xiàn)裁剪，所以請(qǐng)注意兩種設(shè)備適配龙屉。
還有要注意不要將交互控件放置在屏幕底部和角落呐粘。因?yàn)檫@些區(qū)域是用戶不好操作的位置，或者操作起來不舒服转捕！
三作岖、圖 標(biāo) 設(shè) 計(jì)
底部導(dǎo)航欄圖標(biāo)，過去的做法是當(dāng)前激活模塊的圖標(biāo)為剪影風(fēng)格五芝，其他圖標(biāo)為線性風(fēng)格痘儡。設(shè)計(jì)師需要做兩套圖標(biāo)。分別是一套剪影枢步，一套線性沉删。而現(xiàn)在統(tǒng)一為剪影蓄坏，而當(dāng)前激活模塊的圖標(biāo)使用平鋪色代表激活。
四丑念、配 色
iPhone X上的顯示器支持P3色彩空間涡戳，可以產(chǎn)生比sRGB更豐富，更飽和的顏色脯倚。使照片和視頻的顏色更加逼真渔彰，增強(qiáng)視覺體驗(yàn)！
