iOS和Android用户体验设计差异

摘要:iOS和Android用户体验设计差异


关键词:iOS,Android,用户体验设计



本文将讨论iOS和Android之间的具体设计差异。

基本差异

1、设计规范

iOS和Android遵循不同的设计规范。

2、度量单位

iOS应用程序设计是在pt中开发的,而Android应用程序设计是在dp中开发的。通常,我们以1倍(或mdpi)进行设计,并以2x和3x生成图标和插图。对于Android,设计以dp显示,并以hdpi,xhdpi,xxhdpi和xxxhdpi生成图形。

3、屏幕尺寸

我更喜欢以尽可能小的尺寸设计iOS应用:iPhone 5 SE的屏幕尺寸为320х568pt。我这样做是为了避免内容在小屏幕上显示不正确。有些人更喜欢为iPhone 8设计。

对于Android应用,普遍接受的屏幕尺寸为360х640dp。

在为iOS设计时,有时会为iPhone X(375х812pt)开发设计。开发人员必须了解如何在这种尺寸的屏幕上正确设置边距。在为iPhone X设计时,还需要牢记安全区域。

4、系统字体

如果不知道使用哪种字体,请使用系统字体。对于iOS,这是San Francisco。对于Android,它是 Roboto。

5、Android导航栏

与iOS不同,Android具有用于反向导航的内置工具。

它既可以内置在智能手机中,也可以内置在界面中。用户可以使用箭头按时间顺序后退(反向按时间顺序导航)。

当我刚开始做UI设计师时,花了很多时间折磨Android开发人员,经常问问题:“为什么需要两个后退按钮?” 切换到子页面时,底部的导航栏中有一个,顶部应用程序栏中有一个。

6、Android投影标注

在Android中,阴影起着很大的作用。它们在界面上添加了第三维(Z轴),这使每个组件都可以沿Z轴具有自己的特定位置(从0dp到24dp)。此外,此Z轴不仅存在于概念级别上,开发人员还有“elevation”参数,可用于设置元素沿该轴的位置。

7、命名差异

标签栏与底部导航栏

导航栏与顶部应用栏

分段控件与选项卡

通知对话框

Touch ID与Android指纹

导航和模式(UX)的差异

8、导航

iOS仅建议一种顶级导航方法:Tab栏。Android则有三种方法:导航菜单,底部导航栏和标签。

如果顶层页面超过五个,则使用导航菜单。如果数量较少,我们将使用底部导航栏。标签不是经常用于这种导航,但是这种方法也可以使用。但是,Material建议不要将选项卡和底部导航栏组合在一起,因为与这些组件的交互会影响页面的内容,并且用户可能会感到困惑。

9、选项卡栏和底部导航栏的行为差异

在iOS上,如果从母页面跳转到子页面,然后通过选项卡栏转到另一个母页面,然后返回前一个母页面,用户仍将停留在子页面上。

Android如果通过底部导航栏进行切换页面,则将始终在母页面之间切换。如果用户之前在子页面上,则将被重置。

10、Android标签页

与iOS上的分段控件不同,Android标签页具有一项特殊功能:用户可以通过左右滑动来在标签之间移动。

11、子页面的行为差异

在iOS上,子页面(不计算模式窗口)仅以一种方式显示:子页面显示在母页面的右侧和顶部,具有“滑入”效果。返回母页面会产生“滑出”效果。

Android会通过动画告知用户母页面和子页面之间的关系。用户与之交互过渡到子页面的组件将打开放大覆盖母页面。通过这种方式,用户可以了解所在的位置和来源,以及发生这种情况的原因以及按下返回按钮后会回到哪里。

12、导航菜单

在设计带有导航菜单的应用程序时,该组件“接管”了“向左右滑动手势。因此,请勿在此手势中添加任何其他逻辑。

13、滚动期间内容的行为

iOS上的内容在滚动期间的行为如下:导航栏宽度减小,工具栏消失。但是通常,iOS开发人员可以在滚动过程中为内容和栏配置任何类型的行为。

Android为滚动期间的行为提供了更多选项。例如,底部导航栏,搜索栏和底部应用栏可以在滚动过程中消失。顶部应用栏也可以消失或移至主要内容上方。

14、不同的搜索行为

iOS将搜索委托给bar并将其称为Search Bar。在Android中,我们在“导航”部分而不是“组件”部分中找到搜索。换句话说,对于Material而言,搜索只是另一种导航方法。在iOS和Android上,搜索都可以静态显示在屏幕上,并且通常固定在导航栏/顶部应用栏上。

组件差异(UI)

15、iOS上缺少哪些组件

iOS上没有下列Android组件。

导航菜单


BackDrop

标语


Snackbars


Chips


底部应用栏


FAB

iOS上,主要操作按钮应位于导航栏右侧的顶部


底部导航菜单

Side Sheet


展开底页

标准底页

参考资料

[1]

https://uxdesign.cc/ios-vs-android-design-630340a73ee6?source=rss—-138adf9c44c—4



Author: pixel32