iPhone X
總結(jié)一下iPhone X的設(shè)計注意事項:
1. 使用超級視網(wǎng)膜屏:需要使用高分辨率圖像@3X圖標(biāo)予颤、色彩支持P3遣钳、
2. 手機尺寸不同:控件需要放在安全區(qū)內(nèi)避免被遮擋势告、狀態(tài)欄高度芽唇、圖片寬高比橄妆、視頻使用原始寬高比
3. 相機使用ARKit:支持Face ID
一翎迁、簡單介紹一下iPhone X的特別之處:
1. 整張手機屏幕都是超級視網(wǎng)膜屏
? ? 5.8英寸的超級視網(wǎng)膜屏,采用新技術(shù)來精確設(shè)計屏幕的曲線弧度蕴潦,呈現(xiàn)優(yōu)雅的圓角像啼。而且超級視網(wǎng)膜屏支持1000000比1的高動態(tài)范圍和最佳的色彩準(zhǔn)確度,視覺效果達(dá)到驚人效果潭苞。
? ? 解讀:視網(wǎng)膜屏忽冻,根據(jù)人眼的視網(wǎng)膜可觀看的最小像素尺寸來設(shè)置的屏幕,降低視覺上看屏幕會出現(xiàn)的像素點效果此疹。
2.Face ID
? ? 使用人臉識別技術(shù)來驚醒解鎖僧诚、身份驗證、付費等蝗碎。使用相機進(jìn)行設(shè)置湖笨,相機通過投影和分析30000不可見點,創(chuàng)建一個由設(shè)備加密和保護(hù)的臉部貼圖蹦骑。
????解讀:傳說中的刷臉解鎖慈省、刷臉支付。
3.TrueDepth相機使用ARKit
? ? 相機添加了ARKit后眠菇,可以準(zhǔn)確的檢測人臉進(jìn)行識別边败,也可在應(yīng)用中呈現(xiàn)AR效果袱衷。
????解讀:就像某寶的捉貓游戲。
4.Core ML 和 Metal 2使用A11仿生芯片
? ? 使用A11仿生芯片可提高應(yīng)用的性能笑窜。新的API功能致燥,包括圖像塊、圖快著色怖侦、線程組共享等大大優(yōu)化了。
? ? 解讀:一些渲染的谜叹、酷炫的特效顯示會更流暢匾寝。
二、關(guān)于設(shè)計
????iPhone X荷腊,擁有更大的艳悔、更高分辨率的、圓形的女仰、邊對邊超級視網(wǎng)膜屏猜年,提供前所未有的沉浸式、豐富的體驗疾忍。
屏幕尺寸
????iPhone X的寬度為375pt乔外,與4.7英寸的與iPhone 6、iPhone7一罩、iPhone 8一樣杨幼。
????高度為812pt,比4.7英寸屏幕高了145pt聂渊,在高度上增加了20%差购。
????iPhone X需要使用高分辨率圖像。字形和其他平面汉嗽、矢量圖欲逃,最好提供獨立的pdf文件。對于柵格化圖片饼暑,需要提供@2X稳析、@3X圖。
布局
????在iPhone X設(shè)計中弓叛,要確保布局滿屏顯示時不被設(shè)備的圓角迈着、傳感器外殼、進(jìn)入屏幕的指示器遮擋邪码。
????大多數(shù)應(yīng)用程序使用系統(tǒng)提供的UI元素裕菠,導(dǎo)航欄、表格闭专、集合奴潘,會自動適應(yīng)設(shè)備的新表單元素旧烧。背景會自動延展到設(shè)備邊緣,UI元素也會自動調(diào)節(jié)位置画髓。
????應(yīng)用自定義布局掘剪,則需要遵循應(yīng)用自動布局、安全區(qū)域和邊緣布局指南奈虾,才能適配iPhone X夺谁。
在iPhone?X上預(yù)覽應(yīng)用
????可以使用模擬器預(yù)覽應(yīng)用,檢查剪切和其他布局問題肉微。若應(yīng)用支持橫屏布局匾鸥,請確保設(shè)備向左轉(zhuǎn)或向右轉(zhuǎn)時布局正常。在iPhone X上不支持倒立豎屏模式碉纳。
????一些功能勿负,例如寬色圖像,在實際設(shè)備中預(yù)覽效果更好劳曹。
提供全屏顯示體驗
????確保背景延伸到設(shè)備屏幕邊緣位置奴愉,垂直方向布局可滾動。就好像表格和集合铁孵,控件布局需要延展到設(shè)備屏幕的底部位置锭硼。
擺放基本內(nèi)容防止被裁剪
????一般來講,內(nèi)容應(yīng)該擺放在居中位置蜕劝,以保證在任何方向上查看都是正常的账忘,不會被邊緣角落或設(shè)備的傳感器外殼遮擋、也不會被訪問主屏幕的指示器遮擋熙宇。
????使用系統(tǒng)標(biāo)準(zhǔn)的界面元素以及自動布局來構(gòu)建界面鳖擒。而且應(yīng)用應(yīng)該遵循UIKit定義的安全區(qū)域和布局邊界,確碧讨梗基于設(shè)備和上下文的適當(dāng)設(shè)置蒋荚。
????安全區(qū)域也適用于狀態(tài)欄、導(dǎo)航欄馆蠕、工具欄期升、標(biāo)簽欄。
注意狀態(tài)欄高度
? ? iPhone X的狀態(tài)欄比一般的手機要高互躬。應(yīng)用要根據(jù)用戶的設(shè)備動態(tài)定位內(nèi)容來設(shè)置狀態(tài)欄播赁,而不應(yīng)該固定狀態(tài)欄高度。當(dāng)有后臺任務(wù)時吼渡,狀態(tài)欄高度也不改變容为。
注意圖片的寬高比
? ? iPhone X的寬高比與4.7英寸手機的寬高比不一樣。若直接使用適配4.7英寸的圖片,圖片會被裁剪掉一部分或無法滿屏顯示坎背。因此需要保留兩種寬高比的圖片替劈。
避免交互控件放置于屏幕底部或角落
? ? 底部滑動手勢會訪問主屏幕和應(yīng)用切換器,會影響應(yīng)用內(nèi)定義的手勢得滤。角落位置則是用戶的困難區(qū)域陨献。
全角按鈕
? ? 全角按鈕超出屏幕的安全區(qū),和屏幕寬度一致的顯示方式懂更,會使按鈕看起來不像按鈕眨业。因此按鈕最好就是設(shè)置為圓角,且寬度為安全區(qū)寬度沮协,按鈕底部與安全區(qū)底部對齊龄捡,避免與Home指示符沖突。
不要掩蓋或特別關(guān)注顯示功能
? ? 不要試圖隱藏設(shè)備的圓角皂股、傳感器外殼墅茉、指示器命黔。也不要使用括號等視覺裝飾來裝飾這些區(qū)域呜呐。
允許自動隱藏指示器
? ? (適用于觀看體驗時)啟用自動隱藏時,用戶未觸摸屏幕幾秒指示器就會隱藏悍募。用戶再次觸摸屏幕蘑辑,指示器再次顯示。
顏色
????iPhone X支持P3色彩空間坠宴,這是一種比sRGB更豐富洋魂、更飽和的色彩。
使用廣泛的顏色增強視覺體驗
????使用寬色彩的照片和視頻喜鼓、視覺數(shù)據(jù)副砍、狀態(tài)指示燈,更具有影響力庄岖。
視頻
? ? 系統(tǒng)播放器提供兩種觀影模式:全屏幕模式和適合屏幕模式豁翎。默認(rèn)情況下,系統(tǒng)會根據(jù)視頻的寬高比選擇適合的模式隅忿,用戶也可以在播放過程中切換模式心剥。
? ? 全屏幕模式婴氮,視頻縮放填充顯示茅姜,某些邊緣位置可能會被裁剪蕾管。
? ? 適合屏幕模式饵逐,整個視頻在屏幕上都是可見的砾跃。
確保自定義的播放器按預(yù)期行事
????使用播放器播放視頻時盹牧,顯示的畫面應(yīng)該是適配屏幕的而不應(yīng)該裁剪視頻畫面加派,而且也允許用戶在使用播放器播放期間切換模式熟尉。
始終以原始的視頻寬高比顯示
? ? 若視頻內(nèi)容嵌入填充為符合標(biāo)準(zhǔn)的寬高比,用戶切換模式時纷责,系統(tǒng)無法正常顯示捍掺。
手勢
? ? iPhone X顯示器使用屏幕邊緣手勢,提供對主屏幕再膳、應(yīng)用程序切換器挺勿、通知中心、控制中心的訪問喂柒。
避免干擾系統(tǒng)范圍的屏幕邊緣手勢
? ? 在應(yīng)用中不瓶,都會使用手勢進(jìn)行操作。關(guān)于自定義的程序手勢與系統(tǒng)手勢的混合調(diào)用灾杰,在使用時需要謹(jǐn)慎蚊丐。
其他注意事項
? ? 準(zhǔn)確的驗證方式
????iPhone X支持人臉識別,而其他設(shè)備支持指紋識別艳吠。請勿在iPhone X上使用指紋識別麦备,而在其他設(shè)備上使用人臉識別。
請勿復(fù)制系統(tǒng)鍵盤
? ? iPhone X可以自定義鍵盤昭娩,Emoji/Globe鍵和聽寫鍵會自動顯示在鍵盤下方凛篙,不需要重復(fù)調(diào)用,避免造成混淆栏渺。
邊緣處理
? ? 確保網(wǎng)站在iPhone X邊緣間的處理呛梆。
嘗試翻譯一下iOS設(shè)計規(guī)范,一同學(xué)習(xí)磕诊。
iOS Human Interface Guidelines
原文鏈接:
https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/