【译】UI设计基础(UI Design Basics)--自动适配与布局(Adaptivity and Layout)(四)

2.3  自动适配与布局(Adaptivity and Layout)

2.3.1  开发成自动适配(Build In Adaptivity)

　　用户通常希望在自己的所有设备，各种场景中使用他们喜欢的app。比如不同设备的不同方向以及在iPad上的分屏。尺寸类型(Size Classes)和自动布局(Auto Layout)可以通过定义屏幕的布局，视图控制器以及视图在屏幕显示环境变化时该如何适配帮你实现这个愿望。（这里的“显示环境”可以是整个屏幕也可以是屏幕中的一部分，如弹出框里面的部分或iPad上的一个分屏。）

　　iOS中显示环境的概念定义在特征集合(Trait Collection)中,特征集合包含尺寸类型(Size Classes),显示比例(Display Scale)和用户界面语言(User Interface Idiom)。你可以使用一个特征集合让你的视图和视图控制器响应显示环境的变化。(关于Trait Collection的更多资料可以参考UITraitCollection Class Reference.)

　　iOS定义了两种尺寸类型：常规的(Regular)和紧凑的(Compact)。常规尺寸一般与广阔的空间相关，紧凑尺寸则与受限空间相关。为了描述显示环境，你需要定义一个水平的尺寸类和一个垂直的尺寸类。如你所想，iOS在竖屏的时候使用一组尺寸类，在横屏时使用另外一组尺寸类。

　　iOS能在尺寸类型(Size Classes)和显示环境变化时自动做很多布局上的调整。例如：当垂直方向的尺寸类从紧凑变成常规，导航栏和工具栏会自动变高。

　　当你通过尺寸类使布局发生改变，你的app可以在任意环境都能很好的显示。要学习如何通过尺寸类构建用户界面，请参考Size Class Design Help.

　　注：在一个尺寸类中，可以继续使用自动布局来进行细微的调整，如拉伸或缩小内容。要学习如何使用自动布局，请参考Auto Layout Guide.

　　下面这些例子帮你更加直观的了解尺寸类是如何描绘不同设备的显示环境。如，iPad(含iPad Pro)不管任何尺寸，竖屏，横屏都是常规尺寸类型。换句话说，iPad水平和垂直方向的显示环境总是常规的。

　　

　　注：在支持多任务的iPad型号上，你的app可能会与另外一个app共享屏幕。确保使用自动布局(Auto Layout)，这样你就能响应用户在多任务方面的请求，如分屏(Split View)和侧屏(Slide Over)。

　　除了使用自动布局，通过设置UIView的readableContentGuide属性设置你布局中的可读区域也是同样重要的，这样可以让用户有更好的阅读体验。

　　iPhone的显示环境则存在差异，这主要由设备的型号及持握方向决定的。

　　竖屏时，iPhone6 Plus使用水平紧凑和垂直常规的尺寸类型；横屏时则是水平常规和垂直紧凑的尺寸类型。

　　其他iPhone型号，包括iPhone6则使用同一套尺寸类型。

　　竖屏时，iPhone6，iPhone5，iPhone4s使用水平紧凑和垂直常规的尺寸类型。横屏时这些设备则水平和垂直都是紧凑的尺寸类型。

　　

2.3.2  总是提供良好的体验(Provide a Greate Experience in Each Environment)

　　当你了解自动适配的优势，你就能保证在显示环境发生改变时适当地应对。遵循下面这些指南可以在任何设备环境中给用户带来良好的体验。

• 在所有环境下对主要内容保持专注。这是优先级最高的，用户使用你的app去关注一些他们在意的内容。如果环境变化时改变焦点会，会让用户感到困惑，同时也会觉得失去对app的控制。
• 避免布局上没有必要的变化。在所有的环境中使用类似的体验，这样用户在旋转设备，或者在其他设备上运行你的app时就能保持他们的操作习惯。例如，在水平常规环境下用一个网格显示的一张图片，你无需在水平紧凑的环境显示相同的内容，尽管你已经调整了网格的大小。
• 如果你的应用只支持一个方向，那么请直接一点。用户总是希望你的应用能够支持不同的方向，当然能满足这点是最好的。但如果你的应用只能在一个方向使用，你应该：
  • 避免出现会提示用户旋转设备的元素。在支持的方向上运行，如果有需要，清楚地告诉用户旋转设备，不过前提是没加入杂乱的东西。
  • 支持同一个方向上的变化。打个比方，如果一个应用只支持在水平方向，那么不管Home键是在左边还是右边应该都能够正常运行。如果用户把设备旋转180度，应用的内容最好也是旋转180度响应用户的操作。
• 如果你将设备方向的变化视做用户输入的一种，那么就要按照程序特定的方式来旋转。例如，一个游戏让用户通过屏幕旋转一定移动游戏中的一个物体，这时设备就不能响应屏幕旋转。在这个案例中，你必须关联两个需要变化的方向并允许用户在这之间切换直到他们开始应用的主任务。一但开始执行主任务，接着开始响应设备的移动。（WTF,这段翻译得自己都看不懂）

2.3.3  用布局来交流(Use Layout to Communicate)

　　布局其实不仅仅是UI元素在界面上的显示，通过布局，你可以告诉用户哪些信息是最重要的，他们的选择是什么，以及所有的东西是如何联系在一起的。

• 通过突出重要的内容和功能，让用户更容易将注意力集中在主要任务上。一些好的做法就是将重要的项目放在屏幕的上半部分，并且遵循从左到右的习惯。

　　

使用视觉权重和平衡来告诉用户屏幕上哪些元素是相对重要的。大的项目(应用上的一个元素)总是更吸引眼球，给人的感觉就是会比小的重要些。同是大的项目也有利用户点击，这使它们在应用中尤其有用。比如在电话和时钟—用户能在容易分心的环境下正常使用。

　　

• 使用对齐以便浏览以及分组分层沟通。对齐可以让应用看起来更加整齐有序，同时也有利于用户在满屏的信息滚动时保持专注。不同信息组的缩进与对齐指示它们之间的关系，这让用户更容易找到特定的项目。
• 确保用户能够在默认的尺寸下看懂主要内容。例如，用户应该无需水平滚动就能看到重要的文本信息，或者放大才能看清楚主要图片。
• 随时准备改变文本的大小。用户希望大部分应用都能合适的响应他们在设置中选择的字体大小。为了应对文本大小的变化，你可能需要调整你的布局。更多这方面的信息，请参考Text Should Always Be Legible.
• 尽量避免UI出现不一致的情况。一般来讲，有相似功能的元素看起来也应该是相似的。用户通常会认为前后矛盾是有原因的，并且他经常会浪费很多的时间尝试找出原因。
• 给每个交互控件足够的空间，以便用户能够更好地操作。给每个可点击的空间大约44*44像素的大小。

　　　　　　　　　　　　　　推荐　　　　　　　　　　　　　　　　　　　　　　　　　不推荐