iPhone X

快兩個(gè)月沒(méi)上簡(jiǎn)書了,一直都很忙,完全沒(méi)時(shí)間呀;就在今天凌晨,蘋果發(fā)布了帶劉海的 iPhone X,這個(gè)屏幕需要 iOS 開(kāi)發(fā)者做新的適配,會(huì)后蘋果發(fā)布了 iPhone X 的適配指南,翻譯出來(lái)供大家參考。

iPhone X

iPhone X 擁有一個(gè)寬大的、高分辨率、圓角的、擴(kuò)展到邊緣的屏幕,提供了以前從未有過(guò)的沉浸式、內(nèi)容豐富的體驗(yàn)。

屏幕尺寸

在縱向方向上,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 的高分辨率。對(duì)于字形和其他平面的矢量圖形,最好提供與分辨率無(wú)關(guān)的 PDF 格式。對(duì)于光柵化圖稿,您可以提供 @3x 和 @2x 版本的作品。請(qǐng)參閱 圖像大小和分辨率 和 自定義圖標(biāo)。

布局

在 iPhone X 中設(shè)計(jì)時(shí),您必須確保布局填滿屏幕,并且不會(huì)被設(shè)備的圓角、傳感器外殼或用于訪問(wèn)主屏幕的指示燈遮蔽。

大多數(shù)使用標(biāo)準(zhǔn)系統(tǒng)提供的 UI 元素(如導(dǎo)航欄、表格和集合)的應(yīng)用程序會(huì)自動(dòng)適應(yīng)設(shè)備的新外形。背景材料延伸到屏幕的邊緣,并且 UI 元件被適當(dāng)?shù)夭迦牒投ㄎ弧?/p>

對(duì)于具有自定義布局的應(yīng)用程序,支持 iPhone X 也應(yīng)該比較容易,特別是如果您的應(yīng)用程序使用 Auto Layout 并遵守安全區(qū)域和邊距布局指南。

在 iPhone X 上預(yù)覽您的應(yīng)用程序。您可以使用 Simulator(附帶 Xcode)來(lái)預(yù)覽應(yīng)用程序,并檢查剪輯和其他布局問(wèn)題。如寬彩色圖像這樣的屬性,最好在設(shè)備上預(yù)覽。

提供全屏體驗(yàn)。確保背景延伸到屏幕的邊緣,并且垂直可滾動(dòng)的布局(如表格和集合)一直延續(xù)到底部。

插入必要內(nèi)容以防止裁剪。一般來(lái)說(shuō),內(nèi)容應(yīng)該是居中對(duì)稱的,所以它在任何方向看起來(lái)都很棒,不會(huì)被角落或設(shè)備的傳感器外殼裁剪,或被訪問(wèn)主屏幕的指示器遮擋。 為獲得最佳效果,請(qǐng)使用標(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è)備動(dòng)態(tài)定位內(nèi)容。請(qǐng)注意,當(dāng)背景任務(wù)(如錄音和位置跟蹤)處于活動(dòng)狀態(tài)時(shí),iPhoneX 上的狀態(tài)欄不會(huì)改變高度。

如果您的應(yīng)用程序目前隱藏狀態(tài)欄,請(qǐng)重新考慮 iPhone X 上的決定。iPhone 上的顯示高度為 4.7 英寸,iPhone 的顯示屏提供了更多的垂直空間內(nèi)容,狀態(tài)欄占據(jù)了您應(yīng)用程序本可能贏得的屏幕區(qū)域,狀態(tài)欄還顯示了人們發(fā)現(xiàn)的有用的信息,只有在交換附加值時(shí)候才能被隱藏。

在重復(fù)使用現(xiàn)有圖稿時(shí),請(qǐng)注意長(zhǎng)寬比差異。iPhone X 具有不同于 4.7 英寸 iPhone 的長(zhǎng)寬比,因此,全屏 4.7 英寸 iPhone 圖形在 iPhone X 上全屏顯示時(shí)出現(xiàn)裁剪或 letterboxed。同樣,全屏 iPhone X 圖稿在顯示時(shí)被裁剪或被添加黑邊。 全屏顯示在 4.7 英寸 iPhone 上,確保重要的視覺(jué)內(nèi)容保持在兩種顯示尺寸上。

