iphone X 屏幕適配

1、前言


就在今天(2017年09月13日 )凌晨,蘋果發佈了帶劉海的 iPhone X,這個屏幕需要 iOS 開發者做新的適配,會後蘋果發佈了 iPhone X 的適配指南,我們將它翻譯出來供大家參考。

2、iPhone X


iPhone X 擁有一個寬大的、高分辨率、圓角的、擴展到邊緣的屏幕,提供了以前從未有過的沉浸式、內容豐富的體驗。

iPhone X 的 UI界面適配官方指南!_1.jpeg

1.jpeg (117.22 KB, 下載次數: 5)

下載附件  保存到相冊

6 天前 上傳



3、屏幕尺寸


在縱向方向上,iPhone X 顯示屏的寬度與 iPhone6,iPhone 7 和 iPhone8 的 4.7 英寸的顯示屏寬度相同。然而,iPhone X 上的屏幕比 4.7 英寸顯示屏高 145pt,導致多出了大約 20%的垂直高度。

iPhone X 的 UI界面適配官方指南!_2.jpeg

2.jpeg (21.75 KB, 下載次數: 6)

下載附件  保存到相冊

6 天前 上傳




豎屏尺寸:1125px × 2436px(375pt × 812pt @3x)
橫屏尺寸:2436px × 1125px(812pt × 375pt @3x)

爲您的應用程序中的所有圖稿提供高分辨率圖像。iPhone X 具有比例因子爲 @3x 的高分辨率。對於字形和其他平面的矢量圖形,最好提供與分辨率無關的 PDF 格式。對於光柵化圖稿,您可以提供 @3x 和 @2x 版本的作品。請參閱 圖像大小和分辨率 和 自定義圖標。

4、佈局


在 iPhone X 中設計時,您必須確保佈局填滿屏幕,並且不會被設備的圓角、傳感器外殼或用於訪問主屏幕的指示燈遮蔽。

iPhone X 的 UI界面適配官方指南!_3.jpg

3.jpg (25.2 KB, 下載次數: 6)

下載附件  保存到相冊

6 天前 上傳




大多數使用標準系統提供的 UI 元素(如導航欄、表格和集合)的應用程序會自動適應設備的新外形。背景材料延伸到屏幕的邊緣,並且 UI 元件被適當地插入和定位。

iPhone X 的 UI界面適配官方指南!_5.jpeg

5.jpeg (27.69 KB, 下載次數: 6)

下載附件  保存到相冊

6 天前 上傳


         

iPhone X 的 UI界面適配官方指南!_4.jpeg

4.jpeg (22.46 KB, 下載次數: 6)

下載附件  保存到相冊

6 天前 上傳




對於具有自定義佈局的應用程序,支持 iPhone X 也應該比較容易,特別是如果您的應用程序使用 Auto Layout 並遵守安全區域和邊距佈局指南。

在 iPhone X 上預覽您的應用程序:
您可以使用 Simulator(附帶 Xcode)來預覽應用程序,並檢查剪輯和其他佈局問題。如寬彩色圖像這樣的屬性,最好在設備上預覽。

提供全屏體驗:
確保背景延伸到屏幕的邊緣,並且垂直可滾動的佈局(如表格和集合)一直延續到底部。

iPhone X 的 UI界面適配官方指南!_6.jpeg

6.jpeg (30.86 KB, 下載次數: 4)

下載附件  保存到相冊

6 天前 上傳




插入必要內容以防止裁剪:
一般來說,內容應該是居中對稱的,所以它在任何方向看起來都很棒,不會被角落或設備的傳感器外殼裁剪,或被訪問主屏幕的指示器遮擋。 爲獲得最佳效果,請使用標準的系統提供的界面元素和 Auto Layout 構建您的界面。所有應用程序都應遵循 UIKit 定義的安全區域和佈局邊距,這些區域可以根據設備和上下文進行適當的填充。安全區域還可以防止內容覆蓋狀態欄、導航欄、工具欄和標籤欄。

注意狀態欄的高度:
狀態欄在 iPhone X 上比在其他 iPhone 上更高。如果您的應用程序的固定狀態欄高度在狀態欄的下方,則您必須更新您的應用程序,才能根據用戶的設備動態定位內容。請注意,當背景任務(如錄音和位置跟蹤)處於活動狀態時,iPhoneX 上的狀態欄不會改變高度。

