设计点击左侧切换页面进出_浅谈交互设计“规范”这回事儿

在一个用户体验部门的协同性设计中，规范是一个极其重要的事项。

如果没有规范，去定义什么能做，哪个位置放什么东西，每一种手势如何做响应...那么不同设计师设计出来的产品会千差万别。

没有规矩，不成方圆。没有规范，不成系统。

我们这篇文章，来简单聊聊，ios和android交互设计规范中的那些不同点。

有对比才有伤害嘛对不对（哦不对，有对比，才更好记忆嘛！）

关于设计规范的重要性就不多说，这篇文章主要通过举例对比，来帮助大家深刻认识两大移动平台（IOS&Android）的设计规范以及它们之间的差异。

首先，从平台的页面布局上看，两大平台布局方式上明显存在差异，如图：

我们对两大平台分别从页眉、页脚进行详细解说，先是IOS平台，

IOS的页眉，也就是我们说的导航栏，用于实现在应用不同信息层级结构间的导航，有时也可用于管理当前屏幕内容。具体效果，如图3，

在顶部放一个标题，表示当前页面的一些内容，在左侧有个返回按钮，这个按钮是依赖于当前页面是属于第一层级还是第二层级，如果属于第二层级，就需要有一个返回的按钮，以及返回上一级的标题是什么，然后右上角有个设置的入口，这样看还是抽象的话，那就直接看实际效果的，如图4，

熟悉了IOS页眉的设计，再来看页脚的，IOS的页脚，也就是我们说的工具栏，用于放置操作当前屏幕中各对象的控件，如图5，

工具栏上既可以放icon，也可以放文字，看个具体例子就知道怎么用了，如图6红色圈中形式，

至于选择icon还是文字，要根据实际情况抉择，如果功能入口很多，icon是更好的选择。如果功能没有那么多又想表达更加清晰的意思，建议使用文字。

IOS的页脚除了是工具栏外，还可以是标签栏。标签栏可以让用户在不同的任务、界面和模式中进行切换，图7是常见的设计方式，

具体的可以看下appstore的设计，

但是值得注意的是，底部标签不要太多，最多5个。

在了解了IOS平台页眉页脚的设计规范后，这时候来对比下Android平台在这上面的设计有何不同，首先还是从页眉上说明；

Android的页眉放置的是操作栏（action bar），用于实现app内视图的切换和层级间的导航（返回上层），还会放置一些重要控件。常见的设计方式如图9，

在这里不得不提一下，在图9中看到的“下拉菜单”是android4.0的设计风格，进入android5.0后，Material Design被广泛应用，这时候的操作栏我们叫应用栏了，是用来显示应用的标识、应用导航、内容搜索以及其他操作，比如这样的，

从上面图中不难看出，android4.0和5.0的区别在于下拉菜单变成左侧抽屉导航，看下对比图，

在这里也有个设计小技巧，上面我们列的都是一级导航，当导航条目很多时，我们就会考虑设计二级导航，而这时候如果选择把二级导航直接加在一级抽屉导航里，像这样，

如果是选择这样的设计，不难看出，左侧导航条目变得非常多，也不便于用户进行切换。那么这时候，我们可以把左侧的二级导航放到页面中，实现在某一个主导航下面进行子导航的一个切换，如图：

以上是IOS和android在页面布局上的不同，而在控件上，两者也存在着差异，我们可以列举几个常见的，比如滑块控件、开关控件等，具体的可到官网下载相关控件进行对比，这里不一一列举了，

除了页面布局和控件上的不同，两大平台在手势操作上也有些差异，我们常见的手势有点击、双击、长按等，

那在操作上，各个手势所达到的效果也不同，而IOS平台跟Android平台在同一个效果上所使用的手势也会有所不同，比如删除行为，IOS使用轻扫手势，而Android则是长按删除。

好咧，上面就是这篇文章要写的，ios和android系统中一些交互上的差异化的点。正是这些大大小小的使用方式的差异，造成了两边用户不同的使用习惯的差别。也正是这样大大小小的差异，造成了两个不同系统使用体验的不同。

所以，基于不同系统上要上线的app们，都需要遵循不同系统的规范去做设计。

想做好手机端的设计，掌握好规范是前提。