避免將交互式控件放置在屏幕最底部和角落里。人們使用顯示屏底部的滑動(dòng)手勢(shì)訪問(wèn)主屏幕和應(yīng)用程序切換器,這些手勢(shì)可能會(huì)取消您在此區(qū)域中實(shí)現(xiàn)的自定義手勢(shì)。屏幕的兩個(gè)角落很難讓人觸及。

不要遮擋或突出顯示關(guān)鍵的顯示特性。請(qǐng)勿嘗試隱藏設(shè)備的圓角、傳感器外殼或通過(guò)在屏幕頂部和底部放置黑色條來(lái)指示主屏幕的指示器。不要使用像括號(hào)、邊框、形狀或教學(xué)文字等視覺(jué)裝飾來(lái)讓人注意這些區(qū)域。

允許自動(dòng)隱藏虛擬 Home 鍵,以便輕松訪問(wèn)主屏幕。當(dāng)啟用自動(dòng)隱藏時(shí),如果用戶沒(méi)有觸摸屏幕幾秒鐘,Home 鍵將自動(dòng)隱藏。當(dāng)用戶再次觸摸屏幕時(shí),它會(huì)重新出現(xiàn)。這種行為應(yīng)該只能用于被動(dòng)觀看體驗(yàn),如播放視頻或幻燈片。請(qǐng)參閱 適應(yīng)性和布局。

顏色

iPhone X 上的屏幕支持 P3 色彩空間,可以產(chǎn)生比 sRGB 更豐富,更飽和的顏色。使用多元的顏色來(lái)增強(qiáng)視覺(jué)體驗(yàn)。 使用寬顏色的照片和視頻更加逼真,使用寬色的視覺(jué)數(shù)據(jù)和狀態(tài)指示器更有影響力。

手勢(shì)

iPhone X 上的顯示屏使用屏幕邊緣手勢(shì)來(lái)訪問(wèn)主屏幕、應(yīng)用程序切換器、通知中心和控制中心。避免干擾系統(tǒng)范圍的屏幕邊緣手勢(shì)。人們依靠這些手勢(shì)在每個(gè)應(yīng)用程序中工作。在極少數(shù)情況下,像游戲這樣的沉浸式應(yīng)用程序可能需要自定義的屏幕邊緣手勢(shì),優(yōu)先于系統(tǒng)的手勢(shì) - 第一個(gè)滑動(dòng)會(huì)調(diào)用特定于應(yīng)用的手勢(shì),而第二次滑動(dòng)則會(huì)調(diào)用系統(tǒng)手勢(shì)。這種行為(稱為邊緣保護(hù))應(yīng)該謹(jǐn)慎實(shí)施,因?yàn)樗沟糜脩綦y以訪問(wèn)系統(tǒng)級(jí)的操作。

附加設(shè)計(jì)注意事項(xiàng)

準(zhǔn)確的參考認(rèn)證方法。iPhone X 支持 Face ID 進(jìn)行身份驗(yàn)證。 如果您的應(yīng)用程序與 Apple Pay 或其他系統(tǒng)身份驗(yàn)證功能集成,請(qǐng)勿在 iPhoneX 上引用 Touch ID。同樣,請(qǐng)確保您的應(yīng)用程序在支持 Touch ID 的設(shè)備上未引用 Face ID。

在 iPhone X 上不要重復(fù)系統(tǒng)提供的鍵盤功能。即使用自定義鍵盤,Emoji/Globe 按鈕和 Dictation 按鈕也自動(dòng)顯示在鍵盤的下方。您的應(yīng)用程序不能影響這些按鈕,因此避免在鍵盤中重復(fù)這些按鈕造成混亂。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容