【案例分析】跨平台UI适配方法(译文)

ui-multi-accord-00

译者:matoi

作者: Sergii Ganushchak & Kate Abrosimova

Sergii Ganushchak is a mobile UX/UI designer. He loves his family, his job, and his bike. You can follow Sergii on Dribbble where he posts his latest works, and on Twitter. Kate Abrosimova is a technology journalist, blogger, and content marketer. She writes articles on mobile technology, iOS and Android app development, and startups. Her articles can be seen on Yalantis blog. Follow Kate on Twitter. Kate and Sergey both work at Yalantis, an app development company.

 

 

跨平台UI适配有不同的情景

我们都知道,iOS和Android之间的战争没有赢家。如果一个产品在一个平台上成功,那么它毫无疑问的会被移植到另一个平台。有时候开发人员甚至不用等待,同时在两个平台上发布应用。对于设计师而言,这只意味着一件事情——应用的UI和UX需要适配到另一个平台,以确保产品设计语言的一致性。

跨平台UI适配有三种不同的情景:

  1. 保持品牌的一致性;
  2. 符合平台特性;
  3. 寻求两者之间的平衡。

这篇文章通过最热门的app分析这三种方法,让你了解什么方法最适合你。

 

一、品牌导向法

坚持品牌,和忽视“父级规则”是最快、最简单、追剧成益的方法,但是只是设计到设计UI,而没有涵盖软件工程。自定义的用户界面是相当复杂的,相对于用标准空间,开发工作要付出更多代价。

此外,选择品牌作为UI设计的优先选项是一个相当危险的方法。我们把这种应用叫做“teenagers”(青少年),因为他们不遵守规则,有时候相当烦人。他们认为自己是与众不同的,但是实际上他们和其他在那个年龄的人一样。但是也有例外。

 

VSCO CAM

Visual Supply公司在2012年发布了第一个iOS应用VSCO Cam. 一年后,这款流行的相片编辑app被移植到了安卓平台。安卓版的VSCO Cam几乎完全复制了iOS版的界面。有趣的是,两个版本的VSCO Cam都没有遵守该平台的设计规范。

ui-multi-accord-01

VSCO Cam: iOS(左)、安卓(右)

在这种情况下,抛开平台的规则是有利品牌识别的。VSCO Cam的创始人认为,创造力是非常重要的,而这也说明了他们所构建的产品的愿景。他们致力于开发一个能延续品牌的app,而这个品牌是艺术社区的一部分。这就是为什么VSCO Cam的品牌创意的完整性更为重要。

ui-multi-accord-02

VSCO Cam拍摄界面:iOS(左)、安卓(右)

 

INSTAGRAM

和VSCO Cam一样,instagram 首先在app store发布,然后才在安卓平台可用。严格根据iOS规范设计的iOS版本经历了巨大的成功;在这种情况下,为苹果的支持者设计的典型UI变成了instagram与众不同的特色。这就解释了为什么instagram的开发者没有花很多的时间为安卓平台打造一套独特的UI。即使应用程序的整体美学不符合安卓用户的期待,instagram在谷歌商店获得了超过一天百万的下载量。

ui-multi-accord-03

Instagram首页: iOS版(左)、安卓版(右)

现在instagram的iOS版和安卓版看起来像双胞胎,但是这里仍有一些元素冷僵他们区分开来。例如,搜索栏看起来像两个平台原生的。最新的安卓版的相机页面和iOS版的有一些不同。更重要的是,iOS版的instagram的标志是位于导航栏的中间,而安卓版的是在工具栏的左侧。

ui-multi-accord-04

Instagram的搜索界面:iOS版(左)、安卓版(右)

安卓版的instagram没有遵循安卓平台的设计规范,但是仍然使用户觉得便捷。

ui-multi-accord-05

Instagram的视频界面:iOS版(左)、安卓版(右)

 

WIRE

wire是skype的创造者共同创立和支持的另外一个通讯应用。wire和竞品没有太大的不同,除了漂亮的、令人印象深刻的一用户界面,它的用户多是非主流青少年。wire的设计者用了不规范的表达解决方案,主要的目的是尽可能的影响用户看见的东西。

我们在创建一种优雅的、使用的沟通工具,通过所有方式——文字、声音、视频和媒体。媒体是wire的核心体验,所以我们选择了减少不必要的杂乱内容。我们还把大量的精力花在了字体和可读性。

——Priidu Zilmer,wire的首席设计

