惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

V
Vulnerabilities – Threatpost
aimingoo的专栏
aimingoo的专栏
B
Blog
H
Hackread – Cybersecurity News, Data Breaches, AI and More
GbyAI
GbyAI
阮一峰的网络日志
阮一峰的网络日志
Engineering at Meta
Engineering at Meta
IT之家
IT之家
V
Visual Studio Blog
The Cloudflare Blog
酷 壳 – CoolShell
酷 壳 – CoolShell
A
About on SuperTechFans
博客园 - 聂微东
Blog — PlanetScale
Blog — PlanetScale
N
News and Events Feed by Topic
A
Arctic Wolf
WordPress大学
WordPress大学
小众软件
小众软件
C
CERT Recently Published Vulnerability Notes
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
D
Darknet – Hacking Tools, Hacker News & Cyber Security
F
Fortinet All Blogs
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
Y
Y Combinator Blog
T
Threat Research - Cisco Blogs
Latest news
Latest news
Simon Willison's Weblog
Simon Willison's Weblog
Cyberwarzone
Cyberwarzone
S
Schneier on Security
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
L
Lohrmann on Cybersecurity
Stack Overflow Blog
Stack Overflow Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
P
Privacy International News Feed
J
Java Code Geeks
Spread Privacy
Spread Privacy
宝玉的分享
宝玉的分享
I
Intezer
L
LangChain Blog
Hacker News - Newest:
Hacker News - Newest: "LLM"
G
GRAHAM CLULEY
博客园 - 叶小钗
博客园 - 三生石上(FineUI控件)
The GitHub Blog
The GitHub Blog
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
N
News and Events Feed by Topic
AWS News Blog
AWS News Blog
Attack and Defense Labs
Attack and Defense Labs
Security Archives - TechRepublic
Security Archives - TechRepublic
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO

张鑫旭-鑫空间-鑫生活

