编者注：继前篇「iOS 13设计准则」后，本文继续编译了Erik D. Kennedy的一篇关于移动设备界面设计差异化的文章。如果你正在同时为iOS和Android设计APP，你一定会需要该指南。本文将覆盖作为UI/UX设计师的你可能会碰到的几乎所有两个平台相关的差异。如果你正在为一个平台进行设计，那么你可以参考本指南将其更好地移植到另外一个平台上。本指南主要涉及导航、控件、字体排版和其他相关平台标准等4大块内容。

iOS和Android的UI设计的主要区别

以下是设计人员在将应用程序从iOS转换为Android时需要考虑的最重要的区别，反之亦然：

在深入探讨之前，需要先解决一个重要的问题，这个问题关系到其他的一切：

是否必须让Android应用和iOS应用有所区别？

简而言之：不是！

苹果和谷歌都是非常聪明的公司，各有无数的用户群体。但他们也会像其他任何人一样犯用户体验的错误，但是总的来说，当他们为系统的默认工作方式定义一种设计语言时，他们不会犯下令人难以置信的明显错误。因此，尽管本文介绍了使用两种方式（iOS方式和Android方式）进行设计，但这两种方式都没有错。如果你的用户能够安心地浏览和使用你正在创建的应用，那么没人会告诉你不要使用iOS上的标签页还是Android上的模式视图。

本文本着学习“以iOS方式思考”或“以Android方式思考”的精神写的，如果你的目标是为两个平台同时开发一个应用程序，并且希望每个应用都带有原生的感觉，那么本指南将对你有巨大帮助。

1. iOS和Android导航对比

1.1 屏幕顶部导航

iOS和Android导航UI的区别

我们将按顺序从屏幕顶部开始。每个平台针对大多数屏幕顶部显示的内容都有不同的标准。

在iOS上，左侧动作（可选的）几乎都是「后退」操作，无论是顺序后退到前一屏幕（「第2步」后退到「第1步」），还是按照层级结构后退到父级屏幕（「收件箱」后退到「邮箱」）。还有一种情况就是在此处链接和本屏内容不相关的目标地址。页面标题始终存在，开始是大号字体，随着屏幕的向上滚动页头会收缩变小。可选的右侧页面动作可以显示为单个文本操作按钮或者多个图标操作按钮。

在Android上，页面标题是居左对齐的。页面标题的左侧不需要有任何内容，但是（a）如果该页面是顶级页面并且应用程序中有一个「汉堡包」按钮，它将显示在该位置；或者（b）如果该页面紧随着另外一个页面，你可以在此位置选择添加后退按钮。

参考资源:

• iOS navigation bars
• Material Design top app bar

1.2 主导航

iOS和Android主导航的区别

应用程序中的主要部分或目标位置以不同的方式布局。

在iOS上，应用中的主导航位于屏幕底部以标签（选项卡）的形式显示。

1. 总共有2-5个标签
2. 标签文本使用10号字
3. 代表应用程序的主要目标位置

值得一提的是，许多流行的第三方iOS应用也遵循一些其他准则：

1. 任何代表应用程序主要动作的标签（例如，照片类型的应用程序中的添加新照片的动作）位于居中的位置
2. 任何个人信息或与设置相关的动作出现在最后的位置
3. 搜索出现在第二个位置

另一方面，iOS的内置应用程序，（1）阻止在标签栏中执行操作，（2）没有个人信息或与设置相关的标签，以及（3）搜索出现在最后的位置。

而在Android上，应用程序最大的不同就是，同样的主导航可以出现在界面的很多位置上，通常为（a）汉堡包按钮，（b）搜索栏，（c）标签栏，或者（d）浮动动作按钮。本文将在后面的章节讨论所有这4种情况。请注意：Andriod最近确实开始使用类似于iOS的底部导航了，所以你可能根本不会觉得有那么大的区别。

参考资源：

• iOS tab bars
• Material Design understanding navigation (注意：这个比较理论化)

1.3 辅助导航

iOS和Android辅助导航UI的区别

在iOS上，底部标签栏中无法容纳的导航可以（a）被分流到所有「更多」标签中，或（b）以动作按钮的形式显示在其他目标位置的左上方或右上方。

在Android上，可通过按下汉堡包按钮在边栏中显示辅助导航。

