適應(yīng)性和布局

適應(yīng)性和布局

為自適應(yīng)而開發(fā)

人們通常希望在他們所有的設(shè)備和多種情境中使用自己喜歡的應(yīng)用程序，比如在不同的設(shè)備方向上和 iPad 的分屏情況下。尺寸類別(Size classes)和自動(dòng)布局(Auto Layout)可以通過定義屏幕的布局、視圖控制器和視圖在環(huán)境變化時(shí)候應(yīng)該怎么適應(yīng)來幫助你實(shí)現(xiàn)這個(gè)愿望。(顯示環(huán)境[display environment]的概念指的是設(shè)備的整個(gè)屏幕或者其中一部分，比如彈出框的區(qū)域或者 iPad 分屏視圖中其中一側(cè)的區(qū)域。)

iOS 在特征集合(trait collection)的定義中包含了顯示環(huán)境的概念，特征集合囊括了尺寸類別(size class)，顯示比例(display scale)和用戶界面語言(user interface idiom)。你可以使用一個(gè)特征集合讓你的視圖和視圖控制器響應(yīng)顯示環(huán)境的變化。

iOS 定義了兩個(gè)尺寸類別(size class)，常規(guī)的(regular)和壓縮的(compact)。常規(guī)尺寸與拓展的空間緊密相關(guān)，壓縮尺寸與約束的空間相關(guān)。想要定義一種顯示環(huán)境，你需要定義一種橫屏尺寸類別，與一種豎屏尺寸類別。如你所想，一個(gè) iOS 設(shè)備在豎屏模式可以使用一套類別，而橫屏模式下可以使用另一套類別。

iOS 能隨著尺寸類別和顯示環(huán)境變化而自動(dòng)生成不同布局。舉個(gè)例子，當(dāng)垂直尺寸從壓縮變?yōu)槌Ｒ?guī)時(shí)，導(dǎo)航欄和工具欄會(huì)自動(dòng)變高。

當(dāng)你靠尺寸類別來驅(qū)動(dòng)布局變化時(shí)，你的應(yīng)用在任何顯示環(huán)境時(shí)都能顯示得很好。關(guān)于如何在 Interface Builder 中更好的使用尺寸類別，你可以查閱 Size Classes Design Help.

注：在一種尺寸類別中，持續(xù)使用 Auto Layout 進(jìn)行小的布局調(diào)整，比如拉伸或壓縮內(nèi)容。更多 Auto Layout，參看 Auto Layout Guide.

下面的實(shí)例可以幫助你形象展現(xiàn)尺寸類型如何適配不同設(shè)備的顯示環(huán)境。例如：iPad(包括 iPad Pro)在長(zhǎng)寬和橫屏豎屏?xí)r都使用常規(guī)尺寸類型。換句話說，iPad 顯示環(huán)境一直處于垂直和水平的常規(guī)狀態(tài)。

注：合格的 iPad 型號(hào)支持多任務(wù)，你的應(yīng)用可能需要與其他應(yīng)用共享同一個(gè)屏幕。確保使用 Auto Layout，這樣你可以在用戶使用多任務(wù)功能時(shí)響應(yīng)他，比如 分屏模式(Split View)和多任務(wù)分屏模式(Slide Over)。

除了使用 Auto Layout，當(dāng)你在 iPad Pro 上展示可讀性的內(nèi)容時(shí)，依靠 UIView 的 readableContentGuide 屬性是非常重要的，這樣可以擁有讓讀者舒服的邊距。

iPhone 的顯示環(huán)境可根據(jù)不同的設(shè)備和不同的握持方向而改變。

豎屏?xí)r，iPhone6 Plus 使用的是壓縮寬度和常規(guī)高度類型。

橫屏?xí)r，iPhone6 Plus 使用的是常規(guī)寬度和壓縮高度類型。

其他 iPhone 型號(hào)，包括 iPhone6 使用相同的尺寸類型設(shè)置。

豎屏?xí)r，iPhone 6，iPhone 5 和iPhone 4S 使用的是壓縮寬度和常規(guī)高度。

橫屏?xí)r，這些設(shè)備在寬高上使用的都是壓縮類。

在不同環(huán)境提供良好體驗(yàn)

當(dāng)你使用自適應(yīng)來開發(fā) UI 時(shí)，你可以保證UI跟隨顯示環(huán)境變化而適當(dāng)?shù)仨憫?yīng)。遵照這些指南，你可以給用戶良好的設(shè)備響應(yīng)體驗(yàn)。

在所有環(huán)境下都保持對(duì)主體內(nèi)容的專注。這是最高優(yōu)先級(jí)。人們使用應(yīng)用時(shí)，瀏覽感興趣的內(nèi)容并與之發(fā)生互動(dòng)。隨著環(huán)境變化改變專注點(diǎn)會(huì)讓用戶感覺到迷失方向，讓他們感覺對(duì)應(yīng)用失去控制。