1分钟速度了解text-align match-parent声明 « 张鑫旭-鑫空间-鑫生活 光标的形状也能设置了,就是CSS caret-shape属性 « 张鑫旭-鑫空间-鑫生活 pretext与文字四面环绕效果的实现 « 张鑫旭-鑫空间-鑫生活 JSON.rawJSON方法的作用是什么? « 张鑫旭-鑫空间-鑫生活 如何使用CSS判断鼠标从哪个方向进入元素? « 张鑫旭-鑫空间-鑫生活 借助mediabunny纯JS实现视频水印、剪裁、合成等功能 « 张鑫旭-鑫空间-鑫生活 务必谨慎使用JS WeakRef弱引用 « 张鑫旭-鑫空间-鑫生活 CSS六边形头像的实现与蜂巢布局 « 张鑫旭-鑫空间-鑫生活 CSS corner-shape与背景底纹技术 « 张鑫旭-鑫空间-鑫生活 浅学WebTransport API:下一代Web双向通信技术 « 张鑫旭-鑫空间-鑫生活 HTML dialog元素新支持了closedBy属性 « 张鑫旭-鑫空间-鑫生活 HTML interestfor属性与悬停popover交互效果 « 张鑫旭-鑫空间-鑫生活 CSS3模拟window7炫酷界面效果展示 « 张鑫旭-鑫空间-鑫生活 图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活 纯js无图片无外链CSS图片幻灯片播放插件 « 张鑫旭-鑫空间-鑫生活 CSS border三角、圆角图形生成技术简介 « 张鑫旭-鑫空间-鑫生活 CSS “渐进增强”在web制作中常见应用举例 « 张鑫旭-鑫空间-鑫生活 让IE6/IE7/IE8浏览器支持CSS3属性 « 张鑫旭-鑫空间-鑫生活 jQuery – 高亮动态显示页面HTML代码插件 « 张鑫旭-鑫空间-鑫生活 翻译 – 逐渐消失的Flash网站 « 张鑫旭-鑫空间-鑫生活 CSS reset的重新审视 – 避免样式重置 « 张鑫旭-鑫空间-鑫生活 新浪微博插入话题后部分文字选中的js实现 « 张鑫旭-鑫空间-鑫生活 JavaScript实现http地址自动检测并添加URL链接 « 张鑫旭-鑫空间-鑫生活 CSS实现兼容性的渐变背景(gradient)效果 « 张鑫旭-鑫空间-鑫生活 CSS content内容生成技术以及应用 « 张鑫旭-鑫空间-鑫生活 CSS gradient渐变之webkit核心浏览器下的使用 « 张鑫旭-鑫空间-鑫生活 CSS渐变之CSS3 gradient在Firefox3.6下的使用 « 张鑫旭-鑫空间-鑫生活 区分IE8/IE7/IE6及其他浏览器-CSS “\9″hack « 张鑫旭-鑫空间-鑫生活 CSS实现跨浏览器兼容性的盒阴影效果 « 张鑫旭-鑫空间-鑫生活 CSS3&HTML5各浏览器支持情况一览表 « 张鑫旭-鑫空间-鑫生活 翻译 – CSS Sprites:实用技术还是生厌之物? « 张鑫旭-鑫空间-鑫生活 纯CSS实现易拉罐3D滚动效果 « 张鑫旭-鑫空间-鑫生活 纯CSS实现侧边栏/分栏高度自动相等 « 张鑫旭-鑫空间-鑫生活 CSS+JavaScript实现页面不同布局的切换 « 张鑫旭-鑫空间-鑫生活 JavaScript实现最简单的拖拽效果 « 张鑫旭-鑫空间-鑫生活 自己写的无图片版jQuery zxxbox弹出框插件 « 张鑫旭-鑫空间-鑫生活 中国古代道家思想与网页重构的思考 « 张鑫旭-鑫空间-鑫生活 让所有浏览器支持HTML5 video视频标签 « 张鑫旭-鑫空间-鑫生活 纯CSS实现各类气球泡泡对话框效果 « 张鑫旭-鑫空间-鑫生活 JS HEX十六进制与RGB, HSL颜色的相互转换 « 张鑫旭-鑫空间-鑫生活 CSS实现兼容性的渐变、高光等文字效果 « 张鑫旭-鑫空间-鑫生活 去除冗余 – 精简您的CSS样式代码 « 张鑫旭-鑫空间-鑫生活 对overflow与zoom”清除浮动”的一些认识 « 张鑫旭-鑫空间-鑫生活 jQuery Pagination Ajax分页插件中文详解 « 张鑫旭-鑫空间-鑫生活 absolute绝对定位的非绝对定位用法 « 张鑫旭-鑫空间-鑫生活 网页布局思想浅议-淘宝新版首页为实例 « 张鑫旭-鑫空间-鑫生活 回流与重绘:CSS性能让JavaScript变慢? « 张鑫旭-鑫空间-鑫生活 CSS float浮动的深入研究、详解及拓展(二) « 张鑫旭-鑫空间-鑫生活 CSS float浮动的深入研究、详解及拓展(一) « 张鑫旭-鑫空间-鑫生活 60个极富创造性的震撼的电影海报设计 « 张鑫旭-鑫空间-鑫生活 jQuery Lightbox(balupton版)图片展示插件讲解 « 张鑫旭-鑫空间-鑫生活 博客内嵌flash音乐播放器代码、下载与使用 « 张鑫旭-鑫空间-鑫生活 CSS3 animate实现图片墙3D翻转效果 « 张鑫旭-鑫空间-鑫生活 图片旋转效果的一些研究、jQuery插件及实例 « 张鑫旭-鑫空间-鑫生活 CSS3 border-image详解、应用及jQuery插件 « 张鑫旭-鑫空间-鑫生活 jQuery-两款不同原理的圆角插件讲解 « 张鑫旭-鑫空间-鑫生活 页面可用性之outline轮廓外框的一些研究 « 张鑫旭-鑫空间-鑫生活 CSS3 transition实现超酷图片墙动画效果 « 张鑫旭-鑫空间-鑫生活 HTML CSS列表元素ul,ol,dl的研究与应用 « 张鑫旭-鑫空间-鑫生活 jQuery图片文本滚动切换插件jCarousel中文翻译与详解 « 张鑫旭-鑫空间-鑫生活 酷酷的jQuery鼠标悬停图片放大切换显示效果 « 张鑫旭-鑫空间-鑫生活 IE6下z-index犯癫不起作用bug的初步研究 « 张鑫旭-鑫空间-鑫生活 checkbox复选框的一些深入研究与理解 « 张鑫旭-鑫空间-鑫生活 jQuery之使用slideToggle实现垂直下拉菜单 « 张鑫旭-鑫空间-鑫生活 jQuery-innerfade内部列表自动淡入淡出插件 « 张鑫旭-鑫空间-鑫生活 jQuery-火焰灯效果导航菜单 « 张鑫旭-鑫空间-鑫生活 IE下css bug集合-翻译自haslayout.net « 张鑫旭-鑫空间-鑫生活 翻译-IE7/8@font-face嵌入字体与文字平滑 « 张鑫旭-鑫空间-鑫生活 jQuery-马化腾产品设计与用户体验的一些技术实现 « 张鑫旭-鑫空间-鑫生活 像素的世界及其在web开发制作中的应用 « 张鑫旭-鑫空间-鑫生活 css行高line-height的一些深入理解及应用 « 张鑫旭-鑫空间-鑫生活 CSS实现圆角六色渐变自适应按钮详解 « 张鑫旭-鑫空间-鑫生活 我熟知的三种三栏网页宽度自适应布局方法 « 张鑫旭-鑫空间-鑫生活 jQuery照片图像剪裁插件Jcrop中文翻译详解 « 张鑫旭-鑫空间-鑫生活 Ajax Upload多文件上传插件翻译及中文演示 « 张鑫旭-鑫空间-鑫生活 告别图片—使用字符实现兼容性的圆角尖角效果beta版 « 张鑫旭-鑫空间-鑫生活 大小不固定的图片、多行文字的水平垂直居中 « 张鑫旭-鑫空间-鑫生活 jQuery boxy弹出层对话框插件中文演示及讲解 « 张鑫旭-鑫空间-鑫生活 JavaScript实现新浪微博文字放大显示动画效果 « 张鑫旭-鑫空间-鑫生活 翻译:让网络更快一些——最小化浏览器中的回流(reflow) « 张鑫旭-鑫空间-鑫生活 jQuery之addClasas与removeClass使用实例 « 张鑫旭-鑫空间-鑫生活 关于Google圆角高光高宽自适应按钮及其拓展 « 张鑫旭-鑫空间-鑫生活 JavaScript实现图片幻灯片滚动播放动画效果 « 张鑫旭-鑫空间-鑫生活 jQuery-鼠标经过显示大图并跟随鼠标效果插件 « 张鑫旭-鑫空间-鑫生活 关于gif图片(或png8)杂边锯齿的问题 « 张鑫旭-鑫空间-鑫生活 对html与body的一些研究与理解 « 张鑫旭-鑫空间-鑫生活 鲜为人知的一个解决兼容性问题的利器——小数 « 张鑫旭-鑫空间-鑫生活 搜狐白社会似iphone短信对话框效果的优化 « 张鑫旭-鑫空间-鑫生活 关于文字内容溢出用点点点(…)省略号表示 « 张鑫旭-鑫空间-鑫生活 jquery之append与insertBefore使用实例 « 张鑫旭-鑫空间-鑫生活 jQuery之图片关联伸缩效果 « 张鑫旭-鑫空间-鑫生活 jquery之图片左右切换动画效果 « 张鑫旭-鑫空间-鑫生活 jQuery之replace字符串替换实现不同尺寸图片切换 « 张鑫旭-鑫空间-鑫生活 jQuery-实现图片的放大镜显示效果 « 张鑫旭-鑫空间-鑫生活 jQuery-单击文字或图片内容放大显示效果插件 « 张鑫旭-鑫空间-鑫生活 reflection.js-实现图片投影倒影效果js插件 « 张鑫旭-鑫空间-鑫生活 jQuery-很酷的弹出层效果js插件 « 张鑫旭-鑫空间-鑫生活 复选框单选框与文字对齐问题的研究与解决 « 张鑫旭-鑫空间-鑫生活 css margin的相关属性,问题及应用 « 张鑫旭-鑫空间-鑫生活 IE6下png背景不透明问题的综合拓展 « 张鑫旭-鑫空间-鑫生活
翻译 – 从心理学角度看UX设计 « 张鑫旭-鑫空间-鑫生活
张鑫旭,zhangxinxu · 2010-05-28 · via 张鑫旭-鑫空间-鑫生活