注意：虽然Apple不是很鼓励使用汉堡包按钮（或在其默认应用程序中使用该按钮），但许多第三方iOS应用程序确实都使用了。无论你是否愿意使用，这只不过是多了一个选择而已。最佳做法是避免任何重要的内容被隐藏，因为显而易见的内容总能成为赢家。

参考资源:

• Material Design nav drawer

1.4 iOS和Android的后退模式对比

image

在iOS上，你可以根据上下文环境通过4种方式执行后退操作

什么是模式窗口视图或全屏视图？

iOS模式窗口的后退导航UI

模式窗口是单屏任务，通过在前景中向上滑动而出现，同时允许前一个屏幕在后退到背景处的同时可以从屏幕顶部被窥视到一小部分。你可以通过向下滑动或点击顶部的「后退」操作来关闭模式窗口。

全屏视图是占据整个屏幕的照片或视频等媒体。在iOS和Android上向下轻扫即可将其关闭。

在Android上，后退导航要简单得多：对于Android 10及更高版本，只需在屏幕的任一侧滑动即可，这将始终执行后退导航的操作。对于Android 9，可以使用屏幕左下方无所不在的「后退」按钮。

2. iOS和Android的控件设计对比

2.1 主CTA按钮

iOS和Android主动作按钮UI的区别

在iOS上，页面上的主按钮通常都会出现在右上角。

但是，在Android上，页面的主按钮通常作为浮动操作按钮（简称FAB）显示在底部右侧。

值得注意的是，每个平台都会有例外。

iOS和Android辅助动作按钮的UI区别

在iOS上，有时重要的页面操作将出现在底部的工具栏上。苹果喜欢强调这与标签栏的作用真的是不一样的，但是现在来用吧。

同样，在Android上，有时重要的操作将出现在屏幕顶部。

参考资源：

• iOS buttons
• Material Design floating action button

2.2 iOS和Android搜索对比

在iOS和Android上，搜索是常见但灵活度很高的控件。有时，它是应用程序的重点，有时它基本上是边缘用例，而大多数时候它介于两者之间。如你所料，每个平台在此都具有一定的灵活性。下面将介绍一些常见的范例。

iOS和Android搜索UI的不同

iOS和Android搜索样式的区别：

• 取消搜索的话，在iOS上点击「取消」按钮，在Android上点击「←」图标。
• 清除现有搜索关键词但仍然保留在搜索屏幕的话，在iOS上点击「x」图标，在Android上也是点击「x」图标。

当搜索是非常重要的功能时，iOS和Android都将立即显示搜索栏。同时，点击搜索栏将显示一个完全独立的屏幕。

当搜索不那么重要或不常用时，你可以通过其他地方访问它。

iOS和Android搜索访问的UI区别

在iOS上，通常将搜索视为主标签栏中的一个标签或顶部导航栏中的一个操作。

在Android上，你将在顶栏的上下文操作中看到它。

参考资源：

• iOS search bars
• Material Design search pattern

2.3 iOS和Android操作菜单对比

iOS和Android底部操作菜单的UI区别

在iOS上，可以通过任何按钮或尝试执行任何操作来触发操作菜单。它们从底部向上滑起，很容易触手可及。

但是，在Android上，仅当你点击三点图标（这是表示「更多选项」的Android图标）时，才会显示底部操作菜单。并且通常只有在有很多可能的操作时才会从底部出现。

这两个平台都具有操作菜单的标准。

iOS和Android动作菜单的UI区别

当你按住某个元素时，iOS的一个称为「上下文菜单」的较新（iOS 13）功能将显示相关操作。显示上下文菜单时，背景将会变模糊。

在Android上，许多菜单将直接显示在元素上。在较新版本的Android中，菜单将覆盖三点图标本身。

资源参考：

• iOS action sheets
• iOS context menus
• Android menus
• Android bottom sheets

2.4 选择控件

在移动设备上，使用不同的方式处理少数选项中的选择与多个选项中的选择是非常明智的做法。

iOS和Android选择器菜单的UI的区别

要在相对较少的选项中进行选择，请在iOS上使用选择器控件。选择器可以显示为锚定在底部（如上图所示），也可以与内容内联（例如，请参见后文中提到的「日期选择器」）。

要在Android上的几个选项中进行选择，通常使用下拉菜单（显示在适当位置）或模式对话框（显示在中间并使应用背景变暗）列出选项。

iOS和Android选择器屏幕UI的区别

对于较长的选项列表，或者当进行多选变得可能时，通常会在iOS和Android上看到专用的「选择器屏幕」。设计师在移动设计中最常犯的错误之一就是不使用全屏用于选择具有多种选项的单个选择。

