回顾IOS与Android的交互设计规范及发展历程

又半个多月没更新了，惭愧…

这段时间因为APP要改版，一直在开会、画线框、做原型什么的，趁着这阶段的工作已经完成，而且下午也不用在开会，总结梳理一下这段时间做原型图的一些收获感悟。

中国有句古话：温故而知新。在这段做原型的时间中，我翻看了很多以前的交互设计，以求有所感悟，可以做出让自己满意的东西。我想尝试着将一些“旧的”交互方式添加到改版中的某些地方，因为我坚信所有的东西都是有利有弊的，被淘汰的不一定绝对是不好的。

IOS和Android两大平台，他们各自拥有自己的一些设计规范。所谓的设计规范，不外乎就是各个平台对于设计风格、设计方案以及交互方式的一些约定俗成。按照这些约定，既可以保证快速的实现产品设计，又可以满足本平台用户的使用习惯。

为什么需要这些规范？

我们都知道，交通规则是随着现代交通发展而出现的一个衍生品；“红灯停，路灯行”“走在路上靠右行”这些事情从小就被父母挂在耳边天天念叨。特别是在自己可以独立去上学的时候，每次出门都会有一声“路上注意安全”在耳边响起。这些都是再教育我们要遵守交通规则。现在的都市车水马龙，正式因为有了交通规则的存在，才让我们的出行更加有了保障。特别是国内的交通，如果没有交通规则的存在，像北上广深这些城市，极有可能从早上上班一直堵车堵到晚上下班。

交通规则本身就是一个规范，正是有了这一规范才使得一切井然有序。在交通上如此，在设计领域也是如此了。如果所有人都是按照自己的意愿去做设计而没有一个统一的规范，那软件界面和交互就是五花八门的，用户体验更是无从谈起。

IOS和Android目前是移动端最大的两个操作平台，他们之间有共同的地方，也存在着一些差异，接下来我们一起看看，两个平台上具体的页面布局规范是怎样的。

IOS端的页面布局，大牛们称之为“经典的延续”。

为什么这样说呢？ios是iPhone所使用的操作平台，iPhone的产品经过了这么多年的迭代，除了屏幕大小有所改变之外，其产品的基本造型大致上都是很一致的。同样在其操作平台上也是大体相同的。在IOS的平台规范里面，它的界面上页眉和页脚都做出了相应的规定。页眉我们称为导航栏，主要是实现了页面的一些跳转以及当前页面的一些操作。底部的页脚通常会设计成工具栏或者标签栏。工具栏主要是放置一些我们对于当前页面的传统操作；标签栏主要是实现几个主要页面或者主要任务流程之间的快速切换。

在IOS端的app大多都是按照这样的规范去设计的，先简单的说一下，IOS对页眉、页脚的规定有哪些（后续我会特地写篇关于导航和列表交互操作的文章）。

页眉的导航栏主要是用来实现不同信息层级之间的交流，有时候也会用于管理当前屏幕的内容。例如通常我们在顶部会放置一个标题来表示当前页面的大致内容，左侧呢，会放一个返回按钮，右侧会放置一个操作按钮。

页脚大多会做成两种情况。其一是做成工具栏。工具栏是用于放置操作当前屏幕中各个对象的控件，例如网易邮箱底部就放置了回复、转发等控件。其二是做成标签栏，标签栏是让用户在不同的任务界面和模式之间进行切换，例如京东app的工具栏就放置了首页、分类以及发现、购物车和个人中心五个Tab，用来不同界面之间的快速切换。IOS端的布局规范大概就是以上内容了，接下来我们看一下Android端。

Android端的页面布局，大牛们总结为“变化与统一”。

为什么会有这样的一个总结，这就必须得说一下Android操作平台的发展历史了。