用户在第一次打开app寻找导航时需要一些猜测。但是另一方面,wire使用了大量微互动,让用户体验更多乐趣和吸引力。简化的联系人搜索,好看的色调,自主选择背景图和背景颜色,都有助于构建wire的独特的世界,而区别于其他在线沟通应用所建立的准则,例如telegram,whatsapp,viber,和其他典型的沟通应用程序。

ui-multi-accord-06

Wire iOS(左)、安卓(右)

我们在设计上投入了很多,我们不可能做到三种完全不同的方式(iOS、安卓、桌面/web),尤其是平台自身的转换常常转移目标。太接近他们,意味着你突然发现不同步——例如当在iOS7和Android L上运行。

同时,我们知道不遵守平台转换的风险。因此,我们正在不断努力,通过迭代和调整去寻找正确的平衡点,使我们的设计在跨跃平台时转换的很好。

——Priidu Zilmer,wire的首席设计

wire的iOS版和安卓版的界面是完全一致的,包括用户体验设计,和图标。wire没有参考任何原始的设计准则(除了可点击元素的大小)。wire是用户界面设计比平台要求更重要的另外一个例子。

Priidu Zilmer指出,wire的设计团队觉得,如果单纯的按照平台的设计准车,那么不可能提升用户在生活中与人们联系和分享。

ui-multi-accord-07

Wire iOS(左)、安卓(右)

VSCO Cam, Instagram, Wire选择专注于品牌和用户界面的设计。但是这是否意味着一个小型的创业团队复制他们的经验能够一样成功冷?在一些特定的情况下,我相信以品牌为向导的方法是成功的策略。

在什么时候我们应该遵循品牌导向的方法呢?
用户会通过多个渠道使用你的产品(桌面、ipad、iphone、安卓)。

往往,品牌采用多渠道与客户互动,是遵循了品牌导向的方法。然而,只有同一用户通过不同的平台和设备(ipad,安卓,网页)访问产品才是合理的。例如,iBroadcast的用户,通过iOS设备,安卓设备,甚至桌面设备访问它。各个平台上的iBroadcast的版本看起来相似,因为iBroadcast的最高优先级是,平滑地从一个平台转向另一个平台,这个过程中然用户感觉不到任何差异。

用户会在我们的服务的平台(iOS、安卓、网页)之间跳转。我希望平台之间是一致的,尽可能我们的用户感到轻松。

——Rod Collen,iBroadcast的创始人

ui-multi-accord-08

iBroadcast iOS(左)、安卓(右)

如果你的应用是款平台的,并且属于这种类型,你可能会在使用品牌导向方法之前三思。例如,Facebook在跨平台UI适配设计时使用混合的方案。原因是,facebook的用户倾向于只使用一种平台(iOS或安卓),而不是两种平台都适用。

自定义用户界面提供了直观的用户交互,并在同一时间吸引人的眼球。

有研究表明,直观的交互有四个部分组成:直觉、可语言性、不费力、神奇的体验。这些部分的组成,使设计师创造无缝的用户体验,不管他们是否遵循平台的规则指南。毕竟一些自定义组件可以提供更优秀的表象或互动体验。

同样值得一提的是,平台之间的差异可能是为什么app在一个平台上让人觉得方便在另一个平台上却不方便的原因。约会应用HowAboutWe的开发者认为,只有适用自定义的UI,才能真正确保应用的风格和布局在不同安卓系统版本,制造商,屏幕大小分辨率上的一致。原生的用户界面组件有一定的局限性,当你可以不断创新,来改善产品的用户体验。

例如,一个预算管理的安卓应用,Receipt。有不同寻常的下拉动画,忽略了所有平台的规则指南,但这个下拉动画确实吸引了用户。

我对平台的规范感到不满意,而且我觉得我提出更好的解决方案。一般来说,只有当我觉得按我的做法会有明显的好处的时候,我才会忽略平台的规范,例如向用户提供坑好的反馈,删除不必要的步骤,或者防止流程被打断。大部分是用相关元素替换弹窗活着不必要的屏幕跳转。

——Bogdan Mihaiciuc,Receipt的创始人。

独特又好看的UI,他们会给用户留下很好的第一印象。用户觉得“My Day”这个倒数应用吸引人的原因之一就是其独特的用户界面,这在两个平台上都是相同的。

Citymapper有着出色的界面设计,这使得它从同类产品中脱颖而出。

对我们来说,一起饿都是关于平衡。然用户感觉对我们的用户界面感到熟悉,但又同时营造出一种明确独特的生命,关于做为品牌,我们是谁。

我觉得,独特的设计语言的价值总是被低估。你说citymapper?是,绿色的那个。这本身就是巨大的价值。

