note-of-Designing-the-Moment-Hoekman,R

Table of Contents

• 1 用户习惯
• 2 我们的任务
  • 2.1 设计吸引人的第一印象。
  • 2.2 令人心动的第一印象
    • 2.2.1 弄清楚目标
  • 2.3 发现页面布局
  • 2.4 small tricks
    • 2.4.1 古滕堡图表
    • 2.4.2 颜色来吸引注意。
    • 2.4.3 logo
    • 2.4.4 拥有一个重复出现的符号来突出风格
• 3 导航之道
• 4 链接生来不平等
  • 4.1 新闻栏的改进
• 5 标签云里抬头看路
• 6 开门见山
• 7 为界面做标记
• 8 搜索
• 9 视频播放器
• 10 巩固你的表单布局
  • 10.1 做好“确定”、“取消”按钮
• 11 驾驭Wizard向导
  • 11.1 为用户建立清晰的预期
• 12 最后的一英里，即时校验
  • 12.1 要纠错
  • 12.2 也要赞扬，告诉用户“到现在为止一切都好”
  • 12.3 实时更新信息
• 13 简化长表单
  • 13.1 长表单带来的问题
  • 13.2 如何改进它- 清晰的预期
• 14 说词：为什么要做好网页

1 用户习惯

当我们面对一个并不熟悉的网页时，通常都会先扫视一下整个页面，进行大概了解，然后再决定自己是否应该深入游览。这一过程称作“着陆”。

因此，第一印象十分重要！

2 我们的任务

2.1 设计吸引人的第一印象。

作为Web设计师，我们工作就是要帮助用户“着陆”，越快越好。

本书前几章介绍的是，用户访问某页面头30秒钟发生的事。

2.2 令人心动的第一印象

2.2.1 弄清楚目标

这个网站是做什么的，主要业务是什么？ 需要明白这一点，而不是简单把所有元素罗列的页面上。 如果一个站点的业务目地是吸引游览者注册成会员，那么就要在展示好所有元素后，设计诱使用户点击的"sign up now"按钮

2.3 发现页面布局

布局是内容组织的必然结果。 所以不是我们选择布局，而是布局选择了我们。

2.4 small tricks

设计时我们商量把Sign up now按钮改成绿色，

2.4.1 古滕堡图表

人们游览网页时，视线由左上移动到右下，左上角为第一视觉落点去，右下角则是最终视觉落点去。相对右上角和左下角是视觉盲点去。 依据此，可以归纳重要内容和次要内容的大概位置。我们常见的对话框也同样遵循从左到右，上到下的视觉规律。

2.4.2 颜色来吸引注意。

人类对物体间的差异性更敏感，所以当某个元素的颜色与其他的形成反差时，能吸引人的注意力。 通过将逻辑相符合（如logo-百叶窗-sign up按钮)用相同颜色捆绑到一起，用户的视线将顺此次序移动（由站点logo–到有趣的百叶窗–sign up按钮）。这样，用相同颜色引导视线。

2.4.3 logo

标志是一个非常简单的logo,包含了两个单词Love和Rage，由一个“+”隔开。这是从茨鲁霍曼执导的莎士比亚的Romeo+Juliet电影中得来的。 在这个logo下，有一个小小的，手绘的的心形图标，从而规程了整个标志。

2.4.4 拥有一个重复出现的符号来突出风格

只需让符号简单地在网站重复出现，以某种延续的趋势来保持一致的主题风格。 如，Hillman为影片 Bend It like Beckham设计官网时，把网站焦点集中在了一个足球上，让它带领用户从一个栏目到另一个栏目，足球符号整合了所有设计元素。

3 导航之道

令人不解的术语、拙劣的组织不利于疏导用户。

人们获得导向的方法： 粗略扫视一遍页面，看自己有哪些选择，然后直接忽略不感兴趣的。而当某个符合需要的链接出现时，我们会更为仔细地查看与其毗邻的文字，确认是否是我们需要的，如果是则点击。

