作家
登录

高大上的扁平化交互设计

作者: 来源: 2014-01-26 09:44:55 阅读 我要评论 直达商品

   写在前面的话:(看正文请直接跳到分割线处)

  当写完“做好扁平化设计:视觉篇”给到各位设计师看求指点的时候。

  大家吐槽了:

  有人说“只有交互扁平了,视觉才好做扁平……”

  还有人说“如果一个产品把希望寄托于视觉上,想靠视觉来表现产品的扁平化,显然是不靠谱的……”

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

  在进入正题之前,我们先来看一个例子,我发现有人用科幻电影中的UI画面来和扁平化视觉相比较,他们说这是未来界面的一个发展趋势,确实这和现在的UI画面有一定的相似地方,来看一些电影画面截图。投影光感和色块的组合简洁明了,看起来很有未来感和设计感。

1

  但是我更认为这应该是交互扁平化的代表,还记得在《谍中谍4》里面有个场景:

  汤姆·克鲁斯的敞篷轿跑车与恐怖分子在迪拜的沙暴中追逐,带来了影片的高潮。我自己当时对这一段的印象非常深刻。

  在追逐开始的时候,副驾的美女就用投影在挡风玻璃上显示出了导航,追逐的位子速度等相关信息,并开始相关操作,给阿汤哥指挥。最后成功追到恐怖分子。

2

  可以看到这里的界面视觉表现是以投影光感和色块为主非常扁平,但是如果它的交互操作和信息展现不够扁平的话,副驾的美女点半天也找不到位置,甚至在一眼看上去不知道这个界面要怎么操作的话,呵呵,不要谈追逐恐怖分子了,估计自己都抓狂了~

  (这里可以详见电影情节)

  同样,如果一个产品你拿到后不知道他想表达什么,也不知道要怎么用的,点了半天也找不到你想找的信息的时候,估计这会儿你已经没有耐心了,要不了一分钟你就会把它卸载掉。如果视觉好看一点的话或许能吸引你停留的久一点,但最终你不会成为他的忠实用户。

  所以,交互扁平化和信息扁平化的重要性不言而喻。

  Noteloop:专业收集电影中的UI界面部分,有兴趣的同学可以看看.

  —————————–分割线,言归正传—————————–

  先我们来看为什么扁平化会那么来势汹汹.

  这是因为我们的需求环境在发生变化。以前我们没有ipad没有智能手机,只有pc,我们只有电脑环境需求,所以扁不扁平化似乎没有多重要,再来看现在我们有着多种智能设备,需要在各个场景各个设备上随时切换,可以看到从pc到各手持设备的趋势是越来越明显。

  随着各种智能设备的多样性和普及,交互界面需要变得更容易适应其变化,很显然扁平的交互界面要比其它样式要更容易处理。移动互联网向着需要低配置、高效能,个性化以及优质用户体验的方向发展。我们必需快速响应这个趋势。

  其实在“扁平化”这个词流行以前,我们一直都在强调交互的易用性和创造优质用户体验,并一直在努力往这方面去做。其实在我看来“扁平化”这个词,是这些设计目标的一个总概念,可以很宽泛,应该是一种内在的设计思想。

  接下来,我们来看看能有哪些方法可以做到交互扁平化。

  一、结构层级减少——高效

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

  我们先来理解下什么是层级结构

3

  (素材来源:eico)

  从图中可以看出来,这个是一个树形结构,在树形结构中

  链接的层数被称为深度(z轴),最底层页面包含的页面总数被称为链接的广度(x轴)。纵向(y轴)很多情况下都只有一层,放的多都是一些消息提醒和快捷方式。

  来看看pc端的web界面(以淘宝为例),最底层页面就是他的首页,包含的页面综述非常丰富,可以看到从广度来讲覆盖面是非常大的。

4

  来看深度

  从鞋包配饰-到女鞋-到单鞋-到单鞋的各种类型

5
6

  可以看出,web网页更注重深广度的平衡。

  再来看看手机端,很显然如果直接把web上的结构搬到手机上是行不通的,由于手机设备的限制,淘宝的手机主界面的广度大大减弱,信息深度更为明显。

  pc上我们可以用面包屑路径或者各种导航清晰的表现出层级结构,让用户不在复杂的层级机构中迷路。但是在移动设备上显示区域有限,没有足够的地方用来放这样的路径,更多的时候我们只能用back。所以这也印证了前面所说的扁平化来势汹汹的趋势。

  我们怎样才能做到在移动端减少结构层级从而精简交互步骤。总结了以下几种方法,也欢迎大家参与讨论。

 1/4    1 2 3 4 下一页 尾页

  推荐阅读

  20个非常值得看的超级小网站

  现代网络都是引起你的关注,给力的内容和服务了许多广告的可能,所以它总是以精简其赤裸的要点最多的留住用户。小编今天的展示网站的特点20最小的设计,不使用噱头或艳>>>详细阅读


本文标题:高大上的扁平化交互设计

地址:http://www.lgo100.com/a/blog/20140126/292553.html

关键词

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
我的评论: 人参与评论
验证码: 匿名回答
网友评论(点击查看更多条评论)
友情提示: 登录后发表评论,可以直接从评论中的用户名进入您的个人空间,让更多网友认识您。
自媒体专栏

评论

热度