前言
???蘋果近日發(fā)布了全新的iPhone X全面屏手機黍檩，這也是首款采用OLED屏幕的iPhone手機叉袍，它的正面設(shè)計被更多人吐槽，之前被戲稱為“劉汗艚矗”的凹槽現(xiàn)在有了更多其他名稱喳逛，“眉毛”、“頭簾”等等棵里。對于用戶而言润文，iPhone X 的劉海可能是讓人又愛又恨的設(shè)計殿怜。
???愛的是典蝌，這一劉海像司馬昭之心一樣傳達著「我在使用 iPhone X」這一個事實，正如 iPhone 7 的亮黑色一般头谜。當(dāng)然骏掀，包括 Face ID 以及 Animoji 等在內(nèi)的新穎功能也會讓人愛不釋手。恨的原因柱告，也很明顯截驮，這個劉海讓屏幕不再方正圓潤，就像一塊膏藥般永遠的貼在你的屏幕上际度〔啻浚看視頻、看照片亦或其他甲脏，當(dāng)你使用大部分應(yīng)用時眶熬，它可能都會很顯眼。
???這幾天被iPhone X一頓刷屏块请，標題寫著“iPhone X 適配娜氏、指南、設(shè)計稿” 內(nèi)容卻是發(fā)布會回顧和手機介紹墩新。索性自己去官網(wǎng)找素材寫一篇只針對iPhone X適配的貼子贸弥，與設(shè)計圖無關(guān)的內(nèi)容通通不提，開始海渊。
一绵疲、設(shè)計尺寸
???發(fā)布的iPhone 8屬于常規(guī)升級，屏幕與以往的iPhone6臣疑、6S盔憨、7系列相同。在發(fā)布的新機中讯沈，只有iPhone X的分辨率發(fā)生了變化郁岩，但變化僅限于物理像素層面。在真正決定屏幕內(nèi)容的邏輯像素層面，新版的iPhone X與過去我們熟知的iPhone 4.7''问慎、iPhone 5.5'' 放大模式寬度相同萍摊。通俗的說，iPhone X可看做是iPhone 4.7'' 的加長版
然而如叼，事情并不是設(shè)計圖加長這么簡單冰木。
二、交互設(shè)計
???過去笼恰，我們拿到的手機是方方正正的矩形踊沸，所以整個屏幕都可以看做是安全區(qū)域Safe Area，而如今由于iPhone X屏幕上的“劉和谘”以及屏幕四周采用圓角的設(shè)計，對于開發(fā)者和設(shè)計師來說练湿，這個劉海帶給他們的是更多的麻煩猴仑。Apple 更新了 Human Interface Guidelines來為開發(fā)者提供適配 iPhone X 指南，從中可以看出肥哎，Apple 希望開發(fā)者將這個劉海毫無遮掩地呈現(xiàn)在 iPhone X 的「腦袋上」辽俗。
???指南一：當(dāng)為 iPhone X 適配應(yīng)用時，請確保布局填充整個屏幕篡诽，同時不被設(shè)備的圓角崖飘、傳感器和下方的 Home 條所遮擋。
???在使用圖片時杈女，請注意長寬比差異朱浴。iPhone X具有不同于其它iPhone的長寬比，因此达椰，全屏其它iPhone圖片在iPhone X上全屏顯示時會出現(xiàn)裁剪翰蠢。同樣，全屏iPhone X圖片在其它iPhone也會出現(xiàn)裁剪啰劲，所以請注意兩種設(shè)備適配梁沧。
???指南二：不要嘗試去隱藏設(shè)備的圓角、劉河悖或 Home 條廷支，比如故意在屏幕頂部和底部使用黑色素材。參考iOS 原生應(yīng)用可看出 Apple 的意思：劉海上下不要放任何內(nèi)容栓辜。
???大部分使用系統(tǒng)提供的標準UI元素（如導(dǎo)航欄）的APP會自動適應(yīng)iPhone X恋拍！Navigation bar、tab bar和tool bar會擴展到屏幕頂部和底部弧形區(qū)域藕甩。如果app使用自定義控件或非標準布局芝囤，要在iPhone X上運行良好需要一點修改。
蘋果給出的安全區(qū)域如下
???iPhone X 狀態(tài)欄高度更高，在電話和定位等后臺任務(wù)時悯姊，高度不會變化（就是打電話和導(dǎo)航時羡藐，原先頂部增加的彩色帶，現(xiàn)在變成時間信息底部的彩色氣泡悯许，見下圖）
???避免將觸發(fā)交互行為的按鈕放在屏幕的底部仆嗦，人們會在屏幕底端使用手勢進入主屏或切換應(yīng)用钱贯。（底部橫條是Home鍵）
???值得注意的是推盛，iPhone X 底部操作欄目進行了細微的放大互婿。除了常見的底部導(dǎo)航欄外缝其，Safari底部操作欄也有放大講完豎屏短绸，再說橫屏俱诸。和豎屏一樣十电，橫屏的內(nèi)容也要放置在Safe Area中
???避免將觸發(fā)交互行為的按鈕放在屏幕的角落中绿鸣。人們會在屏幕底端使用手勢進入主屏或切換應(yīng)用谆棺。這些系統(tǒng)的全局操作優(yōu)先于App的操作栽燕。如果把功能放在角落里，用戶操作起來也很費勁改淑，盡量在用戶手指可及區(qū)域內(nèi)設(shè)計功能
底部虛擬Home指示條
???作為去除實體Home按鍵后的衍生物碍岔，底部將出現(xiàn)一個虛擬的Home指示條，用以實現(xiàn)常用的交互功能朵夏，鎖屏狀態(tài)下向上滑動解鎖蔼啦，應(yīng)用內(nèi)向上滑動回到主屏，向上滑動并停止片刻進入多任務(wù)切換窗口仰猖，虛擬Home指示條大多數(shù)情況下將會存在于屏幕的下方捏肢，而這個虛擬Home指示條只有黑、白兩種顏色饥侵。在底部有導(dǎo)航欄的app中猛计，將會形成屏幕內(nèi)的雙下巴，部分應(yīng)用如果具備從底部上滑的操作爆捞，為了和底部上滑回到主屏相區(qū)分奉瘤，蘋果提供了一個邊緣保護的方案，第一次上滑是喚醒Home指示條煮甥，第二次才會激活原功能盗温。而對于最受關(guān)注的全屏狀態(tài)，虛擬Home指示條則會自動隱藏成肘，不過尷尬的是卖局，如果這時候是橫屏狀態(tài)，虛擬Home指示條也會跟隨轉(zhuǎn)動双霍，而安卓虛擬按鍵則會始終存在于屏幕下方砚偶。全屏狀態(tài)下點擊屏幕后批销，虛擬Home指示條才會顯示。
???最后說下最核心的問題染坯，Safe Area 范圍有多大均芽？比對了官網(wǎng)上所有與iPhone X相關(guān)的界面，可以確定单鹿，Safe Area區(qū)間如下：
???對于習(xí)慣用750x1334作圖的設(shè)計師而言掀宋，iPhone X的到來并不會帶來太大影響，iPhone X與iPhone 4.7’’之間的差異甚至不及當(dāng)年iPhone 4和iPhone 5之間的差異
???對于大多數(shù)采用瀑布流的頁面來說劲妙，僅僅是屏幕高度上的變化，可以無視儒喊。但對于如：新手引導(dǎo)頁镣奋、音樂播放器等需要單屏顯示的界面就需要重新布局。
???由于 iPhone X的屏幕比例發(fā)生變化怀愧，對于長期靠“等比縮放”完成適配的H5活動頁而言也有不小的影響侨颈，需要對頁面結(jié)構(gòu)進行適當(dāng)微調(diào)。如果應(yīng)用程序需要隱藏狀態(tài)欄掸驱，請重新考慮iPhone X上的布局肛搬。iPhone X的顯示高度相對于iPhone 4.7''提供了更多的內(nèi)容高度没佑，狀態(tài)欄和底部可以帶來更多的空間毕贼。但需要就屏幕內(nèi)容進行適當(dāng)?shù)恼{(diào)整。
三蛤奢、圖標設(shè)計
???底部導(dǎo)航欄圖標鬼癣，過去的做法是當(dāng)前激活模塊的圖標為剪影風(fēng)格，其他圖標為線性風(fēng)格啤贩。設(shè)計師需要做兩套圖標待秃。分別是一套剪影，一套線性痹屹。而現(xiàn)在統(tǒng)一為剪影章郁，而當(dāng)前激活模塊的圖標使用平鋪色代表激活。
四志衍、系統(tǒng)色系增強
???iPhone X上的顯示器支持P3色彩空間暖庄，可以產(chǎn)生比sRGB更豐富，更飽和的顏色楼肪。使照片和視頻的顏色更加逼真培廓，增強視覺體驗！