有时候设计师们对像素的完美和设计的’正确’过于小心翼翼。生活总是混乱的,创造产品也是同样的,所以我们为什么要隐瞒事实呢?我们都是同样的世界里生活的,建立产品的人和使用产品的人。

——Gilbert Wedam,Citymapper的设计负责人。

当把UI适配到另一个平台,你应该把自己放进用户的角色里,不管你使用什么方法。能够穿件无摩擦的用户体验同时保持品牌的一致性是一个杰出设计师的美德。

 

二、平台导向法

与以品牌导向相反,根据平台的特性标准要求要求更多的时间和金钱(在这里我们只讨论UI设计)。当导入设计去另一个平台时,很多UX和UI元素需要根据目标平台规范重建。

在这种情况下,焦点从品牌认同转向了用户熟悉的平台体验,因为用户已经习惯平台的规则。在惯用的平台上,他们对设计规则的有直观把握,你可以把这个作为你的优势——Telegram和WhatsApp在这点上都做的很好。

TELEGRAM

Telegram是一个流行的通信应用,由Pavel Durov创立,俄罗斯最大的社交网络背后的男人。telegram 的设计风格很简约,并提供私人通讯安全加密协议,这给app增加巨大的优势。

talegram的iOS版和安卓版同时推出,专注于功能,而不是视觉外观。因此,他的设计者坚持平台导向的方法。

同一个产品的iOS 和安卓版,作为iOS和安卓应用可以有所不同。iOS版完全遵循了iOS设计规范,看起来就是一个专门为iOS7或8设计的应用:在导航栏的右边有一个图标,是为了输入新信息的,左边有一个编辑按钮;在屏幕的底部有一个切换的tab栏,在上面你可以看见当前页面的名称。

ui-multi-accord-09

Telegram: iOS (左)、 Android(右边)

安卓版是按照谷歌material design设计规范来设计的。在导航栏有一个汉堡包菜单图标,里面有app的各个部分的导航链接,在导航栏的右边有一个简单的搜索按钮,在屏幕的底部有一个悬浮按钮——material design的核心和灵魂。

ui-multi-accord-10

Telegram 的联系人列表页面: iOS (左)、 Android(右边)

telegram app使用了平台的标准控件和UX交互元素。我猜设计师遵循了最通用的可用性原则去设计这个app。

ui-multi-accord-11

Telegram 的设置界面: iOS (左)、 Android(右边)
WHATSAPP

另一个通信app是whatsapp,信息应用的传教士,现在被facebook收购。iOS版whatsapp在2009年发布,紧跟其后的是黑莓和塞班版本,安卓版直到2012年才发布。whatsapp看起来像是一个安卓手机用户会认可并爱上的app。

whatsapp现在在每个平台上都可用,他坚持平台向导法是很自然的事情。iOS 版和安卓版看起来很不同。设计师在跨平台适配上做了很杰出的工作。他们改变了ux、消息展示、图标、元素和菜单的位置等等的所有。

ui-multi-accord-12

WhatsApp: iOS (左) 、 Android(右)

现在,iOS 版对应了iOS 8的标准。安卓版则根据material design设计规范进行了视觉更新。

KOMMOT

kommot是为远足者和自行车者设计的app,是德国的一个创业团队做的。2010年先有了iOS,一年之后有了安卓版本。kommot的老版本没有任何同类竞品。

ui-multi-accord-13

Komoot: iOS(左)、Android(右)

iOS 版和安卓版根据个平台的设计规范,做了最好的设计。应用中包块大量的旅游的内容:地质地图,转成导航,景点建议,等等。所有的功能都必须很容易被用户访问。

我们决定根据每个平台的规则,因为各个平台的UI更容易预测,这样对用户来说会简单一些。而且,苹果和google对用户界面的设计有偏好。这个对于在苹果的app store和google play的推广非常重要。

——Dmytro Prudnikov, Komoot的UI/UX设计师

Komoot已经多次出现在苹果app store的推荐里。而且,他还被提名为google play 2014最佳app,Komoot现在是google play德国商店里最顶级的app之一。

现在,通过这些示范性的app,讨论一下什么情况下坚持以平台规范为准则进行设计最合理。

什么情况下,我们应该遵循平台导向法?
高度竞争的市场环境促使你快速迭代用户快速增长。

即使你需要时间重新设计应用程序的概念,平台导向的方式可以使你的开发人员更快速的实现你的想法。。一旦一个程序被启动,用户会找到一个熟悉的交互方式。不仅如此,你不需要等待灵感来临去设计一些特别的东西。你所要做的就是遵守设计指南。

