蘋果近日發(fā)布了全新的iPhone X全面屏手機(jī)，這也是首款采用OLED屏幕的iPhone手機(jī)，它的正面設(shè)計(jì)被更多人吐槽，之前被戲稱為“劉?！钡陌疾郜F(xiàn)在有了更多其他名稱，“眉毛”、“頭簾”等等。對于用戶而言，iPhone X 的劉海可能是讓人又愛又恨的設(shè)計(jì)。
愛的是，這一劉海像司馬昭之心一樣傳達(dá)著「我在使用 iPhone X」這一個事實(shí)，正如 iPhone 7 的亮黑色一般。當(dāng)然，包括 Face ID 以及 Animoji 等在內(nèi)的新穎功能也會讓人愛不釋手。恨的原因，也很明顯，這個劉海讓屏幕不再方正圓潤，就像一塊膏藥般永遠(yuǎn)的貼在你的屏幕上?？匆曨l、看照片亦或其他，當(dāng)你使用大部分應(yīng)用時，它可能都會很顯眼。
這幾天被iPhone X一頓刷屏，標(biāo)題寫著“iPhone X 適配、指南、設(shè)計(jì)稿” 內(nèi)容卻是發(fā)布會回顧和手機(jī)介紹。索性自己去官網(wǎng)找素材寫一篇只針對iPhone X適配的貼子，與設(shè)計(jì)圖無關(guān)的內(nèi)容通通不提，開始。
發(fā)布的iPhone 8屬于常規(guī)升級，屏幕與以往的iPhone6、6S、7系列相同。在發(fā)布的新機(jī)中，只有iPhone X的分辨率發(fā)生了變化，但變化僅限于物理像素層面。在真正決定屏幕內(nèi)容的邏輯像素層面，新版的iPhone X與過去我們熟知的iPhone 4.7''、iPhone 5.5'' 放大模式寬度相同。通俗的說，iPhone X可看做是iPhone 4.7'' 的加長版
然而，事情并不是設(shè)計(jì)圖加長這么簡單。
過去，我們拿到的手機(jī)是方方正正的矩形，所以整個屏幕都可以看做是安全區(qū)域Safe Area，而如今由于iPhone X屏幕上的“劉?！币约捌聊凰闹懿捎脠A角的設(shè)計(jì)，對于開發(fā)者和設(shè)計(jì)師來說，這個劉海帶給他們的是更多的麻煩。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è)備適配。
參考iOS 原生應(yīng)用可看出 Apple 的意思：劉海上下不要放任何內(nèi)容。
大部分使用系統(tǒng)提供的標(biāo)準(zhǔn)UI元素（如導(dǎo)航欄）的APP會自動適應(yīng)iPhone X！Navigation bar、tab bar和tool bar會擴(kuò)展到屏幕頂部和底部弧形區(qū)域。如果app使用自定義控件或非標(biāo)準(zhǔn)布局，要在iPhone X上運(yùn)行良好需要一點(diǎn)修改。
蘋果給出的安全區(qū)域如下
頁面內(nèi)容不能超出安全區(qū)域（Safe Area）
避免將觸發(fā)交互行為的按鈕放在屏幕的底部，人們會在屏幕底端使用手勢進(jìn)入主屏或切換應(yīng)用。（底部橫條是Home鍵）
iPhone X 狀態(tài)欄高度更高，在電話和定位等后臺任務(wù)時，高度不會變化（就是打電話和導(dǎo)航時，原先頂部增加的彩色帶，現(xiàn)在變成時間信息底部的彩色氣泡，見下圖）
避免將觸發(fā)交互行為的按鈕放在屏幕的角落中。人們會在屏幕底端使用手勢進(jìn)入主屏或切換應(yīng)用。這些系統(tǒng)的全局操作優(yōu)先于App的操作。如果把功能放在角落里，用戶操作起來也很費(fèi)勁，盡量在用戶手指可及區(qū)域內(nèi)設(shè)計(jì)功能
作為去除實(shí)體Home按鍵后的衍生物，底部將出現(xiàn)一個虛擬的Home指示條，用以實(shí)現(xiàn)常用的交互功能，鎖屏狀態(tài)下向上滑動解鎖，應(yīng)用內(nèi)向上滑動回到主屏，向上滑動并停止片刻進(jìn)入多任務(wù)切換窗口，虛擬Home指示條大多數(shù)情況下將會存在于屏幕的下方，而這個虛擬Home指示條只有黑、白兩種顏色。
在底部有導(dǎo)航欄的app中，將會形成屏幕內(nèi)的雙下巴，部分應(yīng)用如果具備從底部上滑的操作，為了和底部上滑回到主屏相區(qū)分，蘋果提供了一個邊緣保護(hù)的方案，第一次上滑是喚醒Home指示條，第二次才會激活原功能。而對于最受關(guān)注的全屏狀態(tài)，虛擬Home指示條則會自動隱藏，不過尷尬的是，如果這時候是橫屏狀態(tài)，虛擬Home指示條也會跟隨轉(zhuǎn)動，而安卓虛擬按鍵則會始終存在于屏幕下方。全屏狀態(tài)下點(diǎn)擊屏幕后，虛擬Home指示條才會顯示。
本文以翻譯《designing for iPhone X》為主，借鑒參考文獻(xiàn)并結(jié)和自己的工作經(jīng)驗(yàn)整理而來，僅供各位設(shè)計(jì)師工作參考，非商業(yè)用途，對文中有爭議或侵權(quán)行為，請及時聯(lián)系我調(diào)整。謝謝你們的閱讀！
聯(lián)系客服
