京东团队出品！视觉设计师应该掌握的五类交互逻辑

@C7210 ：图文版 WWDC，由 Apple 的设计师 Cas Lemmens 为我们讲解如何面向 Apple 生态体系中的多种设备进行设计。上周话题聚焦于目标平台的选择，错过的朋友不妨回看；本期来看如何面向目标平台进行功能适配与风格协调。

《图文版 WWDC 设计分会！跨平台设计 (1) ：平台选择》

跨平台设计 – 平台适配

我们已经了解了如何选择目标平台，接下来进入跨平台设计流程的第二步，「平台适配」，即基于目标平台的特性，对我们希望 app 能够实现的功能及互动方式进行有针对性的调整。

仍以「健康记录」 app 为例。在 iPhone 版本的「健康记录」当中，你可以做很多事，譬如查看今日进展、历史成就、体能训练统计、好友的健身记录等等；你可以对所有的数据进行管理，可以添加训练项目，邀请好友或是分享你的进展和成就。

所有这些在 iPhone 上都是可行的，并且是符合 iPhone 这个平台的情境特质的。iPhone 是非常私人化的设备，所有这些健康数据都是关乎个人的；而所有的相关操作都无需花费很长时间，同样符合 iPhone 的交互特质。

然而在 Watch 上，「健康记录」app 的功能被大幅削减和简化了，但其结果正符合 Watch 的情境特质 – Watch 同样是高度私人化的设备，且交互过程非常短暂，多数时候以「简单一瞥」为主。在设计 Watch 版本时，我们的目标之一就是确保人们在一瞥之间即可获取「今日进展」及「好友健身记录」等关键信息。

如上所述，「平台适配」的主要任务之一，就是面向目标平台，对产品功能及操作的复杂度进行权衡与取舍，以适应平台的情境特质。

而另一项主要任务，则是了解目标平台所提供的独特功能，并充分加以利用。

譬如对于 Watch，我们需要思考，「哪些功能是 Watch 所特有的呢？它可以追踪你的运动，监测你的心率，定位你的地点；所有这些能力似乎都与‘健康记录’高度相关」。于是当你思考应该为 Watch 版本添加哪些独特的功能时，诸如「添加训练项目」或「设定运动目标」等便是自然而然的事了。

再次强调，正如我们在第一步「平台选择」当中所了解的，只有充分考虑目标平台的「情境」与「能力」，才能确保产品功能性与平台之间的正确适配关系。

这也正是「平台适配」的关键所在：对 app 的功能进行优先级调配，使其更符合目标平台的情境特质；考虑必要的新功能，使其充分利用目标平台的独特能力。

以 Photoshop 为例。使用过 Mac 版本的人们都知道这是个体量庞大的 app，功能不计其数，你可以用它来做非常多的事情。

在尝试将所有这些功能转移到 iPhone 当中时，Adobe 做的非常漂亮。他们将繁杂的功能拆解到了三个不同的 app 当中，所有的操作方式都面向 iPhone 的短时交互特性进行了优化，同时他们还充分利用了 iPhone 平台的独特能力，例如直接在图片编辑工具中融入了拍摄照片的功能。

再来看《纽约时报》。如今，在 iPhone、iPad 或是他们的网站上，你都可以读到这份报纸。但在 Watch 版本的 app 中，你只能浏览到近期的一些新闻头条；如果你被标题吸引，还可以浏览到这篇消息的一些概要。如果你希望看到全文，他们会引导你到 iPhone、iPad 或是网站当中进行阅读；因为阅读全文的行为已经不再是「短时交互」了，它并不符合 Watch 的使用情境。

跨平台设计 – 风格协调

了解了如何基于设备的情境与能力来选择目标平台并进行适配，接下来我们需要对 app 的外观风格及交互体验进行定义。

谈到风格与体验，我们总会想到「一致性」这个概念。对于跨平台设计来说，如何让你的 app 在各个平台之间保持和谐一致，这是非常重要的问题。

