帮你彻底搞懂 iOS 和 Android 的设计差异

孙兴芬
2982 阅读
7

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

1、本报告主要对比iOS系统及安卓系统的手机端设计

2、主要对比2个主流屏幕分辨率,对比设备:

iphone8(750X1334) 版本号: 13.3

小米note3(1080X1920)版本号:MIUI10 9.9.3

3、对比APP:抖音、微信、爱彼迎、马蜂窝,淘宝等,不排除因版本迭代原因造成的差异

4、本报告图片一部分来自截图,一部分来自网络,请谨慎使用

目录:

1、设计原则

2、系统差异

3、成本考量

4、用户习惯

5、总结

超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异




iOS与Android基本设计原则

超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异



超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异




iOS与安卓设计时差异

主要从系统差异、成本考虑、用户习惯3个方面来阐述相关的差别

超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异



一、系统差异

iOS的封闭开发系统和Android的开源系统决定了本身的基因

这些差异会影响到在设计app时需要考虑平台特性来制定适合公司的产品

物理按键及内置导航对返回的影响

安卓的物理按键以及屏幕导航按键的差异使安卓的返回更加方便,而iOS只有一个home键盘,因此在设计返回操作时需要考虑平台差异性,全面屏的出现,可能会慢慢打破这种差异

超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异

安卓比iOS增加了物理返回键、底部导航。 当然有些设备开发可以隐藏底部导航


超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异

全面屏设计的普及会慢慢打破这种因为物理按键造成的交互及设计差别


返回成本-华为全面屏的几种手势

安卓全面屏手机出现之后,并没有完全舍弃内置导航键盘,

华为的全面屏在系统设置里还有:

纯手势键盘,以及悬浮按钮、内置导航条3种方式

随着硬件的发展,安卓和iOS的全面屏手机会越来越多,

交互操作也会更加趋同,也会慢慢改变因为物理按键造成的差异

超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异



返回成本及习惯-UI表现

爱彼迎在安卓和iOS的返回上做了不一样的设计,猜测因为返回的成本问题,iOS有时候会采用多半屏弹窗或者页面加关闭页面,使页面更轻便

安卓返回操作方式更加容易,因此在日期选择页和详情页这样的高频页面采用直接返回的设计

超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异




超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异




返回成本-退出挽留

iOS,home键直接杀死app则没办法挽留,安卓一直返回会退出当前app,因此在最后一步退出之前,可以设计相关页面做一下挽留,避免因为误操作或者操作太容易引起的用户流失。

超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异




屏幕分辨率-色彩运用


超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异




屏幕分辨率-Dark Mode深色模式

Dark Mode不仅仅只适用于夜晚的暗光环境,在设计Dark Mode规范时都充分考虑到了用户长期使用深色外观时的体验,iOS还原度比较高,在设计时一般背景用#000000,内容颜色更加鲜艳,安卓受屏幕亮度分辨率等限制,文字颜色会较浅,谷歌推荐背景色:#121212,设计app时,考虑系统本身的深色模式,在切换app时不至于有太大差别,当然有一些平台护眼模式和深色模式用2套,比如网易云音乐

超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异



超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异




超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异




屏幕分辨率-机型差异


超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异




屏幕分辨率-平台切图对应性

安卓端的有很多种分辨率,我们不需要把所有屏幕的分辨率都考虑进去,设计记住这一点 XHDPI是对应安卓的2倍图(720px*1280px)

XXHDPI是对应安卓的3倍图(1080px*1920px)这两个是我们现在常用的就可以了

超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异



超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异


超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异


屏幕分辨率-设计起稿尺寸

iOS端以375X667px起稿,1倍图(有些设计也会用750X1334起)

安卓以1080x1920px作为设计稿标准尺寸的原由:

① 从中间尺寸向上和向下适配的时候界面调整的幅度最小,最方便适配。

② 大屏幕时代依然以小尺寸作为设计尺寸,会限制设计师的设计视角。

③ 用主流尺寸来做设计稿尺寸,极大的提高了视觉还原和其他机型适配。

超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异




屏幕分辨率-切图及控件点触范围


超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异




屏幕分辨率-字体

iOS :在英文方面,苹果加入了新的字体San Francisco,中文「苹方

安卓:英文字体使用Roboto,中文字体使用Noto(思源黑体)。

字体加粗:同样是加粗,因受安卓设备和字体渲染规则等原因,出现的效果则不一样,安卓有的设备会更粗壮

如果公司以安卓为主,那就以安卓的设计稿设计,字体也采用思源黑体。如果是以iOS为主,字体直接用平方就好

超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异




键盘差异-搜索框及评论弹窗样式

因为安卓端的键盘有一部分是系统自带比如三星自有键盘,还有第三方,如搜狗输入法、讯飞等,各个键盘差异比较大,而iOS更多是苹果自带键盘,2014年搜狗输入法上线之后陆续也有第三方输入法入驻苹果,在搜索框的样式上也有一定差别

超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异


超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异




键盘差异-搜索框样式

淘宝也在搜索框的位置上做了差异化设计,也是从键盘角度考虑,虽然现在很多输入法已经在键盘的右侧加入了更加明显的搜索按键,但是为了照顾一部分用户的操作习惯,安卓端还是把搜索放在了搜索框后面