也就是说，用户来到某个页面是为了达到自己想要到的地方。

下拉菜单的某个类过大，导致类中各个选项毫无联系，难以辨别。例如，“创建新页面”和“编辑联系信息”选项明显毫无关系。没有一个用户回想：我要编辑联系信息，所以应该到Site菜单去找。

软件并不是为了我们能单击那些按钮而存在。它是为了我们能完成任何而存在。这样我们才能达到我们目地。所以导航栏不是陈列在按钮上的一串名词，而应该帮助我们感觉自己正在做一些事情，让我们找到当司机的感觉。人类不喜欢按软件要求，而喜欢软件顺应自己的需求。 如微软的Word，它的菜单所包含的选项都是为了用户去做某件事情，例如Edit，View。 那些术语应该显示为动宾词组，而不是又抽又过时的名词。

1级菜单- 2级菜单 Design- Web page/Navigation Creat- New page/ Forum/ Coming Soon page Manage- Templates & colors/ Fonts Customize- Site organization/ Files/ Contact information/ Account

这更贴切用户使用网站的心理。用户只会想:哦，“我想要编辑”，或者“我现在想自定义一些东西”。 这样导航直接表达出了意志，就不用让用户费心翻译自己的意识来寻找对应的网站导航。

不用Login,这是个名词，意思是the login interface，用sign in。

*所以我们应该尽量用动词描述菜单*

4 链接生来不平等

4.1 新闻栏的改进

公司内部网首页的标题列表，让职员了解最新事件。按时间顺序排列，一共5个。 从最简单的设计开始，创建了一个简单的链接列表。 下一步，让用户明白从上到下的标题是按什么顺序排列的。 放弃加说明文字，因为web应用上的用户不喜欢不必要的阅读。第二方案：1，2，3，4，5的标号。但即使这样，他们之间还是平等的关系，相似度很高，区分度不大。 在这个公司（呼叫中心），最近时间往往最重要（对其他大部分公司来说也一样）。它意味公司某个环节发生突发事件，需要尽快通知客户。可能是计费系统故障、售后资源短缺。需要职员第一时间反应。而在这样单调的列表里，每一个链接都和其他链接如此相似，它怎样才能凹陷NO.1的重要性呢。日本城际铁路播放特殊音乐防止人们坐过站给了作者灵感，这种音乐就像虚拟的行车图，比语音播报辨识度更高。这叫“环境的提示”其他还包括行车的车窗的风景等。 所以作者舍弃列表编号，让新发布的文章更大，灰度更高，文章越旧大小越小，灰度越低。

岁月的痕迹。互联网的东西不会随着使用变旧。 *所以web设计师需要让那些古老的东西以某种方式让它们看起来古老。* 文章显示发布时间不够直观，而且有些网页根本不显示日期。 比如，三年前写的文章怎样与昨天写的文章在搜索结果里区别呢？

Google Reader的启示。里面的标签云，它大多数标签云更强大。除了字体大小之外，还是用颜色来表明某个链接受欢迎的程度。这面有一行说明文字：标签含有的项目越多，该标签字体越大，项目点击次数越多，该标签颜色越深。这种双重指示器（字体大小、文本颜色）是很好想法。所以修改新闻链接列表，让他们颜色由深到浅。

5 标签云里抬头看路

标签云是链接列表。按热门程度加重相应标签。最后结果看上去就像一片链接的“云层”。Flicky为第一个使用它的大型网站。于是某个博客把这个想法添加到自己的博客里。酷!

但这是不是有效创新。

用户如果不理解为什么有的链接深、有的链接字体大，那么标签云就没有意义。

页面布局、品牌商标、站点导航、环境提示，来疏导用户。

6 开门见山

人们通常不会阅读网页上的文字，而只是扫描。如果是很长的介绍性文字，人们往往直接忽略。

*也就是说篇幅短的文字才可能起作用*

