文章開頭：本文是SKYUI發(fā)表在產(chǎn)品壹佰的文章（http://www.chanpin100.com/article/105037）轉(zhuǎn)載文章僅供大家習(xí)，不作任何商業(yè)用途。
設(shè)計師如何打造完美的iPhone X 人機(jī)交互體驗(yàn)爪膊？
iPhone X采用超視網(wǎng)膜高清顯示屏，顯示屏采用曲線優(yōu)美的圓角設(shè)計。提供一個身臨其境的邊緣顯示，豐富的內(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有一個為@ 3x的高分辨率顯示。對于符號和其他平面喷舀，矢量圖形，最好提供獨(dú)立的PDF格式淋肾。對于柵格化的原圖硫麻，要提供@ 3x和@ 2x版本的原圖。查看圖像大小樊卓、分辨率和自定義圖標(biāo)拿愧。
布局
在用iPhone X設(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）自動適應(yīng)設(shè)備的新形式元素待诅。背景元素延伸到顯示屏的邊緣，界面元素也被嵌入在相應(yīng)的位置熊镣。
對于有自定義布局的APP卑雁，支持iPhone X也相對簡單，尤其在APP使用自動布局且遵守安全區(qū)域和邊距布局指南的情況下绪囱。
在iPhone X上預(yù)覽你的APP测蹲。可以使用模擬器(Xcode)來預(yù)覽你的APP，剪裁檢查和其他布局問題鬼吵。如色彩豐富的圖像等一些功能扣甲，最好是在實(shí)際iPhone X設(shè)備上預(yù)覽。
提供全屏體驗(yàn)齿椅。背景延伸到顯示屏的邊緣琉挖，垂直滾動布局，表單（tables）和集合（collections）就會一直滾動到底部媒咳。
防止重要的內(nèi)容在安全區(qū)域（safe area）以外被剪裁粹排。一般來說，內(nèi)容應(yīng)該以中心對稱的方式涩澡，這樣在任何方向上看起來都很好顽耳，且不會被圓角（rounded corners）或頭部傳感器區(qū)（sensor housing）遮蓋，也不會被訪問主屏幕的指示器所（?the indicator for accessing the Home screen）遮擋妙同。為了達(dá)到最佳效果射富，使用系統(tǒng)提供的標(biāo)準(zhǔn)界面元素和自動布局來構(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è)置了一個固定的狀態(tài)欄高度赠群，你必須根據(jù)用戶的設(shè)備更新APP的動態(tài)地定位內(nèi)容。注意：iPhone X的狀態(tài)欄在語音記錄和位置跟蹤等后臺任務(wù)很活躍時旱幼，是不會改變高度查描。
如果APP的狀態(tài)欄目前隱藏了，重新考慮iPhone x上的顯示。高顯示屏的iPhone?X相比4.7英寸iPhone冬三，為屏幕內(nèi)容提供了更多的垂直空間匀油。因?yàn)闋顟B(tài)欄占據(jù)了屏幕的一個區(qū)域，所以APP可能不會被充分利用勾笆。相同的敌蚜，狀態(tài)欄也顯示了對人們有用的的信息。只有當(dāng)為用戶提供更多價值時匠襟，才考慮隱藏狀態(tài)欄钝侠。
當(dāng)重新使用已有的圖片資源時，要注意長寬比的差異酸舍。iPhone X的屏幕比例不同于4.7英寸的iPhone帅韧。因此，當(dāng)在iPhone X上全屏顯示時啃勉，4.7英寸iPhone全屏原圖會出現(xiàn)裁剪或留出白邊（letterboxed）的情況忽舟；同樣，當(dāng)在4.7英寸的iPhone上全屏顯示時淮阐，iPhone X屏幕上的原圖會出現(xiàn)了裁剪或留出白邊（pillarboxed）的情況叮阅。確保重要的視覺內(nèi)容在兩種顯示屏的尺寸上都能顯示。
避免在屏幕底部和圓角區(qū)里放置交互控件泣特。人們在顯示器的底部使用滑動手勢來訪問主屏幕和多任務(wù)視圖浩姥，這些手勢會取消你在這一區(qū)域所執(zhí)行的自定義手勢。將交互行為放在圓角（rounded corners）里状您，人們操作起來會很困難勒叠，盡可能的將這些操作放在用戶手指可及的區(qū)域里。
對關(guān)鍵顯示功能不要特別隱藏或發(fā)起特別注意膏孟。不要試圖通過在屏幕頂端和底端放置的黑色菜單欄隱藏設(shè)備的圓角（rounded corners）眯分、頭部傳感器（sensor housing）或主屏幕的指示器（?the indicator for accessing the Home screen）。不要使用像括號柒桑、邊框弊决、圖形或指導(dǎo)文本之類的視覺裝飾來著重顯示這些區(qū)域。
允許自動隱藏指示器魁淳，以便更容易訪問主屏幕飘诗。當(dāng)啟用自動隱藏時，如果用戶幾秒鐘沒有接觸屏幕界逛，指示器就會逐漸消失昆稿。當(dāng)用戶再次觸摸屏幕時，它會重新出現(xiàn)仇奶。如果不是特別需要沉浸式體驗(yàn)的界面貌嫡，在看視頻、圖片幻燈片時该溯，建議不要隱藏狀態(tài)欄岛抄。
顏色
iPhone X上的顯示支持P3色彩空間，它可以產(chǎn)生比sRGB更豐富狈茉、更飽和的顏色夫椭。
使用廣色域顯示增強(qiáng)視覺體驗(yàn)。使用廣色域顯示的照片和視頻更逼真氯庆，對視覺數(shù)據(jù)和狀態(tài)指示器更有影響力蹭秋。
手勢
iPhone X的顯示屏使用屏幕邊緣手勢對主屏幕、多任務(wù)視圖堤撵、通知中心和控制中心進(jìn)行訪問仁讨。
避免屏幕邊緣手勢系統(tǒng)的干擾。人們依靠這些手勢在每個APP上工作实昨。在極少數(shù)情況下洞豁，像游戲這樣的沉浸式的應(yīng)用程序可能需要定制的屏幕邊緣手勢，以優(yōu)先于系統(tǒng)的手勢——第一次滑動喚起特定應(yīng)用程序的手勢荒给，第二次滑動喚起系統(tǒng)手勢丈挟。這一行為(稱為邊緣保護(hù))應(yīng)該要較少執(zhí)行，因?yàn)檫@使得系統(tǒng)級操作變得棘手志电。
其他的設(shè)計考慮
準(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上，表情符號或切換語言按鈕和語音按鈕自動出現(xiàn)在鍵盤下方蚀乔，即使是在使用自定義鍵盤時烁竭。應(yīng)用程序不能影響這些按鈕，避免在鍵盤上重復(fù)這些按鈕造成混亂吉挣。
文章結(jié)尾：再次申明所有轉(zhuǎn)載文章僅供學(xué)習(xí)派撕，感謝SKYUI老師的分享，如果喜歡我的文章點(diǎn)關(guān)注??吧睬魂！比心呦终吼！
