[譯] iOS設(shè)計規(guī)范:概述二

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/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末填物,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子霎终,更是在濱河造成了極大的恐慌滞磺,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,546評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件莱褒,死亡現(xiàn)場離奇詭異击困,居然都是意外死亡,警方通過查閱死者的電腦和手機保礼,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,224評論 3 395
  • 文/潘曉璐 我一進(jìn)店門沛励,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人炮障,你說我怎么就攤上這事目派。” “怎么了胁赢?”我有些...
    開封第一講書人閱讀 164,911評論 0 354
  • 文/不壞的土叔 我叫張陵企蹭,是天一觀的道長。 經(jīng)常有香客問我,道長谅摄,這世上最難降的妖魔是什么徒河? 我笑而不...
    開封第一講書人閱讀 58,737評論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮送漠,結(jié)果婚禮上顽照,老公的妹妹穿的比我還像新娘。我一直安慰自己闽寡,他們只是感情好代兵,可當(dāng)我...
    茶點故事閱讀 67,753評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著爷狈,像睡著了一般植影。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上涎永,一...
    開封第一講書人閱讀 51,598評論 1 305
  • 那天思币,我揣著相機與錄音,去河邊找鬼羡微。 笑死谷饿,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的拷淘。 我是一名探鬼主播各墨,決...
    沈念sama閱讀 40,338評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼指孤,長吁一口氣:“原來是場噩夢啊……” “哼启涯!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起恃轩,我...
    開封第一講書人閱讀 39,249評論 0 276
  • 序言:老撾萬榮一對情侶失蹤结洼,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后叉跛,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體松忍,經(jīng)...
    沈念sama閱讀 45,696評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,888評論 3 336
  • 正文 我和宋清朗相戀三年筷厘,在試婚紗的時候發(fā)現(xiàn)自己被綠了鸣峭。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,013評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡酥艳,死狀恐怖摊溶,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情充石,我是刑警寧澤莫换,帶...
    沈念sama閱讀 35,731評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響拉岁,放射性物質(zhì)發(fā)生泄漏坷剧。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,348評論 3 330
  • 文/蒙蒙 一喊暖、第九天 我趴在偏房一處隱蔽的房頂上張望惫企。 院中可真熱鬧,春花似錦陵叽、人聲如沸雅任。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,929評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽沪么。三九已至,卻和暖如春锌半,著一層夾襖步出監(jiān)牢的瞬間禽车,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,048評論 1 270
  • 我被黑心中介騙來泰國打工刊殉, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留殉摔,地道東北人。 一個月前我還...
    沈念sama閱讀 48,203評論 3 370
  • 正文 我出身青樓记焊,卻偏偏與公主長得像逸月,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子遍膜,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,960評論 2 355

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