原文出处: 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. 关于OkHttp–支持SPDY协议的高效HTTP库 com.squareup.okhttp

    转载:http://liuzhichao.com/p/1707.html OkHttp–支持SPDY协议的高效HTTP库 柳志超博客 » Program » Andriod » OkHttp–支持SP ...

  2. html5播放mp4视频代码

    1.nginx支持flv和mp4格式播放 默认yum安装nginx centos7安装nginx时候应该是默认安装nginx_mod_h264_streaming模块的 # nginx -V查看是否安 ...

  3. hackerrank Week of Code 31

    https://www.hackerrank.com/contests/w31/challenges Beautiful Word 模拟 Accurate Sorting 检查每个数字距离原位是否都不 ...

  4. hadoop2.6.0的eclipse插件编译和设置

    编译hadoop2.6.0的eclipse插件 下载源码: git clone https://github.com/winghc/hadoop2x-eclipse-plugin.git 编译源码: ...

  5. shell编程: 获得目录下(包括子目录)所有文件名,路径和文件大小

    转自:http://blog.chinaunix.net/uid-26000296-id-3575475.html function ergodic(){ ` do "/"$fil ...

  6. 安装Android studio出现'tools.jar' seems to be not in Android Studio classpath......的解决方法

    安装Android studio出现'tools.jar' seems to be not in Android Studio classpath......的解决方法 原创 2015年07月31日 ...

  7. js格式化时间 js格式化时间戳

    一个js格式化时间和js格式化时间戳的例子. 代码:/** * 时间对象的格式化; */Date.prototype.format = function(format) { /* * eg:forma ...

  8. Yii中使用RBAC完全指南

    开始准备 Yii提供了强大的配置机制和很多现成的类库.在Yii中使用RBAC是很简单的,完全不需要再写RBAC代码.所以准备工作就是,打开编辑器,跟我来.设置参数.建立数据库 在配置数组中,增加以下内 ...

  9. Spring 3.1 entityManagerFactory java.lang.NoSuchFieldError: NULL Error

    This means there is a version mismatch--most likely with spring classes. So make sure all your sprin ...

  10. XML解析的二种方法之Sax解析

    package com.huawei.xml; import java.io.InputStream;import java.util.Stack; import javax.xml.parsers. ...