用戶通常希望能夠在他們的所有設(shè)備和任何界面中使用他們喜歡的應(yīng)用程序。在iOS中浮入,當(dāng)在iPad上進(jìn)行多任務(wù)處理烦周,可以將界面元素和布局配置為自動(dòng)更改不同設(shè)備上的形狀和大。在分屏視圖抬伺,當(dāng)屏幕旋轉(zhuǎn)時(shí)螟够,很有必要設(shè)計(jì)一個(gè)適應(yīng)性強(qiáng)的界面,從而保證在任何環(huán)境中提供良好的體驗(yàn)峡钓。
設(shè)備屏幕尺寸和方向
iOS設(shè)備有各種不同的屏幕尺寸齐鲤,可以基于肖像或景觀定向。
自動(dòng)布局
自動(dòng)布局是構(gòu)建自適應(yīng)界面的開(kāi)發(fā)工具椒楣。使用自動(dòng)布局给郊,您可以定義管理應(yīng)用程序內(nèi)容的規(guī)則(稱(chēng)為約束)。例如捧灰,您可以約束一個(gè)按鈕淆九,不管可用的屏幕空間如何,使其總是水平居中毛俏,并且位于圖像下方8點(diǎn)炭庙。
當(dāng)檢測(cè)到某些環(huán)境變化(稱(chēng)為特征)時(shí),自動(dòng)布局將根據(jù)指定的約束自動(dòng)重新調(diào)整布局煌寇』捞悖可以將應(yīng)用設(shè)置為動(dòng)態(tài)適應(yīng)各種特征,包括:
1.不同的設(shè)備屏幕尺寸阀溶,分辨率和色域(sRGB / P3)
2.不同的設(shè)備方向(縱向/橫向)
3.分屏視圖
4.iPad上的多任務(wù)模式
5.動(dòng)態(tài)類(lèi)型文字大小更改
6.國(guó)際化功能基于區(qū)域設(shè)置啟用(從左到右/從右到左的布局方向腻脏,日期/時(shí)間/數(shù)字格式鸦泳,字體變化,文本長(zhǎng)度)
7.系統(tǒng)功能可用性(3D Touch)
布局指南和安全區(qū)
布局指南定義了實(shí)際上不顯示在屏幕的矩形區(qū)域永品,但有助于內(nèi)容的定位做鹰,對(duì)齊和間距。該系統(tǒng)包括預(yù)定義的布局指南鼎姐,可以輕松地在內(nèi)容上應(yīng)用標(biāo)準(zhǔn)邊距钾麸,并限制文本的寬度以獲得最佳的可讀性。您還可以定義自定義布局指南炕桨。
堅(jiān)持UIKit定義的安全區(qū)域和布局邊距饭尝。這些布局指南于基于設(shè)備和頁(yè)面進(jìn)行適當(dāng)?shù)脑O(shè)置。安全區(qū)域還可以防止內(nèi)容覆蓋狀態(tài)欄,導(dǎo)航欄,工具欄和標(biāo)簽欄裤翩。系統(tǒng)提供的標(biāo)準(zhǔn)視圖會(huì)自動(dòng)采用安全區(qū)域布局指南贺辰。
大小類(lèi)別
大小類(lèi)別是根據(jù)大小自動(dòng)分配給內(nèi)容區(qū)域的特征。系統(tǒng)定義了兩個(gè)尺寸類(lèi),常規(guī)(表示展開(kāi)空間)和約束(表示約束空間),它們描述了視圖的高度和寬度。
視圖可以包含大小類(lèi)別的任何組合:
常規(guī)寬度睡汹,常規(guī)高度
緊湊的寬度,緊湊的高度
規(guī)則寬度寂殉,緊湊高度
緊湊寬度囚巴,常規(guī)高度
與其他環(huán)境變化一樣,iOS會(huì)根據(jù)內(nèi)容區(qū)域的大小類(lèi)別動(dòng)態(tài)進(jìn)行布局調(diào)整友扰。例如彤叉,當(dāng)垂直尺寸類(lèi)別從緊湊高度變?yōu)檎8叨葧r(shí),可能是因?yàn)橛脩魧⒃O(shè)備從橫向旋轉(zhuǎn)到縱向村怪,標(biāo)簽欄可能會(huì)變高秽浇。
設(shè)備模式
多任務(wù)大小類(lèi)
在iPad上,當(dāng)您的應(yīng)用程序在多任務(wù)配置中運(yùn)行時(shí)甚负,大小類(lèi)也適用柬焕。
布局注意事項(xiàng)
在上下文更改期間,保持對(duì)當(dāng)前內(nèi)容的關(guān)注梭域。內(nèi)容是您的最高優(yōu)先級(jí)斑举。改變環(huán)境變化的焦點(diǎn)可能是迷失方向,令人沮喪病涨,讓人覺(jué)得自己已經(jīng)失去了對(duì)應(yīng)用的控制富玷。
確保主要內(nèi)容以默認(rèn)大小清晰。人們不必橫向滾動(dòng)閱讀重要文本,或縮放以查看主圖像赎懦,除非他們選擇更改大小雀鹃。
確保主要內(nèi)容以默認(rèn)大小清晰。人們不必橫向滾動(dòng)閱讀重要文本铲敛,或縮放以查看主圖像褐澎,除非他們選擇更改大小会钝。
在整個(gè)應(yīng)用程序中保持整體一致的外觀伐蒋。一般來(lái)說(shuō),具有相似功能的元素應(yīng)該類(lèi)似迁酸。
使用對(duì)齊來(lái)輕松掃描并傳達(dá)組織和層次結(jié)構(gòu)先鱼。對(duì)齊使得應(yīng)用程序看起來(lái)整齊有序,幫助人們?cè)跐L動(dòng)時(shí)進(jìn)行關(guān)注奸鬓,并使查找信息變得更加容易焙畔。縮進(jìn)和對(duì)齊也可以指示內(nèi)容組如何相關(guān)串远。
擴(kuò)展視覺(jué)元素以填充屏幕宏多。您的應(yīng)用程序應(yīng)該利用所有可用的屏幕空間。
確保內(nèi)容的邊距和間距澡罚。通常伸但,內(nèi)容應(yīng)該舒適地間隔開(kāi)并且從屏幕的邊緣稍微插入。一般來(lái)說(shuō)留搔,內(nèi)容最適合中心和對(duì)稱(chēng)地插入更胖,所以它在任何方向看起來(lái)都很好。為獲得最佳效果隔显,請(qǐng)使用標(biāo)準(zhǔn)的系統(tǒng)提供的界面元素却妨,自動(dòng)布局,標(biāo)準(zhǔn)邊距括眠,并遵守安全區(qū)域布局指南彪标。
在較大的設(shè)備上顯示文本時(shí)應(yīng)用可讀性邊距。這些邊距保持文本行足夠短以確保舒適的閱讀體驗(yàn)掷豺。
為互動(dòng)元素提供充足的觸控目標(biāo)捐下。嘗試為所有控件保持44pt x 44pt的最小可打包面積。
避免免費(fèi)的布局變更萌业。只是因?yàn)橛腥诵D(zhuǎn)設(shè)備并不意味著整個(gè)布局需要改變坷襟。例如,如果您的應(yīng)用程序以縱向模式顯示圖像網(wǎng)格生年,則不必在橫向模式下呈現(xiàn)與列表相同的圖像婴程。相反,它可能只是調(diào)整網(wǎng)格的尺寸抱婉。嘗試在所有情況下保持可比的經(jīng)驗(yàn)档叔。
如果可能桌粉,支持縱向和橫向。人們喜歡以不同的方向使用應(yīng)用程序衙四,所以最好在滿足這個(gè)期望時(shí)铃肯。
如果您的應(yīng)用僅支持一個(gè)方向,則支持兩種變體传蹈。如果您的應(yīng)用程序以單一方向運(yùn)行至關(guān)重要押逼,請(qǐng)確保它支持兩種方向變體。例如惦界,如果您的應(yīng)用程序僅以橫向模式運(yùn)行挑格,則無(wú)論用戶是左右旋轉(zhuǎn)設(shè)備,都應(yīng)該可以使用它沾歪。如果設(shè)備在使用您的應(yīng)用程序時(shí)旋轉(zhuǎn)180度漂彤,則應(yīng)用程序應(yīng)將其內(nèi)容旋轉(zhuǎn)180度。如果您的應(yīng)用程序在有人將設(shè)備設(shè)置為錯(cuò)誤時(shí)不會(huì)自動(dòng)旋轉(zhuǎn)灾搏,那么他們會(huì)直觀地旋轉(zhuǎn)它挫望。你不需要告訴他們
根據(jù)上下文自定義應(yīng)用程序?qū)πD(zhuǎn)的響應(yīng)。例如狂窑,通過(guò)旋轉(zhuǎn)設(shè)備讓人們移動(dòng)角色的游戲可能不應(yīng)該在游戲過(guò)程中切換方向媳板。然而,它可以根據(jù)當(dāng)前方向顯示菜單和介紹序列蕾域。
準(zhǔn)備文字大小更改拷肌。人們期望大多數(shù)應(yīng)用程序在“設(shè)置”中選擇不同的文本大小時(shí)都會(huì)進(jìn)行適當(dāng)?shù)捻憫?yīng)為了適應(yīng)一些文本大小的更改,您可能需要調(diào)整布局旨巷。