赞助商
立即赞助

超全面!Android 应用与iOS 应用之间的设计差异对比

UI设计3年前 (2021)更新 流光
2.8K 0 0

编者按:个App,为什么iOS 和Android 交互操作有那么大区?本文将用大量原生设计案例,为你说明它们为什么应该这样做,赶紧学起来!

了解并适当结合平台规范与优势,才做到最佳的户体验。

为了创建最佳的生 APP,就需要你牢记 iOS 和 Android 之间的差异。这些差异不仅在视觉层面有所不同,在结构和流程上也有别。牢记这些差异,才能给生应用以最佳的用户体验。

用于 iOS  Android 的原应用具特殊的系统内置功能。 Apple  Google 的规范建议尽可能使用平台标准控件:页面布局,标签栏,分割线,表格视图,集合视图拆分视图。 用户熟悉这些控件每平台的一般操作方式,因此如果使用标准控件,用户将会非常直观的知道如何使用。 本文将聚焦于 iOS  Android 的交互设计模式之间的别,阐 iOS 和 Android 上的应用起来不同的因,以及它为什应该这做。 另外,本文还将提供生应用计示例,以帮助你更好的理解本文所写的内容。

一、导航模式的差异

在界面之间切换是移动应用中的常见操作。考虑 iOS 和 Android 生应用控件规范的差异,对于导航模式的计关键。 Android 备底部有一个全局导航栏, 使用导航栏中的后退按钮是返回上一个界面或步骤的简便方法,它适用于所有 Android 应用。

超全面!Android 应用与iOS 应用之间的设计差异对比

△ 全局导航栏(Android)

对比 Apple,设方法却截然不同。 iOS 全局导航栏,因此我们不能指望 Android 原控件那样能支持全局返回。 这特性就会影响到 iOS 应用的设,应用中需设一导航栏,并左角加一返回按钮。

超全面!Android 应用与iOS 应用之间的设计差异对比

△ iOS的返回按钮

严来说,iOS 也有一个返回的局操,直接在界面上右滑即返回上一级页面。(译者注:个特我原来还不道,现在已经用的很顺手。)

超全面!Android 应用与iOS 应用之间的设计差异对比

△ 局返回操(iOS)

在这情况下,iOS 和 Android 区在于,在 iOS 设备上页右滑是返回上级,而在 Android 上则是切换标签。

为了保持与他移应的一致性,一定要记住平台之间的差异。

超全面!Android 应用与iOS 应用之间的设计差异对比

△ 左滑操作切换标签(Android)

二、应用内部的导航模式在iOS和Android上是不同的

在 Material Design 设计规范中有一些同的导航模式。在 Android 应中被大熟知的导航模式是抽屉和标签形式的组合。

抽屉导航其实是一个菜,通过点击汉堡图标,然后从左侧或右侧滑出。标签栏一位于标题栏的下方,使得内容能够好地被管理,通过标签栏,用户可以对应用的视图,数据集和功能进行切换。

超全面!Android 应用与iOS 应用之间的设计差异对比

△ 左侧就是抽屉导航;右侧是标签栏

 Material Design 中还一组件叫底部导航。这组件对于安卓原应用也非常重。底部的单项很易点击操作。但安卓规范其实不建议同时使用底部导航标签,因它可能会导航时引起混乱。

超全面!Android 应用与iOS 应用之间的设计差异对比

△ 底部导航(Material Design)

在 Apple 的人机互规范中,没有类似抽屉菜单的标准导航控件。相反,Apple 则建议将局导航放在标签栏中。标签栏放在应用的底部,让应用的核心功能能够快速切换。

常,底部栏标签不会过5个。正如你看到那样,这个组件常像安卓端底部导航,是在 iOS 这形导航更加常用。

超全面!Android 应用与iOS 应用之间的设计差异对比

△ iOS两常见导航形,分段控制和底部标签栏

虽然在两个操作系统中都有类似的功(切换标签和分控制,导航和标签栏),但导航形式仍然是 iOS 和 Android 之间的要区别之一。 两者之间存在一些客观差异,例如 Android 中有全导航栏而在 iOS 中却没有,及两者在视觉上的差异。

