原文来自 Smashing Magazine(Approaches For Multiplatform UI Design Adaptation: A Case Study)
也是来谈一下读后的体会,不逐字翻译了。(除了WIRE的splash为自截图,其他图片均来自原文。)
这是我们在设计移动端交互的时候不可避免的一个问题:跨平台设计。在面对一个交互设计需求的时候,我也往往纠结,是iOS、Android一致呢,还是各自遵循各自规则呢?
文章里刚好对于这种疑问,做了比较细致的诠释,不过最终的决定权,在用户身上,而不是设计师、产品经理,或者公司。
有三种方法来解决跨平台设计:
1、保持产品品牌的一致性,忽略平台差异。
2、恪守各个平台规则,淡化甚至抹去了产品自身的品牌个性。
3、在1,2之间寻找到一个平衡,混合型的设计产品。
这三种方法其实是各有利弊的,也不乏很多优秀的应用曾经或正在使用着这些方法。
那么我们从第一种开始说起。
1、品牌导向性。保持产品品牌的一致性,忽略平台差异
从界面设计的层面来看,这种方法的确是最快,最简单,也是最划算的方法。不过在技术实现层面,自定义的UI组件比起系统默认组件来说,也会耗费更多的时间和精力。
这里几个比较有代表性的栗子。
VSCO CAM
很有名的图片编辑应用,不过我没怎么用过(羞……)但能被很多摄影师推荐,大概也在一定成都上说明了这个应用的专业性了。
不过这里仅仅分析它的UI。文章中给出了如下的比较图:
很明显,iOS(左)和Android(右)在UI设计上是一模一样滴。。。VSCO并没有乖乖的遵守什么平台设计规范指南,而是最大程度的突出了自己的品牌个性,从而让不同平台上的用户得到的体验是一致的。正如VSCO创始人曾经提到过的,『创意更重要』,这个app的目的是为品牌服务的,是品牌的一部分,也是帮助这个品牌融入艺术家们的团体。看来,这个愿景的确是在实现着,也的确越来越多的摄影师会用到,甚至推荐VSCO了。
我喜欢管这个APP叫Ins,这也是很多熟识INSTAGRAM的人对它的称呼。最早Ins只有iOS版本,并且是相当的符合iOS设计规范的呀,简单好用,获得了大批大批用户的涌入和青睐。后来,过了很久,Ins终于推出了Android版本,但显然木有花很多时间和精力哈,所以Android版本的UI和iOS版本如出一辙,完全把Android的设计规范抛开,然而,却也在Google Play获得了巨大成功,打我呀~用户喜欢的不得了。
虽然在不同的系统平台,但两个版本也是傻傻分不清,如下图:
仅仅有着细微的差别,比如logo是在左边还是在中间的问题……
WIRE
即时聊天应用,骚瑞,国内收不到验证短信,无法注册,但从splash来看是cool的不要不要的。
从作者提供的对比图来看,WIRE的iOS和Android版本也基本一致,如下图:
据创始人说,WIRE有一些很有趣的用户交互,具体是哪里有趣,只能等我能收到短信验证码的时候再体验了!!
同样WIRE也是有着很强的品牌气质,跨平台交互和图标等都保持了高度的一致性。
从VSCO CAM, INSTAGRAM, WIRE来看,他们都以品牌为导向设计,也都在各自领域取得了一定成功,但单纯的效仿这种方式也未必是个好方法,还是具体问题具体分析哦。
当同一批用户在各个平台上都会使用你的产品时。
这种情况下,使不同平台上的交互,视觉保持一致,会更多的减少用户适应和学习的时间,保持了品牌的一致性,体验的一致性。
优秀的自定义组件可以给用户带来更加直观和吸引眼球的感受。
在保证品牌一致性的同时,也优化了体验。
2、平台导向性。恪守各个平台规则,淡化甚至抹去了产品自身的品牌个性。
和1的观点不同,2是严格遵守这平台规则去设计产品。作者也举了几个栗子,总觉得这样的app有那么一丢丢的性冷淡(请忽视我的感受……)
TELEGRAM
也是在某个地方比较受欢迎的即时聊天APP,而界面给我的感觉看来,和1中提到的app比起来,的确高冷了许多。TELEGRAM更注重功能而非外观,因为从外观上看可以说是没什么特色的,甚至会误以为是个系统app,如下图:
显然,iOS版本就是严格遵循了apple设计规范,Android版本严格遵守了google 的Material Design。
虽然在国内不怎么普及,但被facebook收购的事实也让人无法忽略它的受欢迎程度。从下面的对比图不难看出,iOS和Android版本有着十分明显的差异,并且都在遵循着各自平台的规范:
KOMOOT
这个APP来自德国,是关于跑步和骑车的应用。最先推出的依然是iOS版本,一年后有了Android版本。不过从作者分享的界面对比图来看,整体的布局差别不是很大,在细节上还是有很明显的平台区分,如下图:
两个版本都遵循了各自平台的设计规范,按作者的话来说,不太像初创公司的风格……呃,所以初创公司倾向于简单粗暴的搞品牌一致性么?
那么什么时候比较适合使用平台导向的思维来设计APP呢?
有一种可能是,你面临一个竞争激烈的市场,需要迅速迭代发布和积累大批用户。
这种情况下,遵循平台规范,对于开发人员来说会更加容易实现设计人员的需求,提高效率。
Apple和Google引领的一些设计趋势在用户中的反响也的确是成功的。
比如扁平化设计取代拟物化设计。
你的APP有复杂的功能和用户交互。
这个时候遵循设计规范,可以让用户很自然的按照操作其他系统应用一样的方式来使用你的应用而不会遇到太大的困难和疑问。想到一句话『返璞归真』,抛开花哨的视觉和炫酷的交互方式不谈,最根本的还是帮助用户毫无障碍的解决掉他面临的问题,而你的app就是这之间的桥梁纽带,这座桥通畅笔直平坦。
3、混合型设计
这个方法混搭了前面提到的两种,既突出了品牌个性,又能在一定程度上遵循平台设计规范。作者列举了几个耳熟能详的栗子。
SOUNDCLOUD
一个流媒体播放应用。同样存在iOS和Android两个版本,和很多app不同的是,这两个版本是同时推出的。
从对比图中看来,iOS和Android版本各自的平台特性还是挺明显的,比如iOS典型的tabbar和Android的hamburg menu。
Facebook的移动端最早是HTML5搭建的,但最终还是决定在不同平台上使用各自的原生界面。一方面Facebook的品牌影响力不容置疑,另一方面Facebook庞大的用户基数,也让他们不得不在保证品牌影响力的同时兼顾各个平台上用户的使用习惯,由此,产生了混合型的界面设计,如下图:
iOS和Android两个版本看起来类似,但都遵循了各自平台的设计规范。
AIRBNB
被称为成长最迅速的初创公司。和facebook类似,两个平台的版本在保持品牌一致的同时,又兼顾了本平台的设计规范,如下图:
VIBER
对这个app太有印象啦,在wechat,米聊还没有走入我们生活的时候,viber就有了,当时觉得可兴奋了,这工具还能打电话,还不要钱!!哈哈,但,好景不长,很快就出现了一堆跟随者,而且有越战越勇的架势,最终,我的手机上留下的即时聊天工具里面,viber早已无声无息的消失了。
不过作者还是蛮欣赏viber的,它虽然布局交互都十分遵守系统规范,但视觉上的识别度很高,不同平台的品牌一致性保持的很好。比如,都是紫色系……
那么什么时候用这种混合型的方法最合适呢?
你在迭代产品,根据反馈和预估来优化产品的时候
混合型设计的方法,有个前提是,你已经十分了解用户是怎么使用你的产品,所以在此基础上对现有产品进行改进优化。
最后,到底哪种方法最好使?
呃,显然是木有最好使的,只有最适合的。让用户用起来最舒服,解决用户的实在需求迫切需求的应用,有着更加顽强的生命力。
与小伙伴们共勉。