## 1.3 適應性和布局（Adaptivity and Layout） [TOC=3,3] ### 1.3.1 為自適應而開發（Build In Adaptivity） 人們通常希望在他們所有的設備和多種情境中使用自己喜歡的應用程序，比如在不同的設備方向上和iPad的分屏情況下。尺寸類別（?Size classes）和自動布局（Auto Layout）可以通過定義屏幕的布局、視圖控制器和視圖在環境變化時候應該怎么適應來幫助你實現這個愿望。（顯示環境[display environment]的概念指的是設備的整個屏幕或者其中一部分，比如彈出框的區域或者iPad分屏視圖中其中一側的區域。） iOS在特征集合（*trait collection*）的定義中包含了顯示環境的概念，特征集合囊括了尺寸類別（size class），顯示比例（display scale）和用戶界面語言（user interface idiom）。你可以使用一個特征集合讓你的視圖和視圖控制器響應顯示環境的變化。 iOS定義了兩個尺寸類別（size class），常規的（regular）和壓縮的（compact）。常規尺寸與拓展的空間緊密相關，壓縮尺寸與約束的空間相關。想要定義一種顯示環境，你需要定義一種橫屏尺寸類別，與一種豎屏尺寸類別。如你所想，一個iOS設備在豎屏模式可以使用一套類別，而橫屏模式下可以使用另一套類別。 iOS能隨著尺寸類別和顯示環境變化而自動生成不同布局。舉個例子，當垂直尺寸從壓縮變為常規時，導航欄和工具欄會自動變高。 當你靠尺寸類別來驅動布局變化時，你的應用在任何顯示環境時都能顯示得很好。關于如何在Interface Builder中更好的使用尺寸類別，你可以查閱*[Size Classes Design Help](https://developer.apple.com/library/ios/recipes/xcode_help-IB_adaptive_sizes/_index.html#//apple_ref/doc/uid/TP40014436).* > **注：**在一種尺寸類別中，持續使用Auto Layout進行小的布局調整，比如拉伸或壓縮內容。更多Auto Layout，參看?*[Auto Layout Guide](https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/index.html).* 下面的實例可以幫助你形象展現尺寸類型如何適配不同設備的顯示環境。例如：iPad（包括iPad Pro）在長寬和橫屏豎屏時都使用常規尺寸類型。換句話說，iPad顯示環境一直處于垂直和水平的常規狀態。 [](http://isux.tencent.com/wp-content/uploads/2015/10/20151019161955209.png) > 注：合格的iPad型號支持多任務，你的應用可能需要與其他應用共享同一個屏幕。確保使用Auto Layout，這樣你可以在用戶使用多任務功能時響應他，比如 分屏模式（Split View）和多任務分屏模式（Slide Over）。 除了使用Auto Layout，當你在iPad Pro上展示可讀性的內容時，依靠UIView的?[readableContentGuide](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIView_Class/index.html#//apple_ref/occ/instp/UIView/readableContentGuide)屬性是非常重要的，這樣可以擁有讓讀者舒服的邊距。 iPhone的顯示環境可根據不同的設備和不同的握持方向而改變。 豎屏時，iPhone6 Plus使用的是壓縮寬度和常規高度類型。  橫屏時，iPhone6 Plus使用的是常規寬度和壓縮高度類型。  其他iPhone型號，包括iPhone6使用相同的尺寸類型設置。 豎屏時，iPhone 6，iPhone 5 和iPhone 4S使用的是壓縮寬度和常規高度。 [](http://isux.tencent.com/wp-content/uploads/2015/10/20151019161937222.png) 橫屏時，這些設備在寬高上使用的都是壓縮類。 [](http://isux.tencent.com/wp-content/uploads/2015/10/20151019161943483.png) ### 1.3.2 在不同環境提供良好體驗（Provide a Great Experience in Each Environment） 當你使用自適應來開發UI時，你可以保證UI跟隨顯示環境變化而適當地響應。遵照這些指南，你可以給用戶良好的設備響應體驗。 **在所有環境下都保持對主體內容的專注。**這是最高優先級。人們使用應用時，瀏覽感興趣的內容并與之發生互動。隨著環境變化改變專注點會讓用戶感覺到迷失方向，讓他們感覺對應用失去控制。 **避免布局上不必要的變化。**在所有環境中保持一致的使用體驗，能讓人們在旋轉設備或在不同設備上運行你的應用時維持穩定的使用模式。例如，如果你在水平的常規模式下使用了網格來顯示圖像，那么無需在壓縮模式下使用列表來展示同樣的內容，雖然你可能調整了網格的尺寸。 **如果你的應用只在一個方向上運行，那么請直接一點。**人們希望在各種握持方式下都可以使用你的應用，能滿足這個期待是最好的。但是，如果你的應用只在一個方向下運行，那么你應當注意： * **避免出現提示人們旋轉設備的相關UI元素****。**讓應用在支持的方向下清晰地運行，如果需要用戶旋轉設備，不要給UI添加不必要的混亂。 * **支持同一個方向上的變化。**例如，如果一個應用只能橫屏運行，用戶無論用左手或是右手握持時都能觸及到home鍵。如果用戶在使用應用時180度旋轉設備，那最好應用內容也能及時響應并旋轉180度。 **如果你的應用將設備方向翻轉視為用戶輸入（的一種指令），那么就按照程序設定的方式來響應設備翻轉。**舉個例子，一個游戲讓用戶利用設備翻轉來移動游戲中的部件，那么這個游戲應用本身（的UI）不能對翻轉屏幕產生響應。在這種情況下，你必須關聯兩個需要變化的方向，并且允許人們在這兩個方向切換直到他們開始（了解并執行）應用的主體任務。一旦人們開始執行主要任務，那就開始按程序設定的那樣來響應設備的動作。 ### 1.3.3 使用布局來溝通（Use Layout to Communicate） 布局包含的不僅僅是一個應用屏幕上的UI元素外觀。你的布局，應該告訴用戶什么是最重要的，他們的選擇是什么，以及事物是如何關聯起來的。 **強調重要內容或功能，讓用戶容易集中注意在主要任務上。**有幾個比較好的辦法是在屏幕上半部分放置主要內容——遵循從左到右的習慣——從靠近左側的屏幕開始： [](http://isux.tencent.com/wp-content/uploads/2015/10/20151019161947246.png) **使用不同的視覺化重量和平衡來告訴用戶當前屏顯元素的主次關系。**大型控件吸引眼球，比小的控件更容易在出現時被注意到。而且大型控件也更容易被用戶點擊，這讓它們在應用中尤其有用——就像電話和時鐘（上面的按鈕）那樣——能讓用戶經常在容易分心的環境下仍然保持正常使用。 [](http://isux.tencent.com/wp-content/uploads/2015/10/20151021171227949.jpg) **使用對齊來讓閱讀更舒緩，讓分組和層次之間更有秩序。**對齊讓應用看起來整潔而有序，也讓用戶在滑動整屏內容時更容易定位和專注于重要信息。不同信息組的縮進與對齊讓它們之間的關聯更清晰，也讓用戶更容易找到某個控件。 **確保用戶在內容處于默認尺寸時便可清楚明白它的主要內容與含義。**例如，用戶應當無需水平滾動就能看到重要的文本，或不用放大就可以看到主體圖像。 **準備好改變字體大小。**用戶期望大多數應用都可以響應他們在iOS的設置中設定的字體大小。為了適應一些文本大小的變化，你也許需要調整布局；想要得到更多文本顯示相關的信息，請查閱下文“顏色與字體”中相關的內容。 **盡量避免****UI****上不一致的表現。**在一般情況下，有著相似功能的控件看起來也應該類似。用戶常常認為他們看到的不同總有原因，而且他們傾向于花時間去嘗試（譯者按：因此為了避免用戶做無用的嘗試，建議類似的功能外觀都保持一樣。） **給每個互動的元素充足的空間，從而讓用戶容易操作這些內容和控件。**常用的點按類控件的大小是44 x 44點（points）。 [](http://isux.tencent.com/wp-content/uploads/2015/10/20151019161959199.png)