iOS 13 设计新特性（1）

@C7210 ：在今年 WWDC 期间看到一些设计方面的分会视频，便萌生出要做这样的中文图文版本。其实过去每年的 DC 分会都有几场不错的设计主题演讲，印象中 2017 年的基础设计原则专题，以及 2014 年的快速原型专题等等，都非常值得学习。
或许是因为 WWDC 分会视频的获取成本较高，且多是缺乏字幕的英文原声，所以一直以来没见到太多同学在关注，也蛮遗憾的。现在我来推一下好了，就从今年的「What’s New in iOS Design」开始。

其实近来也看到有朋友在做关于这场分会的内容，不过更像是要点提炼。演讲者在内容的骨骼之间填充了很多有价值的细节信息，不仅关于「how」，更在于「why」。我会把所有这些内容都涵盖进来，尽可能还原完整的现场。
本场演讲人是 Apple Design Evangelist 团队的 Mike Stern，话题涉及「深色模式」、「卡片视图」和「情境菜单」三大方面。由于整体篇幅较长，我们在本期首先聚焦于「深色模式」。Mike 从设计体系、颜色、材质、系统控件、SF Symbols 等若干方面的新变化入手，对「深色模式」相关主题进行了从内到外的详细诠释。
随着 iOS 13 的到来，我们设计和开发 app 的方式将会发生细微而又重大的变化。
深色模式将改变我们对颜色、图标图形及文字内容的处理方式。

新的卡片风格面板将会改变模态视图的默认呈现方式及操作方法。

新的情境菜单可以帮助用户快速访问与当前内容相关的情境化功能选项。

接下来，我们将围绕这三个主题进行详细的探索。首先来看深色模式。
去年，我们为 macOS 带来了深色模式，受到了人们的欢迎。其实多年以来，影像视频类产品通常都在使用深色界面，以帮助用户更清晰地聚焦于内容本身。

深色界面非常适合于光线条件较暗的环境，因为我们的眼睛能够更加轻松地在界面与周围的环境之间进行切换。此外，出于个人喜好，很多用户也更加倾向于使用深色界面。

iOS 中的深色模式使用纯黑色作为背景色，为文字内容及其他前景元素提供最高对比度。此外，纯黑背景色在视觉效果上可以和设备框体无缝融合，使整个界面看起来更加开阔，仿佛与硬件融为一体。

一般而言，所有 app 都应该支持深色模式。当人们将系统切换为深色模式之后，自然会期望每一个 app 的外观都随之进行改变。

关于 iOS Design System

深色模式的设计适配涉及到整个 iOS 设计体系的进化。目前，iOS 设计体系已经面向 iOS 13 进行了全面的翻新。这里简单诠释一下，所谓「设计体系」，大体是指以符合特定逻辑及一致性的方式整合在一起的一系列界面组成元素，包括颜色、字体、图形等等。一套合理、一致的设计体系将有助于你构建出更加易学易用的 app。基于 iOS 设计体系构建的 app 自然能使 iOS 用户感到熟悉易懂。

在进入正题之前，我还想和各位分享我们的设计团队在 iOS 设计体系翻新过程中的一些主要设计目标。

首先，也是最首要的，我们希望 iOS 依然能够保持人们所熟悉的样子，并符合长久以来的操作直觉。
我们希望 iOS 具备更好的内部一致性。所有的内置 app 都已进行重设计，以保持彼此之间的统一。期间所运用到的新设计特性也正是我们在接下来的正题当中将要进行了解的。
我们希望新的设计体系能够提供一系列的颜色选项，以便构建更加清晰的信息层级，使最重要的元素得以突显，而次要元素则适度弱化。
我们还将可访问性（accessibility）放在了和其他设计目标同等重要的位置，新系统将全面支持「辅助功能」设置中的「粗体文本」与「增强对比度」模式。
最后，我们希望新的设计体系足够简单直白，易于实施。
下面进入正题，让我们一起对深色模式进行深入的了解。

颜色

每个 app 都有背景视图，同时绝大多数 app 会提供文字内容与图标。很多 app 还会通过分隔线与分组容器来组织内容。

我们会很自然地通过色值对这些元素的颜色进行定义，例如字色是纯黑，背景是纯白等等。随着界面复杂度的提升，色盘也会相应地进行扩展，但通常不会出现什么大问题。

然而，要同时适配深、浅两种外观模式，你就必须管理两套完整的颜色方案，并确保它们之间始终保持同步。这种情况下，我们需要以更加抽象的方式来思考和管理颜色体系。为此，我们引入了「语义化颜色」的概念。
语义化颜色通过「用途」对颜色进行定义描述，而非通过具体色值。「用途」的概念具有动态性，可以脱离于具体的表现样式而独立存在。譬如，一个「背景色」，在深色模式当中可以指代黑色，而在浅色模式当中可以指代白色。

因此，相比于自己维护两套独立的配色，你现在完全可以使用系统内置的语义化颜色方案，来确保你的界面可以自动适配深、浅两种外观模式，这会非常方便。

iOS 13 内置了一整套语义化颜色供你使用，其中多数颜色都拥有「一级」至「四级」梯度，这些变量主要用于构建信息层级。例如「文本色」（LabelColor）是一级字色，可以提供最高的对比度，主要用于最为重要的内容元素，如内容的主标题。而「二级文本色」（SecondaryLabelColor）可以用于副标题，「三级文本色」（TertiaryLabelColor）用于输入框占位符文本，「四级文本色」（QuaternaryLabelColor）用于禁用状态的文本。

对于背景色来说也是同理。「系统背景色」（SystemBackground）是一级背景色，在浅色模式当中指代白色，在深色模式当中则指代黑色。「二级系统背景色」和「三级系统背景色」则用于构建更丰富的背景层级。

此外还有一组背景色专门用于列表视图（SystemGroupedBackground）。仔细观察下图，你会发现，深、浅两种模式当中的列表视图，在背景色的使用上并非简单的反色。在两种模式中，列表行的背景色都比界面底色更加明亮，因为我们希望在确保对比度的同时，也能使两种模式下的界面在感知上更加统一。在设计深色界面时，试着设想光源变暗之后的效应，而非简单地将所有颜色进行反转。

此外，系统内置的语义化颜色还包括填充色（FillColor），以及分隔线色（SeparatorColor）。其中，所有的填充色和一种分隔线色采用了半透明效果，以便与各类背景色形成良好的对比度。

系统同时提供了六种完全不透明的灰色供你使用（SystemGrey）。

在那些使用半透明色可能带来问题的地方，这些灰色将尤其适用。例如在绘制交叉网格时，半透明色会产生重叠效果，干扰人们的视线；如果元素需要叠加放置，那么只有使用实色才能表现出正常样式。


这些语义化颜色已经被用于新系统中的方方面面，因此我们也鼓励你在自己的 app 中使用这些颜色。你可以在 Apple Design Resources 与 Human Interface Guidelines 当中查看完整的颜色定义，以便更好地起步。

此外，我们还会继续提供一系列着色颜色供你使用。这些着色同样是动态的，能够针对深、浅模式进行自动调整。

同时，每个着色还拥有高对比度变体，当「辅助功能」设置中的「增强对比度」被开启后，这组变体将被调用，着色在深色模式中会变得更亮，在浅色模式中会变得更暗。



如果你需要使用定制化的着色，那么同样要确保它们可以适配于深、浅两种外观模式。在浅色模式当中表现良好的颜色，到了深色模式当中可能会产生对比度不足的问题，反之亦然。因此，最好可以通过线上的对比度计算工具来进行精准确认。

由于着色同样具有动态特性，因此你可以为深、浅两种模式选择相似但不同的着色，使各自的对比度达到标准，即 4.5 : 1 或更高。良好的对比度可以提升界面的可访问性及可用性。

