[label][转载][web-design-psychology]网页设计心理
原文出处: 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]网页设计心理的更多相关文章
- 转载 Web前端开发 HTML设计 经验与技巧总结
文章目录1.限制input 输入框只能输入纯数字.限制长度.默认显示文字2.input输入框自动获取焦点3.用CSS让背景有透明度文字不变4.a标签禁止点击5.文字两种居中对齐6.设置一个元素一直在页 ...
- 自适应网页设计(Responsive Web Design)别名(响应式web设计)转载阮一峰
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...
- (转)自适应网页设计(或称为响应式web设计)(Responsive Web Design)
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...
- [转]自适应网页设计(Responsive Web Design)
本文转自:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 作者: 阮一峰 日期: 2012年5月 1日 随着3G的普 ...
- 自适应网页设计(Responsive Web Design)
引用:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面 ...
- 自适应网页设计(Responsive Web Design)(转)
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...
- 自适应网页设计(Responsive Web Design)(转)
作者: 阮一峰 出处:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 随着3G的普及,越来越多的人使用手机上网. 移 ...
- 阮一峰:自适应网页设计(Responsive Web Design)别名(响应式web设计)
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...
- [转]如何设计自适应屏幕大小的网页 Responsive Web Design
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...
随机推荐
- Bootstrap-CL:列表组
ylbtech-Bootstrap-CL:列表组 1.返回顶部 1. Bootstrap 列表组 本章我们将讲解列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: ...
- Sql2008 全文索引 简明教程
在SQL Server 中提供了一种名为全文索引的技术,可以大大提高从长字符串里搜索数 据的速度,不用在用LIKE这样低效率的模糊查询了. 下面简明的介绍如何使用Sql2008 全文索引 一.检查 ...
- C#直接解析Json键值对
string test_json = "{\"name\":\"tom\",\"nickname\":\"tony\&q ...
- 33.使用默认的execAndWait拦截器
转自:https://wenku.baidu.com/view/84fa86ae360cba1aa911da02.html 当我们进行数据库查询等相关的操作时,如果服务器负荷过重可能不能及时把数据查询 ...
- 关于directshow的SmartTee
可以通过CLSID_SmartTee创建: CComPtr<IBaseFilter> pSmartTee; // Create the Smart Tee (CLSID_SmartTee) ...
- 使用 phpStorm 开发
苦恼蛋疼的曾哥工作室,让人痛不欲生,缓慢的同步速度,另人恼火的插件配置,让人疯狂的卡.简直是让人用了几天之后就不行了. 废话不多说,一款很好的php IDE. 1. phpStorm 下载 here ...
- tfrecord
制作自己的TFRecord数据集,读取,显示及代码详解 http://blog.csdn.net/miaomiaoyuan/article/details/56865361
- css常用属性总结:关于word-spacing和letter-spacing的使用
前端时间项目版本迭代,修改代码时发现使用了关于word-spacing和letter-spacing.先说下使用场景,以前的项目中,经常遇到某些字符间有一些间距,我看了一些同事的代码是这么实现的: & ...
- kubernetes 示例 hello world
本文所说的Hello world是一个web留言板应用,并且是基于PHP+Redis的两层分布式架构的web应用,前端PHP web网站通过访问后端Redis数据库完成用户留言的查询和添加功能,具备读 ...
- 自制精排 ePub 集、不定期更新(UPDATA-2015-8-2)
说明 排版不说最好,上乘是必须的. 段落空行 首行缩进 具备清爽元数据 包含高清封面.目录 图片居中,图片标题以下标形式居中位于图片下* 支持多看/Kindle原生系统弹出注释,其他软件跳转注释* 各 ...