超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异




二、成本考虑

其中包括开发时间成本、定价规则、广告收益等考虑

开发成本-Loading

交互表现:抖音、google和大部分app都采用系统自带的下拉拖拽一个loading 这样的形式,而qq做到了页面下面效果

UI表现:iOS的loading自定义更常见,个性化更强,安卓很多平台都用系统自带的,转圈这种,主要是考虑开发成本问题

超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异


超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异



开发成本-TAB样式

2个平台中间会有一些特有的控件样式、如苹果特有的tab样式,实现起来会更加便捷则,

安卓系统:本身全局的 actionbar,如果自己去实现类似ios的tab时,就会破坏整体的封装,开发成本更高

iOS:系统有定义tab切换形式,开发人员只需要更改颜色、和圆角角度等细节即可,会更加方便

超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异



超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异




开发成本-高斯模糊背景页面

抖音的评论弹窗,以及一些平台上的毛玻璃效果,一般安卓会采用纯色或者纯色渐变的方式代替,当然,淘宝做了2个平台的统一

原因:毛玻璃效果在iOS端比较常见,而在安卓端更加消耗性能且有的机型不能出现,开发成本较高,一般安卓端APP不做这个效果

超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异


超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异





开发成本-实时拍摄毛玻璃效果

iOS:模糊镜头背景效果 安卓:镜头+黑色透明度蒙层效果

原因:安卓手机本身机型较多,因此镜头所呈现的设计属性为

兼顾低性能手机会做一定取舍,或是考虑开发成本

超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异




开发成本-迭代速度或策略

了解到抖音的安卓端和iOS端是2个团队在做,在控件的位置上有所差别,在搜索页面的“猜你想搜”也采用图文结构和文字结构的差别,并不是屏幕宽度的适配

猜测原因

1、可能跟策略相关,经过数据验证之后的结果

2、也有可能跟版本迭代速度相关

3、或者跟安卓端规范和用户习惯有关,搜索更习惯放右上角

超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异


超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异




开发成本-标准控件样式

一些iOS或者安卓特有的控件样式,如果在另一个实现的话可能需要一些成本,安卓因为更开源,会更加吸取iOS的长处,有些APP会单独按iOS形式定义

超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异


超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异




商业成本虚拟商品、支付规则

在虚拟商品的支付上,2者在支付规则和定价上有很大不同,也造成设计页面时要考虑平台差异性

超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异


超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异



商业成本-定价规则及平台通用

虚拟商品在 iOS 端的抽成规则,在产品设计时一定得考虑清楚,如一些定价规则和优惠信息,是否需要不同形式处理

超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异

超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异



商业成本-广告曝光

爱彼迎和马蜂窝安卓端:都采用了大的banner的形式,推广及广告信息曝光度更高

爱彼迎和马蜂窝iOS端:都采用去掉头部大的banner的形式,直接突出功能内容

猜测原因:安卓端用户占有率更高,因此为了商业收入,在头部重要位置加入广告位,使广告内容更多曝光来达到商业收益(不排除其他策略原因和版本更迭速度问题)

超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异

超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异



三、用户习惯

因系统差异、开发成本等原因造成了2者的差异并慢慢形成了一些用户习惯,

有时候我们是要去打破这种习惯,还是遵循这个习惯,这要看具体情况

用户习惯-长按侧滑删除交互

信息列表的侧滑,在iOS端是很常见的操作,但是在安卓端更习惯于长按,因为本身安卓端的长按弹窗效果,如果改成侧滑删除,无疑增加了开发成本和用户理解成本

但是QQ的信息列表删除跟iOS做了统一都是侧滑删除信息列表,背后的原因有待考量

超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异


超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异


超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异




用户习惯-UI表现

返回按钮UI表现:一般iOS的返回一般用不带横线 ,安卓的带一个横线这种 ,不过也有一些app会做到2个平台统一用ios这种或者安卓这种

分享按钮UI表现:一般iOS的分享采用苹果本身提供的箭头往上这样的形式 ,而安卓则更喜欢用3个圆圈相连接这样的形式表现

更加注重安卓的用户则一般采用安卓用户习惯的3个圆圈形式,爱彼迎更具代表性。有一些APP还会用到斜着箭头的分享按钮兼顾2个平台

超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异



用户习惯-UI表现

安卓的弹窗上的按钮,有些APP遵循系统规则,采用确定按钮在右侧这样的形式,或者Bar上标题跟随返回,在左侧,长期用户习惯形成认知

超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异

超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异


总结

iOS和安卓因为平台系统、硬件设备、版本迭代、或者是长期因平台差异形成的用户习惯造成很多不一样的地方

我们需要了解他们的差异,并在做项目的时候,综合考虑是遵循系统本身的规范还是创新,或者有些时候2个平台达成一致来节省开发及设计成本

总之:2个平台新版本发布的时候也会更新新的设计规范,我们应该时刻关注2者的优势及劣势,取其优势,结合项目本身,产出更加符合用户习惯或

更加节约成本的产品设计

超长干货!帮你彻底搞懂 iOS 和 Android 的设计差异


thank you 感谢支持看到最后~