恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
设计丨回顾IOS与Android的交互设计规范及发展历程
0.0°
2019-08-17 原创文章 经验/观点 举报 1064 6 3 2

交互设计规范,不外乎就是各个平台对于设计风格、设计方案以及交互方式的一些约定俗成。按照这些约定,既可以保证快速的实现产品设计,又可以满足本平台用户的使用习惯。


又半个多月没更新了,惭愧…( 手动愧疚 ~、- )


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


Image title


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


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


Image title


为什么需要这些规范?


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


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


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


Image title


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


为什么这样说呢?ios是iPhone所使用的操作平台,iPhone的产品经过了这么多年的迭代,除了屏幕大小有所改变之外,其产品的基本造型大致上都是很一致的。同样在其操作平台上也是大体相同的。


在IOS的平台规范里面,它的界面上页眉和页脚都做出了相应的规定。页眉我们称为导航栏,主要是实现了页面的一些跳转以及当前页面的一些操作。底部的页脚通常会设计成工具栏或者标签栏。工具栏主要是放置一些我们对于当前页面的传统操作;标签栏主要是实现几个主要页面或者主要任务流程之间的快速切换。


Image title


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


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


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


IOS端的布局规范大概就是以上内容了,接下来我们看一下Android端。


Image title


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平台的操作规范一直在一步步完善。


Image title


回顾一下,4.0是Android系统一个标志性的时刻,谷歌在Android系统上实现了平板和手机的统一,于是将虚拟按钮作为Android系统的标配,从4.0开始没有配备硬件按钮设备将显示导航栏这一虚拟的系统栏。


与IOS页面的主要导航放在底部的标签栏上不同,由于它已经在底部有一个虚拟的导航栏了,所以Android 4.0把重要的系统操作放在了页眉,称之为操作栏,也叫action bar。它主要用于实现app内视图的切换和层级间的导航


Image title


在Android 4.0中,因为它底部有虚拟导航栏,导致它的操作栏只能放在顶部。这就促使它的页面布局肯定与IOS是不一样的,这里我将其总结为Android 4.0的四种页面布局:


第一种是一个大而全的顶部主操作栏,配合下拉菜单进行页面间的切换;


第二种是主操作栏加次级操作栏,将下拉菜单中的页面平铺到页面中;


第三种是主操作栏加底部工具栏,这样虽然会增加误操作的风险,但是会使页面干净简洁很多;


第四种则是主操作栏加次级操作栏再加底部工具栏,这是用于你的产品有很多的功能点。


Image title


到了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的交互操作上有很大的不同了。所以在没有严格规定的情况下,对于交互设计师而言,一套设计稿就可以完成工作,而一些不同的交互动作和交互流程,标注即可。


Image title


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


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


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


Image title


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

更新:2019-08-17

收藏

6人已收藏

丨叁月丨

微信GZH丨叁月杂谈 ;微信丨Mar_thinking

  • 5

    作品

  • 6

    粉丝

  • 0

    关注

  • 设计丨交互设计关键着用户体验
  • 叁月谈设计丨产品流程及交互设计师的定位(下)
  • 叁月谈设计丨产品流程及交互设计师的定位(上)
  • 叁月谈设计丨交互设计师到底是什么?

    猜你喜欢

      2019-08-17 原创文章 经验/观点 举报 1064 6 3 2

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

      0.0°

      你确定要举报设计丨回顾IOS与Android的交互设计规范及发展历程

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年08月17日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      3
      6
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录