多平台UI设计解决方案：案例研究

对UI多平台适应，有三种不同的场景：第一，保持品牌一致性；第二，适应特定平台的规则；三，在两个平台间找寻平衡。我们会通过探讨最热门的应用来分析这三种方法，以便你判断哪种方法最适合你。...



众所周知，在iOS与Android这场没有硝烟的战争中并没有赢家。如果某个产品在一个平台上大获成功，毫无疑问就会被移植到另一个平台。有时app开发者甚至不愿等待而在两个平台上同步发行。对于设计师来说，这意味着一件事——应用的UI和UX必须适用于对应的平台，但同时又要保证设计语言的统一性。

对UI多平台适应，有三种不同的场景：第一，保持品牌一致性；第二，适应特定平台的规则；三，在两个平台间找寻平衡。我们会通过探讨最热门的应用来分析这三种方法，以便你判断哪种方法最适合你。

以品牌作为导向的方法

坚持品牌特色而忽略“平台规则”是最快最简单同时也是花费最巨大的方法，但只关于UI设计，而非软件工程。自定义的UI其实现非常复杂，因此与建立系统标准组件相比，会增加开发的成本。

而且，在UI设计中优先考虑品牌也可能是相当冒险的一件事。我将此类app称为“青少年”，因为它们没有归属感，不循规蹈矩，有时候会很烦人。它们自以为标新立异，殊不知人人都会历经此阶段。当然，也有例外。

VSCO CAM

2012年，Visual Supply公司的第一款应用VISO Cam的iOS版本诞生了。一年以后，这款热门照片编辑产品被移植到了安卓平台。安卓版本几乎完全照搬了iOS版本的界面。有意思的是，VSCO Cam应用的两种版本都与平台设计的标准规则无关。



VSCO Cam iOS版本（左）和Android

在这个案例中，抛弃平台规则而选择品牌识别性非常合理。VSCO Cam的创立者相信创新重于一切，这也解释了这款产品的视觉设计风格。他们将这个app树立为品牌的一部分，而品牌又作为社群的一部分，所以对VSCO Cam来说，品牌的创新完整性更为重要。



VSCO Cam

INSTAGRAM

与VSCO Cam一样，Instagram也在发布安卓版本之前先登录了App Store这款iPhone应用相当符合iOS的准则，获得了巨大的成功；因此，针对苹果爱好者设计的典型UI成为Instegram的鲜明特色。这也解释了Instagran的创立者为何不花费太多时间在创造UI独特的安卓版本之上。虽然app整体的美学不符合安卓用户的期望，但Instagram在登录Google Play的第一天还是获得了超过1亿的下载量。



Instagram 的iOS版本（左）和Android版本

目前Instagram的iOS版本和Android版本非常相似，但是仍有一些元素相互区别。例如，搜索条在两个平台上都设计得很舒服。最新的安卓版本其相机界面也与iOS版本略有不同。而且，Instagram的logo在iPhone应用中位于导航条的中央，但在安卓版本中却移到了工具条的左侧。



Instagram 搜索界面 iOS版本（左）和安卓（右）

Instagram安卓版本没有遵循平台的设计标准，但对用户来说仍是操作方便的。



Instagram的视频界面iOS版本（左）和安卓

WIRE

Wire是由Skype创始人合作创立和支持的信息类应用。它与同类应用并没有多大的区别，唯有一点不同——其用户界面异常美观，令人印象深刻，特别是对使用它的潮人们来说。Wire的设计师们使用了非标准的手势操作方式，主要目的在于隐藏尽可能多的元素。

我们制作了一款优美而实用的工具，囊括了所有的沟通形式——文字，声音，视频和多媒体。多媒体以Wire体验为核心，因此我们必须减少装饰，去除所有不必要的干扰物以突出内容。我们也致力于版式和可读性。

——Priidu Zilmer  Wire的设计总监

当用户首次使用这款app时，确实需要进行不少猜测性的操作。但是另一方面，Wire使用了许多微交互，这令用户体验更有趣，更具吸引力。极简的联系人搜索框，美观的配色，可自定义背景图片，令Wire在这个充斥了Telegram，WhatsApp，Viber及其他一堆界面美观的信息类应用中脱颖而出。



