关于安卓和IOS的产品设计学习体会 | 奇点产品

/ 0评 / 0

最近在看一些安卓和IOS的产品设计体会,本篇文章主要分享一些觉得分析的还好的文章。现在网络上大部分都是简单的形容一下,能找到一篇ok 的,然后细细体会学习也是不容易了。

转载: 移动APP之iOS与Android产品设计差异_贝贝_新浪博客

移动端的App界面,不论是iOS还是Android,一般由四个元素组成,分别是:

状态栏(status bar)、导航栏(navigation)、主菜单栏(submenu)、内容区域(content)。

不同的是,由于Android在4.0之后移除了实体键而使用屏幕下方的虚拟键,所以Android将iOS中的主菜单从下方移动到了上方,从而避免误操作虚拟键。

布局差异性

导航栏位置与风格

iOS: iOS通常使用经典的Tab页面来进行页面的布局,也是最早最经典的布局方式。 Android: Android官方提供了两种页面切换方式:Actionbar和可滑动的Tab。(Actiobar给用户提供了导航标题和触控按钮)

展示数据

Android:通常使用spinner的方式来展示可选数据项

iOS:使用segments

图示:

Back键

iOS:从iOS的布局上我们可以发现,由于iOS设备没有返回键,所以页面不得不在一页中显示或者在页面上提供返回按钮。

Android :返回操作相比iOS就更加丰富,它不仅可以返回上个页面,更可以返回上一次的操作,例如打开、收起键盘。 另外,从Android 4.0开始,Google也提出了一个“向上”的概念;如下图:

Android 4.0返回流程

搜索

iOS:搜索通常以控件的形式展现出来

Android:大多以search widget的形式展现,在点击后显示搜索框

图示:

按钮

iOS:按钮基本会带有明显的边框,

Android:按钮通常不需要边框,并带以涟漪效果来展示边界。

平台差异性

交互架构

iOS:标准交互架构是第一层导航在底部,左上角返回,右上角操作,右进左出,默认垂直滚动。不得不说,这套架构运用得到成熟,很彻底,最后在这套架构上和各种进化也很优秀。

Android:标准交互架构的混乱很多,但是,不好用的自然会消失,看看G1的实体按键还有几个。search没了,menu越来越少用了,顶部导航少了。各种移植现象也让交互越来越iOS化。但是Android的特点在back上。iOS的优秀在于app内部,缺点却是app外部,app之间的切换非常弱。而android,因为back物理按钮的存在,应用之间的接口非常灵活。以栈的方式来管理活动,而不是以应用来管理活动,这就让开发者对全局的把握更加轻松。

设计建议

很多人把用户体验看成是单纯的设计或可用性问题,过于狭隘。用户体验的组成是多个方面的,产品基础功能、新技术、内容、交互体验、UI视觉、性能其实都是体验的构成。有时候产品的成功不是一两处就能决定的,甚至牺牲其中一些关键环节,如果能保证满足其它更好的需求,也是值得的。

而对于开发者, 尤其是跨平台开发者而言, 分别遵循不同平台的设计规范会为设计带来更大的压力 —— 对于大部分应用而言, 需要设计多一套视觉样式 (对于很多设计师/开发者而言, 还需要重新设计一套交互逻辑 —— 尽管这是毫无必要的), 必然会增加工作量. 但是, 遵循平台设计规范能够让开发者更好的发挥一个平台的实力 (调用自带标准控件节省性能, 不需调用外部库实现模仿 iOS 的视觉/交互效果, 标准布局更容易实现, 等等)。

针对平台特性去设计同一功能的不同元素,最需要遵循的就是不要刻意模仿其他平台的显示特性。

创建一个跨平台的设计,最需要考虑的方案就是这两个平台上展现同一功能的元素是不同的。所以设计应当尊重原生UI的标准,让用户保持同一的操作习惯。

最好不要共用一套UI

现在在开发中,大多使用一套UI来设计Android和iOS两个平台的主要原因,其实还是因为移动互联网的版本节奏太快,两套UI设计与维护的成本过大会导致效率降低,这是采取两平台完全一致的最关键因素。同一个产品在两个终端并行,设计资源会严重紧缺,两平台功能同步设计不同步的情况使得项目进行得相当缓慢。从团队的效率看这么做确实无可厚非,其实也就是在争取时间成本。

但是,设计师应该把自己的设计当做自己的儿子,比如乔布斯,他肯定希望自己的儿子像自己,如果长得像爱因斯坦一样,虽然绝顶聪明,但是却显得和父亲格格不入,设计也是这样,保持系统本身的特点,是对系统本身最起码的尊重。

