🤮 🎸 👨🏽 iOS和Android移动应用程序设计的32个差异 💪🏾 📝 ✍️

Redmadrobot设计实验室的钢铁设计师Arthur Abrarov分享了一些观察。

使设计适应不同的平台是移动应用程序设计师工作的组成部分。这项工作的目标是使设计有机地适应用户交互模式。此外，经过完善的调整可通过使用本机平台组件简化开发。

为了正确地适应设计，您必须遵循平台准则：iOS的人机界面准则（HIG）和Android的Material Design。并与开发人员进行交流，理想情况下尽早将其连接到设计，以便他们可以立即设置技术限制。

但是，iOS的设计与Android的设计究竟有何不同？在本文中，我将分析32种针对iOS和Android的特定设计差异。它们分为四组：

基本差异。
导航和模式（UX）的差异。
组件差异（UI）。
其他差异。

IOS功能将在左侧，Android功能将在右侧或顶部/底部。

基本差异

人机界面指南与材料设计

本文中的几乎所有差异均来自对这些准则的分析。它们在思想层面上的实质如下。HIG设计的是一种扁平，轻巧，友好的设计，它源于对拟态的逐渐拒绝。

物质有几个基本原则：物质作为隐喻；大胆，图形，有意识；有意义的动画；灵活的基础和跨平台。如果您不熟悉这些准则，最好在阅读本文之前先阅读它们。

2.单位：pt vs dp

iOS应用程序的设计在pt中创建，Android应用程序的在dp中创建。我们通常以1x（或mdpi）创建设计并将其上传到Zeplin。Zeplin显示用于iOS的pt的设计，并以2x和3x生成图标和插图。在Android下，它将以dp显示设计，并以hdpi，xhpdi，xxhdpi和xxxhdpi生成图形。

3.屏幕尺寸：320 pt x 568 pt和360 dp x 640 dp

我更喜欢将iOS应用程序设计为最小尺寸-屏幕尺寸为320pt x 568pt的iPhone 5。我这样做是为了避免在小屏幕上错误显示内容。有些人更喜欢为iPhone 8设计。

在Android下，通常可接受的屏幕尺寸为360dp x 640dp。

在为iOS设计时，有时我为iPhone X（375pt x 812 pt）创建设计。这对于开发人员了解如何正确缩进该尺寸的屏幕是必要的。即使在为iPhone X设计时，您也需要记住“ 安全区域”-不应放置内容的区域。

4.系统字体：San Francisco vs Roboto

如果您不知道在应用程序中使用哪种字体，请使用系统一。如果是iOS，则为San Francisco。Android是Roboto。

5. Android导航栏

与iOS不同，Android具有内置的后退导航工具。这是Android导航栏。

它要么物理上集成到智能手机中，要么是界面的一部分。用户使用箭头按时间顺序向后移动一步（反向按时间顺序导航）。导航同时在应用程序内部和它们之间进行。

在我作为移动应用程序设计师的职业生涯开始之初，我就一直困扰着Android开发人员一个问题：为什么我们需要两个按钮？一个位于导航栏的底部，第二个显示在转到子页面时的顶部应用程序栏中。

答案是这样。向后导航有两种类型：反向按时间顺序导航（我们使用导航栏中的向后箭头进行操作，将其称为“返回”）。

以及向上导航（我们使用上方的箭头，将其命名为Up）。

假设我们有一个ABC路径，其中A是父页面，而B和C是子页面。想象一下，用户直接从A转到C。如果他按“后退”按钮，那么他将返回A。但是如果他按“向上”，则他将首先转到B-再按一次，他将转到A。

这对用户来说很难实现并且造成混乱，因此现在这两个后退按钮执行与iOS中相同的后退操作。也就是说，如果您从A到C，那么我们将从C返回A。

6.提升材料的重要性

在iOS中，基本上没有阴影。作为例外，可以在App Store的主屏幕和“运行状况”中找到阴影。但通常，HIG并未规定使用阴影。

在“材质”中，阴影起着重要作用。它们在界面上增加了第三个空间（Z轴），因此每个组件在此轴上都有自己严格的位置（从0 dp到24 dp）。此外，此Z轴并非仅在意识形态上存在：开发人员具有海拔参数，他们可以在其中设置组件沿此轴的位置。

状态的导航和更改伴随着组件高度的变化。因此，在为Android设计时，我们应该自觉地处理阴影的创建。