在2010年12月份，Android第一次推出了它的2.3系统，那时Android的整个硬件布局都是混乱的，所以平台规范更是无从谈起了。一直到了2011年2月份，Android推出了3.0系统，这是Android第一次为平板而设计的一个Android系统，在平板上第一次出现了一个虚拟按钮。紧接着，2011年10月份发布了4.0系统，4.0才是一个Android真正意义上可以拿的出手的操作平台，因为4.0整合了平板和手机规范，在3.0的基础上，4.0继续延续了虚拟按钮和虚拟导航的样式。时间终于来到了2014年10月份，Android推出了叫做Meterial Design的5.0系统，这才是Android真正最为详细的平台规范。再后来从2015年9月的Android 6.0一直到2018年5月份的Android 9.0，再到如今传说中的Android Q，Android平台的操作规范一直在一步步完善。

回顾一下，4.0是Android系统一个标志性的时刻，谷歌在Android系统上实现了平板和手机的统一，于是将虚拟按钮作为Android系统的标配，从4.0开始没有配备硬件按钮设备将显示导航栏这一虚拟的系统栏。与IOS页面的主要导航放在底部的标签栏上不同，由于它已经在底部有一个虚拟的导航栏了，所以Android 4.0把重要的系统操作放在了页眉，称之为操作栏，也叫action bar。它主要用于实现app内视图的切换和层级间的导航。

在Android 4.0中，因为它底部有虚拟导航栏，导致它的操作栏只能放在顶部。这就促使它的页面布局肯定与IOS是不一样的，这里我将其总结为Android 4.0的四种页面布局：第一种是一个大而全的顶部主操作栏，配合下拉菜单进行页面间的切换；第二种是主操作栏加次级操作栏，将下拉菜单中的页面平铺到页面中；第三种是主操作栏加底部工具栏，这样虽然会增加误操作的风险，但是会使页面干净简洁很多；第四种则是主操作栏加次级操作栏再加底部工具栏，这是用于你的产品有很多的功能点。

到了Android 5.0，出现了一个曾经红极一时的交互设计，抽屉式导航。Android 5.0出现的时候，IOS 7所引领的图标扁平化已经盛行，扁平化就是只有X轴和Y轴，Android 5.0为了让页面更加有质感，它在页面上添加了Z轴，Z轴所带来的的空间变化，会让页面更加有层次感和质感。同时，在顶部主操作栏的左边，添加了一个抽屉按钮，点击后会有一个抽屉式的展开。Android 5.0的操作规范说明中，大篇幅的介绍了这种抽屉式导航，Android对此非常的推崇。到了5.0，顶部的主操作栏称之为应用栏（APP Bar），用来显示应用的表示、应用导航、内容搜索以及其他操作。

发展至今，就用户而言，已经是很难看到IOS和Android在app的交互操作上有很大的不同了。所以在没有严格规定的情况下，对于交互设计师而言，一套设计稿就可以完成工作，而一些不同的交互动作和交互流程，标注即可。

最后总结一下两个平台常用的操作手势，其实在移动端的手势操作大多数是来源于我们的生活，例如在使用读书app的时候，它的翻页效果就是从我们生活中翻开图书这种手势提取来的，好的手势肯定是来源于生活而高于生活的。

在移动端采用手势操作有两个大的好处：一呢是比较直观化，不管是那个年龄段的使用人群，都可以凭借着直接去进行操作；第二呢，则是非常的高效，手势操作可以大大的降低用户去页面的一些操作成本。

在IOS和Android两个平台上，大部分操作手势都是相同的，但也会有一些不同，最直接的体现就是“删除”功能，IOS是向左侧滑动删除，Android是长按点击删除。在这种手势操作规范的“硬核”区，还是要按照其平台规范设计。而在一些“模糊”的区域，当然是本着方便用户操作的思想去设计。

在文章的最后，我想说规范只是帮助我们设计师去简单高效的设计页面，但是没有必要去循规蹈矩。更何况移动端发展到今天，就我个人而言，仅说在APP的交互操作上，两大平台之间的操作区别已经越来越不明显了，有点求同存异的感觉。而造成这一现象最直观的原因，当然是所有设计者都明白的一个道理：一切设计的目的，都是以用户的使用场景为中心的！

我是叁月，咱们下期再见~