在大量信息站点我们会专注阅读，然后在web应用时相反，我们会寻找线索。 用户做的事情是希望将事情搞定，而不是阅读，因此用户每个动作都是为了完成某件事情。比如，看到这个欢迎词时，我立即绕过它，集中注意力到课程列表上去，那才是这个页面最主要的交互元素。 用户只会扫描而不阅读，所以我们要“为扫描而设计”1：把welcome！换成Find a course.2：使用动词，“赶快行动”型词汇。对用户，简短比冗长更有意义。重要的不是量，是是否需要。

7 为界面做标记

不要假设用户具备某种经验。例如，弃“New project ID”用"New project ID(No spaces(e.g "MyProjectID")))"。假设用户无任何经验，随后给予足够信息帮助他们。

8 搜索

遵循标准，可以符合用户预期，不会冒险破坏用户习惯。如所有搜索引擎都将分页链接放在页面中间下端，如果我们网站放在其他地方，势必导致用户别扭。

提供回到搜索引擎结果列表的出口，即可以回到搜索前的状态。不要用return，因为用户不知道他们会return到哪里去。用<back to "…"。这样用户会知道他们的去处，gmail就是这样的。

递进显示大的表单。因为人们不喜欢逐项填写。根据实际需要展开表单。如advanced search。等一些非必填信息，否则用户会被如此大的表单吓倒，且下意识认为所有的空白都需要填写。

分步拆开长表单。注意有些网站注册，在填写完表单后，提交按钮是“下一步”/“next step”。

9 视频播放器

视频播放器常见问题，1：控制播放进度的滑块按钮过窄，视觉看起来难以点击。2：音量滑块太小。3：文本太小，视力有问题的用户难以阅读。3：视频标题不在嵌入播放器中，使用户分享困难，需要来回切换窗口写描述文字。

好的视频播放，1：抵制自动播放视频。2：页面载入后，播放器在视频狂的正中央显示一个大大的播放按钮。使用户明白他看到的不是一张图片，而是可以播放的视频。

10 巩固你的表单布局

表单会影响网站的可用性，好的表单可提升用户操作体验。

标签 （input的文字说明）左对齐（左）的表单会时标签与空白处对应关系不明显。

标签与空白处平衡（左右两列）的布局也降低了用户往下游览的速度。

标签右对齐能离空白处更近。但是会使左边不齐，文字称锯齿形，拐弯的。两列的布局仍会减缓用户往下浏览的速度。

决定一列显示标签+空白区。标签在上，空白区在下，左对齐。这样用户对应标签和空白区的速度最快，浏览速度更快。用户只需上下移动视线，不需先阅读左列标签、然后再瞥一眼右侧的空白区。

“我”设计的表单大都，单列布局，左对齐，标签在上。

10.1 做好“确定”、“取消”按钮

左对齐还是右对齐。左对齐使左边呈一条直线，而不是锯齿形。视觉支撑点。

按钮上的文字：“确定”、“取消”好吗？他们很省事，但意义更明确能帮助用户知道点击后会发生什么。

*人类最害怕未知。*

这个例子中单击OK，会发生什么?成为网站的注册用户。但在其他地方,OK表示保存设置或者其他。单击OK并不能使用户直观明白之后会发生什么。所以把按钮文字，从“OK”变成“Register Now”。

“确认”、“取消”按钮应该并列吗？

对设计师来说，这两个按钮的地位是一样的。

对用户，这个2个按钮是完全不同的。一个是用户注册，另一个是取消整个操作，但外观上一模一样。

*因为这个原因点错按钮的悲剧不算少吧。*

用户最有可能去点击OK按钮：首选处理方式（Primary Action）。而取消是不太可能的选择：第二处理方式（Secondary Action)。如果2个外观一样，用户就必须阅读决定按哪个。/*如果突出最有可能按的，那么就算用户瞎按一个，从概率上说，按对比例>按错比例，设计是合理的*/

