作为智能手机的最大的两个阵营,iOS和Android零碎悬殊一向都是各人津津乐道的话题,此中内容通常是围绕“机器性能好不好,翻开软件卡不卡”“摄像头的像素高不高,拍出来的本身美不美”“外观是不是有bigger”等话题展开的。

在一个设计师眼里,这两个零碎的悬殊性之多可远远不止表面上看起来的那末

简单粗暴。

但在移动端趋势有如春草那样蔓延开来的今天,大多数的公司都选择把iOS的界面直接运用于Android零碎。

我们天然能够了解如许做是为了节流成本和更快的迭代,但抹杀了零碎特征的运用却捐躯了许多Android用户的用户体验。

尽管知乎也有类似回覆过两个零碎交互的差别,今天笔者想更侧重

先容一下二者

设计言语的异同。

1、从FlatDesign和MaterialDesign说起

几乎每一个移动端的设计师都会熟知的一个Mobile设计里程碑——iOS7的FlatDesign。

原本栩栩如生的拟物化设计被拍扁,去除了冗余、厚重和繁杂的装饰后果,扁成了“扁平化设计”,此中心思想等于让“信息”自身凸显出来,在设计元素上则强调了形象、极简和符号化。

自此扁平风格开始在移动端设计中广为盛行。

(典型的MaterialDesign)

自从2014年11月3日,Android5。

0Lollipop正式面向用户推出,MaterialDesign面目一新的设计冷艳了全场,不但

仅是视觉后果,全新的“数字纸墨”的空间观点也赋予了界面全新的UI理念。

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

那末

FlatDesign与MaterialDesign,两个同样趋于简约的设计理念,他们详细的区别又在哪呢?

以下将会就这个话题详细分析二者

在设计思绪、动效和其余细节上的差别。

2、凋谢与关闭,设计思绪大差别

若是只能用一对词来归纳综合Android和iOS零碎的差别,我想那应该是凋谢与关闭,也正是这两个判然差别的零碎特征带来了设计思绪的差别。

Android的凋谢带来了多样化设计的同时(使用自定义控件几乎没有不能完成的设计后果),同时也带来了“污七八糟”之感和浩瀚因为不统一而造成的用户在使用时无从下手的情形。

iOS的HIG(《HumanInterfaceGuideline》人机交互规范)则更多“迫使”设计师去更多的使用零碎原生的控件,设计师对控件的修改非常限制,但如许做的好处等于每一个App的基本驾御都是在规范之内,具有必然的统一性,用户使用起来非常的方便,深造成本也相应下降了不少。

这二者

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

3、动效展示——换个角度看全国

现在动效的运用已成为了许多APP的标配,合理的动效不但

仅是为了视觉后果上的“酷炫”,更是帮忙用户更好的了解层级、转场关系和存眷到重点信息的利器。

然而细心的设计师会发现,Android和iOS的动效思绪是判然差别的。

用一句话归纳综合两边设计言语的物理模型等于:MaterialDesign运用的是机械物理和电磁物理,而iOS的动效更多建立在镜头运动和景深转变上。

究其设计言语的素质等于让用户能够把主观经验移植到界面的一种思绪。

MaterialDesign的隐喻是纸张,用户的手指就像磁铁同样把电子纸墨吸引曩昔,点击后就会荡起“泛动”作为一个交互响应。

而其余物体的排列则按照一种“深浅”的层级来排布,离手指越近的元素越亮,阴影越深,而脱离远的元素则越暗,直至吞没在黑暗之中。

(MaterialDesign中动效的展示)

(MaterialDesign的经典动画)

细观iOS的零碎动效能够发现,iOS的桌面就似乎一片星空,每一个App都是此中的一个小星星(点),每当用户去点击,镜头就会切近,而背景则是隐入了一片高斯恍惚的景深之中,这应该是每一个iOS用户最深入的动效体验之一了。

高斯恍惚也成为了iOS特有的一个表达层级关系的利器(此中不但

是恍惚,还具有着镜头晃动时的位移)。

同样范例的动效还体现在翻开APP的时分由一个点放大成一个面,包括“日历”App和“相册”App(皆为零碎使用)中年-日-月切换的驾御,均是镜头思绪的表现形式。

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

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

无论是哪种动效,素质上都是帮忙用户更好的了解界面切换和时光线之间的关系,设计师们也能够在这两种零碎动效的基础上,设计出适合本身产物的动效。

4、分辨率之殇

对需要同时涉及移动端多个平台的设计师来说,分辨率是永久

无法避开的一个痛点。

在iPhone6/iPhone6Plus问世之前,iOS更受设计师欢迎,也更多被作为模板来设计的缘由,很大一部分是因为iOS的分辨率相对固定,设计后果更容易被复原。

而Android也一直因为屏幕尺寸的多样化而被设计师们所”嫌弃“。

所以在设计的过程中,不但

仅需要调解当前页面的最好设计后果,同时也应该思索如许的设计能否合乎差别分辨率尺寸下的屏幕显示后果。

之前公共号中董浩龙的《一稿适配iOS7》(传送门见文末)应该会给各人不少适配方面的启示。

对Android来说,无他,唯调解尔。

尽量把设计元素的所占空间用百分比来表示,同时根据开发完成的后果来调解一些极其情形下详细的间距,以求“餍足大部分支流屏幕的完美显示以及其余屏幕的可接受显示”原则。

下图给各人展示

一下iOS与Android的分辨率的转换关系,在切图的时分餍足必然的倍数关系,就能够一键导出能够同时适配二者

的切图了。

1dp(Android)=1pt(iOS)

以48dp@160dpi计算的话

mdpi48px(160dpi,1x)基础尺寸,已非常少使用

hdpi72px(240dpi,1。

5x)低分辨率

xhdpi96px(320dpi,2x)同iOS@2x

xxdpi144px(480dpi,3x)同iOS@3x

xxxdpi192px(640dpi,4x)更大更高更强的分辨率

文末小结

其实iOS和Android的设计还有许许多多的差别之处,比如字体、Tabbar设计、物理键驾御方式、编辑模式、APP体现特征的方式等等,在此不一一展开了。

希望在设计移动端产物的过程中,设计师们能够更多的去思索二者

的异同,并且更多的存眷一下Android零碎独占特征的运用,不但

仅节流了开发成本,同时也更好的为Android用户所接受。