译：原生iOS应用程序和原生Android应用程序设计之间的差别

原文地址：https://medium.muz.li/differences-between-designing-native-ios-apps-and-native-android-apps-e71256dfa1ca

要建立最佳的原生应用程序设计，您应该牢记iOS和Android平台之间的差别。这些平台不只在原生应用程序的外观方面有所不一样; 它们在结构和交互方面也有所不一样。您须要牢记这些差别，以经过原生应用程序设计给用户提供最佳用户体验。

iOS和Android的原生移动应用程序具备各自操做系统平台特殊的功能。Apple和Google的设计指南建议尽量使用平台标准导航控件：页面控件，选项卡，分类控件，表视图，组合视图和拆分视图。用户熟悉这些控件是如何在每一个平台上运行的，所以若是您使用标准控件，您的用户将直观地知道如何操做您的应用程序。咱们专一于iOS和Android上的交互设计模式之间的主要区别，以阐明iOS和Android上的应用程序看起来不一样的缘由 - 以及它们为何应该这样作。咱们还提供原生应用程序设计模板和原生移动应用程序示例，以帮助您可视化咱们正在谈论的内容。

导航模式的差别

在屏幕之间跳转是移动应用程序中的常见操做。在设计导航模式方面，考虑到iOS和Android不一样的应用程序设计指南是很是重要的。Android设备底部有一个通用导航栏。使用导航栏中的后退按钮很是简便的返回上一个屏幕或步骤，它几乎适用于全部Android应用程序。

另外一方面，Apple的设计方法却大相径庭。没有全局导航栏，所以咱们没法使用原生iOS应用程序设计中的全局后退按钮返回。这会影响iOS移动应用程序的设计。屏幕内部应该有一个左上角是一个返回按钮的原生导航栏。

Apple还在应用程序中引入从左到右的滑动手势，以跳转到上一个屏幕。此手势几乎适用于全部应用。

在这种状况下，iOS和Android之间的区别在于，在iOS设备上的原生应用程序中，从左向右滑动手势将返回到上一个屏幕。相同手势在Android设备上一般用于切换选项卡。但与iOS不一样的是，Android设备上有一个底部导航栏，后面的按钮会返回上一个屏幕。

记住平台之间的这种差别以保持与其余移动应用程序的一致性始终很重要。

iOS和Android中应用内导航模式有所不一样

“Material Design Guidelines”中有一些不一样的导航选项。Android应用程序中使用的一个众所周知的导航模式是抽屉导航和选项卡的组合。

抽屉导航是一个经过点击汉堡菜单图标从左侧或右侧滑入的菜单。选项卡位于屏幕标题的正下方，内容组织处于较高级别，容许用户在应用中切换不一样的视图，数据集和功能。

Material Design中还有一个名为bottom navigation的组件。此组件对于Material Design应用程序也很重要。底部导航栏使您能够轻松浏览和切换顶级视图。Material Design Guidelines不建议同时使用底部导航和选项卡，由于它可能会在导航时形成混淆。

在Apple的UI指南中，没有与抽屉导航菜单相似的标准导航控件。相反，Apple的指南建议将全局导航放在选项卡中。选项卡显示在应用程序屏幕的底部，能够在应用程序的主要类别之间快速切换。

一般，选项卡包含的类别不超过五个。咱们能够看到，此组件相似于Material Design中的底部导航，但更经常使用于iOS应用程序中。

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

Apple认为主要导航元素应位于前台，汉堡包菜单应仅用于存储不是用户执行的平常任务的功能。不一样的是，Android应用程序一般的作法是在汉堡菜单中隐藏主导航。

自定义标准控件须要额外的开发时间，而且对于用户来讲是不熟悉的

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

每一个平台都有其独特的交互。在每一个操做系统中尊重用户习惯的设计是良好的设计。在为iOS和Android设计移动应用程序时，牢记平台之间的差别很是重要，这样您就能够设计出知足用户指望的应用程序。

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

iOS和Android中的按钮样式