菲兹法则指出：点击某个目标所花费的时间可以通过一个函数来求值，它与“鼠标与目标的距离”和“目标尺寸”密切相关。根据这一法则，最佳方法是从第二处理方式-“取消”按钮上减弱注意力。于是把它变成文字链接。这样相对的，Register Now按钮就更突出、更易于点击了。通过Cancel链接更不明显，更不容易点击到。

11 驾驭Wizard向导

Wizard向导是一种分布引导用户处理问题的过程。例如分步注册，很多网站的博客注册。例如复杂设置。形象地说，我们可以通过提供一系列“路标”为用户建立清晰的预期。

11.1 为用户建立清晰的预期

将流程明显地标出。使用户知道自己在第几步。例如文字标出，1、Create a compaign 2、Create an advertisement 3、….. 4、….. 用特殊颜色显示出当前步骤。

第二个解决方案：用垂直版面表示当前步骤。如：

1、Create a compaign.balabalabalabalabalabalabalabalabalabalabalabala2、Create a advertisment3、………4、 ……..

当用户填写完当前表单，并单击next后，第一个面板收起，第二个面板展开，并且焦点到第二个面板。

网页的垂直空间是无限的。

12 最后的一英里，即时校验

12.1 要纠错

用户会在填写表单时犯错误，这是表单设计的最关键问题。

许 多表单使用JavaScript警告对话框（alert()）。这是一种应用程序模式（application-modal）,也就是说在警告被处理之前，浏览器功能将被强制实效。然后并不是严重的错误（表单格式）就使用户浏览器实效是很粗鲁的。

不要只是把“User names must be at least 2 characters”仍在那，错误发生时，显示更多信息，如：“用户名必须：以字母开头；以字母或数字结尾；不能只包含数字；只能使用字母、数字、下划线或横线”，这样罗嗦但会使用户明白可选范围，并改正错误。

*还是消除未知*

12.2 也要赞扬，告诉用户“到现在为止一切都好”

除了检查到错误时立即显示出友好提示消息，告诉用户“一切都没问题”也很重要。例如，一些站点在用户输入完一个空白区，转到另一个空白区后，会立即检查输入是否正错，正确的话也会显示一个绿色的对号。

12.3 实时更新信息

我们使用了JavaScript根据到场者的人数即使更新总费用。在界面上改动人数，总金额会自动修改。

用户目标和业务目标能愉快交互是最好的。用户所希望的，也是业务所想做的，这才是最理想的任务。

*双赢*

上面的表单就是一例，用户希望尽快完成填写这样就能购买，业务角度也希望用户尽快达到这一目的。

13 简化长表单

13.1 长表单带来的问题

保险公司设计了一个页面，向用户提出3个问题，当用户回答是的时候，会请求更多信息。

用户努力完成这个表单时，失去了完成它的希望。每次表单增长一些，你就会心沉一些。沮丧感和焦虑随即而来。

其实真正页面并不长，打印出来2页，是网页的设计使它感觉起来很长。

13.2 如何改进它- 清晰的预期

通过减少完成表单需要的页面数，保险公司将所有东西放到一个页面中。但是无法建立一种何时可以完成的期望。（相比较witward方式）。

14 说词：为什么要做好网页

所有的网站都在展现某种个性，但这并不一定都是有意为之。很多时候个性都是在无意间流露出来的。这是，公司不知不觉间可能会把内部问题暴露在网站，即与客户开始接触的第一平台。比如，如果公司士气低落，网站设计可能乏味而毫无生气；而如果雇员激情，该公司网站则可能丰富多次啊。

即，网站代表了公司品牌。

不管有心还是无意，网站都会展现某种个性。时刻关注网站正在传达什么，并相应作出简单的改动，我们便能够往自己想要的任何方向修塑我们网上的形象。每个人都不愿让自己看上去单调乏味、毫无生气，大家都希望传达给游览者一种特殊的氛围。品牌标志以及源自品牌标志的符号，能够以一种文雅而易于理解的方式来传达信息。

Author: <zfreay@ZFREAY-PC>

Date: 2011-07-16 01:45:05

HTML generated by org-mode 6.33x in emacs 23