又半个多月没更新了,惭愧…
这段时间因为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的交互操作上,两大平台之间的操作区别已经越来越不明显了,有点求同存异的感觉。而造成这一现象最直观的原因,当然是所有设计者都明白的一个道理:一切设计的目的,都是以用户的使用场景为中心的!
我是叁月,咱们下期再见~