“Material Design Guidelines”中有两种类型的按钮 - 平面和凸起。这些按钮用于不一样的状况。Material Design中按钮上的文本一般都是大写的。有时咱们在本机iOS应用程序中也会找到大写按钮文本，但一般咱们找到的是标题大小写。

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

Android中的原生底部列表与iOS中的活动视图操做列表之间的差别

Android中有两种类型的底部列表：list列表和表格列表。list底部列表有两种类型的内容：具备不一样情景操做的列表和在用户点击“共享”图标后显示的应用程序列表。咱们能够在iOS活动视图操做列表中找到相同类型的内容。但这些组件看起来与Android底部列表不一样。

分辨率的差别

iOS和Android的分辨率指南略有不一样（iOS为44px @ 1x，Android为48dp / 48px @ 1x）。Material Design Guidelines还建议将全部元素与8dp方形基线网格对齐。

排版差别

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

Microinteractions

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

这就是为何从一开始就吸引用户的注意力如此重要。在应用程序设计和开发过程当中，咱们能够经过微交互和动画为用户建立一个很是着迷的体验。

让咱们明确关于两个平台的交互和动做的主要规则和建议，并查看详细示例。

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

一致性和层次结构 - 请务必记住，交互经过显示元素彼此之间的关系来帮助用户在应用中定位本身。从一个屏幕到另外一个屏幕的天然，流畅的过渡使用户保持沉浸其中。动做向导为如何执行操做提供了有用的建议。

尽管使用微动画的基本建议在“Material Design Guidelines”和“人机交互指南”中很是类似，但仍有一些明肯定义的差别。用户习惯于这些特定于平台的过渡，并以为十分天然。

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

iOS

iOS用户习惯于iOS中使用的微妙动画，例如平滑过渡，设备方向的流畅变化和基于物理的移动。当移动没有意义或彷佛违反物理定律时，iOS用户会感到迷失方向。例如，若是用户经过从屏幕顶部向下滑动来显示视图，则他们但愿可以经过向后滑动来退出视图。HIG强烈建议，除非您正在建立诸如游戏之类的沉浸式体验，不然您可使自定义过渡动画与内置动画相媲美。

Android

根据“Material Design Guidelines”，在转换期间，转换的界面元素分为传出，传入或固定。项目所属的类别会影响其转换方式。

动画引导用户注意。当UI改变外观时，动做在转换以前和以后提供元素的放置和外观之间的连续性。导航转换是与界面进行总体交互的重要元素。它们经过表达应用程序的层次结构帮助用户定位本身。例如，当元素扩展以填充整个屏幕时，扩展行为表示新屏幕是子元素。它展开的屏幕是它的父元素。

导航转换是与界面进行总体交互的重要元素。它们经过表达应用程序的层次结构帮助用户定位本身。例如，当元素扩展以填充整个屏幕时，扩展行为表示新屏幕是子元素。它展开的屏幕是它的父元素。

在父屏幕上，嵌入的子元素在触摸时会抬​​起并在适当的位置展开。

过渡将重点放在子屏幕上，同时增强了父子视图之间的关系。

共用相同父级的屏幕（例如相册中的照片，我的资料中的部分或流程中的步骤）一致地移动以增强他们的关系。视图从一侧滑入，同时同级的视图在相反方向上离开屏幕。

在应用程序的顶层，选项一般被分组为主要任务（可能彼此不相关）。这些屏幕经过更改不透明度和比例等值来转换。

结论

固然也有例外：一些iOS应用程序遵循Material Design Guidelines（如Gmail），一些Android应用程序遵循人机交互指南（如Instagram）。

但有一点是显而易见的 - 使用原生组件为两个操做系统设计移动应用程序要快得多。所以，最好花时间对应不一样的系统平台设计而不是开发一个应用程序模型，由于一个应用程序模型是Apple的人机交互指南和Google的Material Design组件的混合，而后因为自定义元素而花费大量时间进行开发。

想要查看本机设计应用示例，其中咱们使用本机元素以及具备强大样式的自定义界面？访问咱们的Dribbble和Behance页面，以更好地了解咱们的能力。