UI界面设计

设计原生iOS app和原生Android app有什么不一样的地方呢？

6628

要设计一个原生的app，您应该牢记iOS平台与安卓平台之间的差异。这两个平台不仅在界面设计上不一样，它们的结构和流程也是不一样的。您应该认真学习它们之间的差异，这样在设计原生app时，能够为用户提供最好的体验。

原生的iOS和android app都具有特定的功能，apple和google的设计指南都建议尽可能使用平台标准的导航控件：页面控件，标签栏，分段控件，表视图等等。用户熟悉这些通用的控件如何在每个平台上运行，因此，使用标准控件可以让用户快速上手您的app。

我们将阐述iOS和android上交互设计模式有什么差别，界面设计看上去有什么不一样的地方，以及它们为什么要这样设计。我们将结合一些案例来说明。

导航模式的差异

在页面之间切换是app中的常见操作。在导航模式方面，考虑iOS和Android具有不同的原生app设计指南非常重要。Android设备底部有一个通用导航栏。使用导航栏中的后退按钮是返回上一个页面或步骤的简便方法，它几乎适用于所有Android应用。

全局导航栏（Android）

而Apple的设计方法却截然不同。没有全局导航栏，因此我们无法使用原生iOS应用设计中的全局后退按钮。内页有一个原生导航栏，左上角有一个后退按钮。

后退按钮（iOS）

Apple还在应用中加入了从左到右的滑动手势，切换到上一个页面。此手势几乎适用于所有应用。

从左向右滑动手势 - 返回（iOS）

iOS和Android之间的区别在于，在原生应用中，iOS应用从左向右滑动手势将返回到上一个页面，Android上的相同手势将切换标签。与iOS不同，Android上有一个底部导航栏，后退按钮会返回上一个页面。

记住平台之间的这种差异非常重要。

从左向右滑动手势 - 在标签之间切换（Android）

应用内导航模式在iOS和Android中有所不同

“Material Design设计规范”中有一些不同的导航选项。Android应用中使用的一个众所周知的导航模式是抽屉式导航和标签组合导航。

抽屉导航是一个菜单，通过按下汉堡菜单图标从左侧或右侧滑入。标签选项卡位于屏幕标题的正下方，可以使内容组织处于较高级别，允许用户在应用的视图，数据集和功能方面进行切换。

左抽屉导航菜单; 右 - 标签（Material Design）

Material Design中还有一个名为bottom navigation的组件。此组件对于Material Design原生应用也很重要。底部导航栏使您可以轻松浏览并在单击中切换顶级视图。Material Design设计规范不建议同时使用底部导航和标签，因为它可能会在导航时造成混淆。

底部导航（Material Design）

在Apple人机界面指南中，没有与抽屉导航菜单类似的标准导航控件。相反，Apple的指南建议将全局导航放在标签栏中。标签栏显示在app页面的底部，可以在应用的主要部分之间快速切换。

通常，标签栏的数量不超过五个。我们可以看到，此组件类似于Material Design中的底部导航，但在iOS应用程序中更常用。

左上角 - iOS分段控制; 右下角 - iOS标签栏（HIG）

虽然在两个操作系统中都有类似的功能（标签和分段控制，底部导航和标签栏），但导航仍然是iOS和Android之间的主要区别之一。两个都存在客观差异，例如Android中的全局导航栏及其在iOS中的缺失，以及这两个系统的视觉差异。

Apple认为主要导航元素应最优先，汉堡包菜单应仅用于商店功能不是用户执行的日常任务的功能。另一方面，Android应用的通常的做法是在汉堡菜单中隐藏主导航。

标准控件的自定义视图需要额外的开发时间，并且用户不熟悉

如果您希望应用程序中的每个元素在不同平台上看起来相同，那么您需要进行额外的开发工作才能创建最佳的移动应用设计。最复杂的用例涉及默认控件，如单选按钮，复选框，切换等，需要自定义视图实现，以在iOS上显示类似iOS的控件或类似Android的控件。

