更多课程 选择中心


UI培训

400-111-8989

【UI设计】如何做好扁平化设计-交互篇


扁平化不仅仅是界面视觉扁平无立体感,更应该是交互体验的扁平化,信息架构的扁平化

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

1.结构层级减少-高效

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

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

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

1)并列

将并列的信息显示在同一个界面中,减少页面的跳转。

如何做好扁平化设计-交互篇

2)快捷方式

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

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

如何做好扁平化设计-交互篇

3)显示关键信息

这是豆瓣电影的购票流程

如何做好扁平化设计-交互篇

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

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

4)减少点按

例:

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

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

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

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

2.表达方式直白-准确

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

例:摇一摇

如何做好扁平化设计-交互篇

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

3.信息直观-有序

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

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

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

这里关于整理的话题其实有很多,就不具体展开了,具体相关书籍《佐藤可士和超级整理术》

干净整洁有序,永远比杂乱无章跟让人赏心悦目,及时在信息量很大的情况下,在有序的环境里面找起来也会比较方便快捷。

4.一致性

1.功能的一致性:

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

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

5.其他

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

小结:

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

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

预约申请免费试听课

填写下面表单即可预约申请免费试听! 怕学不会?助教全程陪读,随时解惑!担心就业?一地学习,可全国推荐就业!

上一篇:【Ps基础教程】04 CMYK色彩模式
下一篇:【设计经验】界面设计时该如何面对视觉误差?

PS教程之使用PS快速做长图

在UI设计中,如何让你的UI设计更有个性?

UI设计免费自学教程分享

达内教育面向全国用户提供免费课程!(文中申请)

  • 扫码领取资料

    回复关键字:视频资料

    免费领取 达内课程视频学习资料

Copyright © 2023 Tedu.cn All Rights Reserved 京ICP备08000853号-56 京公网安备 11010802029508号 达内时代科技集团有限公司 版权所有

选择城市和中心
贵州省

广西省

海南省