第一章确保网页容易被用户使用的最重要原则是“不要让我思考”。设计师应尽量做到让网页不言而喻、一目了然、自我解释。好的设计应该能让用户立即上手使用,而无需花费精力思考。网页上每项内容都有可能迫使用户停下来思考,例如,名字。那些看似很酷、很

第一章
确保网页容易被用户使用的最重要原则是“不要让我思考”。设计师应尽量做到让网页不言而喻、一目了然、自我解释。好的设计应该能让用户立即上手使用,而无需花费精力思考。
网页上每项内容都有可能迫使用户停下来思考,例如,名字。那些看似很酷、很自以为聪明、带有营销性质及生僻技术的名字常常给用户带来困扰。又例如那些看起来不太明显的链接和按钮,用户没有义务思考某个地方是否能点击。
当我们访问网络时,每个微小的疑问都有可能打断我们的访问,它们会累积起来,直到让人抓狂、失去耐心。
一些不该让访问者思考的事
    我在什么位置? 我该从哪里开始? 他们把xx放在什么地方? 这个页面上最重要的是什么? 为什么他们给它取了这个名字?

如果要做一些崭新的开拓性的或者非常复杂的页面设计,如果无论如何也无法把页面做到不言而喻时,至少要让它能自我解释,并使用户只需花很少的时间和精力就能理解理解其用意。
另一些奇怪且有趣的用户心理:有些人会在一个折磨他们的网站坚持很久,而不愿寻找更好的;有些人会在遇到访问挫折时首先责怪自己,而不是责怪网站;人类的惰性以及重新开始新事物的不确定感往往会让用户在不佳的访问体验面前妥协(谁又能保证下一个会比这个更好呢?)。
第二章
面对精心设计排版的页面,用户做的通常只是在页面上大致瞥一眼,然后凭感觉寻找点击他们感兴趣的链接或者符合他们要求的链接。事实上用户对于页面上不关心的部分基本上不会真正看一眼。那些精心修饰的文字对用户来说更像是“以时速100公里的速度驶过的广告牌”。
关于网络使用的三个事实:
一.不是阅读,而是浏览
人们总是花极少的时间来阅读大部分的页面,通常只是匆匆浏览一下网页,然后从中选择感兴趣的栏目或文字。
理由:
    用户总是忙碌的,他们没有时间阅读那些不必要的内容。 用户知道自己不需要读取所有的内容,通常他们只是要寻找自己感兴趣的内容。 报纸、书籍、期刊的阅读教会用户如何快速定位感兴趣的内容。

二.不是选择,而是满意即可
大多数情况下用户不是选择的选项,而是选择第一个看上去合理的选项。这种满意策略告诉我们,一旦用户觉得某个链接似乎能跳转到他们想要去的地方,那么这个链接被点击的可能性就会大大增加,尽管它可能不是的选择的。
理由:
    用户总是忙碌的,寻找策略很难,需要的时间也很长。 如果猜错了也不会有什么严重后果。 对选择进行权衡并不会改善我们的机会。在设计不佳的网页上花精力去选择,还不如用猜的高效。 用户喜欢驾驭感,跟着感觉走对用户来说更能感受到自己的价值。

用户衡量一个选择所愿花费的精力,取决于他们对于内容的预期、对于需求的迫切性以及对于网站的信心。
三.不是追根究底,而是勉强应付
很少有人会花时间来研究如果使用一个网站,通常他们是通过不断尝试来获得访问、从中找出一定的理由来解释自己的行为,以及为什么会这么做。
理由:
    是否明白事务背后的工作机制对用户来说并不重要,他们只要求能正常使用即可。 一般的使用习惯决定了,用户如果发现某个事务能他们的要求,就会一直使用下去,直到出现新的更好的替代方法为止,但是通常很少有人会寻找更好的方法。

教会用户使用网站而不是勉强应付的好处
    用户能更容易地找到自己想要的东西。 用户能更全面地了解到网站所提供的服务,而不仅仅是他们偶然看到的那些。 网站能更好地引导用户访问其所希望展示的内容。 能让用户到把握全局的感,这能极大地增强用户对自己及对网站的信心,进而留住用户的心。


