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

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

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

相关推荐

  • 华为朱平:用大服务把用户体验引向极致

    4月12日,华为新旗舰手机P20系列发布,同时还发布了保时捷设计Mate RS,以及多款产品。2018年,是手机市场艰难的一年,4G换机和消费升级带来的市场红利正在逐渐失去,5G尚未到来,市场进入一个相对低潮期。这样一个情况下,众多手机厂商面临了较大的市场压力。在这样困难的市场环境下,华为怎么巩固自己的市场地位,甚至扩大市场?华为一惯的态度就是用产品说话,用大大领先对手的产品来证明自己。其实我关心的是,华为P20
    Pro这样的产品,已...

    2018-04-21
  • 用户体验才是真正的“一句顶一万句” 安徽燕之坊食品公司用勤哲软件实现生产、经营和管理数据的互联互通

    统计数据显示,截止2017年底,国内食品工业企业超过4万家,主营业务收入占全国工业的比重十分之一强。在实施制造强国战略和推进健康中国建设中,食品工业作为传统的“以食为天”的民生产业占据着不可或缺的重要位置。当前,食品行业在实现快速发展的过程中,面对城乡居民安全、多样、健康、营养、方便的食品消费需求时,与其他行业一样面临着转型、升级的动能和压力。尤其是在食品质量安全水平和高品质食品有效供给方面,利用现代信息技术创新消除安全和质量隐患等领域...

    2018-02-13
  • 广告与用户体验只能二选一?

    最近公司的移动端产品在优化广告投放,其中也遇到了不少的困惑,我翻看了部分APP的广告展现形式并结合了几位设计师&产品经理的想法之后,整理总结出了这篇文章。本文将结合实际案例就常见的广告形式以及它们如何合适地呈现与大家进行分享。遇到的困惑我们知道无论是自身的品牌活动宣传还是第三方的商业广告都能为公司和产品带来不小的收益,但与此同时不恰当的广告也会对用户体验造成很大的影响,特别是移动端,因为屏幕有限更是“寸土寸金”,一不小心就会引起用户反感...

    2018-04-04
  • 默认头像设计(1) —— 统一与丰富间的平衡

    头像设计,“统一”与“丰富”间的平衡。

    2017-08-04
  • 【面试】不吹牛13,我是如何7天拿到百度&网易&创新工厂等6个实习offer的...

      “不卑不吭,保持谦逊”,这是管静总结的与HR和面试官打交道的八字法典。 又是一个40度的夏天,没有喧闹,只有窗外吱吱的蝉鸣。刚过完大三的同学,都开始了寻找实习的路程,有人欢喜有人愁。就读于贵州一所普…

    交互设计 2015-08-17
  • 将Axure移动端原型生成二维码教程(二维码支持微信等app扫描访问)

    使用Axure制作完成移动端原型以后,如果需要在手机上进行演示,该如何进行操作呢?普通的方法就是将原型文件上传到托管平台上面,然后生成一个URL链接发送到手机上用浏览器打开。如果能将URL链接生成一个二维码,直接用微信或QQ等应用直接扫描就能打开原型,这样访问体验能有很大的提升。所以今天这篇分享就是教大家如何将Axure制作的移动端原型生成二维码。下面这个就是我用原型链接生成的二维码图片,直接用微信或QQ扫描这个二维码就能体验到效果。链...

    2018-03-24
  • 如何应对「为什么用这个颜色/字体/按钮」的问题?

    作为一名设计师,被质疑简直是家常便饭。相信你们在日常工作中,一定被人问过:“对于这个点,你为什么这样做而不是那样?为什么选这个颜色而不是那个?”之类的问题。其实,这也是面试中的必问问题。乍看起来,确实有点难回答。但每一个问题,其实都有他的思考路线图。今天笔者就来谈谈,如何通过交互的四个维度来入手,巧妙地破解这个问题。你为什么要设计一个白色的登录按钮?为什么选这个字体?

    2017-05-15
  • Apple Watch超细致的硬件交互设计?什么!硬件还有交互设计?

    阿西导读:交互设计在任何有与人产生交互的设备|系统中,人机交互的范围很广,但交互设计的目的是为了提升整体的用户体验. 冷锻不锈钢,炼就强韧与魅力。 产品的用途,决定产品所用的材质。Apple Watch 设计的初衷是为…

    2015-01-26
  • 关于Android和IOS交互上那些事

    先说Android平台,自从material design面世以来,市场上很多Android app在设计上参差不齐。可能由于设备及用户使用习惯等各种原因,大多数app都还在以Android 4.0的规范在做设计,当然也有很多app为了省事,直接从iOS上照搬过来。因此,真正以MD为设计基础的应用并不多。下面是一些整体的框架记录,更为详细的交互细节以后再说。

    2017-06-03
  • 利用github预览axure发布的文件

    目的github不仅仅可作为一款代码开源库平台及版本控制系统,百度百科对其定义为私有或开源软件项目管理平台,今天在此向不会使用Git的同学们普及下利用github预览Axure发布的原型文件。准备阶段1、github desktop。下载地址:https://desktop.github.com/2、 github账号。注册详情:https://blog.csdn.net/p10010/article/details/51336332下...

    2018-05-04