『交互设计经验分享』信息交互设计金字塔法则

本文由卓衡科技运营总监刘鹏分享。文中刘鹏讲述了他们在创业过程中总结出的交互设计的金字塔法则。

1417416154475138

金字塔方法这个说法来源于美国著名的现代管理咨询公司麦肯锡。大致的意思就是:任何事情都能归纳出一个中心点,而此中心论点可以由数个一级论据支撑,这些一级论据也可以被数个二级论据支撑,如此延伸,状如金字塔。

1417416175423608

当然,你也可以说这个说法最早来源于中国的老子,因为他曾在《道德经》中说:道生一,一生二,二生三,三生万物。

对于一般展示型的信息的交互设计,我们的观点是其设计核心不仅在于不断丰富信息的表现形式,更在于不断提升其被感知的速度与精准度。

对应这个观点,我们所采用的方法是:把信息展示的重点与交互行为的主任务优先展示,再根据用户在这个界面上所愿停留的时间逐级给予更多细节,我们把这种方法称之为“信息交互设计金字塔法则”

下面这种布局类型的网站大家一定还有映像,就是一打开网站,会有个大大的 Flash,先是暴长的 Loading,然后出现一个声光化电但不知所云的 Flash 一通播放,右下角通常还有个小的英文字,写着 Skip。

1417416192637807

悲剧的是,通常我们通过漫长而耐心等待之后看完这样的东西,反应是这样的。

1417416216358449

因为大多数情况下我们实在不知道他们想要告诉我们的到底是什么,只是觉得浪费了我们太多时间。

如果想让用户有效的接收信息,那么就必须从人对信息的感知特点来谈起。通常说来,人对色彩的感知速度大过图形,而对图形的感知速度又大于语言和文字,好的设计,顺应人的感知速度,运用金字塔法则来分层级地展示,让信息得到更迅速,或更精准的传达。

1417416250362442

人对于信息的接收和解读,其实是一个从模糊到精确,从定性到定量的过程。好的设计,会关注人感知信息的过程,以及在不同感知阶段的心理体验。

所以我们现在看到越来越多的信息展示型网站变成了这个样子。进入网站后,首先看到的是大图和主题文字,然后下面有更多细节的入口。

1417416410147950

说到这儿,我们来举个最近身边的例子吧。大家都知道,苹果最近推出了视网膜屏的 MacBook Pro(张鹏分享的时间),为了向大家介绍这款产品的特性并促成销售,让我们来看看苹果在他们的官方网站上是如何做的。

1417416709833862

接下来,让我们用金字塔法则来对这个网页进行一个分析。

1417416733742413

如果我们在这个网页上停留的时间只有三秒钟,那么我们看到的就只有一个核心卖点——视网膜屏,以及一个被强调的主任务——购买。如果浏览者碰巧是一个我这样的脑残型果粉,可能直接扑上去就点了那个蓝色的 Buy Now。

但通常人们会在确定有兴趣之后想得到更多的辅助信息。那么很好,当我们打算在这个网页上多停留一点时间,比如三分钟,那么把这个网页向下拖一拖我们能看到这台机器的四个主要卖点:视网膜屏、全闪存架构、机体更纤薄以及速度更快。这就是金字塔的第二级。

如果你觉得这些信息还不够呢?很好,你可以通过这四个主要卖点下面的 Learn more 点击进去,进行长达半个小时以上的浏览,直到你完全了解了这台新机器的特性。在这里,我整理了一张视网膜屏 MBP 特性介绍的思维导图,大家能看到越进入金字塔的底部,我们所得到的信息也就越多,细节也就越丰富。

1417416763608392

对于分层式信息展示,我们通常会先考虑页面整体的色彩倾向,同时对一级信息作重点展示,对二级信息作缩略展示,提供提供三级信息的交互展示或提供入口。这部分工作需要重视信息与数据的可视化,强调在第一时间传递核心信息,别让我想。

设计师做信息架构的时候除了关心信息的展示,同时还会关注用户的心理与行为,从而为之设计一系列的交互。

接下来让我们从交互的角度,来看看苹果是怎么做的。

1417416810519970

首先,金字塔的最上层,也就是核心的主任务,就是购买。如果用户的意愿很强烈和直接,那么在第一时间,就能找到那个被重点突出和强调的 Buy now,如果用户只是有兴趣,购买的意愿还不是很强烈,那么首先应该分层次多渠道的让了解更多的信息,然后不失时机的来通过增值服务和聪明的帮助来增强用 户的购买意愿,在用户产生了足够强烈的意愿之后,根据用户自身的情况,提供和推荐更多的渠道选择确保交易的最终达成。