7.命名差异

命名有很多差异。我建议考虑这五个。

一个。标签栏与底部导航栏

这是用于应用程序顶层导航的栏。在两个平台上均静态位于屏幕底部。除了命名之外，它们在行为上也有所不同。稍后我们将对其进行分解。

b。导航栏与顶部应用栏

两种平台上的此栏执行的任务大致相同：将用户当前在应用程序中的位置通知给用户，使其可以返回上一屏幕并提供一个或多个上下文操作。在本文中阅读有关以下内容的更多信息。

C。分段控件与选项卡

除了命名之外，Android Tabs还具有以下功能：您可以在滑动的标签之间移动，而Material则允许您将其用于顶层导航。

d。警报与对话框

有趣的是，iOS- Alerts中仅描述了一种用户警报工具。Android中有3种：小吃店，横幅和对话框。

Snackbar是为低优先级消息设计的，不需要任何操作。对话框会阻止与界面的交互，因此需要采取措施。标语在它们之间：它不会阻止交互，但是需要采取措施。

e。触控ID与Android指纹

这只是这些平台上使用的不同命名技术的一个示例。应该知道它们，因为除了命名之外，它们在实现方面还具有许多技术特征。了解命名差异是了解技术差异的第一步。

导航和模式的差异（UX）

8.顶级导航方法

让我们从头开始。iOS建议仅使用一种顶级导航方式-通过Tab栏。Android有三个选项作为回报：导航抽屉，底部导航栏和选项卡。

如果顶层页面数超过五个，请使用导航抽屉。如果少于-底部导航栏。标签很少用于此导航，但是我们可以使用该方法。但是，Material建议不要将选项卡和底部导航栏组合在一起，因为与这些组件的交互会影响页面的内容，并且用户可能会感到困惑。

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

这种差异提供了材料。

如果从iOS的父页面切换到iOS，然后通过Tab栏切换到另一个父页面，那么当您返回第一个父页面时，您仍将位于子页面上。

在Android中，一切都变得更加简单-通过底部导航栏进行切换时，您始终会在父页面之间进行切换。如果在此之前您在子公司，它将重置。

我们的Android开发人员有信心此系统行为不正确。与iOS一样，在切换到底部导航的情况下，值得维护打开的子页面。

10. Android选项卡的特殊行为

与Segmented Controls iOS 不同，Android上的标签页具有此属性：您可以使用左右滑动来浏览标签页。

这是因为选项卡页面处于相同的高度（高程）。

这是很重要的知道，因为在Android中使用标签时，我们应该不添加具有相似的姿势来设计元素。例如，图片轮播或使用滑动与卡片互动。

通常，这两个组件不能完全相互替换。分段控件是控制页面内容的控件。Tabs是一个导航工具。

因此，在适应过程中将它们视为等效组件之前，有必要与开发人员进行协商。有时，将Google Tabs替换为Page Control更为正确。这完全取决于上下文。

11.子画面的外观差异

在iOS中，子屏幕的外观（不计算模态）仅以一种方式发生：子页面显示在主板顶部的右侧，并且幻灯片有效。返回母屏时发生滑出的效果。

Material 建议使用有意义的动画向用户显示父页面和子页面之间的层次关系。

当与用户进行交互时，用户转到子页面，该组件将展开并覆盖母页面。因此，用户可以通过单击“返回”按钮来了解他来自哪里，来自哪里，发生的原因以及他将返回的位置。

过渡使用标准缓动发生。

12.特殊呼叫模式导航抽屉

在使用Navigation Drawer设计应用程序时，请务必记住该组件从左到右消除了边缘滑动手势。因此，您不应为此手势添加其他逻辑。

在iOS中，此手势具有从子页面到母页面的过渡模式。这种模式已逐渐迁移到许多Android应用程序。

13.滚动时的内容行为

在HIG上，iOS上的内容在滚动时的行为如下：导航栏的宽度减小，工具栏消失。但是通常，iOS开发人员可以在滚动时自定义内容和栏的任何行为。

材质提供了更多的滚动行为。例如，滚动时底部导航栏，搜索和底部应用程序栏可能会消失。

顶部应用栏可以消失或上升到主要内容之上。

杂项搜索行为

有趣的是，HIG会将搜索指向条形并将其称为搜索条。在“材料”中，我们在“导航”部分而不是“组件”中找到搜索。也就是说，对于Material而言，搜索是另一种导航方式。

