文章開頭：本文是SKYUI發(fā)表在產(chǎn)品壹佰的文章（http://www.chanpin100.com/article/105037）轉(zhuǎn)載文章僅供大家習(xí)，不作任何商業(yè)用途。
設(shè)計(jì)師如何打造完美的iPhone X 人機(jī)交互體驗(yàn)？
iPhone X采用超視網(wǎng)膜高清顯示屏，顯示屏采用曲線優(yōu)美的圓角設(shè)計(jì)。提供一個(gè)身臨其境的邊緣顯示，豐富的內(nèi)容體驗(yàn)是前所未有。
屏幕尺寸
在人像定位中，iPhone X上顯示的寬度與iPhone 6、iPhone 7和iPhone 8”的4.7英寸寬度相匹配。但iPhone X上的顯示比4.7英寸顯示高145pt，這給iPhone X的屏幕內(nèi)容增加了大約20%的垂直空間。
豎直尺寸 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 水平尺寸
1125 x 2436 像素分辨率（375pt x 812pt @3x） ? ? ? ? ? ?2436 x 1125 像素分辨率（812pt x 375pt @3x）
在APP中為所有原圖提供高分辨率的圖片。iPhone X有一個(gè)為@ 3x的高分辨率顯示。對于符號和其他平面，矢量圖形，最好提供獨(dú)立的PDF格式。對于柵格化的原圖，要提供@ 3x和@ 2x版本的原圖。查看圖像大小、分辨率和自定義圖標(biāo)。
布局
在用iPhone X設(shè)計(jì)時(shí)，必須確保布局全部填充在屏幕中，且沒有被圓角（rounded corners）、頭部傳感器（sensor housing）或訪問主屏幕的指示器遮蓋（?the indicator for accessing the Home screen）。
大多數(shù)的APP都使用的是由系統(tǒng)提供的標(biāo)準(zhǔn)界面元素，如導(dǎo)航欄（navigation bars）、表單（tables）和集合（collections）自動(dòng)適應(yīng)設(shè)備的新形式元素。背景元素延伸到顯示屏的邊緣，界面元素也被嵌入在相應(yīng)的位置。
對于有自定義布局的APP，支持iPhone X也相對簡單，尤其在APP使用自動(dòng)布局且遵守安全區(qū)域和邊距布局指南的情況下。
在iPhone X上預(yù)覽你的APP。可以使用模擬器(Xcode)來預(yù)覽你的APP，剪裁檢查和其他布局問題。如色彩豐富的圖像等一些功能，最好是在實(shí)際iPhone X設(shè)備上預(yù)覽。
提供全屏體驗(yàn)。背景延伸到顯示屏的邊緣，垂直滾動(dòng)布局，表單（tables）和集合（collections）就會(huì)一直滾動(dòng)到底部。
防止重要的內(nèi)容在安全區(qū)域（safe area）以外被剪裁。一般來說，內(nèi)容應(yīng)該以中心對稱的方式，這樣在任何方向上看起來都很好，且不會(huì)被圓角（rounded corners）或頭部傳感器區(qū)（sensor housing）遮蓋，也不會(huì)被訪問主屏幕的指示器所（?the indicator for accessing the Home screen）遮擋。為了達(dá)到最佳效果，使用系統(tǒng)提供的標(biāo)準(zhǔn)界面元素和自動(dòng)布局來構(gòu)造你的界面。所有APP都應(yīng)該遵循程序定義的安全區(qū)域和布局邊界，基于設(shè)備和環(huán)境的適當(dāng)?shù)脑O(shè)置。安全區(qū)域還可以防止內(nèi)容被狀態(tài)欄、導(dǎo)航欄、工具欄和選項(xiàng)卡欄覆蓋。
注意狀態(tài)欄的高度。iPhone X上的狀態(tài)欄比其他iPhone上要高。如果你的APP在狀態(tài)欄下設(shè)置了一個(gè)固定的狀態(tài)欄高度，你必須根據(jù)用戶的設(shè)備更新APP的動(dòng)態(tài)地定位內(nèi)容。注意：iPhone X的狀態(tài)欄在語音記錄和位置跟蹤等后臺任務(wù)很活躍時(shí)，是不會(huì)改變高度。
如果APP的狀態(tài)欄目前隱藏了，重新考慮iPhone x上的顯示。高顯示屏的iPhone?X相比4.7英寸iPhone，為屏幕內(nèi)容提供了更多的垂直空間。因?yàn)闋顟B(tài)欄占據(jù)了屏幕的一個(gè)區(qū)域，所以APP可能不會(huì)被充分利用。相同的，狀態(tài)欄也顯示了對人們有用的的信息。只有當(dāng)為用戶提供更多價(jià)值時(shí)，才考慮隱藏狀態(tài)欄。
當(dāng)重新使用已有的圖片資源時(shí)，要注意長寬比的差異。iPhone X的屏幕比例不同于4.7英寸的iPhone。因此，當(dāng)在iPhone X上全屏顯示時(shí)，4.7英寸iPhone全屏原圖會(huì)出現(xiàn)裁剪或留出白邊（letterboxed）的情況；同樣，當(dāng)在4.7英寸的iPhone上全屏顯示時(shí)，iPhone X屏幕上的原圖會(huì)出現(xiàn)了裁剪或留出白邊（pillarboxed）的情況。確保重要的視覺內(nèi)容在兩種顯示屏的尺寸上都能顯示。
避免在屏幕底部和圓角區(qū)里放置交互控件。人們在顯示器的底部使用滑動(dòng)手勢來訪問主屏幕和多任務(wù)視圖，這些手勢會(huì)取消你在這一區(qū)域所執(zhí)行的自定義手勢。將交互行為放在圓角（rounded corners）里，人們操作起來會(huì)很困難，盡可能的將這些操作放在用戶手指可及的區(qū)域里。
對關(guān)鍵顯示功能不要特別隱藏或發(fā)起特別注意。不要試圖通過在屏幕頂端和底端放置的黑色菜單欄隱藏設(shè)備的圓角（rounded corners）、頭部傳感器（sensor housing）或主屏幕的指示器（?the indicator for accessing the Home screen）。不要使用像括號、邊框、圖形或指導(dǎo)文本之類的視覺裝飾來著重顯示這些區(qū)域。
允許自動(dòng)隱藏指示器，以便更容易訪問主屏幕。當(dāng)啟用自動(dòng)隱藏時(shí)，如果用戶幾秒鐘沒有接觸屏幕，指示器就會(huì)逐漸消失。當(dāng)用戶再次觸摸屏幕時(shí)，它會(huì)重新出現(xiàn)。如果不是特別需要沉浸式體驗(yàn)的界面，在看視頻、圖片幻燈片時(shí)，建議不要隱藏狀態(tài)欄。
顏色
iPhone X上的顯示支持P3色彩空間，它可以產(chǎn)生比sRGB更豐富、更飽和的顏色。
使用廣色域顯示增強(qiáng)視覺體驗(yàn)。使用廣色域顯示的照片和視頻更逼真，對視覺數(shù)據(jù)和狀態(tài)指示器更有影響力。
手勢
iPhone X的顯示屏使用屏幕邊緣手勢對主屏幕、多任務(wù)視圖、通知中心和控制中心進(jìn)行訪問。
避免屏幕邊緣手勢系統(tǒng)的干擾。人們依靠這些手勢在每個(gè)APP上工作。在極少數(shù)情況下，像游戲這樣的沉浸式的應(yīng)用程序可能需要定制的屏幕邊緣手勢，以優(yōu)先于系統(tǒng)的手勢——第一次滑動(dòng)喚起特定應(yīng)用程序的手勢，第二次滑動(dòng)喚起系統(tǒng)手勢。這一行為(稱為邊緣保護(hù))應(yīng)該要較少執(zhí)行，因?yàn)檫@使得系統(tǒng)級操作變得棘手。
其他的設(shè)計(jì)考慮
準(zhǔn)確調(diào)用身份驗(yàn)證方式。iPhone X支持人臉身份驗(yàn)證。如果你的應(yīng)用程序整合了Apple Pay或其他系統(tǒng)身份認(rèn)證功能，不要在iPhone X上調(diào)用Touch ID，同樣，要確保你的應(yīng)用程序沒有在支持Touch ID的設(shè)備上調(diào)用Face ID。
不要復(fù)制系統(tǒng)提供的鍵盤功能。在iPhone X上，表情符號或切換語言按鈕和語音按鈕自動(dòng)出現(xiàn)在鍵盤下方，即使是在使用自定義鍵盤時(shí)。應(yīng)用程序不能影響這些按鈕，避免在鍵盤上重復(fù)這些按鈕造成混亂。
文章結(jié)尾：再次申明所有轉(zhuǎn)載文章僅供學(xué)習(xí)，感謝SKYUI老師的分享，如果喜歡我的文章點(diǎn)關(guān)注??吧！比心呦！
