《好设计，有方法：我们在搜狐做产品体验设计》 —3.3　控件的6个差异

3.3　控件的6个差异

在iOS和Android的设计指南中都分别单独提到了布局结构及组件的介绍和规范。了解这些内容有助于我们在设计过程中做出更好的决策。

1.状态栏对比

Android的状态栏（也成为系统栏）高度为24dp，信息对齐方式为右对齐，栏内包含了通知图标和系统图标等内容。默认情况下，状态栏的颜色都是在背景颜色的基础上加一层深色的遮罩，但也可以使用界面中其他元素的颜色，或者设计成半透明效果。

iOS的状态栏设置在屏幕的上边缘，栏内包含有关设备当前状态的信息，如时间、蜂窝电话、网络状态和电池电量等，状态栏高度为40px。在默认情况下状态栏的背景为透明色，文本颜色则根据应用程序来调整，通常分为深色和浅色。

2.顶部导航栏对比

在MD设计规范中Android的顶部导航栏被称为应用栏，是一种特殊的工具栏，主要用来做品牌展示、页面导航、搜索以及其他操作。

左侧的导航图标可以控制导航开启与关闭，当页面不需要导航的时候也可以省略（如下图）。右侧的按钮则是一些与应用相关的操作，例如帮助、设置等。Android的顶部导航栏默认高度为56dp，遇到需要扩展内容的情况时，顶部导航栏的高度数值则为默认高度加上内容增量高度的总和。

这里需要向大家单独介绍的一点是：安卓的返回按钮（全局返回）和向上按钮是有区别的。返回按钮（全局返回）一般设置在屏幕底部虚拟导航栏的左侧。返回按钮（全局返回）的返回路径是按照用户浏览的顺序来设定的，向上按钮则是按照页面的逻辑层次依次返回。如果之前的屏幕就是逻辑层次的上一层，那么“返回”和“向上”的操作结果是一样的，否则两个按钮返回的页面将会不同。另外，返回按钮（全局返回）可能回到“主屏幕”或者其他的应用，而“向上”按钮回到的界面总是在你的应用中，连续点击向上按钮两次才可以退出应用。

iOS导航栏的默认高度为88px，且高度不可变。一般来说，导航栏上应该最多不超过以下三个元素：当前视图的标题、返回按钮和一个针对当前的操作控件，如编辑按钮、完成按钮等。默认状态下导航栏背景会处理为轻微半透明效果，当应用需要时，导航栏背景也可以填充为纯色、渐变色或者自定义位图。

在设计样式方面，Android的导航栏高度为56dp，高度可以根据内容变化，iOS的导航栏高度固定为88px。两系统在返回键的设计样式上也有所不同。Android的返回按钮更像是一个箭头，而iOS则是用“<”代表了返回箭头。iOS按照用户浏览历史顺序来进行返回操作，Android则是根据应用的逻辑层次来进行操作。

在二级页面中，顶部导航栏的样式还会出现以下情况：包含分段控件（Android以标签形式出现）和搜索框（与搜索栏不同，搜索栏不包含管理当前页面的控件）的样式。

导航栏中的分段控件用来展示应用层级相同的界面，不过Android与iOS的设计在视觉方面略有差异。

内容排版方面，Android把页面标题放置在导航栏左边，部分Android产品会选择在向上按钮右边放App的logo，强调了品牌的概念，而iOS是将页面标题设置为居中对齐。iOS会在返回按钮旁边显示上一级名称，使用户再点击返回时有明确的心理预期。不过由于用户已经熟悉iOS的操作习惯，市面上现在大部分App已经不显示上一级标题了。

3.搜索栏对比

搜索这个功能在绝大多数App中都会出现，用户可以通过搜索快速定位应用中的内容。

MD设计规范给出两种搜索样式：固定显示搜索和可展开式搜索。固定显示搜索更加强化了搜索模块，鼓励用户进行点击操作。而可展开式搜索在一定程度上弱化了搜索模块。两种模式的搜索在功能上并无什么差异。

苹果在搜索栏设计上建议包含默认提示词、清除按钮和取消按钮。iOS11规范允许用户通过在搜索栏输入大量字段来进行搜索。搜索栏可以单独显示，也可以嵌入在导航栏或者内容视图中显示。到搜索栏的位置在导航栏中时，搜索栏可以选择被一直固定在视图顶部，以方便用户可以随时访问，也可以折叠，当用户需要时再显示。

在应用市场中，很多App会将Android和iOS搜索栏样式融合，在多数搜索需求很高的页面中我们可以见到两个系统都有搜索框被嵌入在顶部导航栏中的情况。这样设计其实是为了便于用户快速操作。笔者认为这是设计师们在思考过程中融合两系统规范得到的结果。所以两个系统在搜索栏的样式选择上并没有一个明确的区分，大家可以酌情选择不同样式的搜索栏。

4.底部导航栏对比