此外，你可能还会用到更多的定制化颜色，例如可以由用户自主选择的字色，或是定制化的状态指示符等等。与着色相仿，这些定制化颜色同样可以拥有动态特性，因此你仍然可以针对深、浅模式进行细微调整，确保所有颜色在不同模式下都可以提供足够的对比度。

我们前面一直在讲「深色」与「浅色」，然而这只是一种比较简化的说法。实际上，深色模式的背景色体系还分为「base」和「elevated」两组，用于构建图层的层级关系。

当两个浅色图层产生叠加时，我们通过投影效果就可以将它们区分开来；然而在深色模式下，这种方式几乎是无效的。因此，在深色模式当中，同样使用「SystemBackground」作为背景色的图层，在视觉上位于「后方」的会采用「base」色值，颜色较深；而位于「前方」的会采用「elevated」色值，颜色较浅。

以联系人界面为例。在独立的「联系人」app 当中，其背景色采用「base」色组，即纯黑；然而当同样的界面以模态视图的形式出现在「电话」当中时，其背景则会采用「elevated」色组。

我们再来看一个稍复杂些的例子。iPad 当中的「邮件」在独立状态下会采用「base」色组作为背景色。当我们唤出「联系人」作为悬浮窗口时，其背景色会采用「elevated」色组，以便在视觉上表现出悬浮于「邮件」之上的效果。

然而，当「联系人」与「邮件」多任务并列展示时，它们都会采用「elevated」色组作为背景，以确保窗口之间的分隔空间以及分隔指示符足够明显可见。

创建新邮件时的模态视图同样采用了「elevated」色组作为背景，但此时，后面的「邮件」主界面的背景色会稍许变深，因为模态视图会为后面的图层添加一层覆盖效果，使其变暗。

因此，你在为深色模式进行设计时，也要考虑到背景色可能随着层级升降而产生的明暗变化，并进一步考量前景元素的颜色对比度是否恰当。同时我们还要再次强调半透明填充色和分隔线色的重要性，因为它们可以灵活适应于「base」与「elevated」两组背景色。

材质

下面来看材质（materials）。
iOS 13 的材质体系发生了很大变化。现在，你可以从「thick」、「regular」、「thin」和「ultra-thin」这四种透明度不同的材质当中进行自由选择，它们都能良好适配于不同的背景环境。

同时，它们的外观还会随着深、浅模式的切换而自动调整。

你可以根据自己的实际设计需求而选择使用哪种厚度的材质。其中，「regular」是系统默认的材质，适用于绝大多数的界面环境。

如果需要为内容提供更高的对比度，你也可以选择更厚的材质。

如需承载轻量级的操作，或是较为简单的内容，那么「thin」或「ultra-thin」更加适合。材质的选择取决于其所承载的内容的特质。

说到内容，深、浅两种模式下的每一种材质都为其可能承载的内容提供了恰当的虚化透明效果（vibrancy）。这是一种在 iOS 及 Apple 其他平台当中被广泛采用的视觉效果。

相比于实色元素来说，具有虚化透明效果的内容更加适用于系统提供的材质。当材质背后的背景色发生变化，实色内容很可能与材质产生混溶，因而带来严重的可读性问题；而具有虚化效果的内容则能始终保持恰当的对比度。

系统控件

新的 iOS 设计体系同样涉及到系统控件的翻新，包括形状与颜色的变化，从而达到更高的内部一致性。

经过语义化颜色重绘的系统控件可以良好地适配于深、浅两种模式。因此，使用系统提供的 UIKit，你无需付出任何开发成本便能实现深色模式的自动适配。重新创建控件来代替系统控件，这不仅需要花费大量的时间，同时也难以具备自动适配等一系列优点。

当然，在很多时候，定制化的控件也是必需的；UIKit 毕竟难以满足所有的设计需求。譬如，UIKit 并没有提供星级打分控件。当你自行设计时，应该使用系统提供的颜色方案，这样就无需针对深、浅模式单独进行管理了。

导航栏也进行了升级。默认状态下的大标题导航栏不再有背景色和投影效果，因而标题能够与内容区域无缝衔接。当内容在导航栏底部进行滚动时，导航栏的背景色与投影效果则会淡入呈现。

这种处理逻辑同样可以用于默认的小导航栏。例如在 iPad 的「设置」当中，主导航栏与右侧标准导航栏都使用了无背景、无投影的样式。

无缝衔接的导航栏看上去不错，但也并非在任何时候都适用。由于其背景是全透明的，任何位于下方的内容都会直接呈现出来。此外，如果界面当中的控件元素较多，信息密度较大，那么你应该在导航栏底部保留原本的投影效果，从而形成明确的区隔感。

SF Symbols

一直以来，iOS 都会提供一系列图标符号，用于列表行或底部工具栏等处。然而在深色模式当中，过去的图标表现得有些差强人意，因为它们看上去太过纤细了。

于是，我们的设计团队重新设计了所有的图标。更酷的是，我们将它们制成了 SF Symbols 供各位使用。

SF Symbols 当中包含了超过 1500 个图标。这不仅是一套全新的图标集，同时更代表了设计和使用图标的全新思路。顾名思义，SF Symbols 正是为了配合 San Francisco 字体的视觉特性所设计的。

这些图标可以像文本字符一样被输入，因此能够与文字同时呈现在一行当中。它们拥有内嵌基线，以确保与文字保持恰当的纵向对齐。

每一个 SF Symbol 都针对当前字号提供了小（small）、中（medium）、大（large）三种缩放变体，以适应不同的界面环境。

同时，与 San Francisco 相对应，每一个 SF Symbol 都提供了九种不同的字重。

SF Symbols 的矢量特性可以确保其能够配合动态字体功能（dynamic type）实现自由缩放。

同时，由于提供了多种字重，当「辅助功能」设置中的「粗体文本」被开启后，SF Symbols 也会自动呈现粗体样式。

在设计界面时，你可以通过新的 SF Symbols app 找到所需要的图标，直接复制，然后粘贴到设计稿里的文本图层当中即可。

更新过的 iOS Apple Design Resources Sketch 文件已经全面支持 SF Symbols。譬如，要想更换 tab bar 中的图标，你只需选中 tab bar，将 SF Symbol 粘贴到右侧检查器面板的特定字段当中，即可实现覆写。这项功能我个人已经使用了几个月，这真的会改变我们一直以来的设计方式。

如果这 1500 多个图标仍然难以满足你的全部需求，你还可以将某个 SF Symbol 导出成 SVG 格式，然后到 Illustrator 或 Sketch 当中进行定制化修改。保存后的 Symbol 同样具备上述的一切功能特性。

iOS 13 设计新特性（2）

Hello 周三午安，热了哦。从小到大每到这种季节总会幻想被一缸冰镇酸梅汤从头浇到尾的样子，高兴了还张嘴喝几口，冰块稀里哗啦地碎了一地那样。
上周开始尝试通过全场译文及对应关键帧截屏的方式对 WWDC 期间一些重要的设计分会进行记录和解析。我个人还蛮喜欢这种形式，可以充分挖掘官方设计团队提供的重要信息，又可以图文并茂。
在第一期当中，我们跟随主持人 Mike Stern 了解了 iOS 13 深色模式的相关要点，包括语义化颜色、材质、控件新样式、SF Symbols 等，错过的同学不妨稍作回顾。今天继续，来了解新的卡片风格面板与情境化菜单。

卡片风格模态面板

模态视图通常被称作“面板”，因为它们向上滑出并覆盖屏幕的呈现方式会给人们带来这样的感知。这样的转场动效可以帮助人们理解当前状态切换的过程。
iOS 13 带来了新的卡片风格模态面板。作为新的默认模态面板样式，卡片将被运用到整个 iOS 系统当中。

