iOS11人機(jī)交互指南-視覺(jué)設(shè)計(jì)-01適應(yīng)性和布局 Adaptivity and Layout

用戶通常希望能夠在他們的所有設(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)整布局旨巷。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末巨缘,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子采呐,更是在濱河造成了極大的恐慌若锁,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,755評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件斧吐,死亡現(xiàn)場(chǎng)離奇詭異又固,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)煤率,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)仰冠,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人蝶糯,你說(shuō)我怎么就攤上這事洋只。” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,138評(píng)論 0 355
  • 文/不壞的土叔 我叫張陵识虚,是天一觀的道長(zhǎng)肢扯。 經(jīng)常有香客問(wèn)我,道長(zhǎng)担锤,這世上最難降的妖魔是什么蔚晨? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,791評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮肛循,結(jié)果婚禮上铭腕,老公的妹妹穿的比我還像新娘。我一直安慰自己育拨,他們只是感情好谨履,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,794評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布欢摄。 她就那樣靜靜地躺著熬丧,像睡著了一般。 火紅的嫁衣襯著肌膚如雪怀挠。 梳的紋絲不亂的頭發(fā)上析蝴,一...
    開(kāi)封第一講書(shū)人閱讀 51,631評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音绿淋,去河邊找鬼闷畸。 笑死,一個(gè)胖子當(dāng)著我的面吹牛吞滞,可吹牛的內(nèi)容都是我干的佑菩。 我是一名探鬼主播,決...
    沈念sama閱讀 40,362評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼裁赠,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼殿漠!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起佩捞,我...
    開(kāi)封第一講書(shū)人閱讀 39,264評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤绞幌,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后一忱,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體莲蜘,經(jīng)...
    沈念sama閱讀 45,724評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,900評(píng)論 3 336
  • 正文 我和宋清朗相戀三年帘营,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了票渠。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,040評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡芬迄,死狀恐怖问顷,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤择诈,帶...
    沈念sama閱讀 35,742評(píng)論 5 346
  • 正文 年R本政府宣布械蹋,位于F島的核電站,受9級(jí)特大地震影響羞芍,放射性物質(zhì)發(fā)生泄漏哗戈。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,364評(píng)論 3 330
  • 文/蒙蒙 一荷科、第九天 我趴在偏房一處隱蔽的房頂上張望唯咬。 院中可真熱鬧,春花似錦畏浆、人聲如沸胆胰。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,944評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)蜀涨。三九已至,卻和暖如春蝎毡,著一層夾襖步出監(jiān)牢的瞬間厚柳,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,060評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工沐兵, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留别垮,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,247評(píng)論 3 371
  • 正文 我出身青樓扎谎,卻偏偏與公主長(zhǎng)得像碳想,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子毁靶,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,979評(píng)論 2 355