苹果和谷歌推出的一些设计趋势在用户中被证明是成功的。

一个聪明的品牌进入谷歌市场,即使你的app是从iOS版本上移植的,也必要改成符合material design规范以示诚意。但是这种流行趋势也吸引了苹果用户的目光。因此,我们可以看到也有一些iOS上的app体现了material design的一些元素和风格。我提这件事只是为了强调一款app遵循设计规范是十分重要的,即使这意味着偶尔忽视平台的具体细节。

你的应用具有复杂的功能和用户界面。

任何移动应用都应该尽可能简单容易使用,即使它负载很多功能。使用平台导向法使有很多功能内容的app看起来井井有条。举个例子,例如Accent Kit,英国的口音和方言训练设计的app,包含多重功能:音频播放、录制、文本、图像等所有旨在对用户的口音学习有帮助。当要移植到安卓平台时,我们只能考虑使用平台导向法。否则,用户会很难找出程序提供的所有功能。

ui-multi-accord-14

Accent Kit 安卓版(左)、iOS版(右)

坚持平台的规范,为用户提供原生的平台经验,使我们能满足用户的期望。

有些app会成功,有些并不会。平台导向法对那些想保留品牌影响力的公司,并不重视那么可怕。但是毕竟这个品牌是你谋生的工具,不要让你的app变成“老师的走狗”,遵守规则但得不到同学的好感。

 

三、混合法

有了一点独特性,我们就能足够对应平台的细节,并且保持品牌价值。混合法来适应多种平台,是在以上两种方法之间寻找一个平衡点,它也是最复杂的一个。

在这种情况下,你应该考虑两种用户:一种是熟悉你的产品的人,另一种是从没用过产品的人。前者追随品牌,而后者习惯了其他平台的特性。选择混合法的设计师像外交官一样,代表了品牌的利益,同时也旨在促使和用户的友好关系。他们需要找出哪些用户界面元素能使产品脱颖而出,并找到不会伤害品牌的跨平台的具体解决方案。

我们看看SoundCloud, Facebook, Airbnb 和 Viber的设计师们是如何处理这个挑战的。

SOUNDCLOUD

Soundcloud是一个著名的音频流app,最初的时候,它同时推出了iOS和安卓版本。虽然Soundcloud的设计师在为每个平台做适配设计,但他们在保持品牌完整性上做了非常大的努力。

在移动应用市场,我们的目标是在用户熟悉的iOS和安卓设备上找到一个很好的平衡,而这也很好反应了我们品牌的模式。例如,波形播放器好像我们品牌的签名一样,和竞品做出了很好的区分。

——Sylvain Grande, Soundcloud的产品VP&创始人

在不同平台的不同特征中,iOS标准tab栏是在屏幕的底部(有一些设计修改),搜索栏是在屏幕的顶部。安卓则是在屏幕顶部有一个典型的工具栏,汉堡菜单在工具栏的左边,搜索图标点击会扩展成搜索栏。无论是在iOS平台还是在安卓平台的app,都使用平台特定的交互。

ui-multi-accord-15

SoundCloud:iOS(左)、Android(右)

ui-multi-accord-16

SoundCloud播放界面:iOS(左)、Android(右)
FACEBOOK

facebook移动应用的前生是用html5做,但是这是一个很大的错误,作为公司的创始人 Mark Zuckerberg也承认。最终,facebook决定致力于提升在iOS、安卓、以及其他平台的体验。

一方面,facebook的品牌具有巨大的影响力。另一方面,这是一个用户数量庞大的跨平台网络。这则是为什么混合法能最和谐的结合品牌认证和多种平台。

iOS版和安卓版app看起来差不多,但是也都让人感觉非常像所属平台的原生应用。facebook为了用户,遵循苹果和谷歌的设计规范。由于内容是facebook app的重要特征,设计者决定用简约的设计风格,给内容留下更多的空间。

ui-multi-accord-17

Facebook :iOS(左)、Android(右)

iOS版使用了典型的iOS导航栏在屏幕的底部,和一个标准的搜索栏在屏幕的上部。安卓版使用一个tab bar切换标签,和大多数安卓应用一样在屏幕的上方。

AIRBNB

airbnb是增长最快的初创公司之一,他获得了强有力的市场地位,很大程度上是因为其简单性和出色的用户体验。

airbnb的设计师选择了混合法来设计移动服务。品牌本身是独一无二吸引全世界各地人们的关注。它的内容使app获得成功。因此,airbnb的创造者们让他们的产品在各种平台上都用起来很便利。

我们希望我们的app让我们的用户感到熟悉,这也意味着要找到他们习惯于使用它们的通性。我们也想要让他们感到是在体验同一个airbnb。

