3. 自適應(yīng)性與布局（Adaptivity and Layout）
3.1 內(nèi)置的自適應(yīng)性（Build In Adaptivity）
People generally want to use their favorite apps on all their devices and in any orientation. In iOS 8 and later, you use size classes and Auto Layout to help you meet this expectation by defining how the layout of screens, view controllers, and views should adapt when the display environment changes. (The concept of?display environment?can refer to the entire device screen or only a portion of it, such as the area in a popover or the primary view in a split view controller.)
人們通常希望在他們所有的設(shè)備上、無論橫屏豎屏，都能使用他們喜愛的 app。在 iOS 8 及之后，開發(fā)者可以使用尺寸類（size classes）和自動布局（Auto Layout）來輔助實現(xiàn)期望，這需要定義屏幕布局、視圖控制器和視圖如何隨顯示環(huán)境改變而自適應(yīng)。（“顯示環(huán)境”的概念指的是整個設(shè)備屏幕或者僅僅一部分，例如彈出框區(qū)域或者分開的視圖控制器中的主要視圖）
iOS defines two size classes: regular and compact. The?regular?size class is associated with expansive space and the?compact?size class is associated with constrained space. To characterize a display environment, you specify a horizontal size class and a vertical size class. As you might guess, an iOS device can use one set of size classes for portrait orientation and a different set of size classes for landscape.
iOS 定義了兩種尺寸類：常規(guī)（regular）和緊密（compact）。常規(guī)尺寸類與可擴(kuò)展空間相關(guān)，緊密尺寸類與約束空間相關(guān)。為了描述顯示環(huán)境，可以指定一個水平尺寸類和一個垂直尺寸類。如你所想，一個 iOS 設(shè)備可以在豎屏和橫屏使用不同的尺寸類集合。
iOS automatically makes various layout changes when the size classes of a display environment change. For example, when the vertical size class changes from compact to regular, navigation bars and toolbars automatically become taller.
When you rely on size classes to drive changes in the layout, your app can look great in any display environment. To learn how to work with size classes in Interface Builder, see Size Classes Design Help.
當(dāng)顯示環(huán)境的尺寸類發(fā)生變化時，iOS 自動進(jìn)行多種布局變換。例如，當(dāng)垂直尺寸類由緊密變?yōu)槌Ｒ?guī)，導(dǎo)航欄和工具欄自動變高。
當(dāng)開發(fā)者依賴尺寸類來驅(qū)動布局的改變，那么 app 可以在任何顯示環(huán)境下都有不錯的顯示效果。參見 Size Classes Design Help 學(xué)習(xí)在 Interface Builder 中使用尺寸類的方法。
NOTE
Within a size class, continue to use Auto Layout to make small layout adjustments, such as stretching or condensing content.
注：在尺寸類里，可以繼續(xù)使用自動布局來進(jìn)行小的界面調(diào)整，例如延伸或緊縮內(nèi)容。
The following concrete examples can help you visualize how size classes characterize the display environments of various devices. For example, iPad uses the regular size class in both dimensions and in both orientations. In other words, the iPad display environment is always horizontally and vertically regular.
下面具體的例子有助于可視化理解尺寸類如何描述多種設(shè)備上的顯示環(huán)境。例如，iPad 無論尺寸大小還是橫屏豎屏，都使用常規(guī)尺寸類。即，iPad 的顯示環(huán)境總是水平常規(guī)且垂直常規(guī)。
The display environment of iPhone can vary depending on the device and its orientation.
iPhone 的顯示環(huán)境隨設(shè)備大小和橫屏豎屏而變化。
（在豎屏?xí)r，iPhone 6 Plus 使用水平緊密和垂直常規(guī)的尺寸類；在橫屏?xí)r，iPhone 6 Plus 使用水平常規(guī)和垂直緊密的尺寸類。）
All other iPhone models, including iPhone 6, use the same sets of size classes.
除 iPhone 6 Plus 之外的所有其他 iPhone 模型，包括 iPhone 6，都使用相同的尺寸類集合。
（在豎屏?xí)r，iPhone 6、iPhone 5、iPhone 4s 都使用水平緊密和垂直常規(guī)的尺寸類；在橫屏?xí)r，這些設(shè)備都使用水平緊密和垂直緊密的尺寸類。）
3.2 各環(huán)境下均有美好體驗（Provide a Great Experience in Each Environment）
When you take advantage of adaptivity, you can ensure that your UI responds appropriately to changes in the display environment. Follow these guidelines to give people a great experience on all devices and orientations.
充分利用自適應(yīng)性，可以確保 UI 隨顯示環(huán)境變化而及時響應(yīng)。遵循這些指南帶給人們?nèi)O(shè)備、無論橫屏豎屏的美好體驗。
Maintain focus on the primary content in all environments.?This is your highest priority. People use your app to view and interact with the content they care about. Changing the focus when the environment changes can disorient people and make them feel they’ve lost control over the app.
Avoid gratuitous changes in layout.?A comparable experience in all environments lets people maintain their usage patterns when they rotate a device or run your app on a different device. For example, if you use a grid to display images in a horizontally regular environment, you don’t have to display the same information in a list in a horizontally compact environment, although you might adjust the dimensions of the grid.
所有環(huán)境下均聚焦于主要內(nèi)容。這是最高優(yōu)先級。人們使用 app 來查看他們關(guān)心的內(nèi)容，并與之交互。如果當(dāng)環(huán)境改變時改變聚焦，就會使用戶迷惑，讓他們覺得自己好像對 app 失去了掌控。
避免布局的無故改變。在所有的環(huán)境下，讓人們在旋轉(zhuǎn)設(shè)備或在不同設(shè)備上運(yùn)行 app 時，仍然保持他們原有的使用模式，就能對比看出問題所在。例如，如果在水平常規(guī)環(huán)境下使用網(wǎng)格顯示圖片，那就不必在水平緊密環(huán)境下用列表形式顯示同樣的信息，雖然可以調(diào)整網(wǎng)格的尺寸來實現(xiàn)。
Be straightforward if your app runs in only one orientation.?People expect to use your app in different orientations, and it’s best when you can fulfill that expectation. But if it’s essential that your app run in only one orientation, you should:
（1）Avoid displaying a UI element that tells people to rotate the device.?Running in the supported orientation clearly tells people to rotate the device, if required, without adding unnecessary clutter to the UI.
（2）Support both variants of an orientation.?For example, if an app runs only in landscape, people should be able to use it whether they’re holding the device with the Home button on the right or on the left. And if people rotate the device 180 degrees while using the app, it’s best if the app responds by rotating its content 180 degrees.
如果 app 只在橫屏或者豎屏下運(yùn)行，那就要明確說明。人們期待在橫屏和豎屏下都能使用 app，所以實現(xiàn)時最好按此思路。但如果 app 確有必要只在橫屏或者豎屏一種情況下運(yùn)行，那么應(yīng)該：
（1）避免顯示會引導(dǎo)用戶旋轉(zhuǎn)設(shè)備的 UI 元素。如果需要的話，在被支持的方向運(yùn)行時，清晰地告知用戶旋轉(zhuǎn)設(shè)備，而不要對 UI 增加不必要的干擾。
（2）支持一個方向上的變種。例如，如果 app 只在橫屏上運(yùn)行，那無論手持設(shè)備時 Home 鍵在左側(cè)還是右側(cè)，用戶都能正常使用。如果人們使用 app 過程中旋轉(zhuǎn) 180 度，app 里的內(nèi)容最好也相應(yīng)旋轉(zhuǎn) 180 度?！咀g者注：“iDaily 2014 年度別冊”（iphone 版）就是一個很好的例子來說明上面的問題】
If your app interprets changes in device orientation as user input, handle rotation in app-specific ways.?For example, a game that lets people move game pieces by rotating the device can’t respond to device rotation by rotating the screen. In a case like this, you should launch in both variants of the required orientation and allow people to switch between the variants until they start the main task of the app. As soon as people begin the main task, begin responding to device movement in app-specific ways.
如果用戶輸入時，app 正在解析設(shè)備方向的改變，那就用 app 特有的方式處理旋轉(zhuǎn)。例如，一個游戲讓用戶通過旋轉(zhuǎn)設(shè)備來移動游戲塊，這時不能響應(yīng)設(shè)備來旋轉(zhuǎn)屏幕。在這樣的例子中，應(yīng)該啟動需要的方向上所有變種，然后允許用戶在變種間切換，直到他們開始 app 的主要任務(wù)。一旦用戶開始主任務(wù)，再開始使用 app 特有方式響應(yīng)設(shè)備移動。
3.3 使用布局來交流（Use Layout to Communicate）
Layout encompasses more than just how UI elements look on an app screen. With your layout, you show users what’s most important, what their choices are, and how things are related.
Make it easy to focus on the main task by elevating important content or functionality.?Some good ways to do this are to place principal items in the upper half of the screen and—in left-to-right cultures—near the left side of the screen:
布局不僅僅是控制 UI 元素如何顯示在 app 屏幕上。布局向用戶展示哪些是最重要的，擁有哪些選擇，以及事情如何相互關(guān)聯(lián)。
提升重要的內(nèi)容和功能，從而使得用戶易于聚焦主要任務(wù)。達(dá)成此目的有些好方法：把最重要的條目放在屏幕上半部分、靠近屏幕左側(cè)（按照從左到右的習(xí)慣）：
Use visual weight and balance to show users the relative importance of onscreen elements.?Large items catch the eye and tend to appear more important than smaller ones. Larger items are also easier for users to tap, which makes them especially useful in apps—such as Phone and Clock—that users often use in distracting surroundings.
使用可視化的重量和平衡來向用戶展示屏幕元素的相對重要性。大條目引人注目，會比小條目看上去更重要。較大的條目也更易于用戶點擊，這使它們在 app 中尤其有用。例如它們在電話 app 和鬧鐘 app 中的應(yīng)用就體現(xiàn)了它們的作用，因為用戶經(jīng)常在容易分心的環(huán)境中使用它們。
Use alignment to ease scanning and communicate groupings or hierarchy.?Alignment tends to make an app look neat and organized and it gives users places to focus while they scroll through screenfuls of information. Indentation and alignment of different information groups indicate how the groups are related and make it easier for users to find specific items.
Make sure that users can understand primary content at its default size.?For example, users shouldn’t have to scroll horizontally to read important text, or zoom to see primary images.
Be prepared for changes in text size.?Users expect most apps to respond appropriately when they choose a different text size in Settings. To accommodate some text-size changes, you might need to adjust the layout; for more information about displaying text in your app, see?Text Should Always Be Legible.
使用對齊以方便快速瀏覽，通過分組或分層進(jìn)行交流。對齊有助于使 app 看上去整潔、有條理，在用戶滾動瀏覽滿屏的信息時也有位置可以聚焦。不同信息組的縮進(jìn)和對齊展示了這些組是如何被關(guān)聯(lián)的，也使用戶易于找到特定條目。
確保用戶在缺省大小時就能理解主要的內(nèi)容。例如，用戶不必水平滾動來閱讀重要文本，或者縮放來看到主要的圖像。
對文本大小變化有所準(zhǔn)備。當(dāng)用戶在設(shè)置中選擇了不同的文本大小時，他們希望大部分 app 能適當(dāng)?shù)仨憫?yīng)。為了適應(yīng)某些文本大小改變，可能需要調(diào)整布局。關(guān)于 app 中顯示文本的更多信息參見?Text Should Always Be Legible。
As much as possible, avoid inconsistent appearances in your UI.?In general, elements that have similar functions should also look similar. People often assume that there must be a reason for the inconsistencies they notice, and they’re apt to spend time trying to figure it out.
Make it easy for people to interact with content and controls by giving each interactive element ample spacing.?Give tappable controls a hit target of about 44 x 44 points.
盡可能避免 UI 出現(xiàn)不一致。通常，具有相似功能的元素應(yīng)該看上去也很相似。用戶經(jīng)常假設(shè)他們注意到的不一致之處必然有特別的原因，也容易花時間試圖找出原因。
為每個可交互元素留出足夠的空間，使得用戶與內(nèi)容和控件交互時更加容易。給每個可點擊控件大約 44*44 像素的目標(biāo)命中區(qū)域。