Apple 认为,常用导航入应该尽可能的外置,一些用户不常用的功能才需要被放进汉堡菜中。而对比安卓规范,通常会把主要导航也放在汉堡菜中。

三、改造标准控件需要额外的开发时间,用户也缺乏使用经验

如果希望应用中的每个素在各个上起来都一,那将需要额外的开发工作来创建最佳的移动应用计。最麻烦的是涉及默认控件,比如选按钮、复选框、tab切换等等,这些控件需要一个定制的视图来实现显示 Android 上类似 iOS 的控件或 iOS 上类似 Android 的控件。

每平台的交互方式各其独特性。好的设尊重不同平台用户习惯的设。 iOS  Android 设移动应用时,一记住平台之间的差异,这样能设出满足用户望的应用。

两个平台差异的一个例子是期选择器。安卓用户对 iOS 中常见的老虎机形式的期选择器并不熟悉。在 Android 中使用种类型的期选择器还需要重新局,样无形中增加开的难度和时间,并使界面看来与系统风不。

超全面!Android 应用与iOS 应用之间的设计差异对比

△ 左边是iOS标准期选择器; 右边是Android标准期选择器

超全面!Android 应用与iOS 应用之间的设计差异对比

△ 左边是iOS标准选择器;右边是Android标准选择器

四、iOS和Android中的按钮样式

在 Android 设计规范中有2种不同样式的按钮——扁平的和凸的。按钮分别用在不同的场下。在 Android 中,按钮上的文字一般是大写。在 iOS 原生应用的按钮中有时也能找到大写的文字,但更的情况是出现在标题上。

超全面!Android 应用与iOS 应用之间的设计差异对比

△ 左边是标准的Android按钮;右边是标准的iOS按钮

有常有特按钮类型——在 Android 上叫做浮动按钮,在 iOS 上叫做活动按钮。浮动按钮用来展示应用主要操作。例如,在邮件 APP 写邮件,或者在社交 APP 发状态都会用到这个浮动按钮。而在 iOS 与类似按钮则叫做活动按钮,常会放在底部导航。

超全面!Android 应用与iOS 应用之间的设计差异对比

△ 左边是标准iOS活动按钮;右侧是标准Android浮动按钮

五、iOS与Android底部操作视图的差异

在 Android 有两不类型底部操作视图:模态视图和常驻视图。模态视图又有两不类型:具有不操作内容模态列表和用户击「共享」图标后显示应用列表。在 iOS 上也能找到类似组件,是在设计风格和布局上异比较大。

超全面!Android 应用与iOS 应用之间的设计差异对比

△ 左边是标准Android底部菜单视图;右边是标准iOS标准菜单视图

六、在触摸范围和系统网格之间存在的差异

iOS 和 Android 触摸范围略有不(iOS 最小触摸范围为44px @1x,Android 为48dp/48px @1x)。Android 规范议将所有元素以 8dp 作为规范基线来设计。

七、字体差异

iOS 系统默认体是 San Francisco 而 Android 系统默认体则是 Roboto。Noto 是能在 Android 所有界都适用体,括那些不支持 Roboto 体语。正是为有异,所以需要密切关注不平台排版和布局规范。

超全面!Android 应用与iOS 应用之间的设计差异对比

△ 左边是Android体; 右边 是iOS体

八、交互细节差异

用户第印象常都是立在设计层。

建立户的第一印象对产来说很重要。在 APP 开发设计过程中,我们可通过做好微交互和画来为户创建一个有吸引的体验。

让确下个的交互和动画的规则和建议,并查官方给出的一些标准示例。

焦点优先级——交互设的目的将用户的注意力集中应用中对他真重的事, 两平台都不鼓励滥用动画,因过多的动画易分散用户的注意力,也会让用户感到焦虑。

一致和级结构——请务必住,互设计最重要的是通确定元素之间的级关系,帮助用户在应用中找到他们想要的。贴心,流畅,不突兀的页面跳转才能证用户能轻松操。对一点来说,两个平台对动画规范做一合理的建议。

