赞助商
立即赞助

Android和iOS有哪些设计差异点?来看高手总结的7个不同!

交互设计3年前 (2021)发布 流光
2.1K 0 0

由于设师、产品理使用的移动设备部分iPhone,所以设时,易忽略AndroidiOS的差异,按照iOS的规范行设,两端只一套。

做套会存在两个问题:

  • 安卓用户的使用习惯不太应iOS的设,导致使用时遇到阻碍,任务流程失败率变高。
  • 如设计师或者品经理有异常场景状态没有想到,导致安卓开发没有组件调用,为了省事接调用安卓自带组件,导致个品在视觉风格上既有品风格组件又有安卓系统组件 ,统性。

所以设师设过程中,针对两端的差异性,可以单独将具差异性的Android部分出,保持两端的差异性。

视觉风格和理念

iOS通过使用留白、简化UI、使用无框按钮方式使得呈的功能加清晰。减少使用框、渐变阴影,使界面尽可能轻化,从突显内。以功能驱动设,突出重点内并传达交互性。

留白可以使要内容和功能更加醒目、更易理解。使个应用看起来更加聚焦和高效,如下图1所示。

让颜色简化UI,使用一个主题色。比如备忘录中用了黄色,高亮了重要块的息并巧妙地用式暗示可交互性,如下图2所示。

使用无边框的按钮,通文案、颜以及操指引标题来表明该无边框按钮的互。下图3所示。

Android和iOS有哪些设计差异点?来看高手总结的7个不同!

Material 通构建系统化的动效和空间合理化用,并将两个理念合二为一,构成隐喻。

在基本元素的处上,借鉴了传统的印刷设计:版、格、空间、例、配色、图像等,使这些基础的平面设计规范。

这些设基础,构建出视觉层级、视觉意义以及视觉聚焦。

Android和iOS有哪些设计差异点?来看高手总结的7个不同!

支付规则

当App含有虚拟商,那么户购方式一样。

对于iOS用户,支付渠道必须走苹果支付平台,并抽取30%作服务费。android版不用走平台,使用支付宝、微信支付第三方支付平台即可。

如下图所示,网易云音乐android版,支付时可以选择支付宝、微信、京东等支付。

Android和iOS有哪些设计差异点?来看高手总结的7个不同!

而iOS端则能走苹官平台(App Store)。于公司来说,抽成30%意味着收入下降,是这走平台支付也有个好处,可以连续订阅,自动续期扣钱。

推送规则

iOS系统消息送必须依靠苹APNS(Apple Push Notification Service)服务来完成,信息与app交互是过苹服务完成。

Android的消息推送相比之下更加开源,在不选择使用GCM的情况下,app的消息推送就需要在或者是第三方服器备之间建立一条长,通过长进行推送。

Android和iOS有哪些设计差异点?来看高手总结的7个不同!

这味着iOS端,即使app的后杀死,依旧可以收推送。而android端则需要保持后在线才能收推送消息。

文件选取规则

iOS系统每个app之间没有文件夹概念,导致无法找对应app的文件夹。

果iOS版app想要送文件时,则无法选择对应的文件夹里面的文件。但是因为有iCloud的存在,以通iCloud选择文件。

如图示,微信如果想发送件到微信好友时,点击件,进入iCloud择件发送即可。

Android和iOS有哪些设计差异点?来看高手总结的7个不同!

而卓版则可调取件夹,择对应的件发送。如图示,qq给好友发送件时,直接进入手机的件夹中到对应的件

Android和iOS有哪些设计差异点?来看高手总结的7个不同!

手势区别

android和iOS的手势区别比大,对隐藏的操,安卓长按,iOS左右滑动。

如图示,卓针对列表更多操作时,采长按手势,长按现菜单。

iOS左右滑动出隐藏的操作。

Android和iOS有哪些设计差异点?来看高手总结的7个不同!

组件风格的差异性

iOS和android整体上视觉差异很明显。

android组件整体呈通过投影产层级区分,如下图所示。