卡片风格的好处在于，你可以瞥见面板下方的界面环境，这样你便可以意识到原本的任务流程或模式仍然在进行当中；而过去的全屏模态视图很容易使人们忘记之前的任务进程。

要关闭卡片面板，你可以在卡片上的任意位置向下轻扫。该手势通常会比点击导航栏中的关闭按钮更加轻松；与右滑回退类似，下拉手势在大屏设备当中也很易于通过单手实现。

说到这，或许你会有所疑问：“对于本身已经包含滚屏内容的面板来说，这个手势操作该如何实现呢？” 在这种情况下，向下轻扫首先会使内容回滚到顶部，然后继续下拉则会关闭整个卡片面板。

此外，在任何时候，你都可以从卡片顶部下拉来直接关闭面板，无论其中是否有滚屏内容。

然而，如果面板中包含需要通过纵向轻扫进行操作的控件，或是包含必须进行操作决策的逻辑，那么任何下拉关闭的操作都将被禁用，面板会自动弹回到默认的位置，譬如当我们必须通过点击“取消”或“添加”按钮来结束当前逻辑状态的时候。

此外，对于必须在结束模态之前完成操作决策的情况，你还可以通过呈现行动面板（action sheet）来禁止卡片的关闭，同时与用户进行操作确认；一举两得，非常方便。

然而，便捷的手势操作并不意味着我们不再需要为模态面板提供按钮。可视化的按钮可以一目了然地帮助人们意识到面板可以被关闭，同时对于可访问性（accessibility）设计原则来说也是必需的。此外，人们可能一时还无法习惯于通过手势来关闭面板，或是根本不想进行手势操作。对于包含滚屏内容的面板来说，直接点击按钮进行关闭确实会更加便捷；同时，明示着“确认”和“取消”逻辑的可视化按钮还可以帮助人们快速理解有哪些选项可供执行。

我们认为新的卡片面板很棒，因此会将其设置为 iOS 默认的模态视图形式。然而这并不意味着卡片面板在任何情况下都适用。例如，对于图片编辑或截屏标注一类的任务来说，你可能希望利用更多的屏幕空间进行显示，同时使视觉干扰降至最低。这种情况下，你仍然可以采用传统的全屏模态面板。

关于模态面板，还有一点需要强调：模态的用途是切换任务状态，不要仅因为喜欢它的样式和动效而使用。

譬如日历 app 当中有两种主要模式：在列表或日历网格中浏览日程，以及创建或编辑日程。你在日历中浏览所有的日程事项，选择其中的某一个来浏览详情；这是一个完整的”浏览“模式，父级视图用于呈现列表，子视图用于显示特定日程的详细信息。

当需要创建和编辑日程事项时，人们就会进入到另一个模式当中；因此我们需要用到模态面板，以便帮助人们意识到任务流程的变更。

情境菜单

几年前，随着 3D Touch 的引进，我们同时推出了预览弹出功能（Peek and Pop），该功能的主要目标在于对内容进行快速预览。同时，如果 app 进行了相应的支持，你还可以通过向上轻扫预览视图来唤出相关的操作选项。


而全新的情境菜单则重点关注于“行动”，相关操作菜单会即刻呈现，无需进一步操作。

情境菜单支持所有的 iOS 设备，而预览弹出功能仅支持 3D Touch，因此无法在一部分 iPad 和 iPhone 当中实现。长按或 3D Touch 均可唤出情境菜单，但 3D Touch 的速度会更快。

情境菜单由两个部分组成：针对目标内容的一组功能菜单，以及针对目标内容的预览视图；其中预览视图是可选项，可以提醒人们当前的一系列操作选项所针对的内容是什么。


情境菜单的外观会随着设备尺寸及屏幕方向的变化而动态调整。在 iPhone 的竖屏模式下，预览视图与功能菜单会纵向排列；在 iPad 当中，选项数量不超过三个的功能菜单也会与预览视图纵向排列；在其他状态下，预览视图与功能菜单将会横向并排呈现。通常，情境菜单会在目标内容上方或尽可能近的地方呈现。

与 macOS 中的情境菜单相仿，你可以为菜单当中的选项进行排序。尽可能将最为重要或是高频的菜单项置于顶端，以便用户快速发现和操作。此外，你还可以通过分隔线为选项进行分组，例如将“剪切”、“复制”、“粘贴”等高度相关的操作分为一组。

iOS 中的情境菜单同样具有层级属性，这意味着你可以为其中的某些选项提供二级菜单。

情境菜单当中还可以包含图标，以帮助用户更直观地理解选项。

同时，对于可能产生破坏性的操作项，你还可以使用红色进行警示强化。

建议你为 app 当中所有可能产生相关操作的内容对象添加情境菜单功能。在 macOS 中，用户会期望所有的内容对象都能提供情境菜单，这样既便于操作，同时也利于发现所有可以执行的功能。同理，支持情境菜单的 iOS app 越多，用户越会期望在所有的 app 当中都能使用到该功能，这里显然也包括你的 app。

最后再强调一点：情境菜单当中提供的功能也应该能够在界面当中的其他地方被访问到。情境菜单既强大又便捷，但我们不能假设人们始终会想到去用。
我个人非常期望看到各位接下来能够将深色模式、卡片风格面板及情境菜单有效地运用到自己的 app 当中。

要获取与今天的主题相关的设计资源，你可以访问 developer.apple.com/design，你会找到更新过的 SF 字体，新的 SF Symbols app，以及升级过的 iOS Design Resources Sketch 文件；后续我们还会带来 Adobe Photoshop 和 XD 版本的相关资源。


此外，建议深入阅读 Apple Human Interface Guidelines，从而了解更多关于本次主题相关的详细设计准则。

基础设计原理 - 导航与反馈

Hello 各位，到了傍晚时分仍然一副炎热盛夏的面目，树叶仿佛也被阳光压的喘不过气，动也不怎么动的样子。
到了夏天就越发喜欢看冷兔。运营了九年的品牌，形象和内容都越发多样和有趣，还衍生出了可爱的冷兔宝宝家族，超喜欢。同样八、九年，我的 Beforweb 甚至谈不上运营，偶尔想想也只觉得在年复一年做着同样的事情，什么也没怎么变，就这样做啊做的。捂嘴笑。
之前做过两期 WWDC 设计分会全图文，关于 iOS 13 设计特性，错过的朋友不妨回看。今天翻出 2017 年的一场重要的分会，演讲人依然是 Apple Evangelist 团队的 Mike Stern，以一系列基础而重要的设计原理为主题；我看了好多好多遍；里面有真智慧，不是说笑的。

在 Apple 的团队中，我们通常使用“Human Interface”一词来代替“User Interface”。这种说法的确并不常见，但对于 Apple 而言却有着深厚的历史渊源。

我们的设计指南文档叫做“Human Interface Guidelines”，如各位在线上所见。

而这份文档可以追溯到 1978 年，那可是我出生前的整整 15 年。开个玩笑，我很老了～

“user”一词仅对人与界面的关系进行定义，显得相对狭隘；而“human”则能更加细微地揭示出我们在为谁而设计。当我说自己只是个普普通通的人，言下之意就是我身上存在着各种不足，绝非完美。同时，“human”一词也能体现出我们身上最为高尚的品质。当我们感受着彼此身上的人性时，我们所指的即是人类的善良、仁义、慷慨等美德。

界面设计工作的本质是服务于他人。其中最为根本的目标并非是打造“好看的”、“架构清晰的”、“简约的”、“聚焦的”产品，纵使这些特质极为重要。真正的目标在于服务他人，在于以积极的方式影响着他人的生活与工作，在于能否满足人们的实用需求或是情感需求。