第三章
设计师针对用户快速浏览页面这一特性所需注意的5个方面:
一. 建立清楚地视觉层次
让页面瞬间明白易懂的一个好办法是确保页面上所有内容的外观清楚,而且能清楚表述页面内容之间的关系。
层次清楚的三个特点:
    越重要的部分越突出(醒目)。 逻辑上相关的部分在视觉上也相关。 逻辑上包含的部分在视觉上有嵌套。

生活习惯教会了我们对视觉层次进行快速分解,通常这种分解在一瞬间就已完成。除非当那些可视信息迫使我们需要停下来思考时,我们才能隐约地感觉到它的存在。好的视觉层次能够帮助用户对页面内容进行快速分辨,提高访问效率。
二.尽量使用习惯用法
每一种出版媒体都有在发展自己的习惯用法,并不断改进这些用法,以形成新的习惯用法。在WEB上,当一种使用方法有足够多的人在足够多的地方看到使用它,那么它就会使成为一种习惯用法。
关于习惯用法的两个特点:
    该用法非常有用。
    习惯用法因为有用才会成为习惯用法,它保证了用户有一种熟悉感,适当应用习惯用使用户对网站的访问更容易,不需要花费额外的精力就能获得预期的访问成果。 设计师通常不愿使用习惯用法。
    创新对设计师而言有很大的,如果打算使用一种新的方法替代已有的习惯用法,那么至少必须确认1.对用户来说新的方法是同样清楚简洁、不言而喻,无须花费很多额外精力来重新学习的。2.新的方法有很大的回报价值,因此值得用户花一点努力来学习。

在确信找到一个能让大多数人都接受的新想法前,尽量使用已有的习惯用法。
三.把页面划分成明确定义的区域
状况下,设计良好的网页应该能让用户立刻明白各区域的作用。
把页面划分成明确定义的区域可以让用户快速找到自己关心的内容或者放心地跳过自己不需要的部分。
四.明显标示可点击的区域
用户确定点击哪里并不会花很长时间,但如果你迫使用户去思考某些通过下意识就可以知道的东西,那么你完全是在浪费每个用户对新站点有限耐心和好感。
五.最大限度视觉干扰
让页面不易理解的最大原因就是视觉干扰,有两类干扰:
    眼花缭乱的设计,不分轻重的布局。 糟糕的细节设计,不停打断用户的思路。

用户对复杂和干扰的容忍程度是不同的,但的确有很多人在乎这些细微处。
对付视觉干扰的一个好办法:设计页面时,可以先假定所有的设计内容都是视觉干扰,除非能够证明它们不是。


第四章
通常用户不会特别介意到达目标前所需的点击次数,只要每次点击都是毫不费力且能让用户坚信自己的选择是正确的。
一条准则:三次无须思考,明确无误的点击相当于一次需要思考的点击。
如果需要一直在网络上进行选择,那么让这些选择变得无须思考是让一个网站变得容易使用的主要因素。
第五章
的文字都很简练。句子里不应该有多余的文字,段落中不该有多与的句子。同样,画上不该有多余的线条,机器上不应该有多余的零件。
去掉每个页面上一般的文字,然后把剩下的文字再去掉一半。
去掉没人看的文字会有几个好处
    可以页面干扰。 让有用的内容更突出。 让页面更简短,让用户在页面上一眼就能看到更多的内容,不必要的屏幕

两种必须消灭的文字
    消灭欢迎词。
    欢迎词只是一种社交套路,并无多少实际意义,大多数WEB用户喜欢直截了当,所以要尽量欢迎词,能减多少就减多少。 消灭冗长的解释文字。
    应该通过让每项内容不言而喻来尽量消除解释文字,当文字变得完全没有必要时则应把它们全部去掉。