这篇文章发布于 2010年05月28日,星期五,20:21,归类于 Design相关, 外文翻译。 阅读 57924 次, 今日 1 次 5 条评论

by zhangxinxu from http://www.zhangxinxu.com
本文地址:http://www.zhangxinxu.com/wordpress/?p=827

本文是一篇非常不错的关于用户体验设计的文章,本文作者是一个心理学家,他从他所研究的领域去看到用户行为,用户体验,相信会给你带来不一样的观念与知识。翻译水平有限,若有不准确之处欢迎指正。

——————————以下为翻译的全文——————————

您可能已经听说过这个关于大象的故事:

一个国王带六名男子进入一个黑暗的建筑里,他们看不到任何东西。国王对他们说,“我已经把这个动物从荒野的土地上买到了东方,这种动物称之为‘大象’。” “大象是个什么东西?”男人问。国王说:“你们可以感觉他,然后描述给我。”摸到一条腿的男人说,大象就像一个支柱。触摸到尾巴的人说,大象像绳子。摸到躯干的人说,大象像树枝。摸到耳朵的人说,大象像一把扇子,摸到肚子的则说大象像一堵墙,而另外一个摸到象牙的人则说大象像一个坚实的管道。 “你们都是正确的”,国王说,“你们都仅仅感觉到了大象的一部分。”