在iOS和Android中，搜索都可以静态显示在屏幕上，并且通常会固定在导航栏或顶部应用栏上。

在两个平台上，搜索都可以采用图标的形式，仅在iOS中，图标会扩展为搜索栏的单独组件，而在Android中，搜索是在顶部应用栏内打开的。

iOS中搜索的功能是，您可以将其“隐藏”在导航栏下，并通过向下滑动手势来调用。刷新（拉动刷新）通常使用相同的手势，因此您不应在此操作上调用搜索和刷新。

组件差异（UI）

15. iOS中没有哪些组件

在iOS中，没有很多本机Android组件。让我们越过它们。

一个。导航抽屉

iOS基本上无法识别汉堡菜单。如前所述，在iOS中，顶级导航仅在选项卡栏上。

b。背景

背景对于我来说是Material中最令人惊奇的组件。在撰写本文时，Android只是计划将其作为本机实现。通常，在研究材料的组成部分时，值得检查它们是否已经可用。

材料本身喜欢这个组件。例如，看看2019年材料设计奖的获奖者。

C。旗帜

在本机iOS组件中找不到横幅。在Banner的帮助下，我们会告知用户重要信息并提供相关操作。

d。小吃店

与横幅广告一样，Snackbar也不是iOS固有的。Snackbar用于向用户传达有关其操作结果的简短消息。

e。薯条

本地iOS组件中也缺少芯片。它们用于输入信息，描述和操作。

F。底部应用栏

在这里，您可以打赌iOS具有类似的组件- 工具栏。但这是不同的，这就是原因：工具栏是上下文操作的栏。例如，在“消息”中编辑消息列表时，会出现一个工具栏，其中包含“读取所有”和“删除”操作。

底部应用程序栏通过相同的顶级操作将顶部应用程序栏下移：打开导航抽屉，调用搜索，依此类推。回到底部应用程序栏，我们托管FAB。

G。晶圆厂

是的，FAB也不在iOS中。FAB是用于在屏幕上执行主要操作的按钮。例如，在邮件应用程序中，FAB将创建一个新字母。

如果您在屏幕上的主要操作中使用Android中的FAB，则在iOS上，此主要操作应放在右侧导航栏中的顶部（请参阅示例：iMessages）。

H。底部导航抽屉

导航抽屉的一种变体，仅适用于Android。通过按下底部应用栏中的汉堡菜单按钮进行调用。

一世。侧板

尽管Material 允许您在移动应用程序中使用此组件，但我建议您用更熟悉的Bottom Sheet代替它。

j。展开底页

在iOS的本机中找不到这个非常漂亮的Android组件。展开式底页是固定在页面底部的表面。按下时，表面将扩展为整页。

k。标准底片

Standard Bottom Sheet是Bottom Sheet的变体，不属于iOS组件。

16. Android中没有哪些组件

现在考虑在Android库中找不到哪些组件。

一个。页面控件

页面控件显示用户所在的页面。它不在Android的本地组件中。

b。工具列

工具栏仅iOS熟悉。

C。踏步机

步进器 -标准iOS控件，在材料中未描述。用它输入较小的值。示例：要打印的份数。

d。弹窗

Popover是主要在iPad上使用的弹出面板。

IOS有一个标准的Popover应用程序-在阅读器或浏览器中设置文本。

17.其他状态栏

在两个平台上，状态栏执行相同的任务：报告时间，收费水平，移动通信质量和Wi-Fi。它们在状态栏中的这些指示器的位置以及通常在视觉解决方案中的位置不同。

另外，状态栏Android具有此功能，当来自应用程序的通知发出时，该应用程序的图标将显示在状态栏中。在iOS中，不是。

18.刷新内容控件与滑动以刷新

在两个平台上以相同的向下滑动手势调用刷新器。但是在iOS上，“ 刷新内容控制”将其余内容下推，而Android的“ 刷卡刷新”则显示在内容顶部。此外，滚动内容时，iOS刷新消失，而Android可见。

19.杂项控制

平台控件仅在视觉上有所不同。可以注意到，在iOS中，控件更为简单：单选按钮和复选框都使用复选框。在Android中，它们的控件形式有所不同。

材料还建议您在需要使用户能够快速选择所有选项时使用父复选框。