避免布局上不必要的變化。在所有環(huán)境中保持一致的使用體驗(yàn)，能讓人們?cè)谛D(zhuǎn)設(shè)備或在不同設(shè)備上運(yùn)行你的應(yīng)用時(shí)維持穩(wěn)定的使用模式。例如，如果你在水平的常規(guī)模式下使用了網(wǎng)格來顯示圖像，那么無需在壓縮模式下使用列表來展示同樣的內(nèi)容，雖然你可能調(diào)整了網(wǎng)格的尺寸。

如果你的應(yīng)用只在一個(gè)方向上運(yùn)行，那么請(qǐng)直接一點(diǎn)。人們希望在各種握持方式下都可以使用你的應(yīng)用，能滿足這個(gè)期待是最好的。但是，如果你的應(yīng)用只在一個(gè)方向下運(yùn)行，那么你應(yīng)當(dāng)注意：

• 避免出現(xiàn)提示人們旋轉(zhuǎn)設(shè)備的相關(guān) UI 元素。讓應(yīng)用在支持的方向下清晰地運(yùn)行，如果需要用戶旋轉(zhuǎn)設(shè)備，不要給UI添加不必要的混亂。
• 支持同一個(gè)方向上的變化。例如，如果一個(gè)應(yīng)用只能橫屏運(yùn)行，用戶無論用左手或是右手握持時(shí)都能觸及到 home 鍵。如果用戶在使用應(yīng)用時(shí)180度旋轉(zhuǎn)設(shè)備，那最好應(yīng)用內(nèi)容也能及時(shí)響應(yīng)并旋轉(zhuǎn)180度。

如果你的應(yīng)用將設(shè)備方向翻轉(zhuǎn)視為用戶輸入(的一種指令)，那么就按照程序設(shè)定的方式來響應(yīng)設(shè)備翻轉(zhuǎn)。舉個(gè)例子，一個(gè)游戲讓用戶利用設(shè)備翻轉(zhuǎn)來移動(dòng)游戲中的部件，那么這個(gè)游戲應(yīng)用本身(的 UI)不能對(duì)翻轉(zhuǎn)屏幕產(chǎn)生響應(yīng)。在這種情況下，你必須關(guān)聯(lián)兩個(gè)需要變化的方向，并且允許人們?cè)谶@兩個(gè)方向切換直到他們開始(了解并執(zhí)行)應(yīng)用的主體任務(wù)。一旦人們開始執(zhí)行主要任務(wù)，那就開始按程序設(shè)定的那樣來響應(yīng)設(shè)備的動(dòng)作。

使用布局來溝通

布局包含的不僅僅是一個(gè)應(yīng)用屏幕上的UI元素外觀。你的布局，應(yīng)該告訴用戶什么是最重要的，他們的選擇是什么，以及事物是如何關(guān)聯(lián)起來的。

強(qiáng)調(diào)重要內(nèi)容或功能，讓用戶容易集中注意在主要任務(wù)上。有幾個(gè)比較好的辦法是在屏幕上半部分放置主要內(nèi)容——遵循從左到右的習(xí)慣——從靠近左側(cè)的屏幕開始：

使用不同的視覺化重量和平衡來告訴用戶當(dāng)前屏顯元素的主次關(guān)系。大型控件吸引眼球，比小的控件更容易在出現(xiàn)時(shí)被注意到。而且大型控件也更容易被用戶點(diǎn)擊，這讓它們?cè)趹?yīng)用中尤其有用——就像電話和時(shí)鐘(上面的按鈕)那樣——能讓用戶經(jīng)常在容易分心的環(huán)境下仍然保持正常使用。

使用對(duì)齊來讓閱讀更舒緩，讓分組和層次之間更有秩序。對(duì)齊讓應(yīng)用看起來整潔而有序，也讓用戶在滑動(dòng)整屏內(nèi)容時(shí)更容易定位和專注于重要信息。不同信息組的縮進(jìn)與對(duì)齊讓它們之間的關(guān)聯(lián)更清晰，也讓用戶更容易找到某個(gè)控件。

確保用戶在內(nèi)容處于默認(rèn)尺寸時(shí)便可清楚明白它的主要內(nèi)容與含義。例如，用戶應(yīng)當(dāng)無需水平滾動(dòng)就能看到重要的文本，或不用放大就可以看到主體圖像。

準(zhǔn)備好改變字體大小。用戶期望大多數(shù)應(yīng)用都可以響應(yīng)他們?cè)?iOS 的設(shè)置中設(shè)定的字體大小。為了適應(yīng)一些文本大小的變化，你也許需要調(diào)整布局；想要得到更多文本顯示相關(guān)的信息，請(qǐng)查閱下文“顏色與字體”中相關(guān)的內(nèi)容。

盡量避免 UI 上不一致的表現(xiàn)。在一般情況下，有著相似功能的控件看起來也應(yīng)該類似。用戶常常認(rèn)為他們看到的不同總有原因，而且他們傾向于花時(shí)間去嘗試(譯者按：因此為了避免用戶做無用的嘗試，建議類似的功能外觀都保持一樣。)

給每個(gè)互動(dòng)的元素充足的空間，從而讓用戶容易操作這些內(nèi)容和控件。常用的點(diǎn)按類控件的大小是44 x 44點(diǎn)(points)。