这个大象的故事提醒了我有着不同背景,教育和经验的人们对于设计总有着不同是视角。视觉设计师从这种观点角度处理UX设计,交互设计师会是另外的角度,而程序员又会是另外的视角。这有助于理解甚至体验其他人所体验的大象的那部分内容。

我是一个通过培训和教育的心理学家。因此,我所经历的那部分大象适用于我们对人的一些了解以及我们是如何将其应用到UX设计中。我所从事的研究和知识是关于大脑,视觉系统,记忆和动机,以及从中推断出UX设计原则。

本文是一个心理学家对大象看法的快照。

本文作者:张鑫旭,欢迎访问我的个人网站。

1. 人们不希望多做额外的工作或思考

  • 人们会用尽可能少的工作量来完成任务。
  • 最好只向他们展示一点点的信息,如果他们想要更多详情,让他们自己选择。用一个富有想象力的词描述就是渐进披露,关于这个,最近我写了一篇博文
  • 不要仅仅描述东西,取而代之的是向人们展示例子.
  • 要多多关注你设计的的屏幕,网页,或硬件设备上对象的功能可见性。如果什么东西是可以点击的,就把它做成可以点击的样子。
  • 只提供人们真正需要的功能 。不要依赖于你自己的观点,从你的角度认为他们需要什么,应做用户研究,去找到用户真正需要的是什么。给予的比用户需要的还要多只会扰乱用户的体验。
  • 提供默认值。默认值让人们以更少的工作量来完成这项工作。

2. 人是有局限性的

  • 人们只能看到这么多的信息,或只能在屏幕上看到这么多的文字而没有失去兴趣。在某一时刻只需要提供必要的信息(见上面的渐进披露)。
  • 使信息容易扫描.
  • 使用页眉和短块的信息或文本。
  • 人们不能多任务。这份研究已经显示的很清楚了,所以不要痴心妄想了。
  • 人们喜欢短线的长度,但他们在长线时阅读更好!这是一个难题,因此在实际情况下,选择用户偏好呢还是性能就更为重要。但是有一点需要要知道:人们要索求的东西,对他们而言,其实不是最好的.

3. 人是会犯错滴

  • 假设人们会犯错误。预想他们会做什么,以及努力防止这么做。
  • 如果一个错误的结果是严重的,需在用户行动之时,动作执行之前使用一个确认。
  • 可以很容易地“复原”。
  • 防止发生错误总是比在错误发生时帮助人们纠正它要来得好。最好的信息是没有错误的信息.
  • 如果一个任务是容易出错的,把它打破成小块.
  • 如果用户出错同时你可以纠正它,那你就做吧,并展示你是如何做的。
  • 无论是谁设计UX都会出错的,所以,要确保有足够的时间用于迭代,用户反馈和测试。

4. 人类的记忆是复杂的

  • 人们重建记忆,这意味着他们总是不断变化的。你可以信任用户所说并以之为真理的仅那么一点点。观察他们的举止操作比采用他们的话来得更实在。
  • 记忆是脆弱的。它退化迅速并受制于很多错误。不要让人们从一个任务到另一个时记东西,或从一个网页到另一个。
  • 人们一次只记得大约在3-4个项目。“7加或减2”的规则只是都市传说。研究表明,实际数字是3-4。

5. 人是具有社会性的

  • 人们总是尝试利用技术来社交 。几千年来都是如此。
  • 人们对于自己要做的事情总是倾向于向他人寻求指导 ,特别是当他们不确定的时候。这就是所谓的社会确认。这就是为什么,例如,评级和评论在网站上会如此强大。
  • 如果人们在同一时间做同样的事情(同步的行为)将其绑定在一起 ,其实是大脑的化学反应在作祟。笑声也是会传染的。
  • 如果你帮我我一个忙,我会觉得回欠你一个人情(互惠主义)。研究表明,如果你希望人们填写一份表格,给他们他们想要的东西,然后要求他们填写表格,而不是相反。
  • 当你看着某人做某事,你的大脑相同的区域会被激活好像你自己也在做这样的事(所谓的镜像神经元)。我们因生物程序而模仿。如果你希望人们做一些事情,可以给他展示别人在做这些事。
  • 您最多只能和150人有密切联系的。强关系被定义为和你身体有近距离接触的。但是,弱关系可以在数以千计的,而且非常有影响力的(见facebook)。

