Don_Web标准教程
教程Tag：暂无Tag,欢迎添加,赚取U币!
这里的领地，应该是属于CSS的，模板无忧，我们仅讨论CSS技术与应用，我们面对的是WEB标准在中国的发展与普及。但我们学习这些的目标，就是让我们的访客更方便，更快捷的浏览我们所制作的站点。前台的编码，页面的设计，后台脚本与数据库，都是为我们的访客所服务。
今天我们看这一篇文章，这中间没有涉及具体的CSS的内容，也没有WEB标准知识，我们学习的是一种思想：“别让我思考”访客至上的网页设计秘笈！
现在网页设计师除了把页面做的漂亮以外，越来越注重“用户体验”，就是要做“别让用户思考”的网页，使网站真正做到“可用性”。笔者结合几年的工作经验，粗谈这方面的一些问题，和大家共勉！
一、人们如何浏览网页
首先本书说明了上网的人是如何浏览网页的，这似乎跟我们想象有很大的差距，因为我们觉得“用户会盯着每个网页，仔细阅读我们精心制作的文字，领会我们页面的组织方式”，事实上大部分时间用户看网页就象“高速公路看广告牌一样”，没时间仔细阅读，当然也不会专心思考。因而，我们必须为“扫描”而设计。做到这点须注重以下几点：
示例代码 [www.mb5u.com]
1、尽量符合用户习惯的设计，让人接受生疏的东西需要代价，除非我们觉得这个代价是必须的。
2、在页面把越重要的东西越突出，建立清楚的视觉层次。
3、可以点击的地方必须突出，让人明显知道可以点击。
4、把页面划分成明确定义的区域
5、省略多余的文字
2、在页面把越重要的东西越突出，建立清楚的视觉层次。
3、可以点击的地方必须突出，让人明显知道可以点击。
4、把页面划分成明确定义的区域
5、省略多余的文字
二、关于导航的设计
导航显然是网站最重要的部分，“假如在网站上找不到方向，人们就不会使用你的网站”。现在WEB导航的习惯用法基本形成了，虽然还会继续演化下去，但基本元素以产生：网站LOGO、网站栏目、返回主页、搜索、实用工具或帮助。
网站LOGO，通常是页面左上角，出现在页面可视层级的首要位置，可以采取两种方式：让它成为本页最显眼的内容，或者让它涵盖页面所有其他元素，当然网站LOGO设计的好坏对人产生心理影响就不用说了。
网站栏目，也称导航条，站点层级结构的最顶层。导航条很多时候可以包容二级导航（下拉菜单的方式）。很多时候标签的设计是导航采用的很好表现方式，Amazon.com几乎把它发展到完美的状态。用标签的方式设计导航时要注重几点：
示例代码 [www.mb5u.com]
1、进入网站时，有一个标签已经选中；
2、正确绘制，激活的标签页要位于其他标签页之前；
3、颜色区分，可以让每个栏目使用一种不用的标签颜色，并把这种颜色用在页面其他导航元素上，让它们浑然一体；
2、正确绘制，激活的标签页要位于其他标签页之前；
3、颜色区分，可以让每个栏目使用一种不用的标签颜色，并把这种颜色用在页面其他导航元素上，让它们浑然一体；
搜索功能，假如有提供搜索功能的网站，要记住一个简单的公式：一个输入框、一个按钮、还有“Search”（搜索）两个字，不要弄的太复杂。比如把“搜索”换成“查找”、“快速查找”、“快速搜索”、“要害字搜索”都会让用户产生思考。假如必须为搜索框提供选项（缩小搜索范围）一定要三思，谨慎提供选项，以便以何种方式提供最为合理，还有就是要保证这些选项的确有用，否则会挫伤用户心理。
值得注重的是，很多网站到了二级页面以下，导航便会变了支离破碎，随意发挥。这个问题非常普遍，以至于很难找到良好的三级导航的例子。事实上，用户在底层页面上花的时间通常和花在顶层页面上的时间相同。除非我们一开始就自顶向下进行导航设计，否则以后很难添加，也很难保持一致性。这就意味着我们在讨论主页的颜色方案之前，拥有显示网站所有潜在级别的导航的DEMO设计非常重要。要做到这点，必须设计师和相关策划人员紧密结合，设计师必须提前知道整个站的概貌和细节内容。
有一点，设计师经常忽略，就是记得为每个页面加个名称。似乎每个拐角处有一个路牌一样，随时让驾驶者知道在哪里，无需思考。页面的名称应该出现在涵盖该页内容的位置，要引人注目，在大多数情况下，它应该是该页面最大的文字。
总之，一个拥有良好导航系统的网站，一眼就能告诉用户这些信息：
示例代码 [www.mb5u.com]
这是什么网站？（网站LOGO）
我在哪个网页上？（网页名称）
这个站主要栏目有哪些？（导航栏目清单）
在这个层次上我有哪些选择？（页面导航）
我在导航系统的什么位置？（页面里的“你在这里”的指示符号）
我怎么搜索？
我在哪个网页上？（网页名称）
这个站主要栏目有哪些？（导航栏目清单）
在这个层次上我有哪些选择？（页面导航）
我在导航系统的什么位置？（页面里的“你在这里”的指示符号）
我怎么搜索？
三、关于主页设计
首先要承认，主页不由我们控制。因为每个人都有个一个看法，假如要使每个人都满足，那么就算最优秀的主页设计也无法达到。因此设计主页时不可避免地要做一些折衷。但有一件事情不要忘记——传达整体形象，即一眼可以让人感受到这个站是干什么的。越快越好，越清楚越好。所以当浏览者进入主页时，我们好不费力（几秒钟让人了解）地告诉他四个问题：
示例代码 [www.mb5u.com]
这是什么网站？
网站上有些什么？
你能在这里做什么？
为什么你在这里，而不是在其别地方？
网站上有些什么？
你能在这里做什么？
为什么你在这里，而不是在其别地方？
那么如何传达这些信息呢：
示例代码 [www.mb5u.com]
1、口号，即靠近网站LOGO的地方。一条精炼、个性、生动的口号可以让人立即联想网站的内容。但也有例外，假如某个公司的品牌已达到家喻户晓的地步，可以省略口号。
2、欢迎广告，即对网站的简要描述，在主页首要的位置显示，不需要滚动屏幕就能看到。
3、应从哪里开始？当进入一个新站后，浏览者快速扫描主页之后，应该明白无误地知道：
假如想搜索，可以从这里开始。
假如想扫描，可以从这里开始。
假如想扫描本站最出色的内容，可以从这里开始。
2、欢迎广告，即对网站的简要描述，在主页首要的位置显示，不需要滚动屏幕就能看到。
3、应从哪里开始？当进入一个新站后，浏览者快速扫描主页之后，应该明白无误地知道：
假如想搜索，可以从这里开始。
假如想扫描，可以从这里开始。
假如想扫描本站最出色的内容，可以从这里开始。
在设计主页时，注重几个问题：
示例代码 [www.mb5u.com]
主页的导航可以与下级的导航有点不同，但必须要有内容和视觉上的一致。
可以不用下拉框就不用，因为那是隐藏的信息。
可以不用下拉框就不用，因为那是隐藏的信息。
四、如何解决对设计争论不休——可用性测试——绝大部分公司没做的
对设计争论不休，似乎是个永久而又十分令人痛苦的事情。解决这个问题，很多时候，是上司或者老板说了算，“老板说咋样就咋样”。
其实可以对网站进行“可用性测试”，除此之外，没有更好的办法。争辩只会浪费时间和团队的精力，而通过测试将讨论对错转移到什么有效、什么无效上，更轻易缓和争论，打破僵局。而且测试会让我们看到用户的动力、理解、反映的不同，从而让我们不会再坚持认为用户的想法和我们的想法一样。
假如想建立一个优秀的网站，一定要测试，测试一个用户比不做测试好一倍，早点测试一位用户好过最后测试50位用户！这点我们做的不多，国内也似乎不重视这点。网络公司一般对程序流程的测试要比对界面体验的测试看的重要的多。
那么如何测试？
示例代码 [www.mb5u.com]
1、在项目的每个进程中都可以测试，不必要等项目结束。项目最初的时候，必须有人（项目负责人或设计师，或多人讨论，设计师表现出来）使用团队的集体技巧、经验、创造力和判定力来创建一些版本（哪怕是一个很粗糙的版本），然后仔细观察人门对它的看法和使用方法。
2、每轮测试的理想用户数量是三个，最多四个。前三个用户可能会碰到几乎所有最明显的问题，而且更重要的是要多做几轮测试，及时修正问题。这里说明的是，测试用户几乎是任何懂得上网的人都可以，并不一定要与网站的目标人群想符合。
3、测试设备，只需要一间办公室会会议室、两把椅子、一台电脑、一台摄像机（可以屏幕录制软件代替）就可以了。我们可以把摄像机的信号传到四周的一个办公室（甚至一个小地方）里，以便开发团对的每个人都能进行观察而不会干扰测试用户。
4、任何人都可以发起测试。任何人都可以观察测试。
5、测试的项目：
“理解”测试。就是让测试用户看到网站，然后看他们是否理解这个网站，理解网站的目标、价值主张、组织方式、运行方式等。
要害任务测试。让用户完成一些任务，然后观察他们是怎么做的。
还有种最为简洁的“测试”方式，就是做好了一个页面，就立即给别人看，看他们是否理解，当然这种我们都做到了，呵呵！
2、每轮测试的理想用户数量是三个，最多四个。前三个用户可能会碰到几乎所有最明显的问题，而且更重要的是要多做几轮测试，及时修正问题。这里说明的是，测试用户几乎是任何懂得上网的人都可以，并不一定要与网站的目标人群想符合。
3、测试设备，只需要一间办公室会会议室、两把椅子、一台电脑、一台摄像机（可以屏幕录制软件代替）就可以了。我们可以把摄像机的信号传到四周的一个办公室（甚至一个小地方）里，以便开发团对的每个人都能进行观察而不会干扰测试用户。
4、任何人都可以发起测试。任何人都可以观察测试。
5、测试的项目：
“理解”测试。就是让测试用户看到网站，然后看他们是否理解这个网站，理解网站的目标、价值主张、组织方式、运行方式等。
要害任务测试。让用户完成一些任务，然后观察他们是怎么做的。
还有种最为简洁的“测试”方式，就是做好了一个页面，就立即给别人看，看他们是否理解，当然这种我们都做到了，呵呵！
如何处理测试出现的问题？
示例代码 [www.mb5u.com]
1、给问题分类。回顾大家看到的问题，决定那些需要修正。
测试中可能出现的几个问题：
用户不清楚概念。他们看着网站和页面，要么不知道网站说什么，要么理解有误。
他们找不到自己要的字眼。这就意味我们组织的内容和分类不符合用户的习惯，或者没有他们期望的名字出现。
内容太多了。有时候，他们要找的内容就在上面，但是他们找不到。这就需要减少页面干扰，把他们需要看到的内容设置醒目，让它们从可视层级中突出。
2、解决问题。通过测试，站在用户角度看自己的作品，这样的体验经常能为问题提供全新解决方案，或者可以让我们有一种新的眼光看原来的问题。团队不必对完美的解决方案达成一致，只要确认下一步做什么就可以了。
测试中可能出现的几个问题：
用户不清楚概念。他们看着网站和页面，要么不知道网站说什么，要么理解有误。
他们找不到自己要的字眼。这就意味我们组织的内容和分类不符合用户的习惯，或者没有他们期望的名字出现。
内容太多了。有时候，他们要找的内容就在上面，但是他们找不到。这就需要减少页面干扰，把他们需要看到的内容设置醒目，让它们从可视层级中突出。
2、解决问题。通过测试，站在用户角度看自己的作品，这样的体验经常能为问题提供全新解决方案，或者可以让我们有一种新的眼光看原来的问题。团队不必对完美的解决方案达成一致，只要确认下一步做什么就可以了。
值得申明的是，成功的网页需要巧妙的平衡，一个微小的变化都可能带来不小的影响。有时候，真正的挑战不是我们如何修改我们发现的问题，而是修改这些问题后，同时不破坏已经正常运行的部分。非凡是，当把某部分调整得突出的时候，是不是把其他内容重要性降低了。
总之，我们要做一个“好”网页：
示例代码 [www.mb5u.com]
——让用户在我们网站是做什么的，最大限度明白简易
——告诉用户想要知道的
——尽量减少步骤
——花些心思
——知道用户有哪些问题，并给予解答
——为用户提供协助
——轻易从错误中恢复
——如有不确定，要记得向用户道歉
——告诉用户想要知道的
——尽量减少步骤
——花些心思
——知道用户有哪些问题，并给予解答
——为用户提供协助
——轻易从错误中恢复
——如有不确定，要记得向用户道歉
相关Web标准教程：
。