如果说Android的设计风格不完美,但这肯定不是使用iOS风格的理由,因为iOS风格的Android应用只会让界面看起来更差劲,不伦不类,Android Design 就算再怎么不完美,总比iOS风格要适合Android。如果说Android Design 不完美,或者是不够漂亮,那么Android Play上面那么多界面精美的应用都是怎么做出来的呢?

如果说两个平台用同一个界面是为了提升效率,节省时间,那为什么Windows Phone 又是另外的界面?为了一个占有率80%的平台你去“节省时间”,为了一个占有率2%的平台你去“花费时间“,说得通?Windows Phone 之所以不是iOS风格的,是因为微软压根就让你做不成iOS风格的,要能照搬你会不照搬吗?所以,大部分的App以2%为理由,拒不支持WP。

UI可以一样,但是操作方式绝对不能一样

即使我们退一步,UI做成一套,这个很多人也还可以接受,但是最无法忍受的是整个操作都是以iOS方式进行、并且Android的优点都全部去掉的设计。举个例子,很多人认为Android左上角也有返回,但是那只是看起来像返回,实际上是向上,用过Windows资源管理器的人都知道,虽然有时候返回和向上都是回到同一个文件夹,但是很多时候又是不一样的,那么你在左上角做返回,能不能把功能改成向上?Android 4.1支持富通知,为什么微信来了多条消息还是只能显示发来XX条消息,而不能直接显示消息内容?

这也是官方制定规范的意义之一,让各个开发团队了解系统生态的初衷和导向,让用户在同一个系统生态下能得到尽可能一致的体验;同时也减少独立开发者的工作成本。 而现状是 Android 上经常出现 iOS 式操作,让人觉得非常混乱……

不要以用户的学习成本为借口

说到用户的学习成本,有多少用户是两个平台都用的?恐怕远小于只用一个平台的。一个Android手机用户,大多数软件都是Android Design 的,他用习惯了,然后装了一个微信,突然发现是肾6风格的,这要不要学习成本?有多少用户是在不同的平台间来回切换的?请问是一个用惯了Android Design 应用然后安装了一个肾风格的微信的用户多,还是用惯了肾机换到Android的用户多?明显是前者多,难道腾讯只照顾后者的学习成本,不照顾前者?何况用惯了肾机,反过来用Android,没了返回就不会用了?用户都是弱智?返回在上面会用,在下面就不会用了?这种智商,基本也就不会聊天了,还用微信干什么。既然Android用户转到肾机,能学会按上面的返回,肾机转到Android,反而学不会按下面的返回,这是什么道理?歧视肾机用户智商?

真正好的设计,是两个平台看起来差不多,操作基本上一样,但是又能把不同平台的特色体现出来,界面布局基本相同,iOS平台用圆角矩形,Android平台用直角矩形,既可以触摸切换标签,又可以滑动切换标签,一个人来了消息能显示,两个人来了消息也可以显示,不再是只显示数量了,把上面的返回改成看似返回实则向上的按钮,这样操作起来也差不多,现在微信如果要回到主界面,需要点多次返回,并且配上时间很长的过渡动画,操作极其繁琐,把返回按钮改成向上,不仅符合规范了,操作也大大方便了。

转载:  小科普:ANDROID和IOS的设计到底有什么不同?_文章_DevStore

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

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

从Flat Design 和Material Design 说起

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

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

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

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

如果只能用一对词来概括Android和iOS系统的不同,我想那应该是开放与封闭,也正是这两个截然不同的系统特性带来了设计思路的不同。Android的开放带来了多样化设计的同时(使用自定义控件几乎没有不能实现的设计效果),同时也带来了“杂乱无章”之感和众多因为不统一而造成的用户在使用时无从下手的情况。

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

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

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

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

△ MATERIAL DESIGN中动效的展现

△ MATERIAL DESIGN的经典动画

细观iOS的系统动效可以发现,iOS的桌面就好像一片星空,每个App都是其中的一个小星星(点),每当用户去点击,镜头就会切近,而背景则是隐入了一片高斯模糊的景深之中,这应该是每个iOS用户最深刻的动效体验之一了。高斯模糊也成为了iOS特有的一个表达层级关系的利器(其中不仅是模糊,还存在着镜头晃动时的位移)。同样类型的动效还体现在打开app的时候由一个点放大成一个面,包括“日历”App和“相册”App(皆为系统应用)中年-日-月切换的操作,均是镜头思路的表现形式。

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

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

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

分辨率之殇

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

对于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体现个性的方式等等。

公众号:奇点产品

发表评论

电子邮件地址不会被公开。 必填项已用*标注