摘要：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