尽管 Android  Material Design(材料设计规范)与 iOS  Human Interface(交互规范)在使用动画规范常相似,仍有些明确异。 用户会习惯于特定平台动画跳转并认为有他们习惯那些才是最自然。

这就是为么要特别注意平台间的交互形式,这些小的细节可很好的升户体验,使得在同平台上都给户带来自然的体验。

九、iOS

iOS 户习惯于 iOS 中的微画,像平滑过渡,横竖屏转向及模拟物规律等等。当应现无意义的或者违反物识的画时,户就会感到困惑。 例如,户希望通过拉来刷界面,希望通过右滑来返。iOS 设计规范强烈议,除正在创诸如游戏类沉浸体验,否则是尽可能按照官出动画规范来设计。

十、Android

依照 Material Design 规范,个元素在转换过程分为传出,传入或常驻,不元素也会有不转换。

画够引导户的注意。当界面发生变时,画建立了过渡前后的连续性。导航的切换是界面中非重要的元素。它们通过清晰的结构来帮助户准自己的方向。例如,当一个 UI 元素展开填充整个屏幕时,展开后的界面是点开元素的子级,返可到父级。

超全面!Android 应用与iOS 应用之间的设计差异对比

△ 子父级切换的例子(Android设计规范)

在父界面上,嵌入的素会在点击抬起并在适当的位置展开。将过渡的重点放在界面上,确父之间的关系。

共享相同的父级界面(例如标签切换时的内)一致性的移动能够强化他们的关系。

超全面!Android 应用与iOS 应用之间的设计差异对比

标签选项卡固一置不变,内界面水平方向行移动。

在应用的最上,切换目标通常被分在主要任务(任务能彼此不相关)上。界面通改变不透明度和缩放值来进行适当的转换。

总结

当也有例外:一 iOS 应用遵循 Android 设计规范(比 Gmail)而一 Android 应用则遵循 iOS 设计规范(比 Instagram)。

超全面!Android 应用与iOS 应用之间的设计差异对比

△ 左边是iOS版的Gmail,右边是Android版的Gmail

超全面!Android 应用与iOS 应用之间的设计差异对比

△ 左边是iOS版的Instagram,右边是Android的Instagram

其实显而易见——使用两个平台系统自身组件设计应用,流程要快很多。此,最好是花些时了解下两个平台不设计规范,而不是混合 iOS 和 Android 组件模型,然后花很多力在开发上。

原链接:《Differences between Designing Native iOS Apps and Native Android Apps》   SteelKiwi Inc.

欢迎关注译者的公众号:「 彩云译计」

超全面!Android 应用与iOS 应用之间的设计差异对比

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

相关文章

交互设计之父阿兰·库珀说过这样一句话:“除非有更好的选择,否则就遵从标准”。在交互设计领域中,有很多被时间和前人验证过的...
交互设计
现在阅读微软1998年的用户界面,就像发掘古墓一样。设计人员和开发者为整个 Windows 系统和应用程序准备了长达381页的引导内...
ui设计
大家好,今天我们来聊一聊苹果和谷歌的设计语言。自从移动互联网开始兴起,我们的日常生活开始充斥着大量的移动设备,手机,P...
交互设计
在日常工作中,我们或许会遇到这样的情景: 说不清楚交互设计师和 UI 设计师的区别,被人觉得交互设计师就只有审稿或在产品...
交互设计
前言 设计驱动已经成为 vivo 重要的产品和服务理念。作为设计师,这意味着我们在承接日常设计需求外,还要主动发现并解决产品...
交互设计
在经典的尼尔森十大启发式当中,「系统状态可见性」可以说是如今交互设计领域当中,最为重要的原则之一。通过向用户展现当前...
交互设计
随着移动智能终端和云计算的快速发展,人工智能的浪潮正在悄然颠覆着我们生活的点点滴滴,VUI(Voice User Interface,语音用...
交互设计
在做交互文档之前,我们先要明白什么是交互文档、为什么要做以及做了给谁看。 什么是交互文档 交互文档,即交互设计说明文档...
交互文档