每个平台都有其独特的互动。良好的设计是在每个操作系统中尊重用户习惯的设计。在为iOS和Android设计移动应用时，请牢记平台之间的差异非常重要，这样您就可以设计出满足用户期望的应用。

在两个平台上通常设计不同的元素的一个示例是日期选择器。Android用户不熟悉iOS中常见的老虎机卷轴式日期选择器。在Android中使用这种样式的日期选择器需要自定义视图，这可能会变得复杂，增加了开发的复杂性和持续时间，并使您的应用程序设计看起来与Android平台不同。

左 - 标准iOS控件; 右- 标准的Android控件

左 - 标准iOS选择; 右 - 标准的Android采摘者

iOS和Android中的按钮样式

“Material Design设计规范指南”中有两种类型的按钮 - 扁平和带阴影。这些按钮用于不同的情况。Material Design中按钮上的文本通常都是大写的。有时我们在原生iOS应用程中也会找到大写文本的按钮，但通常只是标题是大写的。中文的不受此规范的影响。

左 -Material Design按钮; 右- 标准的HIG按钮

还有一种类型的按钮 - Android上的浮动操作按钮和iOS上的CTA按钮。浮动操作按钮表示应用程序中的主要操作。例如，邮件应用中的撰写按钮或社交网络应用中的新帖子按钮可以是浮动操作按钮。iOS应用中主要操作的类似设计是CTA按钮，该按钮位于标签栏的中心。

左边 - iOS中的标准CTA按钮；右边 - Android中的标准浮动操作按钮;

Android中的原生底部动作条与iOS中的底部动作条和活动视图之间的差异

Android中有两种类型的底部动作条：模态底部动作条和持久底部动作条。模态底部动作条有两种类型的内容：具有不同操作的模态底部动作条和在用户点击“共享”图标后显示的应用列表。我们可以在原生iOS底部动作条和活动视图中找到相同类型的内容。但这些组件看起来与Android底部动作条不同。

左 -Material Design底部动作条; 右 - iOS应用中的底部动作条

触摸目标和网格的差异

iOS和Android的触摸目标指南略有不同（iOS为44px @ 1x，Android为48dp / 48px @ 1x）。Material Design建议将所有元素与8dp方形基线网格对齐。

排版差异

San Francisco是iOS中的系统字体。Roboto是Android中的标准字体。Noto是Chrome和Android不支持的所有语言的标准字体。您需要密切关注每个平台的排版和布局规范。

左 -Material Design排版; 右 - HIG排版

微互动

在设计方面，第一印象通常是用户的最后印象。

这就是为什么从一开始就吸引用户的注意力如此重要。在应用设计和开发过程中，我们可以通过微交互和动画为用户创建一个非常迷人的体验。

让我们定义关于两个平台的交互和动作的主要规则和建议，并查看详细示例。

重点和重要性 - 交互将用户的注意力集中在应用中真正重要的内容上，因此只有在真正需要时才需要使用它们。两个平台都不鼓励过多的动画，因为它们会分散用户的注意力并使用户感到紧张。

一致性和层次结构 - 请务必记住，交互通过显示元素彼此之间的关系来帮助用户在应用中定位自己。从一个页面到另一个页面，流畅和不显眼的过渡让用户觉得很自然。

尽管在“Material Design设计规范”和“Apple人机界面指南”中使用微动画的基本建议非常相似，但仍有一些明确定义的差异。用户习惯于这些特定于平台的过渡，并将其视为自然而然的差异。

这就是为什么重要的是要特别注意熟悉的交互，这将改善用户体验并在每个平台上看起来自然。

iOS版

iOS用户习惯于iOS中使用的微妙动画，例如平滑过渡，流畅变化和基于物理的滚动。当移动没有意义或似乎违反物理定律时，iOS用户会感到迷失。例如，如果用户通过从页面顶部向下滑动来显示视图，则他们希望能够通过向后滑动来解除视图。HIG强烈建议，除非您正在创建诸如游戏之类的沉浸式体验，否则您可以使自定义过渡与内置动画相媲美。