原文出处: http://mux.alimama.com/posts/1301
Tip1:信息不要同时全部展示,阶段性地向用户展示当前场景里必要的信息

设计师经常犯的错误:同时将大量信息展示给用户。不要一次性大量提供信息,可以在当前场景下只提供必要的信息来满足当前的需求。

因为用户中存在着,一、不需要引导的高端用户;二、同时也存在需要详细说明的低端用户。

1、逐步展示信息,而不是一次性展示。
2、重要的不是点击次数。如果每次点击都能获得必要的信息,用户会很享受点击的快乐。
3、理解是谁、什么时候、需求什么。
4、如果无法准确得把握各阶段需求什么,这个方法就行不通。

Q:这个在设计上,是怎么体现的呢?

A:在必须提供3、4个以上的信息的情况下,先提示信息种类的分类,然后进一步选择。

例如:AU官网的菜单,使用了最近流行的向下展开的菜单方式。

Au.kddi http://www.au.kddi.com/

Tips2:人贪图有更多的选择,但大量的选项会麻痹人的思考

有个被称为“果酱”的实验。

这个实验证实了:“当人们有太多的选项时,最后什么都不选。”

具体例子:在超市中设置商品展位,在中途更换展位桌子上排列的商品。展位桌子上放置了供客人试吃的果酱,前半部分实验时间里放置了6种果酱,后半部分实验时间里放置了24种果酱。

结果如何呢?

放置24种果酱的时候,停下来的顾客有60%(试吃了其中几种果酱) ,但购买率只有3%

放置6种果酱的时候,停下来的顾客有40%,购买率却高达31%

这个实验结果告诉我们什么?

有多种选项的时候,大脑会兴奋,导致人们驻足观看。
选项过多的时候,人们只会尝试其中的几种。
选项少的时候,人们会全部尝试一遍。可以使用这样的方式引导人们购买。
这个在设计上,是怎么体现的呢?

如果完全按照顾客的需求来设计,就需要增加大量的菜单,banner和推荐商品页面。

「当人们有太多的选项时,最后什么都不选。还没开始选择之前就觉得麻烦。」设计之前,把这句话记住吧。

下面这个网站的推荐商品被经过仔细挑选后才展示出来。

Momastore http://www.momastore.jp/

当询问用户希望有什么选项时,往往会得到“全部” “很多”之类的回答。让我们试着拒绝用户这样的要求吧。

少的选项更让我们有了细细挑选的欲望,再多的选项也只是让我们只想尝试其中的几种而已。

Tips3:人像照片最引人注目

人脑有专门识别人脸的区域。

那么,是什么意思呢?

网页中最引人注目的是人脸。
人脸有引导视线的作用。
能在一屏内看完一张人像照片的需求很强。
这个在设计上,是怎么体现的呢?

用照片来吸引第一视线是很有效的。

Okasan.saiyo http://okasan.saiyo.jp/new_graduate/

想吸引用户注意banner等区域时,人脸是非常有效的。

Liginc.co http://liginc.co.jp/

人们首先凭借“外观”和“感觉”来判断是否值得信任

Elizabeth Sirens的研究小组,针对健康类网站的测试中得到这样的结论。

认定为不被信任的网站的原因,83%的测试者表示与设计有关。
被认定为可信任网站的决定性因素,74%是设计和内容起到作用。

[label][转载][web-design-psychology]网页设计心理的更多相关文章

  1. 转载 Web前端开发 HTML设计 经验与技巧总结

    文章目录1.限制input 输入框只能输入纯数字.限制长度.默认显示文字2.input输入框自动获取焦点3.用CSS让背景有透明度文字不变4.a标签禁止点击5.文字两种居中对齐6.设置一个元素一直在页 ...

  2. 自适应网页设计(Responsive Web Design)别名(响应式web设计)转载阮一峰

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

  3. (转)自适应网页设计(或称为响应式web设计)(Responsive Web Design)

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

  4. [转]自适应网页设计(Responsive Web Design)

    本文转自:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 作者: 阮一峰 日期: 2012年5月 1日 随着3G的普 ...

  5. 自适应网页设计(Responsive Web Design)

    引用:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面 ...

  6. 自适应网页设计(Responsive Web Design)(转)

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

  7. 自适应网页设计(Responsive Web Design)(转)

    作者: 阮一峰 出处:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 随着3G的普及,越来越多的人使用手机上网. 移 ...

  8. 阮一峰:自适应网页设计(Responsive Web Design)别名(响应式web设计)

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

  9. [转]如何设计自适应屏幕大小的网页 Responsive Web Design

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

随机推荐

  1. java课程设计-坦克大战

    团队课程设计博客链接 个人负责模块 枚举类.工具类.子弹类.图片素材的查找,地图制作 Git管理 包名类名的命名 详细说明 枚举类 如 单人和双人模式 工具类 将每个图片的路径使用字符串保存,便于调用 ...

  2. Linux 开发环境搭建与使用——SlickEdit 的安装与配置

    SlickEdit 的介绍 vim 是公认很好用很完美,但是对新手来说,上手毕竟不是很容易.Windows 下程序员很多都很喜欢Source Insight 这个工具来看代码,各种语法高亮看着很舒服. ...

  3. 花瓶使用笔记 (抓数据时,记得添加host,不然抓不了包的)

    情况一: 有时候抓不了app的数据,那么把app的host 添加一下就可以了 proxy > SSL Proxying Settings 情况二: 开了 翻 墙 是抓不了包的! (掉了一次坑)

  4. [转]C# 测试网络连接

    原文链接:http://blog.csdn.net/lsfa1234/article/details/6291228 using System; using System.Web; using Sys ...

  5. mysql-13处理重复数据

    1.防止表中出现重复数据 在mysql数据表中设置指定的字段为主键或唯一索引来保证数据的唯一行. -- 方法1:指定主键 create `table person_tbl`( `first_name` ...

  6. Jenkins迁移

    Jenkins:http://192.168.1.240:8080/jenkins 重启jenkins: sudo /etc/init.d/jenkins start sudo /etc/init.d ...

  7. solr查询优化(实践了一下效果比较明显)

    什么是filtercache? solr应用中为了提高查询速度有可以利用几种cache来优化查询速度,分别是fieldValueCache,queryResultCache,documentCache ...

  8. 深度解析Java中的那把锁

    锁的本质 我们先来讨论锁的出现是为了解决什么问题,锁要保证的事情其实很好理解,同一件事(一个代码块)在同一时刻只能由一个人(线程)操作. 这里所说的锁为排他锁,暂不考虑读写锁的情况 我们在这里打个比方 ...

  9. Shell脚本的特性

    bash shell特性 1.命令补全和文件路径补全, 如果写错无法补全 table 2.命令历史记忆功能history 3.别名功能alias.unalias 4.常用快捷键ctrl+u,k,a,e ...

  10. 372. Super Pow.txt

    ▶ 指数取模运算 ab % m ▶ 参考维基 https://en.wikipedia.org/wiki/Modular_exponentiation,给了几种计算方法:暴力计算法,保存中间结果法(分 ...