底部导航栏在iOS的系统中通常被设置为全局导航，用户可以点击不同的标签来快速切换模块。在早些时候，因为Android底部有物理按键，为了降低用户误操作频率，多数Android应用会选择将全局导航放在界面顶部。但是随着屏幕尺寸不断增加，用户单手操作触及到界面顶部的成本越来越高，很多Android产品又将全局导航移到了底部。

在MD规范中底部导航分为等宽（宽度不可变）和可变两种形式。导航中的文字应简洁，避免出现折行的情况。底部导航数量最少为三个，最多为五个，当导航数量少于三个时，建议改用标签导航的形式。

iOS底部导航与上面Android导航在呈现方式上没有太大的区别，但是在iOS规范中提出了几点需要注意：

当导航栏某个选项不可用时，不要设计为置灰按钮，只需在用户点击不可用选项时，告知用户当前页面为空（即空状态）。

导航栏图标应该在视觉上保持一致和平衡。

iPhone上最大导航数为5个，超过5个时，最后一个导航将会以“更多标签”代替。

iOS导航栏可以使用肩标来提示信息数量。

底部导航栏和工具栏不可同时出现。

5.弹窗（警告框）对比

弹窗用于提示用户做一些决定，或者给予用户一些额外的信息。在MD规范中，一个弹窗包含这三部分：标题、内容和事件。各组件之间的距离如下图。

弹窗的内容形式并不局限在文本，其他UI元素也可以构成提示框的内容。

在iOS设计规范中，弹窗需要包含标题和按钮，根据用户使用场景可以添加描述信息和输入框。同时苹果强调要尽量减少使用弹窗的频率，这样才可以有效引起用户足够的认识。

6.动效对比

优秀产品的共同特点是：帮助用户更好地聚焦到重点信息，理解层级、转场关系。Android和iOS的动效从最根本的模型上来说是截然不同的，Android的Material Design设计规范遵循现实世界的规律，而iOS则是将更多动效建立在镜头的移动和景深的变化中。

MD规范中最经典的动效之一就是水波动效，用户点击列表后界面会泛起“涟漪”作为一个反馈。

MD规范中将交互分为了四类，分别是真实的动作、响应式交互、转场交互和情感化交互设计。

真实的动作就是在设计动效时，我们需要考虑界面中元素的真实特性，真实世界中的物体拥有质量，所以只有在施加外力的时候它们才会移动，例如球掉在地上会不断地弹起落下，最后慢慢停落到地面上。MD规范中认为动效需要符合自然规律，这样才不会让用户感到意外和干扰。

响应式交互就是针对用户的操作及时给予反馈，由此来提升用户的使用感。表层响应（水波纹效果）、元素响应（点赞效果）、径向响应（改变列表顺序）都是常见的响应式交互。

转场动画即应用元素从A点到B点的转变过程，转场动画可以在多步操作过程中有效地引导用户，避免版面的变化给用户造成困扰。在建立转场动画的过程中，对于元素的移动需要严格考究，需要在确保动画平滑不脱节的情况下，使信息有层次的展现。

情感化交互设计更多体现在元素的细节上，通过细小图标的动画来吸引用户，启发用户产生共鸣。

由于iOS趋于精简，苹果手机没有实体返回键只有一个home键，使iOS和Android在交互设计方面有较大的不同。最明显的差异就是层级返回和编辑选择这两种操作了。

由于只有一个实体home键，iOS的界面中本身是包含返回按钮的，而实体键只负责退出应用。对比Android来说，因为机身包含物理返回键和虚拟返回键，所以操作逻辑与iOS不同。当界面为应用首页时，点击实体返回键（既上述所提到的全局返回按钮）可以直接退出应用。而虚拟返回键一般是存在于应用中，点击后是返回上一步操作，并不会直接退出应用。关于Android的实体返回键和虚拟返回键关系可以用下图表示：

在编辑选择操作方面，iOS给出了明确的操作入口，一般情况都会将编辑按钮放置在导航栏的右侧，进入编辑模式之后可以多选（点击）或者单选（滑动删除）。但是安卓进入编辑模式是通过手指长按来触发，同时配合工具栏的选项进行编辑。

在触发多任务功能方面，两系统也有所不同。iOS设定轻按home键两次，后台的程序会被挂起，左右滑动可以查看所有后台程序，上滑可以删除后台程序，点击可以进入其中一个应用。Android的多任务切换方式被赋予在一个虚拟的按键中，轻触两次多任务按键，系统会切换到上一个应用，长按多任务按键，会将当前后台所有应用以分屏方式显示。

在及时反馈动效方面，iOS采用了高亮提示，即手指轻触按钮时，按钮会通过明暗变化来反馈用户的操作。但是iOS并没有具体限定反馈动效的视觉呈现，大家可以根据自身产品进行调整。

以上为笔者从设计风格、界面元素和交互设计三方面浅析iOS与Android的平台差异，上述案例多以系统为使用场景来进行对比，熟知iOS和Android设计规范能让我们在设计时更有根据性，更加得心应手。但用户的使用场景千变万化，设计师在设计时也要考虑融入更多情景，做更加人性化的设计。