CH1. UI Design Basics(03)-Adaptivity and Layout

Adaptivity and Layout

1. 建立自适应（Build in Adaptivity）

trait collection：includes size class, display scale and user interface idiom.
iOS有两种尺寸类别（size class）：正常态（regular）和压缩态（ compact）
为了描述一个显示环境，你需要指定horizontal size class和vertical size class。你也可能猜到了，一个iOS终端可以为portrait orientation使用一套size class同时为landscape orientation使用另一套size class。当显示环境的size class改变时，iOS可以自动做出多种布局调整。例如，当vertical size class从压缩态变为正常态，导航栏和工具栏都会自动增高

iPad和iPad Pro在两种摆放方向时，两个维度都是正常态

iPad显示环境.png

iPhone的显示环境随着终端和其摆放方向而变化

• iPhone 6 Plus（maybe iPhone 6s Plus）
  竖屏放置：vertical regular and horizontal compact
  横屏放置：vertical compact and horizontal regular
• iPhone 6（maybe iPhone 6s）,iPhone 5/5s,iPhone 4s
  竖屏放置：vertical regular and horizontal compact
  横屏放置：vertical compact and horizontal compact

2. 为每种环境提供美妙的体验（Provide Great Experience in Each Environment）

利用自适应，可以确保你的UI随着显示环境的变化做出合适的调整。依据以下原则在所有的终端和环境中为用户带来极致的体验。

在所有环境中都要将注意力维持在主要内容上。环境改变时改动焦点会使用户迷失，并且让用户感觉到丧失对App的控制。

避免对布局进行随意的改动。

如果你的App只能在一个方向使用，要诚实地面对用户。用户当然期待App可以在两个方向使用，最好满足人们的期望。但如果只能在一个方向使用，你应该：

• 避免显示一个告诉用户去旋转屏幕的UI元素；
• 当设备旋转180度时，App的内容也应该旋转180度。

当你的App解释用户输入造成的设备旋转时，用App内特殊的方式去处理。比如一个游戏中需要用户通过旋转设备来移动游戏物体时，屏幕内容不能旋转。

3. 利用布局来传递思想（Use Layout to Communicate）

布局不仅是一个App屏幕上UI元素的样子。通过布局，你向用户展示什么最重要，他们的选择是什么，以及事物之间如何关联。

**将重要的内容或功能放置在屏幕的上半部分——在左向右阅读的文化中——靠近屏幕左边的地方，可以让注意力更容易集中在首要任务上。
**

使用视觉重量向用户展示相对来说更重要的屏幕元素。大尺寸部件相比小尺寸部件更吸引眼球，也更容易点击。

利用对齐使内容更易浏览，同时传递分组和层级。

确保用户能在默认大小的字体下理解主要内容。例如，用户不应该通过横向滑动屏幕去读重要的文字经过缩放才能看到重要的图片。

在你的UI中尽力避免没有一致性的外观。通常，具有相似功能的元件也应该有类似的外观。人们经常假定一定是某个原因导致了他们看到的不一致性，他们倾向于花时间找到它。

为可交互元件提供充足的空间，让人们易于与内容交互。给点击类型的控件大概44×44point大小的点击区域。