UI 設(shè)計在 iPhone X 上的變化，一圖勝千言：
解開工程項目中的 Safe Area 約束，根據(jù)官方?Human Interface Guidelines 稍作調(diào)整碳柱，大部分的界面適配都沒有疑問捡絮。然而 80% 的時間總是花在 20% 不確定的地方上，這篇文章試圖探討一下適配過程中可能遇到的疑難莲镣。
底部按鈕和 toolbar
由于屏幕底部多出 Home Indicator福稳，如果界面中的按鈕或 toolbar 元素原先在底部，為了不與 Home Indicator 沖突瑞侮，需要作出處理的圆。如果是獨立成塊狀的按鈕，類似系統(tǒng)原生的 Action Sheet 的視覺樣式（下圖左）半火，將按鈕整體上移即可越妈。
但如果是緊貼屏幕邊緣的按鈕（下圖右），出于對「菲茲定律」的考慮钮糖，這時不應(yīng)該簡單將按鈕上移梅掠，而是同時增加按鈕的面積和熱區(qū)，使得按鈕依然緊貼屏幕底部店归、用戶點擊屏幕邊緣的時候依然對按鈕起作用阎抒。這取決于按鈕的視覺效果。
這有一些特殊情況且叁，有時底欄會使用到主題色的色塊按鈕，它很引人矚目秩伞，如果僅僅將底欄整體上移（下圖左）逞带，不符合剛才提及的交互法則；如果單獨擴(kuò)大主題色按鈕的面積和熱區(qū)（下圖中）纱新，視覺效果又讓我們難以接受掰担；這時把按鈕改為獨立的塊狀樣式（下圖右），或許是更好的選擇怒炸。
甚至事后諸葛亮地猜測一下阅羹，iOS 11 的某些風(fēng)格轉(zhuǎn)變，是不是也有這方面的考慮教寂？
Status bar
If your app currently hides the status bar, reconsider that decision for iPhone X.
如果你們的 App 現(xiàn)在隱藏了 status bar导梆，那么請在 iPhone X 上重新考慮一下這個決定吧。
經(jīng)常見到隱藏 status bar，或把?status bar 底色設(shè)置為透明看尼、和內(nèi)容重合的設(shè)計（一般是焦點圖）递鹉，這可以換來不錯的視覺效果，但在 iPhone X 上可能會讓內(nèi)容被遮擋藏斩，這會是個潛在的問題躏结。
如果圖片由設(shè)計師制作或運營人員上傳，只需要制商量好圖片規(guī)范即可狰域，畢竟最終效果還在把控之中媳拴。但如果用戶可以自由上傳圖片、效果不可控制兆览，這或許就需要將內(nèi)容移到 status bar 下方屈溉，或者增大圖片區(qū)的高度、盡量減少這種情況的發(fā)生抬探。
底部進(jìn)度條
依然是與 Safe Area 相關(guān)的元素子巾，一些閱讀類 app 會在頂部或底部顯示有進(jìn)度條，既體現(xiàn)了閱讀進(jìn)度驶睦，又不會干擾到閱讀砰左。但現(xiàn)在，這會被屏幕倒角所遮擋场航，也需要重新考慮了缠导。
簡單將進(jìn)度條上移，雖然可以避免遮擋的問題溉痢，但視覺效果不盡人意僻造。或許可以換一種形式孩饼，用百分比數(shù)字來代替進(jìn)度條髓削，保證沉浸的閱讀。
最后別忘了新增開屏圖的尺寸
開屏是國內(nèi) App 常見的廣告形式镀娶。由于屏幕寬高比從 16:9 增大到接近 20:9立膛，比例懸殊，如果共用同一套素材梯码、使用居中裁切的方式宝泵，左右兩側(cè)會被裁切掉不少。如果要求素材在制作的時候預(yù)留出安全區(qū)域轩娶，不僅安全區(qū)域需要定得很大儿奶、增加了設(shè)計的難度，且效果兩邊不討好鳄抒。
這不僅是 iPhone X 上會遇到闯捎，隨著全面屏的趨勢椰弊，很快，普遍手機(jī)的屏幕寬高比也會提高瓤鼻。建議新增一種針對全面屏的尺寸秉版，按屏幕寬高比來調(diào)取不同尺寸的圖片資源。