然而「一致」显然不意味着「完全相同」。在 Apple，我们绝不会将 app 在某个平台上的视觉与交互风格简单地复制到另一个平台当中。保持一致性的关键在于充分的协调与权衡。

你需要在两个方面的一致性之间寻求平衡。

一方面，你需要保持品牌感知的一致性。这意味着当人们打开你的 app，他们应该能够立即识别出你的品牌。品牌一致性令人们感到熟识，同时也是产品在不同平台之间持续构建品牌信任感的基础。

另一方面，你需要保持 app 与特定平台风格的一致性。这意味着你需要遵从平台提供的设计标准，使 app 具有平台本地化的特征。特定平台上的所有 app 都应该具备本地化的可识别性，否则用户每使用一个新 app 都将要付出额外的学习成本与认知负荷。

在这两类一致性之间实现平衡非常重要，且并非易事。这很可能是整个跨平台设计流程当中最具挑战性的任务。

Apple 提供的人机界面设计指南（Human Interface Guidelines，简称 HIG）在这里会起到重要的作用，你可以从中学到每个平台的设计原则与标准，同时也会发现如何在标准框架内实现自己品牌的独特风格。

以字体为例。Apple 为每个平台都提供了经过特别优化的字体集。但这并不意味着你只能使用 San Francisco 或是类似风格的字体；你在更多时候是要从中了解每个平台所适用的字号原则。

观察以下三个平台当中的正文字体，你会发现它们的尺寸与平台视距有着密切的关系。我们通常会近距离查看 Watch 上的信息，譬如一英尺左右的样子，因此其字号相对较小；而 iPhone 的常规视距则稍远，其字号也相应地有所增加；至于 TV，正如我们在第一部分当中所述，其平均视距大约在十英尺左右，因此我们使用了非常大的字号，以确保字体在距离较远时依然清晰可读。

除了风格样式，你还可以从 HIG 当中了解到关于系统控件与设计模式方面的使用标准。

以警告框（alert）为例，Apple 的每一个平台都会提供这个控件，它们之间拥有一些共通的元素，例如一段描述文本及一到两个行动按钮；它们都会遮挡住下方的内容。但无论是描述文本的长度，还是按钮的样式，或是可点击区域的尺寸，都会根据平台的不同而有所调整。这样既可以确保界面元素对于用户来说是熟识的，同时也能在每个平台当中实现最优的操作体验。

再来看导航。如果需要在 Watch 当中返回上一级页面，我可以点击左上角的返回按钮；在 iPhone 上也是同理。然而 TV 的界面却不存在返回按钮，因为遥控器本身就提供了返回键，无需在界面中画蛇添足。

综上所述，「风格协调」的核心任务在于，在你的品牌风格与平台设计规范之间寻求平衡。一方面，你要确保品牌风格在不同平台当中的感知一致性，使其被用户所熟识和信任；另一方面，你要遵从平台的规则与标准，以降低用户的学习成本及认知负荷。

Ulysses 是个很棒的例子。无论你使用着 iPad、iPhone 还是 Mac 版本，都会发现他们大量采用了系统提供的标准化控件来构建页面，包括导航栏、工具栏、搜索框、分隔视图等等。而他们自己的品牌感知则深深地根植于其高度专注和便捷的写作体验当中。我个人会时常用到这款产品，实际上这篇讲演就是在 Ulysses 当中起草的。

Streaks 也是同样。打开 app，你可以立刻通过配色、字体和图标等视觉元素，以及某些标志性的交互方式来识别其品牌。与此同时，Streaks 也非常得当地遵从着平台的设计规范，例如对通知机制的合理运用，字号的搭配，不同语言环境中的本地化适配等等。

最后来看 Tinder。同样，图标、配色等视觉元素，以及标志性的横扫交互，都使其很容易被人们所识别。而他们同时也良好地遵守着平台的设计规范，其 UI 可以根据设备的不同而进行相应的调整，独特的横扫手势从不会与平台本地的交互方式相冲突。

欢迎关注作者的微信公众号：「Beforweb」