《点石成金—网页设计秘笈》读书笔记

时间：2023-09-07 04:18:02 | 来源：网站运营

时间：2023-09-07 04:18:02 来源：网站运营

《点石成金—网页设计秘笈》读书笔记：说明：

笔记原封不动地保留了原版书的章节和标题；

章节下的正文是对该章节的概括总结，和必要的原文；

“#...#“代表原版书中有意思的例子和精彩的金句；

”【...】“代表我本人的批注；

斜体字代表书中对该正文的进一步解释说明，并且是原文抄；

而不重要的内容和章节会直接跳过；

作者认为：只有几乎能够替代原版书的读书笔记才是合格的手札。







— 让我们开始吧 —







本书是为了一群苦于不知道如何留住访问者的网页设计师而写，基于web用户的行为特征，讲授了网页交互设计的可用性原则。当然这些设计规则是可以打破的，只要你知道正在改造哪些规则，并且有坚固的依据支撑。。




#如果某个东西很难用，我就不会经常用它#【自由竞争市场下成立】







-原则指导-




第1章 别让我思考——Krug可用性第一定律




Krug可用性第一定律：网页内容需要不言而喻，或者在复杂页面设计的情况下，做到自我解释（ self-explanatory ）。




作者在这一章中列举了一些会让用户“思考”的地方：

1）为什么他们给它取这个名字？——往往网页文案会在专业性与易用性之间做权衡，少量斟酌后使用的文字

2）这个按钮能不能点击？——按钮需要明确向用户展现是否可以点击

3）我在什么位置？——导航要清晰

4）我该从哪里开始？——入口要清晰

5）他们把XX放在什么位置了？——重要功能要显而易见

6）这个页面最重要的是什么？——视觉重心




当我们访问Web，每个问号都会加重我们的认知负荷。而一位富有经验的设计师会注意到网页上所有让你思考的东西。







第2章 我们实际上是如何使用Web的——扫描，满意即可，勉强应付




如果想设计有效的网页，需要接受3个网站使用的事实：

1）我们不是阅读，而是扫描

一般注意力会用在具有下述特征的文字和短语上：① 与手头任务有关；② 我们当前和接下来的个人兴趣；③ 根深蒂固的触发器：美女/免费/大减价







2）我们不做最佳选择，而是合理即可

一旦我们发现一个链接，看起来似乎能跳到我们想去的地方，那就是一个我们将会点击它的大好机会

原因：① 寻找最佳策略很难，需要的时间很长 ② 如果猜错了，也不会产生什么严重的后果。如果网页载入速度很慢，我们会变得更慎重




3）我们不是追根究底，而是勉强应付

用户心智模型与产品设计模型不一致，人们在使用产品的同时，并不会思考工作原理

原因：① 这对我们来说并不重要。对于我们中的大多数人来说，是否明白事物背后的工作机制并不重要，只要我们能正常使用它们即可；② 如果发现某个事物能用，我们会一直用它。我们一旦发现某个事物能够用（不管有多难用），我们也不会太去找一种更好的方法。如果偶然发现一种更好的方法，我们会换用这种更好的方法，但很少会主动寻找更好的方法







第3章 广告牌设计101法则——为扫描设计，不为阅读设计




为了针对扫描式阅读，作者告诉我们网页设计需要注意5大点：




1）建立清楚的视觉层次

在视觉上体现内容之间的逻辑关系。一个视觉层次清楚的页面有3个特点：

① 越重要的部分越突出

最重要的标题要么字体更大、更粗，颜色更特别，旁边留有更多空白，更接近页面的顶部




② 逻辑上相关的部分在视觉上也相关——分组

把相近的内容分成一组，放在同一个标题之下，采用类似的显示样式，或者把它们全部放在一个定义明确的区域之内




③ 逻辑上包含的部分在视觉上进行嵌套




总之，如果一个页面没有清楚的视觉层次——例如，所有内容看起来都一样重要——我们会降低扫描页面的速度（也就是说，有视觉层次会有助于提高我们的阅读速度），寻找关键的文字和短语，然后拼凑出我们感觉重要的内容和内容的组织方式，增加了工作量




#分解一个在视觉层次上有问题的页面——例如，一个标题涵盖了不属于它的内容——就像读一个病句一样#




2）尽量利用习惯

减少用户学习负荷，采用没有学习曲线的方法




3）把页面划分成明确定义的区域出

