Android 和 iOS:两个系统交互设计的不同之处在哪?

iOS 和 Android 的设计还有许许多多的不同之处,比如字体、Tab bar 设计、物理键操作方式、编辑模式、APP 体现个性的方式……在设计移动端产品的过程中,设计师们可以更多的去思考两者的异同,并且更多的关注一下 Android 系统独有特性的运用,不仅仅节省了开发成本,同时也更好的为 Android 用户所接受。1dp(Android)=1pt(iOS)
以48dp@160dpi计算的话
mdpi 48px (160dpi, 1x) 基础尺寸,已经非常少使用
hdpi 72px (240dpi, 1.5x)低分辨率
xhdpi 96px (320dpi, 2x) 同iOS @2x
xxdpi 144px (480dpi, 3x) 同iOS @3x
xxxdpi 192px (640dpi, 4x) 更大更高更强的分辨率


iOS 和 Android 的设计还有许许多多的不同之处,比如字体、Tab bar 设计、物理键操作方式、编辑模式、APP 体现个性的方式……在设计移动端产品的过程中,设计师们可以更多的去思考两者的异同,并且更多的关注一下 Android 系统独有特性的运用,不仅仅节省了开发成本,同时也更好的为 Android 用户所接受。

Android 和 iOS:两个系统交互设计的不同之处在哪?

作为智能手机的最大的两个阵营,iOS 和 Android 系统差异一向都是大家津津乐道的话题,其中内容通常是围绕“机器性能好不好,打开软件卡不卡”“摄像头的像素高不高,拍出来的自己美不美”“外观是不是有 bigger”等话题展开的。

在一个设计师眼里,这两个系统的差异性之多可远远不止表面上看起来的那么简单粗暴。但在移动端趋势有如春草那样蔓延开来的今天,大多数的公司都选择把 iOS 的界面直接运用于 Android 系统。我们自然可以理解这样做是为了节省成本和更快的迭代,但抹杀了系统特性的运用却牺牲了许多 Android 用户的用户体验。尽管知乎也有类似回答过两个系统交互的不同,今天笔者想更着重介绍一下两者设计语言的异同。

1、从 Flat Design 和 Material Design 说起

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

Android 和 iOS:两个系统交互设计的不同之处在哪?

(典型的 Material Design)

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

Android 和 iOS:两个系统交互设计的不同之处在哪?

(扁平化风格显著的 iOS7设计)

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

2、开放与封闭,设计思路大不同

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

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

iOS 的 HIG(《Human Interface Guideline》人机交互规范)则更多“迫使”设计师去更多的使用系统原生的控件,设计师对于控件的修改非常局限,但这样做的好处就是每个 App 的基本操作都是在规范之内,具有一定的统一性,用户使用起来非常的方便,学习成本也相应降低了不少。

这两者很难去评判孰优孰劣,可以说“iOS 的下限比 Android 高,但 Android 的上限比 iOS 高”,伴随着大屏时代的脚步,可以看到双方都在努力靠近彼此的一个趋势,相信在不久的将来,就可以达到一种“和而不同”的平衡。

3、动效展现——换个角度看世界

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

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

Android 和 iOS:两个系统交互设计的不同之处在哪?

(Material Design 中动效的展现)

Android 和 iOS:两个系统交互设计的不同之处在哪?

(Material Design 的经典动画)

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

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

Android 和 iOS:两个系统交互设计的不同之处在哪?

(相册的层级,由远及近,由小变大)

Android 和 iOS:两个系统交互设计的不同之处在哪?

(iOS 打开 APP 时的动效,从点到面)

无论是哪种动效,本质上都是帮助用户更好的理解界面切换和时间线之间的关系,设计师们也可以在这两种系统动效的基础上,设计出适合自己产品的动效。

4、分辨率之殇

