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

相关推荐

  • apple watch 中文手册:Apple Watch Xcode项目 配置过程

    Xcode会将Watch应用和WatchKit应用扩展打包,然后放进现有的iOS应用包中。Xcode提供了一个搭建Watch应用的模板,其中包含了创建应用、glance,以及自定义通知界面所需的所有资源。该模板在现有的iOS应用中创建一个…

    2015-06-15
  • 交互设计延伸阅读:格式塔心理学5项法则的学习与思考

    格式塔心理学5项法则的学习与思考 最近在整理交互设计七大定律,发现了这篇老文,内容很精彩,翻译下与大家分享。 最近在整理交互设计七大定律,文章要系统的看。 目录:【交互设计七大定律】关于交互设计法则“除非…

    交互设计WiKi 2015-08-27
  • App按钮如何设计才合理?这些设计学问你还不知道

    每个 app 里面会遇到「按钮」,在发展的过程中,按钮是怎样变化的?怎样设计按钮才合理?AppSo(微信号 appsolution)这篇文章便为你解答。

    2017-05-09
  • 7个实用规则,让你的设计更加简单直观

    简单直观的设计并不一定非得是极简的,它同样可以是丰富而又有趣的。

    2017-05-09
  • 关于Axure8.0中继器的使用1

    废话少说,请开始你的表演!!!1.拖入一个中继器,将中继器多余的行删除;2.在中继器中添加三列(可以直接双击编辑),分别命名:name、sex、age;3.双击拖入的中继器会跳转类似动态面板的“(中继器)(page2)”新页面;4.在(中继器)(page2)中再添加两个和已有矩形大小一直的矩形,分别命名:name、sex、age;关于中继器的准备工作完毕,因为中继器需要存放动态数据,所以需要在页面增加动态数据的输入入口。5.回到拖入中继...

    2018-03-10
  • 李斌:用户体验是商业变革的核心 ▏笔记

    混沌大学2017年商业创新第29课与做“车”相关领域的互联网人中,你很难再找到一个经历比李斌更加丰富的人。作为易车网的创办者、蔚来的操盘手和摩拜单车的天使投资人,李斌已经在汽车领域创业18年。对于创新的商业模式,李斌认为核心在于重新定义用户体验。伟大的商业模式变革,都不是从商业模式出发的。李斌老师在混沌大学授课授课老师|李斌易车网、蔚来汽车创始人、董事长,兼任摩拜单车董事长过去20年互联网获得的巨大成功告诉我们,用户只会为好的体验买单。...

    2018-04-06
  • 异步交互设计漫谈:单机在这里“抄袭”了网游

      “玩家交互”作为游戏中“网络元素”的核心体现已经获得了游戏制作者与游戏玩家的普遍重视。在网络游戏中,如何让玩家获得更加自由、更加全面的交互体验成为了一款网络游戏的重要课题;而在传统意义上的单机游戏里…

    2017-08-02
  • 为了生存!QQ空间升级改变非主流印象,论用户体验的重要性

    关注留学签证移民的新资讯分享学习工作生活的新鲜事JT EDUCATION点击上方关注非主流、火星文、酷炫的QQ空间45度叫仰望天空、明媚的忧伤十年前,谁还不是个中二症患者?曾经的中二少年变成了大人大人不再点开的QQ空间也变样了面对微博微信这样的对手总要活下去这次QQ空间品牌升级重点在于对用户体验的设计哦?又是用户体验这个词真的是使用频率越来越高什么产品和服务都强调用户体验但具体说起来是什么意思呢?比如有人说现在发微博就像玩扫雷不知道发个...

    2018-03-06
  • 扫盲贴|UI动效设计原来都是这些软件做的

    随着技术的不断发展动效越来越多的被应用于实际的项目中。手机、网页等等媒介都在大范围应用,那么问题就来了,为什动效越来越吃香?它有哪些优势呢?

    2017-05-10
  • 【原创译文】面向对象的用户体验设计

    原文:Object-Oriented UX 2012年6月,我在CNN.com工作时,接到了为“选举之夜”进行用户体验设计的任务。接下来的5个月我为那1个晚上贡献了全部精力——但我的成功对选举的胜利方没啥影响。我所关注的是页面的可读性,…

    2015-11-20