我们需要安全性与确定性；我们需要理解，需要知识与明确的意义；我们需要完成任务，需要实现个人或职业上的目标；我们需要体验美好和愉悦。相应的，经过良好设计的 app 应该为人们提供这些所需，即：

• 操作结果易于预知，使人们感到可靠可信。
• 信息清晰易懂，帮助人们有效制定决策。
• 流程精简直白，帮助人们高效完成任务。
• 外观美好，令人愉悦。

具备这些设计特质的 app 会使人感到愉悦而满意，你可以感知到设计者周全地考虑到了你的实际所需，并投入了大量的时间精力去思考如何帮助你快速有效地完成任务。这样的 app 能让你感受到其设计者的人性。

关于设计原理

那么，我们该如何设计，才能使 app 具备这些特质呢？谈到设计，我们总会聚焦于特定的技术或流程；这些固然极为重要，但优秀的设计来自于对“设计是什么”的更深层、更基础、更人性化的认知与理解。这些正是我们能够从设计原理当中所汲取到的。

设计原理诠释了人们认知世界、处理信息、制定决策、完成沟通的本质原理。这些原理具有普遍性与恒久性，适用于所有类型的设计，包括平面设计、建筑设计、室内设计、零售设计、景观设计、工业设计等等。

设计原理并不会直接告诉我们如何进行特定的设计，它让我们了解的是为什么要如此设计。设计原理是优秀设计的根基。

今天，我将要和各位分享的就是这样一些最为典型的设计原理。或许你会觉得这些原理看起来非常基础或是显而易见，但在很多时候，意义最为深远的，往往正是那些看上去非常简单的东西。

我个人已经做了二十多年的设计；这期间，我有幸和很多优秀的设计师进行过合作，无论是在 Apple 还是其他开发者社区。我和来自世界各地的开发者们针对大量 app 和游戏当中可能存在的各类交互设计问题进行过深入的探讨；每一次的经历都让我一再意识到，将这些核心设计原理作为依据来评判设计方案，问题都会变得非常清晰而透彻。
鉴于这些设计原理的普遍性，我们不妨以现实生活中的体验作为线索来进行探索。让我们来一次小小的旅程，目的地是夏威夷，经费由我们的团队报销。

导航系统

夏威夷之旅的第一站是机场。

抵达机场后，我们会看到各种标识。这些标识会告诉我们如何到达航站楼，每个航站楼的详细信息，登机口的方向，当前登机口的号码，等等。如果我们找错了地方，或是错过了航班，我们还可以通过标识找到附近的其他登机口；如果发生了紧急状况，我们还可以根据出口标识的指引离开机场。

由这样一系列标识所组成的系统便是导航系统。导航系统可以帮助人们快速而准确地行进于复杂的环境当中，给人们带来方向感与安全感。出于时差等原因，身处机场的人通常会很疲惫；机场的设计者们必须非常深入地思考如何为旅客提供安全而高效的导航系统。

好的导航系统会提供全面而易懂的目标位置列表，会提供足够的信息来帮助人们对目标位置的内容产生明确的预期；好的导航系统是高度情境化的，会随着导航层级的深入而不断提升信息的具体化程度；好的导航系统会清晰地呈现出当前位置与目标地点之间的关系，帮助人们掌控方向；好的导航系统还会提供明确的出口，让人们可以随时退回到起点。

导航系统通过回答如下这些最基本的问题来为人们提供安全感与方向感：

• 我在哪？
• 我可以去哪？
• 那里有些什么？
• 附近有什么？
• 我如何离开？

我们的 app 界面正如一个庞大的导航系统。导航栏、内容区域、tab 栏…所有这些都在为 app 提供着导航能力。

导航栏的标题或是 tab 栏的选中项可以帮助人们了解他们在哪。

内容中的列表与 tab 栏中的其他选项让人们知道可以去哪，以及那里有些什么。

返回按钮为人们提供了离开当前界面的出口。

app 中的每一个界面都应该能够为上述问题提供答案，否则人们势必会在使用过程中失去方向感。不妨对 app 进行走查，评估每个界面能否快速、清晰、准确地回答上述问题；如果不能，那么你可能有些迭代工作要做。

反馈

到达夏威夷后，我们可以租辆车开到酒店。

然而作为一坨两吨重的、高速运行的金属，汽车本是一种危险的存在，尤其是在人们疲惫地行驶在不熟悉的地方时。

由于驾车存在的危险性，汽车制造商们必须审慎设计其互动机制，以确保驾乘安全；从中，我们可以学到很多关于“反馈”的知识。

有效的反馈机制可以帮助我们更加安心安全地驾驶汽车，可以帮助我们预测可能出现的问题，避免车辆进入无法正常运作的状态。归纳起来，汽车可以提供以下类型的反馈：

• 状态反馈：让我们了解汽车的运作状况。
• 完成反馈：告诉我们操作行为是否成功。
• 警示反馈：让我们了解潜在问题。
• 出错反馈：让我们了解错误的产生。

为了确保驾乘安全，汽车提供的反馈必须清晰、及时、易懂。接下来让我们具体了解一下每个类型的反馈机制。

状态反馈

打包上车，准备出发。通过变速杆，我们可以确认汽车当前处于驻车状态。

关于当前车辆状态的信息极其重要，因此汽车为我们提供了双重确认机制：除了变速杆，仪表盘也可以为我们提供当前的车辆状态反馈。

仪表盘中的信息还包括其他方面的状态反馈，譬如我可以了解到当前油量，以便预估在下次加油之前我们可以开到哪里。

同样，我还可以随时获知当前的速度，进而避免超速行驶。

同理，App 中的状态反馈也需要清晰易懂、一目了然。以邮件 app 为例，未读状态标识可以帮助人们快速了解哪些邮件应该优先阅读。

在日历 app 中，状态标识让我们知道某些人无法参与会议，进而帮助我们判断是否需要重新安排日程。

在相机 app 中，共有三个元素同时帮助人们了解视频的拍摄状态，包括红点、时间及快门的样式。

清晰、直白的状态反馈可以有效地帮助人们节省时间，同时避免错误的发生。

完成反馈

一切就绪，我启动汽车。我们可以听到引擎的轰鸣，感受到它的震动；仪表盘也开始运行。毫无疑问，我们可以启程了。


我将变速杆切到 D 档，触觉上的反馈感让我知道变速箱里的状态正在发生变化。

开离车位后，自动落锁的音效让我知道车门已经被安全地锁好。对于这类自动化功能来说，明确的反馈更加重要。

所有这些反馈都能带来安全感。这就像是汽车在用它的语言对我们说：“一切正常，我正在准确执行着你的命令”，这让我可以安心地聚焦于更为重要的任务，例如安全地驶出停车场。

App 中的完成反馈所起到的作用也是如此，例如锁定 iPhone 时的音效，标记未读邮件或是删除邮件时的动效，等等。这些反馈形式可以自然而优雅地吸引着你的注意力；它们代表着设备正在正常运作，为你带来安心。

当然，完成反馈可以表现得更加突出，例如通过 Apple Pay 完成交易时的动效与音效就令你很难错过。

App 应该为人们的每一个行为提供恰当的完成反馈作为确认。让人们即刻意识到他们的操作是有效的，这绝对有必要。

警示反馈

警示反馈可以帮助人们了解潜在的问题或错误，例如油量偏低或刹车片磨损严重，等等。

警示反馈可以通过状态标识、消息、仪表盘、内置显示屏、音效等各种形式来进行。警示反馈可以保障我们的安全，防止车辆被损坏。

出错反馈

出错反馈无论对于汽车还是 app 都至关重要。在没有汽油的情况下尝试启动汽车，你便会收到出错信息。
错误自然会令人失望和沮丧。最好的处理方式是提前帮助人们避免错误的发生，而警示与完成反馈都是防错的有效手段。