对于需要同时涉及移动端多个平台的设计师来说,分辨率是永远无法避开的一个痛点。在 iPhone6/iPhone6Plus 问世之前,iOS 更受设计师欢迎,也更多被作为模板来设计的原因,很大一部分是因为 iOS 的分辨率相对固定,设计效果更容易被还原。而 Android 也一直因为屏幕尺寸的多样化而被设计师们所”嫌弃“。所以在设计的过程中,不仅仅需要调整当前页面的最佳设计效果,同时也应该思考这样的设计是否符合不同分辨率尺寸下的屏幕显示效果。之前公众号中董浩龙的《一稿适配 iOS7》(传送门见文末)应该会给大家不少适配方面的启示。

对于 Android 来说,无他,唯调整尔。尽量把设计元素的所占空间用百分比来表示,同时根据开发实现的效果来调整一些极端情况下具体的间距,以求“满足大部分主流屏幕的完美显示以及其他屏幕的可接受显示”原则。

下图给大家展示一下 iOS 与 Android 的分辨率的转换关系,在切图的时候满足一定的倍数关系,就可以一键导出可以同时适配两者的切图了。

1dp(Android)=1pt(iOS)

以48dp@160dpi计算的话

mdpi 48px (160dpi, 1x) 基础尺寸,已经非常少使用

hdpi 72px (240dpi, 1.5x)低分辨率

xhdpi 96px (320dpi, 2x) 同iOS @2x

xxdpi 144px (480dpi, 3x) 同iOS @3x

xxxdpi 192px (640dpi, 4x) 更大更高更强的分辨率

小结

其实, iOS 和 Android 的设计还有许许多多的不同之处,比如字体、Tab bar 设计、物理键操作方式、编辑模式、APP 体现个性的方式等等,在此不一一展开了。

希望在设计移动端产品的过程中,设计师们可以更多的去思考两者的异同,并且更多的关注一下 Android 系统独有特性的运用,不仅仅节省了开发成本,同时也更好的为 Android 用户所接受。

 

作者:Doris(点融黑帮),视觉设计师,现就职于点融网用户体验团队DDC。

本文由@点融黑帮(ID:DianrongMafia)原创发布于人人都是产品经理,未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/23700/

(0)
CatherineCatherine
上一篇 2017-05-06 09:54
下一篇 2017-05-06 12:02

