快兩個月沒上簡書了适秩,一直都很忙斋配,完全沒時間呀;就在今天凌晨寄悯,蘋果發(fā)布了帶劉海的 iPhone X萤衰,這個屏幕需要 iOS 開發(fā)者做新的適配,會后蘋果發(fā)布了 iPhone X 的適配指南猜旬,翻譯出來供大家參考脆栋。
iPhone X
iPhone X 擁有一個寬大的、高分辨率洒擦、圓角的椿争、擴(kuò)展到邊緣的屏幕,提供了以前從未有過的沉浸式熟嫩、內(nèi)容豐富的體驗秦踪。
屏幕尺寸
在縱向方向上,iPhone X 顯示屏的寬度與 iPhone6掸茅,iPhone 7 和 iPhone8 的 4.7 英寸的顯示屏寬度相同椅邓。然而,iPhone X 上的屏幕比 4.7 英寸顯示屏高 145pt昧狮,導(dǎo)致多出了大約 20%的垂直高度景馁。
豎屏尺寸:1125px × 2436px(375pt × 812pt @3x)
橫屏尺寸:2436px × 1125px(812pt × 375pt @3x)
為您的應(yīng)用程序中的所有圖稿提供高分辨率圖像。iPhone X 具有比例因子為 @3x 的高分辨率逗鸣。對于字形和其他平面的矢量圖形合住,最好提供與分辨率無關(guān)的 PDF 格式。對于光柵化圖稿撒璧,您可以提供 @3x 和 @2x 版本的作品透葛。請參閱 圖像大小和分辨率 和 自定義圖標(biāo)。
布局
在 iPhone X 中設(shè)計時沪悲,您必須確保布局填滿屏幕获洲,并且不會被設(shè)備的圓角、傳感器外殼或用于訪問主屏幕的指示燈遮蔽殿如。
大多數(shù)使用標(biāo)準(zhǔn)系統(tǒng)提供的 UI 元素(如導(dǎo)航欄、表格和集合)的應(yīng)用程序會自動適應(yīng)設(shè)備的新外形最爬。背景材料延伸到屏幕的邊緣涉馁,并且 UI 元件被適當(dāng)?shù)夭迦牒投ㄎ弧?/p>
對于具有自定義布局的應(yīng)用程序,支持 iPhone X 也應(yīng)該比較容易爱致,特別是如果您的應(yīng)用程序使用 Auto Layout 并遵守安全區(qū)域和邊距布局指南烤送。
在 iPhone X 上預(yù)覽您的應(yīng)用程序。您可以使用 Simulator(附帶 Xcode)來預(yù)覽應(yīng)用程序糠悯,并檢查剪輯和其他布局問題帮坚。如寬彩色圖像這樣的屬性妻往,最好在設(shè)備上預(yù)覽。
提供全屏體驗试和。確保背景延伸到屏幕的邊緣讯泣,并且垂直可滾動的布局(如表格和集合)一直延續(xù)到底部。
插入必要內(nèi)容以防止裁剪阅悍。一般來說好渠,內(nèi)容應(yīng)該是居中對稱的,所以它在任何方向看起來都很棒节视,不會被角落或設(shè)備的傳感器外殼裁剪拳锚,或被訪問主屏幕的指示器遮擋。 為獲得最佳效果寻行,請使用標(biāo)準(zhǔn)的系統(tǒng)提供的界面元素和 Auto Layout 構(gòu)建您的界面霍掺。所有應(yīng)用程序都應(yīng)遵循 UIKit 定義的安全區(qū)域和布局邊距,這些區(qū)域可以根據(jù)設(shè)備和上下文進(jìn)行適當(dāng)?shù)奶畛浒柚0踩珔^(qū)域還可以防止內(nèi)容覆蓋狀態(tài)欄杆烁、導(dǎo)航欄、工具欄和標(biāo)簽欄拦坠。
注意狀態(tài)欄的高度连躏。狀態(tài)欄在 iPhone X 上比在其他 iPhone 上更高。如果您的應(yīng)用程序的固定狀態(tài)欄高度在狀態(tài)欄的下方贞滨,則您必須更新您的應(yīng)用程序入热,才能根據(jù)用戶的設(shè)備動態(tài)定位內(nèi)容。請注意晓铆,當(dāng)背景任務(wù)(如錄音和位置跟蹤)處于活動狀態(tài)時勺良,iPhoneX 上的狀態(tài)欄不會改變高度。
如果您的應(yīng)用程序目前隱藏狀態(tài)欄骄噪,請重新考慮 iPhone X 上的決定尚困。iPhone 上的顯示高度為 4.7 英寸,iPhone 的顯示屏提供了更多的垂直空間內(nèi)容链蕊,狀態(tài)欄占據(jù)了您應(yīng)用程序本可能贏得的屏幕區(qū)域事甜,狀態(tài)欄還顯示了人們發(fā)現(xiàn)的有用的信息,只有在交換附加值時候才能被隱藏滔韵。
在重復(fù)使用現(xiàn)有圖稿時逻谦,請注意長寬比差異。iPhone X 具有不同于 4.7 英寸 iPhone 的長寬比陪蜻,因此邦马,全屏 4.7 英寸 iPhone 圖形在 iPhone X 上全屏顯示時出現(xiàn)裁剪或 letterboxed。同樣,全屏 iPhone X 圖稿在顯示時被裁剪或被添加黑邊滋将。 全屏顯示在 4.7 英寸 iPhone 上邻悬,確保重要的視覺內(nèi)容保持在兩種顯示尺寸上。
避免將交互式控件放置在屏幕最底部和角落里随闽。人們使用顯示屏底部的滑動手勢訪問主屏幕和應(yīng)用程序切換器父丰,這些手勢可能會取消您在此區(qū)域中實現(xiàn)的自定義手勢。屏幕的兩個角落很難讓人觸及橱脸。
不要遮擋或突出顯示關(guān)鍵的顯示特性础米。請勿嘗試隱藏設(shè)備的圓角、傳感器外殼或通過在屏幕頂部和底部放置黑色條來指示主屏幕的指示器添诉。不要使用像括號屁桑、邊框、形狀或教學(xué)文字等視覺裝飾來讓人注意這些區(qū)域栏赴。
允許自動隱藏虛擬 Home 鍵蘑斧,以便輕松訪問主屏幕。當(dāng)啟用自動隱藏時须眷,如果用戶沒有觸摸屏幕幾秒鐘竖瘾,Home 鍵將自動隱藏。當(dāng)用戶再次觸摸屏幕時花颗,它會重新出現(xiàn)捕传。這種行為應(yīng)該只能用于被動觀看體驗,如播放視頻或幻燈片扩劝。請參閱 適應(yīng)性和布局庸论。
顏色
iPhone X 上的屏幕支持 P3 色彩空間,可以產(chǎn)生比 sRGB 更豐富棒呛,更飽和的顏色聂示。使用多元的顏色來增強視覺體驗。 使用寬顏色的照片和視頻更加逼真簇秒,使用寬色的視覺數(shù)據(jù)和狀態(tài)指示器更有影響力鱼喉。
手勢
iPhone X 上的顯示屏使用屏幕邊緣手勢來訪問主屏幕、應(yīng)用程序切換器趋观、通知中心和控制中心扛禽。避免干擾系統(tǒng)范圍的屏幕邊緣手勢。人們依靠這些手勢在每個應(yīng)用程序中工作皱坛。在極少數(shù)情況下旋圆,像游戲這樣的沉浸式應(yīng)用程序可能需要自定義的屏幕邊緣手勢,優(yōu)先于系統(tǒng)的手勢 - 第一個滑動會調(diào)用特定于應(yīng)用的手勢麸恍,而第二次滑動則會調(diào)用系統(tǒng)手勢。這種行為(稱為邊緣保護(hù))應(yīng)該謹(jǐn)慎實施,因為它使得用戶難以訪問系統(tǒng)級的操作抹沪。
附加設(shè)計注意事項
準(zhǔn)確的參考認(rèn)證方法刻肄。iPhone X 支持 Face ID 進(jìn)行身份驗證。 如果您的應(yīng)用程序與 Apple Pay 或其他系統(tǒng)身份驗證功能集成融欧,請勿在 iPhoneX 上引用 Touch ID敏弃。同樣,請確保您的應(yīng)用程序在支持 Touch ID 的設(shè)備上未引用 Face ID噪馏。
在 iPhone X 上不要重復(fù)系統(tǒng)提供的鍵盤功能麦到。即使用自定義鍵盤,Emoji/Globe 按鈕和 Dictation 按鈕也自動顯示在鍵盤的下方欠肾。您的應(yīng)用程序不能影響這些按鈕瓶颠,因此避免在鍵盤中重復(fù)這些按鈕造成混亂。