第六章
一个事实:如果在网站上找不到方向,人们就不会访问你的网站。
用户浏览过程
    通常是为了寻找某个目标。 决定先搜索还是先浏览。取决于用户的打算、迫切程度、以及网站是否有良好的导航机制。 如选择先浏览,将通过标志的引导在层次结构中穿行。 满意地离开或失望地离开。

Web空间的奇怪之处
    感觉不到大小。
    你很难知道是否已经看到这个网站上所有感兴趣的内容,因此也很难知道什么时候应该停止寻找。 感觉不到方向。
    没有层次结构方面的上一级和下一级,即更一般的层次或更具体的层次。 感觉不到位置。
    Web导航通过具体化网站的层次结构补偿了这种缺失的空间感,出某种位置的感觉。

被忽视了的导航用途
    给用户一些固定的感觉。
    迷失的感觉并不好,做得好的导航会让用户觉得脚踏实地。 告知当前位置。
    通过让层次结构可视化,导航可以告诉用户网站上有什么。导航表现了内容且表现站点比引导位置更重要。 告诉用户如何使用网站。
    含蓄地告诉用户该从哪里开始,能进行哪些选择。 给了用户对网站的信心。
    清楚、规划得当的导航是网站给人留下好印象的大好机会。

Web导航的基本元素:logo、栏目、子栏目、当前位置、辅助工具。
导航部分在每一页以一致的外观出现在同样的位置,会让用户提升用户的访问信心,给用户确定感可以提升用户对网站的认同。让全局导航始终保持一致意味着用户对它只需了解一次。全局导航应该包括5个元素:logo、、搜索链接、辅助工具、主栏目。
网站logo一般在网页左上角,因为logo代表了整个网站,也就是说它在整个站点结构中层次最高。要让网站logo出现在页面可视层次的首要位置,可采取两种方式:让它成为页面最显眼的内容或者让它涵盖页面所有其他的元素。
栏目导航条是访问站点主要栏目的途径,即站点层次结构的最顶层。
大部分情况下,全局导航也留有二级导航的显示位置。
辅助工具是到达网站中不属于内容层次的重要元素的链接。
辅助工具能帮助用户使用站点(如帮助、网站地图或购物车等),要么提供网站发布者的信息(如关于我们、联系我们等)。
全局导航中最多只能放使用率最高的4-5个辅助工具。
全局导航中最重要的元素之一是让用户的链接。
一般网站也会让logo链接到首页。
喜欢搜索的用户并不少于习惯浏览的用户。
一个简单公式:搜索栏=一个输入框、一个按钮、还有“搜索”两字。
搜索栏必须避免:
    花哨的用词。 指示说明。 选项。
    如果必须提供选项,那就要保证哪些选项确实有用。

页面名称就是web上的路牌
需注意的要点:
    页面名称在视觉层次上要出现在合适的位置。 名称样式要引人注目,在大多数情况下,它是该页里最大的文字。 名称和链接的内容要一致。
    有时受页面空间的限制,如果点击的文字与链接的页面名称并不完全相同,则需保证尽量匹配和让不匹配的原因显而易见。

要抵消网络空间固有的迷失感,其中一种方式就是时刻告诉用户当前所处的位置。
常用的标记位置的方法:
    在旁边放一个小图标。 改变文字颜色。 使用粗体。 按钮反白。 改变按钮的颜色。

位置指示器必须要醒目突出,否则就失去了意义。
层级菜单的几项实践:
    把它们放在最顶端。 用“>”符号对层级进行分隔。 使用小字体。 使用文字提示“你在这里” 将最后一个元素加粗。 别让它们显得像页面的名称。

标签是大型网站的上佳选择,理由:
    它们不言而喻。 很难被忽视。 很灵活。 暗示了一个物理空间。

标签会给人一个视觉提示:让人觉得网站被分成了不同的栏目,条理清晰,而自己正置身于其中的一个栏目,增加确定感。
amazon经典的标签设计三要点:
    正确绘制。
    标签的图形必须出“激活的标签页位于其他标签页之前”的效果。
    出这种效果,比货也必须有一种不同的颜色或外形作为对比,并且必须与它下面的空间在物理上链接起来。 颜色编码。
    Amazon使用相当鲜艳和饱满的的颜色来吸引用户的注意力。未激活的标签和当前的标签之间对比强烈,即使色盲的用户也能正确理解。 进入网站时,有个选中的初始标签。