Wire iOS(左）和Android

我们在设计上投入了很多，我们不可能以三种完全不同的方式（基于Android，iOS，桌面/网页）来制作它，特别是本身平台的规则也在变化。太贴合它们的话意味着你可能会忽然错位——就像iOS7和Android L发布时候出现的情况。

同时，我们也知道如果不跟随众人熟悉的平台规则是具有风险的。因此，我们一直通过版本迭代和调整，致力于寻求两者之间的平衡，所以我们的设计语言可便利的运用于各个平台上。

——Priidu Zilmer， Wire的设计总监

Wire app的iOS和Android版本界面完全一样，包括UX设计和图标。Wire app缺乏对基本规则的参考（除可点击元素的尺寸以外）。这个app是另一个用户界面设计重于平台要求的例子。

据Zilmer所言，Wire的设计团队觉得，若想提升用户在生活中交流与分享的体验，纯在规则下设计是达不到目标的。



Wire iOS(左）和Android

VSCO Cam， Instagram和Wire都选择在界面设计中聚焦品牌效应。但是这是否意味着，较小的移动初创型公司跟随它们的脚步就一样能大获成功？我相信，在一些情况下如果遵循基于品牌的设计方法，就可以赢得制胜法则。

何时该基于品牌而设计？

当用户会从各种媒介接触到你的产品时（电脑，平板，手机iOS和Android）

通常来说，如果公司是通过各种渠道去接触用户，那就可以遵循基于品牌而设计的原则。但是，仅当用户是通过各种平台和设备（平板，安卓手机，网页）来获取同一个产品时，这条法则才成立。例如，IBroadcast（某音乐服务商）的某个用户，他通过iOS和Android设备甚至PC桌面使用这项服务。这个app的各个版本都会很相似，因为对于iBroadcast来说，最重要的是令平台之间的转换十分流畅，这样用户才不会感觉到差异。

我们的用户活跃在网页，iOS应用和Android应用之间。我们想令这些平台之间的转换尽可能的连贯，这样对用户来说可用性才更高。

————Rod Collen，iBroadcast的联合创始人



iBroadcast app的iOS（左）和Android版本

如果你的app在以上描述的范畴内，就算它属于跨平台产品，你在制定以品牌塑造为导向的策略前也可能需要三思。例如，Facebook（我们稍后会讨论）在应对多平台UI设计适配时采取的是混合策略。因为Facebook的用户倾向于使用iOS或者Android平台来进行社交活动，而并非两者同时使用。

如果能为用户提供直观的交互，同时也夺人眼球的话。

某调查研究分析出直观的交互方式所具有的4种特性：直觉，易于表述，不费劲以及体验神奇。这些特性相互交织，无论设计师是否遵循平台规则，都能为用户创造出无缝的体验。毕竟，比起平台规则，一些自定义的UI成分能提供非常出众的表达，或说交互体验。

值得提起的是，各个平台之间的差异也是导致某个app在一个平台上使用很方便，却在另一个平台上不好用的原因。

HowAboutWe，一个约会app，其创始人争论道：“如果要令界面的风格和版式，在不同的Android系统版本以及屏幕大小的设备上都保持统一，唯一的方法就是使用自定义的UI设计方案。本地的UI成分确实有一些限制，但是你总是可以通过基于产品的创新来提升用户体验。

例如，一个Android上的预算管理app，Receipt，拥有非同寻常的下拉动画，完全忽视了平台规则，但是却能吸引用户。

对于各平台建议实行的特定功能我并不太感冒，我认为我能想出更好的方式。

总的来说，如果以我的方式实现会有很明确的好处时，我会忽略平台规则，例如：能为用户提供更好的反馈，去除了不必要的步骤，或可避免流程打断等好处。尤其，以内联元素来取代弹框或不必要的页面，就是一个显著的案例。

在app中，除非这些独特而华丽的UI方式令用户的体验变差了，否则它们都会给用户留下深刻的第一印象，吸引他们使用产品。比如，My Day countdown这个app吸引用户的原因之一，就是其独特的设计界面，且在两个平台上都是相同的。

另一个app，Ctiymapper的UI设计非常出色，令其在全平台脱颖而出，包括网页端。

对我们来说，这就是一个平衡的问题。既要使UI中发生的行为令用户感觉熟悉，同时又要使用户对我们的品牌有一个清晰且独特的认知。

我认为，一个独特设计语言的价值常常被低估....比如Citymapper，有人称其为“那个绿色的app”，其实这个绿色在app中就拥有巨大的价值。

有时，设计师可能太抠像素，太在意设计的“正确性”。生活中充斥了各种混乱，构建一个产品也是如此。所以为什么要回避这个事实？我们都身在其中——无论产品的缔造者，还是产品的使用者。

——Gilbert Wedam，Citymapper的首席设计师

当我们将某种UI运用到另一个平台，无论使用什么方法，设计师都不应该只站在用户的角度。因为，一个杰出设计师的能力之一，就是在保持品牌统一性的同时，又创建出流畅的用户体验。

面向平台的设计方案

与以品牌作为导向的方法相反，依照特定平台的标准尤其需要投入更多时间和金钱（只针对UI设计）。当开始设计，许多UX和UI元素都需要重新创作，以便与目标平台对齐。

因此，既然用户已经熟悉了平台的规则，焦点便从突出品牌识别性转移到令用户体验更流畅上来了。他们对于平台的设计规则有直觉性的掌握，这正是你可以利用的优势——这一点Telegram和WhatsApp做得很好。

TELEGRAM

Telegram是一个热门的消息类应用，Pavel Durov是创建者之一，他也是Vkontakte——俄罗斯最大的社交网络的创始人。Telegram的设计风格采用极简主义，它为私密信息提供安全加密协议，这也成为了这款app的核心竞争力。

Telegram同时在iOS和Android平台登陆，比起外观它更侧重展现功能。因此，其设计师决定采用基于平台的设计方案。

这个产品，其iOS和Android版本的区别与典型的iOS和Android应用有所不同。iOS版本完全按照苹果的设计参考指南，看上去就像是为iOS7/8专门设计的app一样：在导航条右边是键入新信息的图标，左边是编辑按钮：在屏幕底部是分区的标签栏，顶部是当前激活区域的名称。



Telegram的iOS(左)和Android版本

Telegram的Android版本则依照谷歌的材质设计指南。其用于进入app各个部分的导航菜单采用汉堡包菜单的形式，右上角放了一个搜索按钮，另外还有一个浮动按钮——材质设计的灵魂所在。



Telegram的联系人列表在iOS和Android中的设计

这个应用使用基于平台的标准以及用户体验交互元素。我打赌Telegram的设计师在设计这个应用时，一定遵循着最普遍的可用性原则。



Telegram的设置界面在iOS和Android中的设计

WHATSAPP

现在我们暂时要继续将话题保持在信息应用的主题之上。那么即将介绍的另一个应用就是所谓的信息传道士——WhatsApp，它现在属于Facebook旗下。其iOS版在2009年就发布了，就在其黑莓和塞班系统发布之后不久。而WhatsApp的Android版本直到2012年才发布，其界面看上去很像安卓用户熟悉及喜欢的。

既然WhatsApp几乎在每个平台上都可以使用，自然它遵循的就是基于平台准则的设计方法。WhatsApp的iOS和Android版本看上去完全不同。设计师们花了巨大的心血在多平台设计调整上，无论是用户体验，信息外观，图标，还是元素和菜单项的排布，都发生了变化。



WhatsApp的iOS和Android版本

目前iPhone的应用版本与iOS 8的标准保持一致，至于Android版本，猜猜…最近一次的更新，外观变成材质设计风格了。

KOMOOT

Komoot是德国一家创业公司旗下的户外运动型app，同类应用中的代表。app的首个版本于2010年发布在iOS平台，一年后它又发布了Android版本。Komoot的两个老版本与创业公司目前的产品完全不同。



Komoot的iOS和Android版本

iOS和Android的应用都遵循各自平台的规则，并完美地应用到设计中。这些应用都包含了大量的旅行相关内容，包括地形图，转弯提示导航，景点推荐，等等。所有的功能用户都很容易上手。

我们决定遵循各个平台的规则，既然本地用户界面更具熟悉感，用户更易上手。而且，苹果和谷歌更偏爱遵循他们UI设计准则的应用。这对于在苹果和谷歌的应用商店中推广真的很重要。

——Dmytro Prudnikov，Komoot的UI和UX设计师

Komoot在苹果应用商店中被反复推荐，而且还被选为谷歌商店2014最佳应用，目前在德国它是谷歌商店中最好的应用之一。

现在，在看过这些经典的应用之后，让我们来讨论什么时候遵循平台准则最合理。

什么时候应该遵循基于平台设计的准则？

当市场竞争激烈，你必须快速介入并迅速积累用户基数的时候

虽然你需要花费时间重新设计一个应用的内容，但基于平台的设计方式允许软件工程师能更快地开发实现。一旦app发布之后，下载的用户会发现交互方式都是他们所熟悉的。并且，你不需要发挥创意来做特别的设计。你只需要遵循平台规则就好。

当苹果和谷歌公司引领的一些设计趋势在用户中广受赞誉的时候

在谷歌平台推广超智能品牌的唯一准则就是：如果要把某个app从iOS移植到Android，必须坚定不移地遵循材质设计的方式。但这个热门趋势也吸引到了苹果用户的目光。因此，我们可以看到一些iOS应用的UI界面也以材质设计风格为主。我之所以提到这个，是为了强调出一个应用紧跟设计趋势的重要性，即使这意味着偶尔需要无视平台的准则。顺便提一下，这里有一篇来自InVison的好文《Designing in the material style-without just copying google》，关于如何在贯彻材质设计风格的同时又避免看上去很像抄袭谷歌，推荐大家读一下。

当你的应用具有复杂的功能和用户界面的时候

任何移动应用对用户来说都应该尽量简单易用，哪怕它功能非常多。对那些功能强大且内容丰富的应用，基于平台准则的设计方式就合理得多。比如，Accent Kit，这是一个关于英式主要口音和地方方言的应用，包含了各种各样的功能，比如音频回放，录音，文本编辑以图片展示等，这些都是为了帮助用户学习口音。后来，当这个app推广到Android平台的时候，我们没有考虑其余任何方式，就直接选择了基于平台的设计准则。不然的话，用户在使用app提供的这些特色功能的时候，会很难适应。



Accent Kit 应用的Android版本和iOS版本

基于平台准则而设计，为用户提供源于平台的体验令我们可以很好的满足用户的期望。

但是，有的应用成功了，有的却不一定。对那些想保持自己品牌特色的公司来说，基于平台的设计准则也不怎么灵验。毕竟，品牌特色才是企业的生命力，千万不要让自己的app变成一个没有灵魂的山寨品。

    关注 JOY笔记