使網路閱讀成為最高樂趣。

「譯」?蘋果官方 iPhone X 人機介面指南


瞭解如何為新推出的全螢幕超視網膜顯示屏優化你的應用和遊戲。?閱讀資訊:iPhone X採用了一塊大尺寸,高解析度,圓潤,邊到邊的顯示屏,提供了前所未有的豐富內容...

- 2017年9月14日14時48分
-

瞭解如何為新推出的全螢幕超視網膜顯示屏優化你的應用和遊戲。

?閱讀資訊:

iPhone X採用了一塊大尺寸,高解析度,圓潤,邊到邊的顯示屏,提供了前所未有的豐富內容和沉浸式體驗。

?螢幕尺寸

縱向上,iPhone X的顯示屏寬度與 iPhone 6,7,8的4.7“顯示屏一致。但 iPhone X的顯示屏比4.7”顯示屏高145 pt,導致垂直方向多出來大約20%的區域可以顯示更多的內容。

為你應用裡的所有視覺元素提供高清的素材。iPhone X搭配一塊比例因子為@3x的高清顯示屏。對於文字和其他向量圖形,最好提供可以無視解析度的 PDF檔案。對點陣圖,你可以提供@3x和@2x兩種比例因子的素材。更多請參閱 Image Size and Resolution和 Custom Icons。

佈局

在為 iPhone X設計時,你必須確保佈局填滿螢幕,並且不會被裝置的圓角,上端的感測器或用於訪問主螢幕的指示條遮擋。

大多使用標準的,系統提供的如導航欄,表格和集合等 UI元素的應用會自動適應新螢幕。背景會延伸到顯示屏邊緣,而 UI元件也會被適當地佈置。

對於自定義佈局的應用,支援 iPhone X也不難,尤其是當你的應用使用了自動佈局並遵守了安全區和邊距佈局規範。

在 iPhone X上預覽你的應用。你可以使用 Xcode附帶的模擬器來預覽應用,檢查遮擋或其他佈局問題。但是像高色域影象顯示效果之類問題,最好在真機上預覽。

提供全屏的體驗。確保背景延伸到顯示屏的邊界,並且如表格和集合等垂直可滾動的 UI元素,確保它們一直延展到底部。

插入必要內容以防遮擋。一般來說,內容應該居中對稱,這樣它在任何方向看起來都很贊,不會被四角,感測器或訪問主螢幕的指示條遮擋。為獲得最佳效果,搭建介面時請使用標準的系統提供的 UI元素和自動佈局。所有應用都應遵循 UIKit中定義的安全區和邊距佈局規範,這個規定保障了基於裝置和內容的穩妥的擺放。安全區同時預防了內容和狀態列,導航欄,工具欄,標籤欄的重疊問題。

留心狀態列的高度。狀態列在 iPhone X上比在其他 iPhone上更高。如果你的應用採用了一個固定高度的狀態列並將內容擺放其下,則必須更新為根據使用者的裝置來動態定位內容。請注意,當如錄音和定位等後臺任務處於啟用狀態時,iPhone X上的狀態列不會改變高度。

如果你的應用隱藏狀態列,請重新考慮 iPhone X上的情況。iPhone X上的顯示屏比高度為4.7“的 iPhone提供了更多的垂直空間,狀態列佔據了你應用可能沒有完全利用的一塊螢幕區域。狀態列顯示了對人們有用的資訊,它只應該在能帶來更多價值的情況下被隱藏。

在複用現有視覺元素時,留心比例差異。iPhone X具有不同於4.7“ iPhone的長寬比,因此4.7” iPhone上的全屏影象在 iPhone X上顯示時會被裁剪或等比縮放以適應螢幕。同樣,iPhone X上的全屏影象在在4.7“ iPhone上顯示時也會被裁剪或等比縮放以適應螢幕。請確保重要的視覺內容在兩種螢幕尺寸上都能很好展示。

避免將互動式控制項擺放在螢幕的底部和角落。使用者在顯示屏底部使用滑動手勢來訪問主螢幕和多工切換,這些手勢可能會幹擾你在此區域中的自定義手勢。螢幕上方的兩個角落太遠了,並不是使用者的操作舒適區。

不要在關鍵顯示區域搞花樣。請勿嘗試通過在螢幕頂部和底部放置黑色色塊來隱藏裝置的圓角,感測器或主屏指示條。不要使用像括號,邊框,形狀或指示文字等視覺裝飾在這些區域吸引使用者注意力。

謹慎允許自動隱藏主屏指示條。當啟用自動隱藏時,如果使用者幾秒沒有觸控式螢幕幕,指示條將消失。當使用者再次觸控式螢幕幕時重新出現。這種行為應該只被用於例如播放視訊或幻燈片的觀看場景。

更多請參閱 Adaptivity and Layout。

顏色

iPhone X的顯示屏支援 P3色彩空間,擁有比 sRGB更豐富,更飽和的顏色。

使用更豐富的顏色來增強視覺體驗。採用高色域的照片和視訊會更加栩栩如生,使用高色域的資訊樣式和狀態指示會更有效果。更多請參閱 Color。

手勢

iPhone X的顯示屏使用螢幕邊緣手勢來訪問主螢幕,多工處理,通知中心和控制中心。

避免和系統級的螢幕邊緣手勢衝突。人們會在每個應用裡使用這些螢幕邊緣手勢。在少數情況下,像遊戲這樣的沉浸式應用可能需要自定義優先於系統手勢的螢幕邊緣手勢 -滑動一次會呼叫應用的自定義手勢,第二次則會呼叫系統手勢。這種方式(稱為邊緣保護)應謹慎使用,因為它使得使用者難以訪問系統級的操作。更多請參閱 Gestures。

?其他注意事項

準確引用身份驗證方式。iPhone X採用 Face ID進行身份驗證。如果你的應用整合 Apple Pay或其他系統身份驗證功能,請勿在 iPhone X上引用Touch ID。同樣,請確保你的應用程式在支援 Touch ID的裝置上沒有引用 Face ID。更多請參閱 Authentication。

不要重複提供系統已有的鍵盤功能。在 iPhone X上即使自定義鍵盤,Emoji,Globe和 Dictation按鈕也常置於鍵盤的下方。你的應用無法影響這些按鈕,因此請避免在自定義鍵盤中重複佈置這些按鈕,以至給使用者帶來困擾。更多請參閱 Custom Keyboards。

?文章總結:

看直播看到三點,夢裡都是齊劉海。看來這次能拯救設計師的只有鋼鐵俠和天貓了。

?擴充套件閱讀:

Sketch外掛:CRAFT | Sketch Material | WeSketch

Sketch教程:Library | 換色文字 symbol | Symbol巢狀 | 字型樣式庫

Graffle教程:繪製流程圖 | 搭建檔案

文章翻譯:Swarm改版 | Do&Don’t | YouTube換 logo | 「Uber商務」改版

?素材分享:

由於 iPhone X剛釋出,網上免費的資源並不多,筆者找到一個 iPhone X mockup,設計師們騷起來吧。

?感謝閱讀:

科技

» 知乎專欄

喜歡這篇文章嗎?立刻分享出去讓更多人知道~


最新發布內容

熱門閱讀