平台之间的连贯性——手机,网络,邮件等等——对我们建立的自信和信任很重要,因此我们决定不仅仅被各平台的规范所驱动。贯穿的、连续的、同一的体验造就了品牌。

——Katie Dill,airbnb的首席体验设计师。

第一眼看过去,airbnb的iOS版和安卓版的主要区别是导航栏的位置:iOS在底部,安卓版在顶部。

ui-multi-accord-18

Airbnb:iOS(左)、Android(右)

如果不是为了这个小但重要的特殊性,我认为airbnb的app使用的是品牌导向法。然而,如果我们仔细看,iOS版和安卓版之间的差异性更为明显。

ui-multi-accord-19

Airbnb的搜索界面:iOS(左)、Android(右)

鉴于airbnb的功能比较简单,与平台相关的细节会使app复杂化。

ui-multi-accord-20

Airbnb的导航:iOS(左)、Android(右)
VIBER

差点忘记了一个令人震惊的流行的通信应用!我相信viber是混合设计法的最佳代表。

不像whatsapp和telegram,viber的设计师完美的体现了品牌识别的同时遵循了平台对UI的设计要求。混合法让他们创造了一个在任何平台都可识别、并且用户体验很好的app。换句话说,用户不会混淆viber和其他竞品app,他们在转化平台的时候也不会遇到什么困难。

ui-multi-accord-21

Viber:iOS(左)、Android(右)

在两个平台上都使用自定义颜色和图标来实现品牌识别。为了使iOS 版和安卓版都易于使用,导航栏的位置都是根据平台的特性决定的。

ui-multi-accord-22

Viber的联系人列表页面:iOS(左)、Android(右)

viber不仅强烈的坚持了品牌,还完美的满足了用户对界面和交互的期望,并十分注重功能。

 

什么时候应该使用混合法?
当在根据反馈和评价逐渐发展和完善产品设计的时候。

混合法意味着用户体验在各个平台上连续作用,这是一个基础的设计迭代方法。这意味着你应该分析指标去了解用户是如何与你的产品进行互动的,定期更新改进,并保持增长率。迭代设计代表了一个循环过程:原型设计、测试、分析和提炼产品每一个版本。

混合法是在一个奇特的情况下,让体验称为品牌的代言。这是我认为的最好的方法去进行跨平台的完美适配。他能让你找到平台、品牌和用户的真相。此外,使用这种方法可以改变品牌和平台设计指南之间的平衡,作为结果,得到一个伟大的产品。

混合法的唯一缺点是,不太可能在初创的小团队中实施。因为小型初创团队通常承担不起大量的时间和金钱来提升应用的设计。此外,我猜在一个app的第一个版本,不测试用户对UI特征也可能是一种幸运。

 

四、哪一种设计方法更好?

尽管混合法看起来像是最好的方法,我想说的是,文章中提到的方法没有一个是完美的。

有时选择品牌识别会导致特定的用户体验问题,无论你的app看起来多么美丽。毕竟,用户决定了一个菜单是否应该滑进,刷哪里会进入特定的功能,以及如何返回个人主页。

app使用平台向导的会导致app看起来过于程式化,对品牌识别没有帮助。当从另一方面来说,使用平台向导设计法最有可能获得成功,特别是你的app有很多功能,并且以获得大量用户为目标。

我用来说明混合设计法的例子是成功的适配跨平台应用实例。这种情况其实很少见。但是,这不意味着你不应该尝试去获得相同的结果。

当我们设计app时,我们应该总是记得,我们为了现实世界中真实的人真实的设备而做的。事实上,这并不是说品牌,平台,或是你的创意,很重要。唯一重要的用户。他们并不关心你用了什么方法去适配UI设计。不管我们喜欢与否,所有用户只是对整个公司的体验感兴趣——当它是积极的时候,说明这个公司成功了。

 

 

 

 

文章编译来源:ui.cn
原文地址:http://www.smashingmagazine.com/2015/09/approaches-for-multiplatform-ui-design-adaptation/
顶部图片来源:http://sinap.jp

===================================================================================================================

不知不觉UXRen社区官网已经一岁半了, 在这里小编要感谢那么一如既往支持本站的油茶人。

UXRen.cn欢迎油茶人投稿,提供有价值的资讯、线索、点子及建议。

邮箱:contact@13tech.com.cn

注明:本站内容及数据部分来自互联网及公开渠道,如有侵权请及时联系我们。 ===================================================================================================================

 

 

发表评论

您的电子邮箱地址不会被公开。