Android和iOS有哪些设计差异点?来看高手总结的7个不同!

iOS则通过简洁的视觉层级区分,如下图的组件样式。单纯的分割线区分层级关系。

Android和iOS有哪些设计差异点?来看高手总结的7个不同!

组件用法

1. 搜索栏

android常使用搜索图标,用户点击图标进搜索栏界面。

iOS直接输入框的形式展示,户点击激输入框,从视觉的角上看,iOS的搜索栏视觉更强,更容易引导户搜索。

Android和iOS有哪些设计差异点?来看高手总结的7个不同!

2. 警示对框

android对框文案左对齐,按钮文案右对齐。

iOS对话框案中对对齐,按钮都中对齐。

Android和iOS有哪些设计差异点?来看高手总结的7个不同!

3. 卡

android针对提示语,通常放在卡里面,而iOS放在卡外面。

Android和iOS有哪些设计差异点?来看高手总结的7个不同!

4. toast

android的tost一在界面底部,文案左对齐(非居中对齐)。安卓除了toast还有snackbar 。

iOS一般在界面居中位置,为强化反馈状态,一般有图标搭对应的文案。

Android和iOS有哪些设计差异点?来看高手总结的7个不同!

5. 导航栏

Android版的返回icon,通常用左箭头(中间有一杠)。同导航栏的标题位于左边箭头之后,标题为当前界面的标题。

iOS版的返回箭头(中间没有一杠),返回箭头之为上一级界面的标题。导航栏中间的标题为当前界面的标题。

Android和iOS有哪些设计差异点?来看高手总结的7个不同!
6. 送按钮

Android版微信信息送的按钮放在工具栏上,ios版微信的信息送按钮内嵌在键盘上。

图为android版发送流程。

Android和iOS有哪些设计差异点?来看高手总结的7个不同!

图为iOS版发送流程:

Android和iOS有哪些设计差异点?来看高手总结的7个不同!

7. 更操

针对更操时,android长按通常出现菜单,而iOS长按通常出现底部操列表

Android和iOS有哪些设计差异点?来看高手总结的7个不同!

总结

以上是针对iOS和android端部计的差异性总结。

果需要做两套设计,么应该何设计呢?

可先做一套iOS的,然后针对android端的,组件涉及到同的地方进行全替换。

例如按操作,android使用单,iOS使用底部操作列表。对话框、底部操作列表toast组件行全局替换即可。

欢迎关注作者微信公众号:「Echo设计笔记」

Android和iOS有哪些设计差异点?来看高手总结的7个不同!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

入职WY两个月以来,发现了很多游戏交互工作和以前的不同。工作期间,经常会感受到这些不一样的地方刺激到我的专业神经,让我...
交互设计
写在前面 「我们这双鞋绝对是正品,支持专柜验货!」 「买咱这支基金,稳赚不赔,绝对涨,还要再涨,现在不买后面后悔死你!...
交互设计
卡片式设计采用图像与文字说明相结合的方式将信息传达给受众,在有限的矩形空间中建立了无限的可能性。 时至今日,卡片式设...
UI 设计
本文总结了 10 个常见的交互设计基础术语,帮新人快速入门。 UX用户体验设计(广义的交互设计) 先看一下创始人大师 Don norm...
交互流程
近 1 年交互工作主要集中在运营类活动,设计产出了支付宝财富 tab 几个运营类活动,年终之际,对这将近 1 年的设计工作进行复...
交互设计
今天的选题依旧是电商领域,目标是标签栏雄霸一方的购物车。它在整个消费路径中起到关键作用,距离收银台仅一步之遥,也是推...
交互设计
怎样的交互设计才算清晰完整,下面是从实际项目中总结出来的一些经验,分享给大家,共同学习进步。 产品交互设计稿和研发结果...
交互文档
Jakob Nielsen(雅各布·尼尔森)的十大交互设计原则。它们被称为「启发式」,因为它们是广泛的经验法则,而不是特定的可用性...
交互设计