后备箱测试
完成设计后对网页的导航进行测试的方法。
初始问答:
    这是什么网站?(logo) 我在哪个网页上?(网页名称) 这个网站主要有哪些栏目?(栏目清单) 在这个层次上我有哪些选择?(本页导航) 我在导航系统得什么位置?(位置指示器) 怎么搜索?

测试标准只能依据页面的整体外观来判断,而不是细节。
第七章
主页要完成的使命:
标识站点、表明站点层次、搜索、导读、最近更新、友情链接、快捷方式、注册。
另外一些抽象使命: 让用户看到自己正在寻找的东西—主页应该能让用户想到的任何东西显而易见,如果它存在的话。 为用户提供他们还没发现的潜在兴趣点。 告诉用户从哪里开始,给用户方向感。 建立可信度和信任感。
首页常见的约束有: 每个人或内容都想占一席之地。 想参与的人或内容太多。 一个尺寸要适合所有人。
网页设计中不能忘掉却常常被忘掉的事—传达网站整体形象。
用户第一次访问一个网站应能回答的4个问题: 这是什么网站? 网站上有什么? 我能在这里做什么? 为什么我应该在这里而不是别的地方。
主页上的每样东西都有助于帮助用户理解网站,有两样东西尤其关键:
口号、欢迎广告。
作用:
不在于是否每个用户都会注意到他们,而在于网站用户多半是从主页的大体内容来猜测网站类型的,如果他们猜不到就要有个地方能让他们找到。
几条传达信息的指导原则:
    需要多大空间就用多大空间。 但也不要使用过多的空间。 不要把使命陈述当作欢迎广告。 是否恰当的标准是进行测试。