譬如，嵌入式的表单校验可以为人们提供即时的验证反馈，以便及时更正输入，避免在提交表单时产生问题。

你也可以试着推测人们的真实意图，思考人们在犯错时的本意是什么，然后进行合理的响应。例如在 Things 3 中，如果你输入了本不存在的 6 月 31 日，app 不会直接报错；取而代之地，它会自动将日期更正为 7 月 1 日。这个细节相当精彩，同时也非常人性化。

如你所见，清晰、及时、易懂、有用的反馈对于人机互动有着非常重要的意义。
反馈回答了一系列重要的问题：

• 我能做什么？
• 刚刚发生了什么？
• 正在发生什么？
• 接下来会发生什么？

很多 app 在反馈机制上表现得差强人意。主要原因在于，当我们进行设计时，很容易陷入对静态界面的思考，而忘记了互动体验是由时间和状态变化所驱动的，期间可能产生大量的情境转换。

好的反馈机制会让人们感到正在和 app 的设计者进行对话。作为设计师，我们可以通过反馈机制来回答人们可能提出的问题，为他们提供指引，或是帮助他们了解行动的结果。因此，在设计 app 时，不妨设想你正在和使用它的人进行面对面的交流；想想看，你会在哪些环节，以怎样的方式说些什么？

说到这里，我有个非常简单却相当有效的技巧与各位分享：请一些从未用过你 app 的人来用用看，让他们在使用过程中将想法讲出来，特别是那些不明确的、令人困惑的地方。然后，你同样通过语言向他们说明 app 的工作方式，为他们提供指引，解释当前的状况，包括有哪些信息需要特别关注，等等。最后，回顾整个对话过程，看看 app 本身的沟通能力与你的语言相比，存在着哪些问题和不足。
在我的经验中，当设计者向我诠释他们的设计意图时，信息传达的有效程度通常远远高于设计本身。在面对面进行语言交流时，我们的沟通能力会变得更强；试着捕捉整个对话过程中的有效信息，通过它们去填补当前设计方案中那些沟通能力不足的地方。

基础设计原理 - 可见性与一致性

此刻是周一凌晨。刚刚过去了一个略有趣的周日。被斑斑咬出伤口，去医院打疫苗撞到电线杆上，回去漫咖啡的路上因司机在车内吸烟而向滴滴做了投诉。台风之后的天气立刻恢复了暴晒的面目，简直不留一丝余地。
幻想一个家。在 store 里观察着顾客，渐渐就开始自顾自地被家装和物件吸引着而开始出神了。每个人的脸上都洋溢着幸福与期待，每个人都值得拥有爱与美好。这是个旅途。一个叫做命运的茫茫旅途。
继续上期主题，即 2017 年 WWDC 之“基础设计原理”设计分会，演讲人是 Apple Evangelist 团队的 Mike Stern。在上期当中，我们了解了导航与反馈，错过的朋友不妨回看；今天的话题聚焦于“可见性”与“一致性”。

可见性

可见性与“反馈”有着密切的关联。如果无法被人们所见，再好的反馈机制都是徒劳的。

清晰可见的内容元素与界面控件可以极大地提升设计的易用性。

想想看可见性对于汽车来说有多么重要。仪表盘的信息密度极高，通过文字、数字、指针、指示灯、状态标识等形式，将当前的状态与警示信息一目了然地呈现在你的面前。

所有这些信息都是直接可见的。纵使在感知上有些密集，但对于驾车来说却非常必要，因为你无需转头甚至是转身去其他地方寻找这些信息，它们都一览无余地呈现在你面前。如果为了简洁而将一部分信息默认隐藏起来，或是置于其他位置，导致重要的信息被忽略，那么车辆的易用性和安全性都将遭受到损害。

对于 app 来说也是同理。例如在“邮件”中，未读徽标提供了非常有用的状态信息。

如果将这些徽标隐藏起来，界面的复杂度会有所降低，看上去的确会整洁一些。然而这样会极大地破坏易用性，因为人们将不得不进入一个个邮件详情页当中进行确认，才能获取到原本由徽标提供的状态信息；这样的互动非常低效和乏味。

因此，要将重要的状态信息呈现在尽可能高的信息层级当中，使人们无需付出额外成本即可一目了然地获取。
再来看看时钟 app 的 tab 栏。

如果将所有这些导航项隐藏到汉堡包菜单当中，那么人们将很难一目了然地发现时钟 app 所提供的其他实用功能。

不过显然，可见性当中也存在着权衡的问题，因为过高的信息密度及界面复杂度会降低人们获取信息和制定决策的速度，特别是当人们还不那么熟悉你产品的时候。因此，我们通常需要结合其他因素通盘考虑。

一致性 Consistency

舟车劳顿，我已经等不及想要入住酒店了。不过趁大家都还在车上，我们还有一个极其重要的设计原理需要进行讨论，这就是一致性。

简而言之，一致性的主旨在于通过相似的设计方式满足相似的设计需求。
如果你曾开过车，那么你应该会熟悉于汽车内部各种通用的指示符号，例如门锁、车窗、燃油、车灯、电池、机油等等。

同样，你也会对一系列通用术语的定义了如指掌，例如驻车、前进、倒档等等。

汽车设计的一致性还体现在各种控件的布局当中，例如刹车在左，油门在右。

一致性极大地提升了车辆的易用性；反之，破坏了这些通用规则的设计方式将严重损害驾乘体验。所有的汽车都遵守着同一套设计规则，包括标识与术语定义，控件的布局等等。受益于高度一致的设计，我们无需在每次驾驶不同车辆的时候都重新进行学习。

一致性原理看上去显而易见，然而实践起来却并非易事。你必须始终有意识地考虑到这一原则，并且理解应该与怎样的标准保持一致。你需要全面地考虑到当人们打开你的 app 时，他们的预期是怎样的。这些预期，在很大程度上可能和他们以往使用其他 app 的经验有关。

那么你该如何了解人们使用其他 app 的情况？这确实很难，人们可能使用过各种类型的 app，你无从知晓；但既然这些 app 同属于相同的系统平台，那么你也应该关注于平台本身的设计惯例，譬如图标与词条的定义，导航系统的设计模式，包括典型的任务流程等等。
关于这个话题，我来为各位举一个最典型的例子。在 iOS 当中，我们使用下图所示的图标来表达“行动”的意思；而且在多数时候，“行动”所指代的是“分享”功能。

但很多 app 会使用不同的图标来代表这一行为，如下图所示。这个图标确实很常见，特别是在网页或其他平台当中。

这是个很棒的图标，它本身的设计没有任何问题；问题在于这个图标对于 iOS 平台的用户来说并不符合认知习惯。很多设计师为了保持多平台的一致性而选择在 iOS 当中使用这个图标；初衷是好的，但对于 iOS 来说却并非正确的设计决策。

从目标受众的角度考虑问题，采用他们最熟识的设计方式，这才是上策。长此以往，你的 app 对于用户来说会变得越发友好与易用。
当然，我们总会有冲动去做一些打破规则的事情；而且坦诚来讲，这绝非坏事。我们总该去尝试新的想法，否则何谈创新。但对于图标、文本这类简单的设计元素而言，所谓的“创新”在更多的时候只会给人们造成不必要的麻烦。因此，除非你有足够强大的理由，否则依照规则进行设计，确保与平台之间的一致性，才是上策。

关于一致性，我还有最后一点需要强调，即“内部一致性”。你的 app 不仅需要与其所在的系统平台保持设计一致性，同时在 app 内部，视觉风格及行为模式也需要保持统一，例如每个界面当中同一种类的设计元素都应该有着一致的外观，app 全局所用到的字体及颜色也应该有着明确的数量与规则。

内部一致性可以提升 app 的整体性与内聚性。当所有元素都和谐有序地整合在一处，整体体验也将得到提升。

