干货！iOS 和 Android APP 设计差别

了解并适当结合平台规范与优点，才能作到最佳的用户体验。在《最新Android &

iOS设计尺寸规范》一文中介绍 APP 设计规范（ds.mockplus.cn），同时本文也是一些补充。

为了建立最佳的原生APP，就须要你牢记iOS和Android平台之间的差别。这些平台差别不只在视觉层面有所不一样，在结构和流程上也有区别。牢记这些差别，才能给原生

应用以最佳的用户体验。

本文将聚焦于iOS和Android上的交互设计模式之间的区别，阐明iOS和Android上的应用看起来不一样的缘由，以及它们为何应该这样作。

另外，本文还将提供原生应用设计示例，以帮助你更好的理解本文所写的内容。

导航模式的差别

在界面之间切换是移动应用中的常见操做。考虑ios和Android原生应用控件规范的差别，对于导航模式的设计很关键。 Android设备底部有一个全局导航栏， 使用导航栏中的后退按钮是返回上一个界面或步骤的简便方法，它适用于全部Android应用。

全局导航栏(Android)

对比Apple，设计方法却大相径庭。 iOS没有全局导航栏，所以咱们不能期望像Android原生控件那样能支持全局返回。 这个特性就会影响到iOS应用的设计，应用中须要设计一个导航栏，并在左上角加上一个返回按钮。

iOS上的返回按钮

严格来讲，iOS也有一个返回的全局操做，直接在界面上右滑便可返回上一级页面。（译者注：这个特性我原来还真不知道，如今已经用的很顺手了。）

全局返回操做 (iOS)

在这种状况下，iOS和Android之间的区别在于，在iOS设备上页面的右滑是返回上一级，而在Android上则是切换标签。

为了保持与其余移动应用的一致性，必定要记住平台之间的差别。

左滑操做切换标签(Android)

应用内部的导航模式在IOS和Android上是不一样的

在Material Design设计规范中有一些不一样的导航模式。在Android应用中被你们熟知的导航模式是抽屉和标签形式的组合。

抽屉导航实际上是一个菜单，经过点击汉堡图标，而后从左侧或右侧滑出。标签栏通常位于标题栏的下方，使得内容可以很好地被管理，经过标签栏，用户能够对应用的视图，数据集和功能进行切换。

左侧就是抽屉导航；右侧是标签栏

在Material Design中还有一个组件叫作底部导航。这个组件对于安卓原生应用来讲也很是重要。底部的菜单项很容易点击和操做。可是安卓规范其实不建议同时使用底部导航和标签，由于它可能会在导航时引发混乱。

底部导航(Material Design)

在Apple的人机交互规范中，没有相似抽屉菜单的标准导航控件。相反，Apple则建议将全局导航放在标签栏中。标签栏放在应用的底部，让应用的核心功能可以快速切换。

一般，底部栏标签不会超过5个。正如你看到的那样，这个组件很是像安卓端的底部导航，只是在iOS中这种形式的导航更加经常使用。

iOS的两种常见导航形式，分段控制和底部标签栏

虽然在两个操做系统中都有相似的功能（切换标签和分段控制，底部导航和标签栏），但导航形式仍然是iOS和Android之间的主要区别之一。 二者之间存在一些客观差别，例如Android中有全局导航栏而在iOS中却没有，以及二者在视觉上的差别。

Apple认为，经常使用导航入口应该尽量的外置，一些用户不经常使用的功能才须要被放进汉堡菜单中。而对比安卓规范，一般会把主要导航也放在汉堡菜单中。

改造标准控件须要额外的开发时间，用户也缺少使用经验

若是但愿应用中的每一个元素在各个平台上看起来都同样，那么将须要额外的开发工做来建立最佳的移动应用设计。最麻烦的是涉及到默认控件，好比单选按钮、复选框、tab切换等等，这些控件须要一个定制的视图来实现显示Android上相似iOS的控件或iOS上相似Android的控件。

每一个平台的交互方式各有其独特性。好的设计是尊重不一样平台用户习惯的设计。在为iOS和Android设计移动应用时，必定要记住平台之间的差别，这样才能设计出知足用户指望的应用。

两个平台差别的一个例子是日期选择器。安卓用户对iOS中常见的老虎机形式的日期选择器并不熟悉。在Android中使用这种类型的日期选择器还须要从新布局，这样无形中增长了开发的难度和时间，并使界面看起来与系统风格格格不入。

左边是iOS标准日期选择器; 右边是Android标准日期选择器

左边是iOS标准选择器；右边是Android标准选择器

IOS和Android中的按钮样式

在Android设计规范中有2种不一样样式的按钮——扁平的和凸起的。这些按钮分别用在不一样的场景下。在Android中，按钮上的文字通常都是全大写。在iOS原生应用的按钮中有时也能找到大写的文字，但更多的状况是出如今标题上。

