当前位置 > 主页 > 万和大讲堂 >


南京UI培训分享如何做好扁平化设计-交互篇

2016-06-06 11:36

  扁平化不仅仅是界面视觉扁平无立体感,更应该是交互体验的扁平化,信息架构的扁平化。今天南京万和UI培训和大家分享的是如何做好扁平化设计,希望能给到大家一些思路。


  有哪些方法可以做到交互扁平化?


  1.结构层级减少-高效


  先从字面意思来理解交互的“扁平化”,与之相对应的应该是“结构层级”,在这里我理解为交互步骤,以前也一直在强调精简交互步骤,想要用户用最少的步骤就完成任务,显然这里是要求层级结构的扁平,所以交互步骤和层级结构是相互关联的。


  web网页更注重深广度的平衡。由于手机设备的限制,手机主界面的广度大大减弱,信息深度更为明显。


  我们怎样才能做到在移动端减少结构层级从而精简交互步骤。总结了以下几种方法:


  1)并列


  将并列的信息显示在同一个界面中,减少页面的跳转。更多内容,咨询南京万和UI培训



  2)快捷方式


  以ios7为例,在任意界面只要向上滑动都能从底部呼出一个快捷菜单。


  设置wifi 和手电筒什么的可以直接从这个菜单里面操作。




  3)显示关键信息



  这是豆瓣电影的购票流程


  步骤是:选择影片===选座购票===选择影院


  在“选择影院”这个界面中除了显示出影院名称,还显示出了“最低价”xx元起,以及余下场次,还有是否可以购票这些关键信息,这里结合场景考虑,用户既然点了“选座购买”那用户的购买欲应该是很强的,这样在这里显示出的关键信息,就能使得用户在选择影院的同时也能看到最低价,不用在挨个影院点进去看了,也能加快购买效率。更多内容,咨询南京万和UI培训


  4)减少点按


  例:


  ios7关闭后台程序,只需要用手指轻轻往上一滑走就关闭了


  滑动手势这类型的操作一定要设计的自然,否则用户找不到点哪里不知道怎么操作就会产生挫败感而放弃使用。


  从上面的例子可以看出层级结构减少,交互步骤必然减少,无疑让用户的使用效率得到了提高。


  移动端由于设备本身的限制,没有足够的空间来展示路径,如果没有清晰的层级关系,这可能就意味着用户很有可能迷失方向,甚至要进入深层次的信息才能找到他们想要的,这时更应该做的是减少信息的深度。


  2.表达方式直白-准确


  做法可以是减少按钮和选项,让使用更简洁。


  例:摇一摇



  摇一摇,用户的本能反映,不需要任何解释,连小孩都知道,只要拿着手机晃动就能实现这个功能。


  3.信息直观-有序


  现在小屏幕设备流行,致使我们更需要减少过度繁杂元素的交互界面设计,让信息更直观的展示。


  如果需求的信息少,功能少,那么要做直观很容易,其实现在很多产品都不是在做大而全的东西了,这是一个很好的趋势。但是很多情况下,我们面临的产品信息量过大的情况,那么我们怎么才能让信息直观了?


  把互联网里大量的信息整理的有序清晰,让用户能根据你整理的清晰分类快速找到自己需要的东西。


  干净整洁有序,永远比杂乱无章跟让人赏心悦目,及时在信息量很大的情况下,在有序的环境里面找起来也会比较方便快捷。更多内容,咨询南京万和UI培训


  4.一致性


  1.功能的一致性:


  2.平台与平台之间的无缝体验


  保证一致性也是扁平化很重要的一点,减少学习成本,提高使用效率。


  5.其他


  响应和反馈,我觉得应该算扁平化中比较重要的一点,界面应该提醒用户发生了什么事,让用户了解这些反馈信息,在用户出错的时候他们能清晰的知道该怎么做。否则用户在不知所措的情况下,往往就会选择离开。


  小结:


  有效的整理信息,减少层级结构,功能表达方式直白等等都是使交互扁平化的多种手段。


  交互的扁平化设计,其实是一个概念,是一种内在的设计思想,目的是能在环境需求多种变化的情况下,依旧能提高用户体验的一种方法。


  想和兴趣相投的朋友们一起交流吗?那就来江苏万和计算机培训中心吧。江苏万和作为专业的南京UI培训中心,还会定期邀请知名企业的高级UI/UE设计师,项目经理为学生做经验分享会,参与到国内各大UI设计圈沟通交流群,让更多的UI大咖成为你的人脉朋友。

最近开班 more>
  • Python基础班
  • Java全栈开发
  • 前端基础班
  • 软件测试
  • 云原生精英班
  • 云网预科班
  • CISP
  • HCIE-Datacom(HCIA,HCIP基础)
  • HCIP-Datacom(HCIA基础)
  • HCIA-Datacom(0基础)
  • HCIE-Datacom(HCIA,HCIP基础)
  • HCIP-Datacom(HCIA基础)
  • HCIA-Datacom(0基础)
  • OCM 12C
  • OCP 19C
  • RHCE 9.0
  • 随时开课
  • 12月26日
  • 随时开课
  • 12月4日
  • 12月16日
  • 12月9日
  • 12月21日
  • 1月6日
  • 12月30日
  • 12月16日
  • 12月21日
  • 12月7日
  • 12月7日
  • ——
  • 随时开课
  • 12月16日
    • 姓 名 :
    • 电 话 :
    • 课 程 :

技术交流群

  • Java大数据交流群560819979加入
  • Python技术交流群595083299加入
  • Oracle技术交流群595119011加入
  • Web前端技术交流群604697610加入
  • Huawei技术交流群482919361加入
  • Redhat技术交流群587875348加入
  • UI设计技术交流群511649801加入
  • Cisco技术交流群596886705加入
  • IT运维技术交流群605888381加入