作为设计师，遵从一致性的设计原理需要我们具备良好的自我控制与约束能力；大大小小每一个设计决策都需要意图明确。

基础设计原理 - 心智模型与邻近性

周日夜间，窦唯，黑梦。你且吟唱，我且执念于不安与不满。仍在路上。
白天还在逛直播支架那种东西。好早以前就叨念着要做黑胶唱片直播 - 对着旋转播放着的唱片，直播。为何一直在拖延。可能因为我不会。我不知在什么平台做如此平淡无聊的直播，也不知道该用怎样的设备。

如果哪位朋友有过直播经验，或了解相关的话题，还望赐教；留言或直接小窗都好。
然后说正经的。继续上期主题，即 WWDC 之“基础设计原理”设计分会，演讲人是 Apple 设计布道者团队的 Mike Stern 老师。在上期当中，我们了解了“可见性”与“一致性”，错过的朋友不妨回看；今天的话题聚焦于“心智模型”与“邻近性”。

心智模型

得益于车辆设计的一致性，我们得以安全抵达酒店。旅途疲劳，大家不妨先到房间放下行李洗个脸，精神一下再做打算。

你进入卫生间，拧开水龙头上的把手，让水流一阵子等着变热。几秒之后，你用手指试了试水温，似乎还有些冷，于是你又把热水开大了一些。很快，水温变暖，你洗了洗脸，感到精神焕发，又来劲了。

相比于汽车而言，水龙头自然简单易用了很多。但在有些时候，我们仍然需要学习如何使用水龙头，例如尝试调整多个把手，观察它们各自的作用。
我们如何得知哪个把手用于控制热水？我们大体知道，因为多数时候热水把手位于左侧。

我们为什么会持续试探水温？因为我们知道在调整把手之后，温度变化通常会有延迟。水的外观难以反馈温度信息，我们需要亲身尝试。
显然，我们不会在每次使用水龙头时都思考所有这些问题，这些早已成为直觉。我们每个人的大脑当中都有一个小小的水龙头模型，这个模型能将水龙头体现为由一系列部件、功能和行为所组成的系统；这些部件按照特定的布局排列着，有着特定的行为规律。

这就是我们所说的“心智模型”。对于每一个与之进行过互动的事物，我们头脑中都有着对应的心智模型。这些模型都是高度简化的，不会完整地体现出事物内部的所有运作机制。

不过，我们与一个系统的互动越多，相对应的模型就会越发复杂。心智模型由个人的经验发展而出，所反映的通常是个人视角中的事实形态，因此心智模型也是因人而异的。
心智模型可以分为两种类型：
系统模型：关于系统如何运作的模型。例如我们会将水龙头理解为冷、热两种水源组合而成的系统。该系统允许两种水源进行混合，从而创造出一个温度区间，然而水温不会立刻发生变化，需要响应时间，特别是在刚刚打开热水不久的时候。

互动模型：关于如何与系统进行互动的模型。例如我们知道需要通过水龙头上的把手来控制水流的大小或是调整水温。

了解过名词和概念之后，你可能会好奇这些和我们的设计有什么关联呢？简单来说，如果一个系统，譬如水龙头，符合我们已有的心智模型，那么它就是符合预期的；我们不会耗费精力去感知和理解，这个系统对我们而言是符合直觉的。相反，如果一个系统不符合我们的心智模型，那么我们的预期就会被打破，这个系统对我们而言就是不符合直觉的。

关于心智模型，我们还要再多聊一聊，因为这确实是非常非常重要的设计原理。我来给各位讲一个小故事。有一位名叫 Mortimer 的水龙头设计师，和我们一样，他的头脑当中也有着关于水龙头的心智模型；当然对于 Mortimer 而言，这套模型更加精密、专业和复杂。
Mortimer 的工作就是创造无与伦比、令人喜爱的水龙头。有一天，仿佛被灵感的闪电猛然击中，他有了个绝妙的想法：与其让两个把手分别控制冷、热水，不如让一个把手控制温度，而另一个控制水流大小。这样就能避免人们在调节水流时不小心改变温度了。

然而有个小问题：Mortimer 的设计完全不符合人们关于水龙头的心智模型。使用这款水龙头时，人们发现操作结果并不符合预期，难以依靠直觉进行控制。更糟的是，Mortimer 的设计在外观上和普通水龙头没什么区别，但行为模式却完全不同，人们想要打开热水，却发现并没有水流出来。

预期与结果之间的错位会造成严重的可用性问题。或许可以建议 Mortimer 为每个把手添加可视化的说明？但这只是治标不治本的方案。诸如文本标签一类的视觉线索很容易被人们忽视，尤其是当人们对于眼前系统的运作方式及操作方法有着根深蒂固的经验时。

在 app 设计当中，这同样是一个重要问题。试图改变人们的心智模型是极具风险的；人们越熟悉你的 app，这种改变的风险就越大。人们通常很难适应一款老产品当中发生的变化，而无论这变化本身是否正确或必要。在进行这类设计决策之前，必须尽最大可能去确认你所做的改变可以为当前的使用者们带来最为正面的结果，切忌为了改变而改变。

保持谨慎，勤于验证，让创新精神为产品设计带来客观意义上的改善。

邻近性

洗好脸，差不多也到了晚餐时间。你决定换上新买的夏威夷衬衫。于是你关上灯并离开卫生间，然后打开门厅里的灯，走进卧室，又打开了屋中的几盏灯。

这一连串行为当中便体现着我们接下来要讨论的设计原理，即“邻近性”。

邻近性所关注的是控件与被控对象之间的距离。两者的距离越近，它们之间的关联关系就越发明显。卫生间墙壁上的开关自然是控制卫生间里的灯的，门厅和卧室也是如此。

良好的邻近性同样体现着人体工学原理。通常，我们距离一个物体或兴趣区域越近，越有可能与之进行互动。当人们走进卫生间时，会希望首先把灯打开；因此，我们通常会将开关安装在门的附近，保持在一臂距离之内，使人们可以轻松地触碰到。
邻近性同样适用于表达多个控件之间的位置关系。譬如，如果你看到墙上有一组开关，同时你还知道其中的某一个用于控制灯光，那么你就有理由假设其他几个同样是灯的开关。

如果其中某一个开关是用于控制明暗的，那么在设计时，最好将它与其他几个开关分开放置，这样人们将更容易区分它们各自的作用。

这里我们有必要指出，有一个名词通常用于指代右侧的布局模式。没错，“分组”。分组是设计原理当中的一个非常基础却又极其重要的概念，它有助于人们理解不同元素之间的逻辑关系，是用于构建信息结构的关键元素。

分组的概念很容易理解，然而在界面设计中却时常被忽视。接下来我们通过几个简单的例子来看看如何在界面当中使用邻近性和分组的概念来体现元素之间的逻辑关系。
在 Keynote 中，工具栏里的功能控件与其所控制的目标对象或区域之间的位置关系都能体现出邻近性的原理。例如“显示”、“缩放”、“添加幻灯片”的位置紧邻着幻灯片导航栏及画布区域，这可以使人们意识到它们之间存在着控制与被控制的逻辑关联。

同理，“表格”、“图表”、“文本”等工具则位于画布的正上方，与其控制区域的距离最近。

而“格式”、“动画效果”与“文稿”的切换开关同样位于其对应面板的正上方。

在 Sketch 当中也是如此。工具栏里的分组相关操作，变形与旋转，合并操作，图层排序等等，都与其所控制的目标对象或区域有着邻近的位置对应关系。

诚然，以上两个例子都是关于 macOS 的，但设计原理本身同样适用于屏幕较小的设备，例如 iPhone、iPad 甚至是 Apple Watch。

基础设计原理 - 映射与可供性