20.后退箭头和标题位置的不同视图

在iOS中，箭头中间没有一行，因为在iOS中，后箭头是使用前一个屏幕签名的。如果标题是先前屏幕上的标准标题，则标题将从标题向左移动到箭头。如果标题很宽，则标题会上升。如果上一页的标题过长，则将其替换为单词back。

21.三个点图标的不同视图

对于这种差异似乎没有严格的理由。我们向平台致敬，并使用推荐的三点立场。在iOS中，点水平放置，在Android中-点垂直放置。

22.不同类型的选取器

在iOS中，使用转轴选择日期。iOS感光鼓可用于输入任何其他数据。在Android Picker中，日期模仿物理日历的外观。

材料还建议用户使用输入字段输入日期。

23.其他文本字段

HIG对文本字段的要求远不如材料要求高。

差异性

在iOS系统中，标签是一个输入栏内部，在输入文本时消失。材料建议在输入文本时抬高标签。

类似

两种平台均建议在必要时添加清除按钮。

还有什么要求材料

Material还建议使用前景色突出显示“标签”和“文本字段”下的条带-这有助于了解该字段已突出显示。材料描述了输入错误时字段的行为。在“材料”中有两种形式可供选择：“填充”和“概述”。

24.上下文菜单vs菜单

上下文菜单出现在iOS 13中。此控件为用户提供了与所选项目关联的多个上下文操作。Android具有部分相似的元素-Menus。

Android菜单在很多情况下都使用：它为所选元素和整个页面提供上下文操作；用作输入，有多个选项可供选择（下拉菜单）；用于编辑文本。上下文菜单是仅iOS的组件。Android菜单可以在移动应用程序和台式机上使用。

25.动作视图/活动视图与模式底部

如果您在iOS iOS应用程序中使用“ 动作视图”或“ 活动视图 ” ，则在Android中可以将它们部分替换为“ Android 模式底部表格”组件。它也出现在屏幕底部，使内容变暗并以类似方式关闭（按钮，在模态窗口外单击，有时向下滑动）。这些组件的任务是提出选择或上下文操作。

26.编辑菜单vs文本选择工具栏

除了视觉差异外，“ 编辑菜单”和“ 文本选择工具栏”还具有以下区别：在Android中长按可让用户继续选择文本。在iOS中，长按后，会出现一个放大镜以选择单词中的确切位置。

此外，Android与iOS的不同之处在于，当调用其他操作时，“文本选择工具栏”采用菜单的形式。

27.不同尺寸的分隔线

在iOS中为0.5 pt，在Android中为1 dp。

其他差异

28.对压力区大小的不同要求

根据指南，iOS中的最小点击区域为44 x 44 pt，Android中的最小点击区域为48 x 48 dp。

29. App Store与Google Play

您的iOS应用将从App Store下载。Android应用-来自Google Play。若要将应用程序正确放置在商店中，必须遵循其要求。App Store的要求在这里值得一读，Google Play在这里。有很多功能，所以我建议您在发布之前先学习一下。

30. iOS中的一种特殊模式-撤消和重做

这是一种特殊的 iOS 模式：如果您摇动智能手机，该应用程序将提示用户取消或重复上一次提交的操作。通常，此手势用于删除输入的文本。

31.与品牌发布的关系

材料允许启动屏幕放置应用程序徽标。HIG 建议不要将启动屏幕用于营销目的，并建议在应用程序启动时仅显示占位符。

32.其他材料设计主题

材料的网站还涵盖的主题包括：数据格式（各种数据格式），数据可视化（正确的信息图表），空状态（空状态的设计），脱机国家（在没有互联网的接口），可访问性（无障碍设计）和双向性（从右到左为读者设计）。

结论

了解准则可以提高我们的认识水平。我们了解现有的用户模式，并创建一个有机地适合用户习惯的应用程序。

准则鼓励我们尊重本机平台解决方案。在使设计适应其他平台时，总是很想复制设计而不进行更改。这损害了用户体验并使开发复杂化。但是，当我们看到本机解决方案的差异时，我们就可以正确地调整设计。

而且，如果我们要引入新的定制解决方案，则有关准则的知识有助于证明这一创新的合理性。

总计：准则及其差异的知识是移动应用程序设计师的一项重要技能。

您还知道其他哪些区别？在评论中分享它们。

iOS和Android移动应用程序设计的32个差异