Android与iOS:两种设计语言的和而不同

[设计规范] [用户体验]

封面用研原创文章:王蒋艳

作为智能手机的最大的两个阵营,iOS 和 Android 系统差异一向都是大家津津乐道的话题。在一个设计师眼里,这两个系统的差异性之多可远远不止表面上看起来的那么简单粗暴。但在移动端趋势有如春草那样蔓延开来的今天,大多数的公司都选择把iOS 的界面直接运用于 Android 系统。我们自然可以理解这样做是为了节省成本和更快的迭代,但抹杀了系统特性的运用却牺牲了许多Android 用户的用户体验。本文着重介绍一下两者最新设计语言的异同。

整体风格对比

iOS:iOS7的Flat Design——是 Mobile 设计里程碑。原本栩栩如生的拟物化设计被拍扁,去除了冗余、厚重和繁杂的装饰效果,变成了“扁平化设计”,其核心思想就是让“信息”本身凸显出来,在设计元素上则强调了抽象、极简和符号化。自此扁平风格开始在移动端设计中广为盛行。

iOS7的Flat Design

Android:自从2014年11月3日,Android5.0 Lollipop 正式面向用户推出,Material Design 焕然一新的设计惊艳了全场,不仅仅是视觉效果,全新的“数字纸墨”的空间概念也赋予了界面全新的UI理念。

Android的Material Design

那么 Flat Design 与 Material Design,两个同样趋于简约的设计理念,他们具体的区别又在哪呢? 以下将会就这个话题具体分析两者在设计思路、动效和其他细节上的不同。

1.设计思路的不同——开发与封闭

如果只能用一对词来概括 Android 和 iOS 系统的不同,那应该是开放与封闭,也正是这两个截然不同的系统特性带来了设计思路的不同。

Android 的开放带来了多样化设计的同时(使用自定义控件几乎没有不能实现的设计效果),同时也带来了“杂乱无章”之感和众多因为不统一而造成的用户在使用时无从下手的情况。

iOS的 HIG(《Human Interface Guideline》人机交互规范)则更多“迫使”设计师去更多的使用系统原生的控件,设计师对于控件的修改非常局限,但这样做的好处就是每个 App的基本操作都是在规范之内,具有一定的统一性,用户使用起来非常的方便,学习成本也相应降低了不少。这两者很难去评判孰优孰劣,可以说“iOS 的下限比 Android 高,但 Android 的上限比 iOS 高”,伴随着大屏时代的脚步,可以看到双方都在努力靠近彼此的一个趋势,相信在不久的将来,就可以达到一种“和而不同”的平衡。

2.动效展现原理不同——换个角度理解世界

现在动效的运用已经成为了许多 APP的标配,合理的动效不仅仅是为了视觉效果上的“酷炫”,更是帮助用户更好的理解层级、转场关系和关注到重点信息的利器。然而细心的设计师会发现,Android和 iOS 的动效思路是截然不同的。用一句话概括两边设计语言的物理模型就是:Material Design 运用的是机械物理和电磁物理,而iOS 的动效更多建立在镜头运动和景深变化上。究其设计语言的本质就是让用户可以把客观经验移植到界面的一种思路。

Material Design 的隐喻是纸张,用户的手指就像磁铁一样把电子纸墨吸引过来,点击后就会泛起“涟漪”作为一个交互响应。而其他物体的排列则按照一种“深浅”的层级来排布,离手指越近的元素越亮,阴影越深,而离开远的元素则越暗,直至淹没在黑暗之中。

Material Design 中动效的展现
Material Design 的经典动画

细观 iOS 的系统动效可以发现,iOS 的桌面就好像一片星空,每个 App 都是其中的一个小星星(点),每当用户去点击,镜头就会切近,而背景则是隐入了一片高斯模糊的景深之中,这应该是每个 iOS 用户最深刻的动效体验之一了。高斯模糊也成为了 iOS 特有的一个表达层级关系的利器(其中不仅是模糊,还存在着镜头晃动时的位移)。

相册的层级,由远及近,由小变大
iOS 打开 APP 时的动效,从点到面

同样类型的动效还体现在打开 APP 的时候由一个点放大成一个面,包括“日历”App 和“相册”App(皆为系统应用)中年-日-月切换的操作,均是镜头思路的表现形式。

无论是哪种动效,本质上都是帮助用户更好的理解界面信息在时间和空间上的关系。

3.其他设计形式——和而不同

Tab bar的设计

iOS的Tab放在页面底部,通常通过点击来切换。Android一般放在页面顶端,可以通过滑动页面来切换Tab,当然Tab可以点击切换。Tab多的话,Tab本身也可以滑动。

android和IOS tab的位置对比

单条item的操作

iOS单条item的操作有两种,点击和滑动,点击一般进入新的页面,滑动会出现对这条item的一些常用编辑操作,如微信里滑动一条订阅号,会出现取消关注和删除。

Android中,单条item的操作也有两种,点击和长按,点击一般进入新的页面。长按进入一个编辑模式,可以在里面进行批量和其他一个操作,比如删除,顶置等等。

android和iOS 编辑方式对比

字体

iPhone上的字体英文为:HelveticaNeue 。IOS9之后变为苹方字体,该字体提供了6种字重。分别为:常规体、极细体、细体、纤细体、中黑体、中粗体。使用不同字重,更加界面上不同层级信息的表达。

Android 上的字体为:Droid sans fallback,是谷歌自己的字体,与微软雅黑很像。

4. 规范与用户习惯的平衡

最后谈一谈微信,这个用户量级重达10亿的APP,他们是如何在Android和IOS的设计版本中平衡规范与用户习惯的。

微信的tab导航,IOS和Android端依然是保持一致,都放在底部的。其实在Android4.0时期,微信出过一个严格按照android规范的版本,把导航放在里侧滑里,但是随着用户使用习惯的逐渐被固化,发现很多常用的功能是不适合放在侧滑里的。所以后来的微信android版,还是把主导航放在了底部。只是在单条item的操作、输入框的样式等细节上按照android的规范来做。

微信的android端和iOS端的细节异同

总结

做设计,既要借鉴官方、行业主流的设计形式,更要分析和总结别人设计形式背后的逻辑。官方、主流设计已经将用户的认知和使用习惯培养起来了。

正如交互之父Alan  Cooper所说:如果你找不到更好的设计方案,就按照目前的标准来做,强打差异化有违用户习惯的,可能这对用户价值是有伤害的。这就是最后要用微信为载体对比iOS和Android两大系统的差异。设计的目的在于提供适当场景的解决方案,当目前市场的解决方案都满足不了现有的业务需求,我们就要学会创造,但是在创造过程中最好依据现有标准设计来改变与创造。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容