大约周四午安。此刻是周三晚间，坐在七点多就已然空旷无人的公司茶水间，窗外每隔几分钟便有轻轨驶过。我目送那一众乘客渐行渐远，不久之后四下又宁静了起来。
你是否有着那么一些不大敢于听起的歌曲，一些前奏一旦响起就会在眼前跑马灯似的浮现出那些人那些事的歌曲，如《麦田守望者》的最后一句“你千万别跟任何人谈任何事情。你只要一谈起，就会想念起每一个人来。”
我甚至会因此而不大敢于去听任何或新或旧的音乐，似乎任何值得忆起的时光终究会成为从指缝中悄然溜走的过往。于是我决定每晚都弹一些即兴的小段子，录下来，像是把材料存在抽屉里，说不定会化学反应出美好的、不会溜走的声音或记忆。意识流嘎然而止。

来说正经的了。继续上期主题，即 WWDC 之“基础设计原理”设计分会，演讲人是 Apple 设计布道者团队的 Mike Stern 老师。在上期当中，我们了解了“心智模型”与“邻近性”，错过的朋友不妨回看；今天的话题聚焦于“映射”与“可供性”。

映射

在去餐厅用餐之前，我们还有些时间再了解一项基础设计原理。让我们回头看看在“邻近性”原理当中提到的灯光明暗控制开关。你能仅通过最左侧这个开关的样式看出它所控制的灯光明暗度吗？

如下图这样又如何？

我们之所以能从后者当中进行判断，所依据的就是映射关系。所谓“映射”，即是指，将被控对象的行为规律体现到控件自身的操作方式中，譬如开关把手的上升和下降，对应着灯光亮度的升高和降低。

映射同样体现在多个控件的布局当中，它们的次序应该能够反映出多个被控对象之间的相对位置关系。



我们假设这三个开关用于控制卧室天花板上的三盏灯。依据映射关系而设计的开关位置应该能够帮助人们快速判断出它们各自控制着哪一盏灯。映射原理有助于设计师对控件的类型、位置和次序进行决策。

当映射关系不明确时，我们通常需要依靠文本标签才能理解开关与灯之间的对应关系。这并非完美的解决方案，因为阅读和理解文字需要花费时间和精力，同时人们也难以依靠记忆进行快速操作。
在界面设计当中，映射关系也体现在控件类型的选择当中。例如通过滑块（slider）控制文本的横向字间距就是很符合直觉的交互方式；而相比于滑块或是步进控件（stepper），旋钮则更适于旋转操作。


当然，最直接的映射才是最好的映射。为人们提供直接操作目标对象的能力是最为简单、精准、符合直觉的解决方案。macOS 上的鼠标指针操作，或 iOS 当中的手势操作，都可以为人们带来直接操作的体验。

可供性

不知各位如何，我是够饿的了，这就准备下楼去吃饭。我们在大堂见，然后一起过去餐厅。
坐在餐桌前，你会看到面前摆放着一个空盘子。我们能用这个盘子做什么？显然，放些食物在里面。除此之外呢？

盘子很光滑，可以旋转或是滑来滑去。


盘子有一圈宽边，可以抓着拎起来。

我们对于如何与这个盘子进行互动的观点便是可供性的体现。换句话说，盘子的外形特征为我们提供了如何与之进行互动的视觉及触觉线索，使我们意识到哪些交互行为可行，哪些不可行。我们会意识到要将食物放进去，或是将它滑到其他地方；但我们通常不会想要倒水进去然后端起来喝。

可供性并非物体自身所具备的属性，它更多是在代表行为主体与目标对象之间的互动关系。可供性会因行为主体的差异而有所不同。举个极端些的例子，对我而言，飞盘可以用来抓住或扔出去，而对我的狗来说，飞盘就是单单用来叼的。不过另一方面，碟子对我和我的狗来说都是用来盛放食物的。

由于可供性所具有的主观特性，一个人能感知到的交互特性在另一个人看来则未必如此。当可供性所传达的交互特性与人们的常规行为有着高度关联时，人们会更加容易感知到。
例如，我其实可以把碟子当作茶托，这会是个不错的茶托。但我猜我们大家日常很少真的这样去做，因此我会更乐于将碟子视为盛放食物的容器，而非将水杯放在里面。

我们能从我们所互动过的任何环境及事物当中感知到可达性。当我们走进餐厅时，门的大小及形状可以传达出供人穿过的特性，连续的地面使我们意识到可以在上面安稳地行走。

椅子的造型暗示我们可以坐下，桌子的构造令我们明白可以将物品摆放在上面。

人造物品当中都包含有传达可供性的视觉线索，使人们明白哪些行为可行；清晰的、显而易见的视觉线索可以帮助人们迅速了解如何与之进行互动。

对于 app 界面设计而言也是同样的道理。滑块控件由把手和滑轨构成，暗示着拖拽的特性。

旋钮的样式意味着可以旋转。

按钮则一目了然地传达着可点击的特征。

在以上每一个例子当中，可供性的传达效率都是极高的。事实上，随着时间的推移，我们会越发适应于抽象度不断提升的可供性传达形式。我们所熟悉的界面当中的按钮，无非是现实世界里真实按钮的高度抽象化版本；那四个圆角足以将虚拟与现实两个版本的同一种物体关联起来。

同理，滑块把手周围那细微的投影效果也足以让我们意识到其独立于滑轨之上的操作特性。

而且，仅有的这一点点视觉线索可能都不是必需的，对于很多人来说，一条直线上的一个实心圆足矣传达滑动操作的可供性了。

有时候，可供性也可以通过动效进行传达。在天气 app 中点击主体内容，界面整体便会稍稍上升，暗示着可以通过滚屏来查看更多内容。


无论你使用何种方法，都必须确保 app 界面能够清晰准确地传达其自身的交互特性，否则，人们将困惑于如何与之互动；他们很可能会以错误的方式进行操作，然后发现无果，进而将控件理解成不可交互的元素，app 的可用性也会因此而受损。

基础设计原理 - 渐进呈现与对称性

周二夜间。冲了个澡出来竟然听到了滚滚的雷声，滴滴答答的雨也落了下来。强弩之末的夏季，疯狂高温高湿的日子，如此结束倒也有了些许戏剧性。
两个半月的个人事务忙碌状态也终于在本周暂时画上了句号。很多在从前完全不敢设想的挑战和难关，也不得不逐一面对和战胜，回头看看我甚至觉得有些懵逼。这个夏天到底发生了些什么。并不确定。
刺眼的阳光，湿热的空气，窒息的压力 - 回望这些日子，记忆中大约只有如此的印象。一个人面对世界的善意或冰冷或挑战或不屑的能力在变强，但到了夜里又开始全身心想要“喝两口”的欲望是怎么回事。

回来说正经的。继续上期主题，即 WWDC 之“基础设计原理”设计分会，演讲人是 Apple 设计布道者团队的 Mike Stern 老师。在上期当中，我们了解了“映射”与“可供性”，错过的朋友不妨回看；今天的话题聚焦于“渐进呈现”与“对称性”。

渐进呈现

搞清楚了用什么东西盛放食物，我们接下来可以安心点餐了。我想点一个美味的芝士汉堡，于是叫来了服务生。

他问我需要几分熟，“五分”。他问我需要哪种芝士，“切达奶酪”。

是否需要加培根、鸡蛋或牛油果？“不需要”。

搭配沙拉、薯条还是炸洋葱圈？“炸洋葱圈”。

他问我是否了解芝士汉堡配洋葱圈的热量极高，我回答：“骗人的”。
以上过程便体现了“渐进呈现”的原理。

作为一种用于管理复杂度的方法，“渐进呈现”几乎可以说是交互设计领域所独有的，其基本概念是引导人们平缓地由简单状态进入到复杂状态，例如将原本复杂的逻辑隐藏起来，通过更加易于认知的界面形式帮助人们轻松完成最为基础的任务。