1417416833713845

针对用户行为,我们首先要关注的是用户的主任务,然后需要关注不同类型用户在不同阶段的心理特点,适时地出现帮助,为用户提供多个选择而不是主动替用户作出决定。

信息交互设计的金字塔法则,不仅十我们用来判断一个信息交互设计是否优秀的方法,同时也是我们自己做此类设计时的一个指导原则。

鉴于时间的关系,在这里我能跟大家分享就只有这么小小的,然而实用的一招。如果以后机会,也许我们可以一同探讨下诸如“如来神掌”之类的华丽大招。

原创文章,作者:Smiler李想,如若转载,请注明出处:https://www.iamue.com/3521/

(0)
Smiler李想Smiler李想
上一篇 2015-01-27 13:28
下一篇 2015-01-27 13:38

相关推荐

  • [官方]mockplus视频教程:10分钟玩转mockplus

    官方出品教程,10分钟快速了解一下mockplus软件操作基础。 视频免费播放地址

    2015-06-30
  • 通过减少认知超载提升用户体验(下)

    “怎样才能改善用户体验设计?这是关于用户体验研究恒久不变的话题。今天给大家推送的是关于运用认知心理学中的相关理论来提升用户体验的研究。希望对大家有帮助。 文章过长,分成上下两篇,上篇可查阅《通过减少认知超载,提升用户体验(上)》。

    2017-05-06
  • 如何保持交互与视觉的协调性

    转自微信号: 作者:小云子  我是UE / woshiue 我不想贬低文字的重要性,但也不想忽视视觉。两者是同等重要的交互设计元素。文字就是交互,但那些视觉元素(比如图标、菜单、图像等)才是用户实际上操作的东西。虽然…

    2015-03-30
  • 智能场景设计:深入场景和意图的体验设计

    “hey各位!我们要开始做一件重要的事了!”陈老湿已经走到我们的工位前,兴致昂扬地说道,“竞对已经上线了类似的功能,我们得抓紧了。上海那边出了方案,看,在这里!”

    2017-05-23
  • Sketch的一些常用技巧

    谈不上译文,汇总了一些文章当中介绍的tips,包括常用快捷键和一些小技巧。最后一条还蛮亮的,很实用,我怎么没想到这样做。

    2017-05-19
  • 快速搞定日常专题,我的流程与案列分享

    有一些朋友问我能不能分享一些关于活动专题的,但是我始终觉得我前面分享的已经很多了,在banner上自己去提升和延展就已经是日常的专题活动了。

    2017-05-15
  • 这场UED界的大会堪比最近最火爆的雄安楼市

    2011年,阿里UED委员会的几位童鞋一商量,想给互联网的UED们一个搭交流学习的场子,就发起了第一届UCAN。如今,UCAN已经从阿里的UED的大团建发展成了国内最热门的设计大会之一。2017届的UCAN今天在阿里巴巴西溪园区召开,小编在现场看到走道都坐着人,800多人的场子,10000人报名,快赶上抢房摇号的阵仗了。报名的观众不但专业齐全,视觉、交互、用研、工程师、产品经理一个不拉,而且来自的公司阵容也很强大,腾讯、百度、亚马逊……...

    2018-02-01
  • 交互设计新人在阿里的走心实习总结 ▏新手设计成长指南

    互联网行业的设计师,工作中是埋头苦干?还是想要寻找一些能真正提升自己的“诀窍”?其实很多时候,所谓“诀窍”,就是厘清自己的思路,让成长有正确的方向。本文的作者走心地梳理了他在阿里几个月的实习期里为他留下…

    2017-08-04
  • 响应式网页图片库设计的九个注意事项

    响应式设计 无疑是当前网页设计 领域当中,不可忽略的必要组成部分。而响应式网页中的图片显示又是老生常谈的问题,许多争论集中在响应式网站的图片应当怎么展示。继续延伸开来,那么响应式网站中的图片库应当如何设计呢?

    2017-05-25
  • 交互设计 | 张艺谋这样玩儿

    3 月 4 日,张艺谋导演的观念演出《对话·寓言 2047》在上海大剧院正式演出。在连演两场之后,他们将移师广州和杭州,共同组成《对话·寓言 2047》第二季的演出。尽管被称为第二季,但此次演出的内容与去年 6 月在国家大剧院上演的第一季大体相似。开场仍旧是 71 岁的蒙古族老人其布日一边编织着麻绳,一边唱着悠扬的蒙古长调。背景中,美国先锋艺术家 Daniel Wurtzel 利用空气动力学原理,让一块云纱在舞台上翩翩飞舞。在这个段落之...

    2018-03-06