iPhone X

快兩個月沒上簡書了适秩,一直都很忙斋配,完全沒時間呀;就在今天凌晨寄悯,蘋果發(fā)布了帶劉海的 iPhone X萤衰,這個屏幕需要 iOS 開發(fā)者做新的適配,會后蘋果發(fā)布了 iPhone X 的適配指南猜旬,翻譯出來供大家參考脆栋。

iPhone X

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

屏幕尺寸

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

布局

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

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

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

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

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

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

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

在重復(fù)使用現(xiàn)有圖稿時逻谦,請注意長寬比差異。iPhone X 具有不同于 4.7 英寸 iPhone 的長寬比陪蜻,因此邦马,全屏 4.7 英寸 iPhone 圖形在 iPhone X 上全屏顯示時出現(xiàn)裁剪或 letterboxed。同樣,全屏 iPhone X 圖稿在顯示時被裁剪或被添加黑邊滋将。 全屏顯示在 4.7 英寸 iPhone 上邻悬,確保重要的視覺內(nèi)容保持在兩種顯示尺寸上。

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

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

允許自動隱藏虛擬 Home 鍵蘑斧,以便輕松訪問主屏幕。當(dāng)啟用自動隱藏時须眷,如果用戶沒有觸摸屏幕幾秒鐘竖瘾,Home 鍵將自動隱藏。當(dāng)用戶再次觸摸屏幕時花颗,它會重新出現(xiàn)捕传。這種行為應(yīng)該只能用于被動觀看體驗,如播放視頻或幻燈片扩劝。請參閱 適應(yīng)性和布局庸论。

顏色

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

手勢

iPhone X 上的顯示屏使用屏幕邊緣手勢來訪問主屏幕、應(yīng)用程序切換器趋观、通知中心和控制中心扛禽。避免干擾系統(tǒng)范圍的屏幕邊緣手勢。人們依靠這些手勢在每個應(yīng)用程序中工作皱坛。在極少數(shù)情況下旋圆,像游戲這樣的沉浸式應(yīng)用程序可能需要自定義的屏幕邊緣手勢,優(yōu)先于系統(tǒng)的手勢 - 第一個滑動會調(diào)用特定于應(yīng)用的手勢麸恍,而第二次滑動則會調(diào)用系統(tǒng)手勢。這種行為(稱為邊緣保護(hù))應(yīng)該謹(jǐn)慎實施,因為它使得用戶難以訪問系統(tǒng)級的操作抹沪。

附加設(shè)計注意事項

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

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末刺桃,一起剝皮案震驚了整個濱河市粹淋,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌瑟慈,老刑警劉巖桃移,帶你破解...
    沈念sama閱讀 206,126評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異葛碧,居然都是意外死亡借杰,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,254評論 2 382
  • 文/潘曉璐 我一進(jìn)店門进泼,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蔗衡,“玉大人,你說我怎么就攤上這事缘琅≌扯迹” “怎么了?”我有些...
    開封第一講書人閱讀 152,445評論 0 341
  • 文/不壞的土叔 我叫張陵刷袍,是天一觀的道長翩隧。 經(jīng)常有香客問我,道長呻纹,這世上最難降的妖魔是什么堆生? 我笑而不...
    開封第一講書人閱讀 55,185評論 1 278
  • 正文 為了忘掉前任,我火速辦了婚禮雷酪,結(jié)果婚禮上淑仆,老公的妹妹穿的比我還像新娘。我一直安慰自己哥力,他們只是感情好蔗怠,可當(dāng)我...
    茶點故事閱讀 64,178評論 5 371
  • 文/花漫 我一把揭開白布墩弯。 她就那樣靜靜地躺著,像睡著了一般寞射。 火紅的嫁衣襯著肌膚如雪渔工。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 48,970評論 1 284
  • 那天桥温,我揣著相機(jī)與錄音引矩,去河邊找鬼。 笑死侵浸,一個胖子當(dāng)著我的面吹牛旺韭,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播掏觉,決...
    沈念sama閱讀 38,276評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼区端,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了履腋?” 一聲冷哼從身側(cè)響起珊燎,我...
    開封第一講書人閱讀 36,927評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎遵湖,沒想到半個月后悔政,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,400評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡延旧,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,883評論 2 323
  • 正文 我和宋清朗相戀三年谋国,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片迁沫。...
    茶點故事閱讀 37,997評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡芦瘾,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出集畅,到底是詐尸還是另有隱情近弟,我是刑警寧澤,帶...
    沈念sama閱讀 33,646評論 4 322
  • 正文 年R本政府宣布挺智,位于F島的核電站祷愉,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏赦颇。R本人自食惡果不足惜二鳄,卻給世界環(huán)境...
    茶點故事閱讀 39,213評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望媒怯。 院中可真熱鬧订讼,春花似錦、人聲如沸扇苞。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,204評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至祈餐,卻和暖如春擂啥,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背帆阳。 一陣腳步聲響...
    開封第一講書人閱讀 31,423評論 1 260
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留屋吨,地道東北人蜒谤。 一個月前我還...
    沈念sama閱讀 45,423評論 2 352
  • 正文 我出身青樓,卻偏偏與公主長得像至扰,于是被迫代替她去往敵國和親鳍徽。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,722評論 2 345

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