如果你一上来就必须面对所有的配料选项，那么点餐也会成为复杂到令人畏惧的任务。反之，步步为营则会令人感到轻松舒适。

此外，前期的输入选择也可能对后续的选项产生影响。例如，如果我选择薯条，那么服务生就会继续给到我“普通”、“松露”、“蒜香”三种口味选项；但是我没有选薯条，所以我无需在意他们薯条的口味；如果服务生询问我关于薯条口味的问题，那就是在浪费我的时间，平白增加我的认知负荷。或者，并非如此？其实我很喜欢蒜香味的薯条，如果我知道他们有提供，那么一定会点一份。所以你看，这里就有问题暴露出来了。

渐进呈现可以有效地管理复杂，简化决策过程；但同时也会将信息与功能埋没起来。所以我们该如何是好？
关于如何正确运用渐进呈现的讨论，最后通常都会归结于“二八定律”。

如果你觉得这个概念有些陌生，那么可以大致理解为，一个系统所提供的全部效用当中的 80%，来自于其 20% 的内因。

对于 app 而言，这大约意味着其 80% 的价值来自于其 20% 的功能；或是 80% 的人只会用到其全部功能当中的 20%。
当然，实际情况当中的具体百分比不会那么精确，但比例大致符合。产品所提供的信息与功能通常不会拥有相同的权重，总会有一些比另外一些更加重要和关键。
因此，为了降低复杂度，简化认知与决策过程，我们通常可以将那些相对次要的东西隐藏起来，以实现渐进呈现。换句话说，如果你的 app 非常复杂，那么完全可以尝试将 80% 相对次要的信息或功能隐藏起来，以便使那最为重要的 20% 得以简洁而清晰地呈现。

一个最经典的例子就是文件打印对话窗口。绝大多数时候，人们只关心那些最基本的设置，例如选择哪台打印机，纸张规格，打几份等等。在打印机所提供的全部功能当中，上述这些连 20% 的比例都远远达不到，但却是人们在 80% 的场景里所需用到的全部。

而当人们需要更复杂的功能时，仅需点击一下就可以访问到。


渐进呈现不仅能降低视觉复杂度，使打印变得简单易行，同时也会降低人们产生困惑甚至是误操作的可能性。
或许我们都经历过类似的情景，例如爸妈或亲人突然打电话给你，说他们要崩溃了，因为电脑工作异常，可能是因为他们弄错了什么东西，他们完全搞不懂。渐进呈现的设计方式着实可以避免太多这类情况的发生。
所以，试着保持默认状态的简单，让多数初中级用户可以顺畅地使用产品，避免困惑与误操作；同时，也要让高级用户可以快捷地访问到他们所需要的复杂功能。

对称性

芝士汉堡和炸洋葱圈都很美味。晚餐之后，大家早早休息，我们明天要去潜水。

来到夏威夷的海滩，我们戴上护目镜，穿上脚蹼，调整呼吸管，下水。
水下有各式各样的鱼类。有河豚，金枪鱼，巨型乌贼…魔幻一般的水下世界，为什么如此全然的美丽着？这里蕴涵着我们将要探讨的最后一则设计原理，对称性。

我们对于对称性的概念都非常熟悉。每当谈到对称，我们通常会想到“反射对称”，或称“镜像对称”。

但其实还有更多的相关概念，例如“辐射对称”或“旋转对称”，以及“平移对称”。这三类对称在自然界中非常常见。

对称是一种有效的形式，我们通常会将其与“健康”、“稳定”、“平衡”、“有序”等概念关联在一起。同时，对称还极具视觉美观性。
具有对称性的元素即便在物理上没有彼此连接，人们也会倾向于将它们认知为整体。譬如当看到一对互为对称的括号时，我们在认知当中会无意识地将它们整合为连贯的整体。

潜在水下时，你会发现到处都是镜像对称、旋转对称和平移对称。实际上，无论是在陆地、天空还是海洋，几乎所有类型的动植物身上都体现着一种或多种对称性。

而人造物品也是同样。灯的开关具有对称性，水龙头也是如此。


汽车显然也是同样，而且汽车的对称性更多是出于实际功能性的考虑；你一定不会希望驾驶这样一辆汽车上路。

但对称性同样蕴含着美学价值。经过精心设计的界面通常能够同时体现出镜像对称与平移对称的特性。
在天气 app 中，镜像对称带来了良好的视觉平衡感。所有的关键元素都以界面中线为基准保持着居中对齐，同时其他所有元素都在两端维持着平衡。


同样的对称模式也体现在相机、时钟、电话等众多 app 当中。



在平移对称当中，元素的重复性为我们带来了结构与次序的感知。你可以在时钟 app 的地区时间列表，或是天气 app 的城市天气列表中感受到平移对称的结构特性。



在设计界面时，尽可能有意识地通过对称性原理来构建平衡与秩序的感知。

基础设计原理 - 小结与设计建议

周四晚间，珍惜一日秋爽。傍晚在楼外看着雨，甚至感到穿短袖有些凉意。然而秋天怕是没这么容易入，必须苟延残喘到九月底吧。多下些雨，外面的小猫小狗也好有些水喝。
本期篇幅很短了，作为 WWDC 设计分会之“基础设计原理”的收尾。这场时长约为一个小时的讲演，被我们拆解为五期图文；期间，我们跟随 Apple 设计布道者团队的 Mike Stern 老师一起了解了十项基本设计原理，包括导航、反馈、可见性、一致性、心智模型、邻近性、映射、可供性、渐进呈现、对称性。
不知各位感觉如何，我自己从来都能从这类“基础性”的内容当中得到很多，或是汲取新知，或是巩固以往。正如 Mike 在讲演开始时所说，“或许你会觉得这些原理看起来非常基础或是显而易见，但在很多时候，意义最为深远的，往往正是那些看上去非常简单的东西。”

小结与设计建议

潜水结束，我也不得不通知各位，我们的夏威夷之旅即将画上句号，返程在即。不过我们学到了丰富的设计知识，这是巨大的收获。

我们在这一天当中所了解到的这些基础设计原理，无不体现着人类认知能力当中的一系列基础事实。这些设计原理看上去都很简单，但却强有力地提醒着我们“设计”这件事的本质及目标。这些原理是帮助我们理解设计的思维框架，是用于判断设计优劣的参考标杆。

我个人希望，通过今天的分享，在座的各位能够清晰地意识到，应该如何通过 app 设计来满足人类的真实需求，即对于安全感、理解、目标实现以及美好愉悦的需求。

然而，要在实践当中合理运用这些设计原理却并非易事，其中任何一个概念都有可能将你的设计引领到不同的方向。设计，在很多时候就在于如何权衡和解决这些差异；即便是最优秀的设计师，也时常需要斗争于此。

此外，过多地运用这些原理也会造成问题。太多的反馈会令人厌烦，太多的可视化元素会分散人们的注意力，太多的渐进呈现会导致流程的低效。在实践当中，我们需要时刻进行权衡，并有意识地锻炼自己的判断能力。

而每一则设计原理的相关性也会随着产品特质的不同而有所差异。硬件平台、屏幕规格、功能场景、目标受众，所有这些因素都会影响到在任何给定的时刻有哪些原理最为重要；这也令我们的工作格外具有挑战性。

没人说过设计是一件容易的事。但我希望各位不要灰心，因为当你充分理解了关于设计的一系列重要而基本的原理之后，事情会变得容易很多。让这些基本原理成为我们的北极星，引领我们通过 app 设计来更好地服务于受众。

而人们也将因此而感知到你所付出的努力，他们会感激于你的体贴与关心，他们也将领会到产品背后所蕴含的人性关怀。