相关推荐

  • 校园招聘 | 网易交互设计实习生

    网易交互设计实习生公司简介网易2001年正式成立在线游戏事业部,与广大游戏热爱者一同成长15年,是全球领先的游戏开发与发行公司,自主研发了《梦幻西游2》《大话西游2》《天下3》《乱斗西游》《梦幻西游手游》等几十款倍受玩家喜爱的热门端游和手游,更独家代理了《魔兽世界》《炉石传说》等多款风靡全球的游戏。 2015年,网易游戏正式开启“游戏热爱者”品牌战略,用自身行动传导热爱者价值,并全面启动“聚合精品,共享热爱”战略计划,以全球化视野为游戏...

    2018-02-10
  • 社会化分享按钮:一种糟糕的用户体验

    分享按钮被滥用了吗?“通过我们定期的分析,GOV.UK网址被分享到Facebook和Twitter共有14,078次——只占6,800,000总浏览量的0.2%。”“我们删除了FB按钮,Facebook的使用流量增加了。原因如下:用户在其时间表上分享来替代了“喜欢”文章。

    2017-05-03
  • 交互设计师面试问题:“了解 UE 吗?能否详谈一下?”应该这样回答...

    很多面试UE设计、面试交互设计师、面试产品经理(PM)、面试UI设计师的朋友经常被问到这个问题 面试官为你这个问题实际上想从你那里得到你对UE 基础概念,以及你是否具备用户体验设计的思维。 如果你被问到这…

    交互设计 2015-05-29
  • 美国交互设计综合类&艺术类院校申请侧重点有哪些?

    回复【交互】,获得专业老师一对一专业指导随着现今数字智能等高科技的发展,交互设计成为近些年众多艺术留学生的热门首选专业。但热门并不代表很多同学都对交互设计有所了解,比如,根据向汉艺咨询的学生情况分析,90% 的同学都分不清什么是到底什么是交互,只是很表面的认为交互就是各种“APP”、“UI设计”或者VR/AR。实际上,即使国外最顶级的院校,你也找不到一所专门设立“APP”的专业,“UI设计”严格上来说只能算是“平面设计”,而设立VR/A...

    2018-04-13
  • 升级篇:利用品牌基因法进行图标设计

    图标设计如何具有品牌性?这可能是设计师工作中经常会遇到的问题。但很多新人也许并不了解什么是品牌性,更不知道如何将品牌性融入到图标当中,不过没关系,看了这篇文章你就不会那么困惑了!

    2017-05-04
  • Axure RP 8.0安装教程

    Axure RP 8.0Win版/64位下载地址:https://pan.baidu.com/s/13eqSe3IeqvnyqjBYxIEqZA密码:2gkwAxure RP简介:Axure RP是一个专业的快速原型设计工具。使用者主要包括商业分析师、信息架构师、产品经理、IT咨询师、用户体验设计师、交互设计师、UI设计师等,另外,架构师、程序员也在使用Axure。适用系统:win7,win8,win10安装有问题或需要远程安装请联系:...

    2018-04-30
  • 2018年04月07招聘岗位

    诚聘:通辽澳鼎医疗器械公司诚聘:工作人员要求:40岁到50岁之间的女性,能长期工作的,有爱心,有孝心,家庭没有负担的,高中以上文化程度,语言表达能力好待遇:中午有工作午餐,每个周日休息,节假日休息,基本工资1800元,满勤奖200元,年底奖金不少于12000元。联系人:闫经理。联系电话,15247572846,15374967717不能长期工作的勿扰!招聘服务员工资底薪2500加提成收银员2700元加提成招聘电话:8663888,157...

    2018-04-08
  • Excel表格常用快捷键大全之11-20个(含操作演示)

    温馨提示:零基础或者对Excel不熟悉的小伙伴,请在公众号后台回复数字:1,免费学习滴答老师的全套Excel小白脱白系列视频教程。第十一,选定当前活动单元格区域比如,咱们需要给A1:C18单元格区域加上边框,首先得选中这些单元格。除了用鼠标拖动选择之外,还可以使用下面的两个快捷键:鼠标随便放在A1:C18单元格区域之间的任意单元格,按下Ctrl+Shift+*(星号)或者Ctrl+A就可以快速选定当前活动单元格区域。第十二,excel选...

    2018-03-18
  • 解读互动行业,鲜为人知的我们这样做网站

    大浪淘沙,就像2.0时代最火的人人、开心网没有把握移动互联网的机遇纷纷衰败,转型脚步落后的互动公司也逆流而逝,很多互动设计师都被迫找寻新的方向。本文作者将给大家介绍什么是互动设计,为什么要那样做网站以及互动行业的兴衰史。Infecting your screen for your enjoyment
    为你的愉悦而感染你的屏幕被遗忘的是
    那些放开手的人
    被遗忘的是
    放开手的人梦里南柯,且无痕,浮生若是;
    生非苦短,知天命,则无所怠。

    2017-05-13
  • 美甲店如何做好用户体验?【下】 | 互联互生

    上周的一篇文章我们说到了“用户体验”对于美甲店铺的重要性,文章中我提出了一个“峰值和终值的一个概念”,以及举了几个服务性的行业的例子,它们是如何利用“多数被遗忘,偶尔特漂亮”这个心理给用户带来不一般的体验感。今天这篇文章我们重点来谈谈咱们美甲店可以怎样在“用户体验”上有一些创新。好客服的法则随着网络越来越普及和重要,大部分美甲店主都开始注重自己的店铺在网络上面的评价,我们就先拿大众点评这个平台作为例子。一个店铺在大众点评上面肯定有很多的...

    2018-05-06