把页面划分成明确定义的区域很重要，因为这可以让用户很快决定关注页面的哪些区域，或者放心地跳过哪些区域




4）明显地标识可以点击的地方

人们在网络上所做的大多数事情就是找到下一个地方点击，那么明确地标识哪些地方可以点击，哪些地方不能点击，很重要




5）降低视觉干扰

① 眼花缭乱

② 背景噪声，例如：




#一个设计页面的好办法：先假定所有内容都是视觉噪声，然后得到证明它们不是#







第4章 动物、植物、无机物——为什么用户喜欢无须思考的选择




Krug可用性第二定律：点击几次都没关系，只要每次点击都是无须思考，明确无误的选择




虽然考虑用户到达目标之前要点击的次数是必要的，但是更重要的是考虑每次点击有多“艰难”——需要多少思考，有多大的不确定性来判断自己是否在进行正确的选择。




如果我们需要一直在网络上进行选择，那么让这些选择变得无须思考是让一个网站容易使用的主要因素




#信息的味道#




#3次无须思考，明确无误的点击相当于1次需要思考的点击#




#实际上，这只是另一场更大规模的、关于站点层次深度和广度相对价值讨论的一部分。一个广度站点在每个层次可以分成许多类别，因为层次较少，所以不需要太多次数的点击就能到达底层；一个深度站点有更多的层次，需要更多次数的点击，但它在每个层次上需要考虑的类别选择较少#【“点击-选择”之间的权衡，总之要让整个站点无须思考】




#页面载入速度较慢，那么点击次数更少会更有价值#







第5章 省略不必要的文字——不要在Web上写作的艺术




Krug可用性第三定律：去掉每个页面上一半的文字，然后把剩下的文字再去掉一半

我发现要在大部分网页上去掉一半文字而不失去原来的意义很容易。不过，“把剩下的文字再去掉一半”只是为了鼓励人们在这么做的时候更坚定一点。【在不损失语义的条件下，文字尽可能简练】




去掉没有人会看的文字有几个好处：使内容更突出，降低页面的噪声，并且节省空间




#有力的文字都很简练。句子里不应该有多余的文字，段落中不应该有多余的句子。同样，画上不应该有多余的线条、机器上不应该有多余的零件#







-必须正确处理的几件事-




第6章 街头指示牌和面包屑——设计导航




如果在网站上找不到方向，人们不会使用你的网站。




网络导航101法则：

① 浏览网页，通常是为了寻找某个目标

② 决定先询问（搜索）还是先浏览

对任何人来说，先搜索还是先浏览取决于他们的打算、匆忙程度、以及网站是否有良好的导航机制

③ 如果选择浏览，将通过标志的引导在层次结构中穿行

④ 找不到，则离开




物理世界可以找到空间位置，网页则不能。用户想再次访问网站上的某个内容，不是依靠它在哪里的物理感觉，而是记住它在概念层次上的位置，然后重新顺着以往的链接过去。所以，书签——储存个人捷径——如此重要，也是为什么后退按钮的点击率占网络上所有点击率的30-40%的原因。

主页就像北极星，可以点击“主页”给一个重新开始的机会。另一方面，导航通过具体化网站的层次结构补偿了空间感缺失，营造出某种位置的感觉。导航即网站本身，即指示说明，不是某个特性。




#导航与两件事有关：从一个地方到另一个地方；告知当前所在的位置#

#通过让层次结构可视化，导航可以告诉我们网站上有些什么。导航表现了内容#




Web导航习惯用法：







① Logo

在Web上，用户的移动方式主要是瞬移，需要在每个页面上见到网站的名称。它在当前站点结构中层次最高

② 导航

导航中最重要的元素之一是把我们送回主页的按钮或链接。让站点Logo同时作为一个让你回到主页的按钮




③ 面包屑

#之所以称为“面包屑”是因为它们让人想起Hansel扔在森林里的面包屑踪迹，因为这样他和Gretel能找到回家的路#

面包屑与导航不同之处在于，导航告诉你在整个网页中的位置，另一个告诉你如何到达这里。它通常运用在拥有庞大数据库，具有复杂层次结构的网站




④ 标签

标签是极少几个将物理隐喻有效应用到用户界面中的例子之一。它们把原来的物体分成了不同的部分，而且打开一个不同的部分很容易，通过突出的标签就可以翻到对应的位置。（或者在Web上，点击它）【交互—隐喻】【Tag把一个整体分割成不同的部分】