口号是依据精炼的短句,它刻画了整个网站、总结它是什么、自身的优势是什么。
口号一般出现在站点Logo周围的某个地方。
口号是非常有效的信息传达方式,因为它是用户希望能找到的关于网站目标具体描述的地方。
选择口号时要注意的地方: 好的口号要清楚、言之有物。 不好的口号含混不清。 好的口号长度适中—6~8个单词足矣(针对英文而言)。 好的口号能表述出网站的特点和显而易见的好处。 不好的口号听起来太笼统。 好的口号应该有个性、生动、有时候还很俏皮。
知道网站类型后,主页要回答的另一个重要问题是:从哪里开始?
当进入一个新的网站,快速浏览主页后,用户应该能明白无误地知道: 要搜索该从哪里开始。 如果想浏览该从哪里开始。 如果只想访问网站最精华的部分该从哪里开始。
避免认知混乱的方法:让每个起点看上去像起点并给它们加上清楚地文字描述。
由于主页导航的独特职责,通常不必与全局导航完全一致。
常见差别有:栏目描述、不同的方向、用于识别的空间更多。
主页导航与全局导航需要保持一定程度的一致性,才能保证用户能马上明白这只是同一导航的两个版本。
最重要的是,让栏目的名称保持不变:同样的顺序,同样的文字和同样的分组。尽可能多地保持相同的视觉提示也很有用,如同样的字体、颜色和大小写。
下拉框存在的问题: 必须点击才能看到下拉列表。 它们难以快速浏览。 他们不好控制,显示和收缩很快,会影响查看效果。 下拉框对于按字母排列的项目比较适用,如国家、省份、或产品名称,因为在这样的浏览不用思考。
主页上增加更多项目所得到的和付出的并不一致。得到推介的栏目获得了巨大的访问量,而由于主页变得混乱而造成的有效性总体损失则要由所有栏目一同承担,这就是共有区域的悲剧,前提很简单:任何共享资源(共有区域)都会因过度使用而遭
第八章
人的天性有一种把自己的喜好投全部web用户身上的倾向,认为绝大多数用户喜欢自己所喜欢的,我们通常认为大部分web用户和我们一样。
由于职位的不同,web团队的成员对于好的网站设计如何组成有着非常不同的看法。
“大部分web用户和我们一样”这样信仰背后还有另一个隐藏得更深的信仰:相信大部分web用户是弹性的,可以随意变化。
不要问这样的问题“大部分人喜欢下拉框吗?”正确的问题应该是“在这个页面,这样的上下文中,这个下拉框及这些下拉项目和措词会让可能适用这个网站的大部份人产生一种良好的体验吗?”回答这个问题的方法只有一个“测试”。
争辩人们喜欢什么既浪费时间又消耗团队精力,而通过测试将讨论对错转移到什么有效、什么无效上更容易缓和争论,打破僵局。而且,测试会让我们看到用户的动机、理解、反应的不同,从而让我们不会再坚持“用户的想法和我们的想法一样”。
第九章
焦点小组与可用性测试的区别
焦点小组是一小组人(通常5~8人)围坐在桌子旁边,对展示给他们的想法和设计做出反应。这是一个小组过程,主要价值来自参与人员彼此的反应。焦点小组是快速得到用户意见和感觉的一种不错的方法。
可用性测试是一次一个用户展示一些内容(不管是网站、网站原型、或是一些单个页面的草图),并且要求用户说出:1.这是什么?2.试着用它来完成一些典型的任务。
焦点小组在抽象地确定你的目标受众想要什么,需要什么,喜欢什么的时候会很有用。它们也可以测试出网站的理念是否有意义,价值主张是否吸引人。同时,它们在测试你的网站功能命名,发现用户对你的竞争对手看法等方面也是很好的办法,但这种方法并不适合用来了解你的网站运行情况,以及怎样改进网站。
你能从焦点小组了解到的是你在设计网站之前就应该了解得。焦点小组是用在这个过程早期阶段的方法。
可用性测试的几个事实: 如果想建立一个优秀的网站,一定要测试。 测试一个用户比不做测试好一倍。 在项目中,早点测试仪为用户好过最后测试50位用户。 人们对招募用户代表的重要性估计过高。 测试的关键不是要证明什么或者反驳什么,而是了解你的判断力。 测试是一个迭代的过程。 没有什么比现场用户的反应更重要。
5个不进行可用性测试的错误辩解:
    我们没有时间 我们没有钱 我们没有专业知识 我们没有可用性实验室 我们不知道怎样解释这些结果。