如果您的應用程序目前隱藏狀態欄,請重新考慮 iPhone X 上的決定:
iPhone 上的顯示高度爲 4.7 英寸,iPhone 的顯示屏提供了更多的垂直空間內容,狀態欄佔據了您應用程序本可能贏得的屏幕區域,狀態欄還顯示了人們發現的有用的信息,只有在交換附加值時候才能被隱藏。

iPhone X 的 UI界面適配官方指南!_7.jpeg

7.jpeg (30.8 KB, 下載次數: 4)

下載附件  保存到相冊

6 天前 上傳




iPhone X 的 UI界面適配官方指南!_8.jpeg

8.jpeg (31.46 KB, 下載次數: 7)

下載附件  保存到相冊

6 天前 上傳




在重複使用現有圖稿時,請注意長寬比差異:
iPhone X 具有不同於 4.7 英寸 iPhone 的長寬比,因此,全屏 4.7 英寸 iPhone 圖形在 iPhone X 上全屏顯示時出現裁剪或 letterboxed。同樣,全屏 iPhone X 圖稿在顯示時被裁剪或被添加黑邊。 全屏顯示在 4.7 英寸 iPhone 上,確保重要的視覺內容保持在兩種顯示尺寸上。

避免將交互式控件放置在屏幕最底部和角落裏:
人們使用顯示屏底部的滑動手勢訪問主屏幕和應用程序切換器,這些手勢可能會取消您在此區域中實現的自定義手勢。屏幕的兩個角落很難讓人觸及。

不要遮擋或突出顯示關鍵的顯示特性:
請勿嘗試隱藏設備的圓角、傳感器外殼或通過在屏幕頂部和底部放置黑色條來指示主屏幕的指示器。不要使用像括號、邊框、形狀或教學文字等視覺裝飾來讓人注意這些區域。

允許自動隱藏虛擬 Home 鍵,以便輕鬆訪問主屏幕:
當啓用自動隱藏時,如果用戶沒有觸摸屏幕幾秒鐘,Home 鍵將自動隱藏。當用戶再次觸摸屏幕時,它會重新出現。這種行爲應該只能用於被動觀看體驗,如播放視頻或幻燈片。請參閱 適應性和佈局。

5、顏色


iPhone X 上的屏幕支持 P3 色彩空間,可以產生比 sRGB 更豐富,更飽和的顏色。使用多元的顏色來增強視覺體驗。 使用寬顏色的照片和視頻更加逼真,使用寬色的視覺數據和狀態指示器更有影響力。 請參閱 顏色管理。

iPhone X 的 UI界面適配官方指南!_9.jpeg

9.jpeg (12.95 KB, 下載次數: 6)

下載附件  保存到相冊

6 天前 上傳



6、手勢


iPhone X 上的顯示屏使用屏幕邊緣手勢來訪問主屏幕、應用程序切換器、通知中心和控制中心。避免干擾系統範圍的屏幕邊緣手勢。人們依靠這些手勢在每個應用程序中工作。在極少數情況下,像遊戲這樣的沉浸式應用程序可能需要自定義的屏幕邊緣手勢,優先於系統的手勢 - 第一個滑動會調用特定於應用的手勢,而第二次滑動則會調用系統手勢。這種行爲(稱爲邊緣保護)應該謹慎實施,因爲它使得用戶難以訪問系統級的操作。

7、附加設計注意事項


準確的參考認證方法。iPhone X 支持 Face ID 進行身份驗證。 如果您的應用程序與 Apple Pay 或其他系統身份驗證功能集成,請勿在 iPhoneX 上引用 Touch ID。同樣,請確保您的應用程序在支持 Touch ID 的設備上未引用 Face ID。 請參閱 驗證。

在 iPhone X 上不要重複系統提供的鍵盤功能。即使用自定義鍵盤,Emoji/Globe 按鈕和 Dictation 按鈕也自動顯示在鍵盤的下方。您的應用程序不能影響這些按鈕,因此避免在鍵盤中重複這些按鈕造成混亂。 請參閱 自定義鍵盤。

8、資源下載


下載 Photoshop 和 Sketch 中的 iPhone X UI 設計模板:
https://developer.apple.com/design/resources/#ios-apps

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章