第7章 首先要承认，主页不由你控制——设计主页




主页要完成的任务：

具体目标

① 标识和使命。告诉用户这是什么网站，是做什么的

② 站点层次。通过导航给出站点层次

③ 搜索

④ 导读。内容推介&功能推介，吸引用户来读

⑤ 内容更新。告诉读者不是死水一潭

⑥ 友情链接。放置广告，交叉推广，合作品牌的链接

⑦ 注册




抽象目标

① 让用户看到自己正在寻找的东西。让用户想要的任何东西显而易见

② 还有用户没有寻找的。提供也许会感兴趣的内容

③ 告诉我从哪里开始

④ 建立可信度和信任感。主页将是你的网站给他们留下好印象的唯一机会




主页首要任务是——在一眼之内——传达整体形象，通过整体结构告诉人们：

① 这是什么网站？

② 网站上有什么？

③ 我能在这里做什么？

④ 为什么我应该在这里，而不是在别的地方？（？？？）




那么如何传达呢？

口号是一条精炼的短句，刻画了整个企业，总结了它是什么。做到这点，需要满足：

① 清楚、言之有物

② 长度适中，不少也不多

③ 表述出网站的特点和显而易见的好处

④ 甚至有个性、生动，有时候还很俏皮




已经家喻户晓的网站可以没有口号




书中接下来还讨论了导航和下拉框，但没有特别值得记录的。下拉框最大的有点是，节省空间。




#如果我不清楚这个网站是做什么的，又如何决定要搜索什么#







-确定你没有做错的几件事-




第8章 农场主和牧牛人应该是朋友——为什么Web设计团队讨论可用性是在浪费时间，如何避免这种情况




公司内部人员（市场、设计、开发）不该争论Web用户喜欢什么，因为这些争论背后隐藏了他们自身的喜恶和信仰，并有投射到整个Web用户身上的倾向，认为绝大多数Web用户喜欢我们所喜欢的。往往这些“信仰大战”并不会改变他们原来的看法。




唯一正确的办法是直接做“测试”。使用团队的集体技巧、经验、创造力和判断力来创建一些版本（甚至是MVP），然后仔细观察人们对它的看法和使用的方法。







第9章 一天10美分的可用性测试——让测试简单，这样你能进行充分的测试




焦点小组和可用性测试是不同的。

焦点小组：在设计之前展开、5-8人小组、展示想法和设计、快速得到用户意见和感受、抽象；

可用性测试：一次1人、展示原型、要求用户完成一项典型任务、具体。




如果想建立一个优秀的网站，一定要测试，不断的迭代式测试。哪怕对错误的用户做一次失败的测试，也会让你看到一些改善网站的重要方面。通常这样的测试不会超过10min，但被测网站的工作人员通常会记上好几页的笔记，甚至还会询问是否可以对这次测试进行录像。




#任何在开始时就有助于防止犯错的方法都很划算#




理想下的可用性实验室：一间位于单向玻璃后面的观察室、两部摄像机录制用户反应和目标对象、具有统计意义数量的测试用户




具有科学研究意义的测试成本很高，书中提出了精简的可用性测试：




关于控制测试用户人数。3~4个最佳，可以遇到几乎所有最明显的问题。人数少可以快速推进迭代，修正完第一轮问题后，进行第二轮测试，发现新的问题。




关于招募用户。测试对象并不重要。利用你能够寻找到的任何人（满足最低要求），然后曲线上升。邀请形式要简单：“我们需要一些人来看看我们的网站，并给我们一些反馈。这很容易，大约花费45分钟到一个小时的时间，而且你将得到____美元的报酬。”




#每个人都喜欢简洁（是指真正的简洁，不是把一大堆内容藏到下一级页面那种简洁）#




关于何时测试。在设计之前，就应该测试竞品，或组织方式或功能上风格类似的网站，这相当于有人免费给你建立了一个已经能用的原型。




关于测试什么。让用户执行一些他们有权参与选择的任务。比如，“找到一本你想买的书，或者一本最近买过的书“就比”找一本14美元以下的烹饪书“要好得多。




#要求你把心里的想法说出来，告诉我们你是怎么想的，这对我们有很大帮助#




立刻回顾测试结果。在每轮测试之后，你应该尽快让开发团队回顾每个人的观察，建议你在一个上午进行3-4轮测试，然后在午餐时间进行简短的总结。第一步，给问题分类；第二步，解决问题