左边是标准的Android按钮；右边是标准的iOS按钮

还有一种很是有特色的按钮类型——在Android上叫作浮动按钮，在iOS上叫作活动按钮。浮动按钮用来展现应用的主要操做。例如，在邮件APP中写邮件，或者在社交APP中发状态都会用到这个浮动按钮。而在iOS中与之相似的按钮则叫作活动按钮，一般会放在底部导航的中间

左边是标准的iOS活动按钮；右侧是标准的Android浮动按钮

IOS与Android底部操做视图的差别

在Android中有两种不一样类型的底部操做视图：模态视图和常驻视图。模态视图又有两种不一样类型：具备不一样操做内容的模态列表和用户点击“共享”图标后显示的应用列表。在iOS上也能找到相似的组件，可是在设计风格和布局上差别比较大。

左边是标准的Android底部菜单视图；右边是标准的iOS标准菜单视图

在触摸范围和系统网格之间存在的差别

iOS 和 Android的触摸范围略有不一样 (iOS最小的触摸范围为44px @1x，Android为48dp/48px @1x). Android规范还建议将全部元素以8dp做为规范基线来设计。

字体差别

iOS的系统默认字体是San Francisco而 Android系统默认字体则是Roboto。Noto 是能在Android的全部界面中都适用的字体，包括那些不支持Roboto字体的语种。正是由于有差别，因此须要密切关注不一样平台的排版和布局规范。

左边是Android字体; 右边 是iOS字体

交互细节差别

给用户的第一印象一般都是创建在设计层面。

创建用户的第一印象对产品来讲很重要。在APP开发设计过程当中,咱们能够经过作好微交互和动画来为用户建立一个有吸引力的体验。

让咱们明确下两个平台的交互和动画的规则和建议，并查看官方给出的一些标准示例。

焦点和优先级——交互设计的目的是将用户的注意力集中在应用中对他真正重要的事情上， 两个平台都不鼓励滥用动画，由于过多的动画容易分散用户的注意力，也会让用户感到焦虑。

一致性和层级结构——请务必记住，交互设计最重要的是经过肯定元素之间的层级关系，帮助用户在应用中找到他们想要的。贴心，流畅，不突兀的页面跳转才能保证用户能轻松操做。对于这一点来讲，两个平台都对动画规范都作了一些合理的建议。

尽管Android 的Material Design（材料设计规范）与iOS的Human Interface（人机交互规范）在使用动画方面的规范很是类似，但仍有一些明确的差别。 用户会习惯于特定平台的动画跳转方式并认为只有他们习惯的那些才是最天然的。

这就是为何要特别注意平台间的交互形式，这些小的细节能够很好的提高用户体验，使得在不一样平台上都能给用户带来天然的体验。

IOS

iOS用户习惯于iOS中的微动画，像平滑过渡，横竖屏转向以及模拟物理规律等等。当应用出现无心义的或者违反物理常识的动画时，用户就会感到困惑。

例如，用户但愿经过下拉来刷新界面，但愿经过右滑来返回。iOS设计规范强烈建议，除非正在建立诸如游戏之类的沉浸式体验，不然仍是尽量的按照官方给出的动画规范来设计。

Android

依照Material Design规范，一个元素在转换过程当中分为传出，传入或常驻，不一样的元素也会有不一样的转换方式。

动画可以引导用户的注意力。当界面发生变化时，动画创建了过渡先后的连续性。导航的切换是界面中很是重要的元素。它们经过清晰的结构来帮助用户找准本身的方向。例如，当一个UI元素展开以填充整个屏幕时，展开后的新界面是点开元素的子级，返回能够回到父级。

子父级切换的例子 (Android设计规范)

在父级界面上，嵌入的子元素会在点击时抬起并在适当的位置展开。将过渡的重点放在子界面上，明确子父级之间的关系。

共享相同的父级界面（例如标签切换时的内容）一致性的移动可以强化他们的关系。

标签选项卡固定在一个位置不变，内容界面在水平方向上进行移动

在应用的最上层，切换目标一般被分在主要任务(这些任务可能彼此不相关)上。这些界面经过改变不透明度和缩放值来进行适当的转换。

总结

固然也有例外：一些iOS应用遵循Android设计规范（好比Gmail）而一些Android应用则遵循iOS设计规范（好比Instagram）。

左边是iOS版的Gmail，右边是Android版的Gmail

左边是iOS版的Instagram，右边是Android的Instagram

但其实显而易见——使用两个平台系统自身的组件设计应用，流程要快不少。所以，最好是花些时间了解下两个平台不一样的设计规范，而不是混合iOS和Android的组件模型，而后还得花不少力气在开发上。

设计规范系统网址：ds.mockplus.cn