可用性测试对参与的对象不
招募测试对象可以利用你能够寻找到的普通任何人,然后曲线上升。
测试用户和目标群体之间可以存在差别,理由如下: 实际上,我们都是初学者。 设计出的网站只有你的目标群里会使用,这通常不是个好主意。 专家通常不会介意对初学者来说很直观的界面。
一些例外: 如果你的网站几乎只由某一类用户使用,而且招募这一类测试用户并不困难。 如果你的目标用户群体可以分成几个明显的阵营,而且这些阵营有着完全不同的兴趣和需要。 如果使用你的网站需要专门领域的知识。
招募测试对象应注意的几个问题: 提供合理的激励。 邀请要简单。 避免对网站(或网站背后的组织结构)进行预先讨论。 别不好意思请朋友和邻居帮忙。
可用性测试分两种:“理解”测试和关键任务的测试。 “理解”测试就是让用户看到网站,然后看他们能否理解这个网站,理解网站的目标,价值主张,组织方法,运行方式等。 关键任务测试就是让用户完成一些任务,然后观察他们是怎么做的。
建立网站时,越早把设计思想展示给用户约好,设计师通常不愿意展示尚未完成的作品,但用户更愿意评论一些看起来还没有完成的东西,因为他们知道你还没有投入太多,还有机会进行修改,而且,由于这还不是一个精雕细琢的设计,用户不会被实现细节所吸引,从而可以把注意力集中在要点和措辞上。
总结测试结果要做的两件事:给问题分类,解决问题。
从其他人的角度看你的作品,这样的体验常常能为问题提供全新的解决方案,或者让你用一种崭新的眼光看待原有问题。
测试过程中最有可能碰到的问题: 用户不清楚概念 他们找不到自己要找的字眼 内容太多
问题内类指南
忽略皮划艇问题:
可能会遇到这种情况:用户暂时出现错误,然后再不需要任何帮助的情况下回到原来的轨道,只要,1.出现问题的人马上发现自己偏离了原来的主体。2.他们尽量回到原来的方向而不需要帮助。3.这种情况看起来并没有扰乱他们的活动,你就可以忽略这些。总的来说,如果用户关于在哪里找到他们需要的内容的第二次猜测总是对的,那就不是什么问题。
添加的冲动:
当在测试时清楚地看到人们没有理解某些内容时,大部分人的第一反应是增加一些内容,如注释或一些指导说明。然而正确的解决方案往往是去掉某个或某些让人混淆的内容,而不是增加另一些干扰。
不要太看重人们对新功能的要求。
够得着的果子:
每轮测试中,你的主要目标是寻找重要而不费力的收获,一般有两个类别:恍然大悟型和便宜型。
注意整体性:当你把某些部分调整得更为突出时,想想看是不是把其他内容的重要性了。
第十章
Web 可用性除了不要让用户思考,还有另外一个重要的组成部分:做正确的事,为用户考虑周到。除了“我的网站清除吗?”之外,还要问“我的网站值得尊敬吗?”
好感的几种方式: 隐藏我想要的信息 因为没有按照你们的方式行事而惩罚我 向我询问不必要的信息 敷衍我、欺骗我 给我设置 你的网站看上去不专业
提高好感的几种方式: 知道人们在你网站上想做什么,并让它们明白简易 告诉我我想知道的 尽量步骤 花点心思 知道我可能会有哪些疑问,并且给予解答 为我提供协助,例如打印友好页面 容易从错误中恢复 如果不确定,记得
第十一章,第十二章
最新资讯
高德地图开放ALink车载连接协议 推进汽车智能化进程

高德地图开放ALink车

高德地图今日宣布,面向行业伙伴和开发者开放ALink标准
IDC:2020年全球AR/VR支出将达188亿美元 中国占30%

IDC:2020年全球AR/VR支

至2020年,全球AR/VR(增强与虚拟现实)市场相关支出规模将
互联网的201X年,这些节点时刻你可还记得?

互联网的201X年,这些节

10年一瞥,世事变迁。当2010年1月1日的太阳升起的时候,史
法官直播"带货"1小时狂卖1亿!网友:没李佳琦什么事了

法官直播"带货"1小

12月12日上午9点,浙江省宁波市中级人民法(tian)院(ping)与线上拍卖
Airbnb上市前的最后一搏

Airbnb上市前的最后一

据《Information》报道,2018年,Airbnb在前三个季度的体
三星折叠屏手机销量破百万 华为Mate X仍然抢不到

三星折叠屏手机销量破

Galaxy Fold已于11月8日在中国区正式发售,售价15999元
最新文章
推荐一款酷炫闪烁的告警按钮

推荐一款酷炫闪烁的告

今天小编给大家推荐一款酷炫闪烁的告警按钮,非常不错,具
移动端开发1px线的理解与解决办法

移动端开发1px线的理

这篇文章主要给大家介绍了关于移动端开发1px线的理解
前端浏览器字体小于12px的解决办法

前端浏览器字体小于12

这篇文章主要给大家介绍了关于前端浏览器字体小于12px
详解Web前端性能优化详解之资源合并与压缩

详解Web前端性能优化

这篇文章主要介绍了详解Web前端性能优化详解之资源合
element.style内联样式的修改方法教程

element.style内联样

这篇文章主要给大家介绍了关于element.style内联样式
图文实操详解前端处理小图标的那些解决方案

图文实操详解前端处理

在前端日常开发中,小图标是必不可少的,我们该如何高效的