可用性测试常见的用户问题：

① 用户不清楚概念。要么不理解网页，不知道它们说的是什么，要么理解有误

② 他们找不到自己要找的字眼。要么组织内容的分类不符合用户的习惯，要么分类符合他们的习惯，但没有使用他们期望的名字

③ 内容太多了。首先，减少页面上的整体干扰；其次，把他们需要看到的内容设置得更加醒目，让它们从可视层次结构中更加突出

④ 交互不可能是完美的。如果做不到不言而喻，只要用户在第二次猜测总是对的，就已经可以了。因为有些含混之处总是没有简单的解决方法。例如，通常至少会有1-2个项目不太适合放在网站的顶级分类当中。因此，一半的用户可能会在Lifestyle的列表下寻找电影，而另一半的用户会先在Arts里面寻找。不管你怎么做，都会有一半用户在第一次猜测的时候出错，但每个人都会在第二次猜测之内找到

⑤ 抵制添加的冲动。当在测试时清楚地看到人们没有理解某些内容时，大部分人的第一反应是增加一些内容，例如一些注释或一些指导说明。而正确的解决方案往往是去除某个（某一些）让人混淆的内容，而不是增加另一些干扰

⑥ 不要太看重人们对新功能的要求。人们常说：“如果它能做XX就更好了。”这样的说法常常被看作是在要求新的功能。如果你仔细询问，常常会发现，他们已经找到一个很好的网站，能做XX，也不大可能会切换到这里来，他们只是在告诉你他们的喜好而已




在测试结束后，优先改善两类问题：

① 恍然大悟型。当大家看到第一位用户试着勉强应付的时候，问题和解决方法都很明显的那种惊喜

② 低成本实现型。1）毫不费力的；2）性价比高的




设计就是做平衡。

修正这些问题，同时不破坏已经正常运行的部分。只要你进行改变，就要仔细思考它将会影响哪些其他的内容。尤其是，当你把某些部分调整得更为突出的时候，想想看是不是把其他内容的重要性降低了







大的方面和外界影响




第10章 可用性是基本礼貌——为什么你的网站应该让人尊敬




除了网站简洁清楚，我们要增加用户对网站的好感度。当网页难用时，会损耗用户的好感储存器，甚至一个错误就能彻底清零。虽然每个人的好感储存器的高度天生不同，但关键是，不要指望它的值会很高。




降低好感的几种方式：

① 隐藏我想要的信息。最常见的情况是隐藏客户服务的电话号码、运费和价格

② 因为没有按照你们的方式行事而惩罚我。格式塔规则有利用用户处理数据，如信用卡号码 010-287-2973

③ 向我询问不必要的信息。用户很介意个人信息，如果网站要求的信息超出当前任务时，会让用户觉得很厌烦

④ 敷衍我，欺骗我。厌恶虚伪的假意的关心。“您的来电对我们来说很重要”

⑤ 给我设置障碍。节省用户时间

⑥ 你的网站看上去不专业。布局组织凌乱




相对的，提高好感的几种方式：

① 知道人们在你网站上想做什么，并让它们明白简易。

② 告诉我我想知道的。

③ 尽量减少步骤。

④ 花点心思。

⑤ 知道我可能有哪些疑问，并且给予解答。保持更新和坦率，并且是真正的常见问题

⑥ 如有不确定，记得道歉。如果障碍是不可抗力，记得及时道歉，让他们明白你知道你在给他们造成不便







第11章 可访问性、级联样式表和你

（关于技术问题的讨论）







第12章 救命！老板想要我......当好人遇到不好的设计决策




#可用性专家们有一个技术术语来形容这种现象，我们把它叫做“馊主意”#




在网络上填写任何表单的人都会问自己：“为什么他们要我提供这项信息？真的需要提供这些信息才能得到我想要的？”如果答案是不，则接下来的问题便是：“他们要这些信息干什么？”




询问不必要的信息可能产生3个严重后果：

① 您常常无法得到真实的数据

② 您得到的完整表单更少

③ 使您的网站形象下降




由此引出3个原则：

① 只让我提供完成此次事务所需的信息

② 不要过多的可选信息

③ 明确告知填写信息后能得到什么反馈




在上网的绝大部分时间里，人们并不希望被粘着，他们只想完成某些工作




#图片大，载入时间长#







— 完 —