资源参考：

• iOS pickers
• Android dropdown menus
• Android dialogs

2.5 iOS和Android日期选择器的对比

iOS和Android日期选择控件的UI区别

在iOS上，日期选择器具有其他任何选择器控件的外观，但带有用于显示日期、月份和可选年份的列。

Android拥有自己的自定义日期选择器控件。你可以选择包含年份、不包含年份、或者允许用户选择是否要包含年份。

参考资源：

• iOS picker
• Android date picker (注意观察Material Design规范中的差异)

2.6 iOS和Android的选项卡

iOS和Android选项卡的UI区别

值得注意的是，iOS没有外观与「标签栏」类似的控件。相反，Apple要求你使用分段按钮在姐妹视图之间进行切换。

在Android上，使用样式统一的「扁平化设计 flat design」样式选项卡。

参考资源：

• iOS segmented controls
• Material Design tabs

2.7 iOS和Android上的「撤消」模式对比

iOS和Android撤销控件的UI区别

在iOS上，警示显示在屏幕中央，但你还是会看到警示从屏幕底部向上滑动的效果（在iOS术语中称为「动作面板」）。破坏性操作（例如删除某些内容）显示为红色。

在Android上，一些警示会出现在屏幕中央。但是，对于不需要用户输入并在几秒钟后就要消失的警示，你可以使用「消息条 snackbars」。消息条非常棒，因为（a）它们为你提供了一种告诉用户其操作成功的方法，并且（b）你可以在其上添加一个或两个操作使它们成为执行「撤消」操作的理想场所。

参考资源：

• iOS Undo
• Material Design snackbars

3. iOS和Android字体排版的对比

3.1 默认字体

iOS和Android的默认字体SF和Roboto的区别

虽然不必以默认的字体设置iPhone或Android应用程序，但最好知道系统字体是什么，以防万一你想模仿内置应用程序的样式。

iOS系统字体称为SF。这是一种紧凑型字体，专为小尺寸而设计。你可以在此处下载SF。

Android的系统字体称为Roboto。虽然它的字体与SF总体上非常相似，但它的字母形状更高，呼吸空间更大。你可以在此处下载Roboto。

此外，许多Android操作系统都使用称为Product Sans的Google专有字体设置，该字体不可用于第三方。

3.2 文本样式

iOS UI中的字体样式

Android UI中的字体样式

参考资源：

• iOS typography guidelines
• Material Design typography guidelines

4. iOS和Android的其他平台标准

4.1 App图标尺寸和形状

iOS和Android应用图标的设计区别

使用以下尺寸设计iPhone的应用图标：

最终，你的图标也可能会用于其他尺寸，但是如果在60px下进行设计，则需要验证它在120x120px、180x180px和1024x1024px上看起来是否合适。

使用以下尺寸设计Andriod的应用图标：

因此，如果你（1）设计一个48x48px的精美矢量图标，（2）放大至400％以确保它看起来仍然不错，（3）创建一个512x512px的单独版本，就太完美了！

当你第一次查看iPhone或Android需要的图标表格时，可能会令人生畏。但是，只要你知道基本大小，并且能够以各种较大的倍数进行检查和导出时，就一点也不会觉得难了。

参考资源：
iOS app icons guidelines
Material Design app icon guidelines

4.2 iOS和Android点击目标最小尺寸的区别

请注意，Apple的点「pt」和Android的与设备无关的像素「dp」在功能上是等效的。它们只是指一个基准尺寸（与CSS单位「像素」相同），该尺寸与屏幕是普通清晰度、高清晰度、超高清还是人们正在制作的任何其他屏幕无关！

在Android的较大点击目标尺寸和较小的每屏像素数量之间，Android应用程序的外观往往比其iOS更加干净、通透。

4.3 Material Design和iOS的设计语言的区别

在试图展示两种设计语言和理念之间的差异时，本指南对iOS和Material Design语言的相似部分进行了微调。有关这些内容的更多信息，你需要深入了解每个设计系统的官方文档。

• iOS设计语言，请阅读Human Interface Guidelines。
• Material Design设计语言，请阅读Material Design site。

英文原文：https://learnui.design/blog/ios-vs-android-app-ui-design-complete-guide.html
原文作者：Erik D. Kennedy
编译作者：微博/公众号@设计吐司

以上译文仅代表原作者观点。如需转载请遵循CC版权协议正确标明出处。