本文作者:张鑫旭,欢迎访问我的个人网站。

6. 注意力

  • 我开始思考注意力的整个概念是设计有吸引力的UI的关键。在以后的文章的我会更多的探讨这个。吸引并紧紧抓住注意力,在人们专注于某些事情的时候不分散他们的注意力,这些才是关键问题。
  • 人们就像被程序控制一样会去注意不同的或是新颖的东西。如果你让某物不同,它会突显出来。
  • 话虽如此,人们实际上会忽视一些视觉区域的变化。这就是所谓的改变失明。这里有些搞笑的视频,是关于一个在街上与他人谈论的人的视频(此人已经停住并询问方向),但是却没有注意到这个人确切什么时候做出了变化。
  • 你可以利用感官来吸引注意。鲜艳的颜色,大字体,蜂鸣声和铃声将捕获注意。
  • 人们很容易分心。如果你不希望他们分心,不在网页上放闪光的东西或启动影片。但是,如果你想抓住他们的注意力,做这些事情。

本文作者:张鑫旭,欢迎访问我的个人网站。

7. 人们渴求信息

  • 多巴胺是一种化学物质,使人们追求…食品,性,信息。学习就像是多巴胺,我们不禁想了解更多的信息。
  • 人们往往会希望有超过他们实际上可处理的更多的信息。有更多的信息,使人们感到他们有更多的选择。有更多的选择,使人们感到一切尽在掌控。控制的感觉让人觉得他们会更好地生存。
  • 人们需要反馈。计算机不需要知道人类是在载入文件。但人类需要知道当前发生之事.

本文作者:张鑫旭,欢迎访问我的个人网站。

8. 无意识加工

  • 大部分的心理过程是无意识发生的.
  • 如果你能使得人们完成一个小小的行动(报名申请免费会员),那么就很有可能,他们随后将付诸于于一个更大的动作(例如,升级到高级账户)。
  • 原始的大脑做或者至少放进去了大部分的决定。我们大脑的原始部分关心的是的生存和繁殖:事物,性,和危险。这就是为什么这三个信息可以引起我们的关注。
  • 负责情感的大脑易受到照片影响,尤其是人的照片,或是故事类的。情感脑区对我们的决定有着巨大的影响。
  • 人们的行为会深深地被他们甚至都不知道的因素影响。词语“退休”,“佛罗里达”和“累”,甚至可以让年轻人在大厅里走得慢些(称为情境影响)。
  • 无论是原始大脑还是情绪的大脑在工作时总与我们的有意识的知识不相干。我们总习惯归于理性,用脑中存在的意识的解释我们的决定,但它绝不是我们会采取某个行动的全部原因,而且经常是理性根本不在原因之内。

9. 人们创建心理模型

  • 人们往往有一个心理模型来替代某个特定对象或任务(支付账单,读书,使用遥控器)。
  • 人们在特定任务上的心理模型,可能会让你设计的交互界面很容易或很难使用。
  • 为了创造一个积极的UX,你可以让你的产品或网站的概念模型与用户的心理模型想匹配,也可以想出如何“教”的用户有不同的心理模型。
  • 象征帮助用户“获取”一个概念模型。例如,“这就像读书一样”。
  • 做用户研究最最重要的原因就是获得用户的心理模型。

10. 视觉系统

  • 如果网页是凌乱的,让人找不到的信息。使用分组帮助我们眼睛聚焦。
  • 靠在一起会让人相信他们是“一伙”的.
  • 字体足够大。不使用的太花哨的字体以便易于阅读。
  • 研究表明,人们使用周边视野得到他们正在寻找的东西的“要点”。眼睛跟踪研究是有趣的,只是因为人们眼睛直直的盯着某东西并不意味着他们在关注它。
  • 最难看的颜色组合是红色和蓝色。 尽量避免在蓝色背景上使用红色的文字,反之亦然。
  • 当有轻微的向上的角度和透视的的时候,人们可以最好的识别屏幕上的物体(标准透视)。
  • 颜色可用于显示东西是否是一起的 。一定要使用另一种方式表现出同样的信息,因为有些人是色盲。

那么,什么是你的大象的描述?

——————————以上为翻译的全文——————————

译者注:UX指用户体验,UX设计指以用户体验为中心的设计

本文为原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=827

(本篇完)