每个人都会赞同可用性是网站的一个很重要的方面的说法。无论你是在做一个作品集网站、网上商店还是网络应用，让你的页面对用户来说可以容易和快乐的使用是一个关键。这些年，很多人在网站和界面设计的很多方面完成了很多的研究，这些结论在帮助我们提高我们的工作方面很有价值。这里是能够帮助你提高你的网站的用户体验的10条有用的可用性结论和指南。

 

Form标签最好放到字段的上面

UX Matters的一份研究发现表单中的标签(label)的理想位置是在字段(field)的上面。在很多的表单中，标签被放到字段的左边，以形成一个两栏的布局；尽管这样看起来不错，但它不是最容易使用的布局。为什么这样说呢？因为表单通常是垂直导向的；也就是用户从上向下填写表单，用户是向下浏览表单的。这样在标签下面放置字段比在标签右边放置字段要更容易(浏览)一些。

Tumblr 遵循UX Matter的建议，提供了一个简单而简洁的注册表单。

在左侧放置标签还会引发另一个问题：你让标签居左还是居右？居左可让表单可扫描但是会将标签和字段分离，从而使得区分哪个标签归哪个字段就比较困难。居右则相反：它可以实现好的界面但是可扫描性弱些。在各种情况下，标签在上面是最好的。该研究同时发现标签最好不要加粗，尽管此条建议并不能令人完全信服……

用户关注面部

当别人进入到视野的时候，人们本能的会立马注意到他们。在网站页面，我们趋向于关注人的面部和眼睛， 这为市场人员提供了一个引起关注的很好的技术。但是我们被人们的面部和眼睛吸引只是个开始；事实证明，我们确实会将目光转向图片中的人正在看的方向。

一个正在看我们的小孩儿的图片的眼动跟踪热图，来自于UsableWorld的研究。

那么现在这个小孩正在看内容。注意人们在看向标题和文字的方向增长。

这里是一份描述这个的眼动跟踪研究。我们本能的被吸引到脸部，但是如果那张脸在看其他地方而不是我们，我们同样会看那个方向。利用这种现象来吸引你的用户的注意力到你的页面或广告中最重要的部分吧。

设计的质量是可信度的一个指标

各种研究已转向到是什么影响人们对网站的可信度的看法方向：

• Stanford-Makovsy网站可信度研究2002: 调查当前什么让一个网站可信(pdf)
• 什么让一个网站可信？大量定量研究的报告(pdf)
• 计算机可信度元素(pdf)
• 影响网站可信度的元素：一份源自自我评定研究的早期结果(Proceedings of ACM CHI 2000 Conference on Human Factors in Computing Systems, v.2, New York: ACM Press)

我们不知道Fever app 是不是真的比较好，但是时尚的用户界面和网站给我们很好的第一印象。

这些研究的一个有趣的结论是用户真的通过封面来判断一本书… 更确切的说，一个网站依赖其设计。比如布局、一致性、排版、色彩和样式之类的元素都会影响到用户对你的网站的理解以及你的项目的形象。你的网站不应该仅仅有一个良好的形象，还应该就是你的用户所需要的。

其它影响可信度的因素有：网站的内容的质量、错误数、更新频率、易用以及可信赖的作者。

大多数用户 不 滚动

Jakob Nielsen关于多少用户滚动的研究(在 Prioritizing Web Usability)显示只有23%的访问者在第一次访问一个网站的时候滚动。这意味着77% 的用户并不滚动；他们只是看折叠线以上(也就是不用向下滚动而在屏幕上可见的页面区域)的内容。而且，回访时滚动的用户的百分比也有所降低，只有16%的用户在他们第二次访问时滚动。这些数据强调在显著的位置放置关键的内容是多么的重要。特别是在登录页面。

这不是说你应该把所有东西塞到页面的上部区域里面，只是说，你应该最好的利用那一块地方。把内容填塞进去只会让内容难懂；当用户看到太多的信息，他们会不知道该从哪里开始看。

Basecamp很好的利用了空间。折叠线以上(768 像素高)，它显示一个巨大的截图、标语、有价值的主张、行为召唤、客户列表、视频和使用图片展示的简短特性列表。

这对主页是最重要的，大部分新访问者都会浏览首页。所以请在那里提供这些核心要素：

1. 网站名称；
2. 网站的有价值的主张(比如说，用户将从使用中得到什么好处)；
3. 与用户相关的主要部分导航。

但是，现在用户的习惯已经发生明显的改变了。最近研究证明用户对滚动相当接受，而且在某种情况下他们会期望滚动到页面的底部。很多用户喜欢滚动胜过分页，而且对很多用户来说页面的最重要的信息并不是必须放在“折叠线上面”(这是因为各种大量的可见的显示方案是无用的，拒用)。所以将你的布局分割成段以方便浏览是个很不错的主意，使用一些空白分开它们吧。

想了解更多信息可以查看这些文章：将折叠展开 (Clicktale), 分页与滚动 ( 威之卡大学 – SURL), 打破折叠的神话 (盒子与箭头)。(多谢Fred Leuck).

蓝色是链接的最佳颜色

尽管给你的网站一个独特的设计是很棒的，但是当遇到可用性的时候，做其他人正在做的是最好的。遵从惯例，因为当一个人访问一个新的网站的时候，他们寻找东西的第一个位置就是他们在其他大多数网站找到它们的地方；他们利用他们的经验来理解新内容的意思。这被称为使用习惯。人们期望某些东西保持一致，比如链接颜色、网站的logo的位置、tab导航的行为等。

Google在其网站上保持所有的链接都是蓝色只有一个原因：大多数用户对这个颜色熟悉，这使得很容易定位。

你的链接应该是什么颜色？第一要义就是差异(对比)：链接要足够暗(或者亮)以和背景色相对照。其次，它要能从其他文本中凸显出来；所以，不要在黑色字体上使用黑色链接。最后，研究表明(Van Schaik 和Ling)如果可用性是你的重点，保持蓝色链接是最好的。浏览器的默认链接颜色是蓝色，所以用户比较期望它。选择一个其它颜色绝对不是问题，但是它将会影响到用户找到它的速度。

理想的搜索框是27个字符宽

搜索框的理想宽度是多少？有这回事儿吗？Jakob Nielsen做了一次关于在网站的搜索框中搜索问题的长度的调查(Prioritizing Web Usability)。结果是现在的大部分搜索框太短了。搜索框太短的问题是即便你可以输入较长的问题，你也只能一次看到文本的一部分，从而使得难于检查或编辑你输入的内容。

该研究发现搜索框的平均宽度是18个字符。数据显示27%的查询太长以至于不能输入。扩展搜索框到27个字符能够满足90%的查询。请注意，你可以使用em设置宽度，而不是像素或者pt。1em正好是一个“m”字符的宽度和高度(而无论你的网站使用多大的字号)。那么，就用这个单位来控制搜索的文本框为27个字符宽吧。

Google的搜索框足够宽来容纳长句子。

Apple的搜索框有些短，会切断查询内容：“Microsoft Office 2008.”

总体来说，搜索框太宽比太短要好，这样用户就可以快速检查、核实并提交查询。这条准则相当简单，但是不幸的是常常被无视。在输入区域里使用一些内边距(padding)同样可以提高设计和用户体验。

空白可以增进理解

很多设计师都知道空白的价值，也就是页面中段落、图片、按钮和其它元素之间的空白。空白通过给各元素足够的空间来“呼吸”以避免页面过于拥挤凌乱。我们也可以通过减少条目之间的空间和增加它们与页面中的其它条目之间的空间来进行分组。在页面中显示条目之间的关系(比如，在这个条目集那里显示这个按钮)和构筑元素的等级很重要。

注意Netsetter网站上的大大的内容margin、padding和段落空间。所有的这些空间让内容更容易和舒适的阅读。

空白同样让内容更加清晰易读。一份研究(Lin, 2004)发现段落之间和左右间距可以增进理解20%左右。用户会发现更容易聚焦和处理使用大空白的内容。

事实上，根据Chaperro、Shaikh和Baker的研究，一个页面的布局(包括空白、标题、缩进和插图)可能不会明显的影响表现但是肯定会影响用户的舒适度和体验。

有效的用户测试并不一定要广泛

Jakob Nielsen关于在可用性测试中的测试对象的理想数字的研究表明仅仅测试5个用户就可以发现你的网站的所有问题的85%，而15名用户就能发现差不多所有的问题。

来源: Jakob Nielsen’s AlertBox

最大的问题通常是第一个或者第二个用户发现的，后续的用户会确认这些问题并发现其它的一些小问题。只有两个测试用户的话可能能发现你的网站的一半的问题。这意味着测试并不是必须要很广泛或者很昂贵以获取较好的结果。最大的收益来自于从0个测试用户到1个，所以不必担心测试用户太少：任何测试都聊胜于无。

信息产品页面可以助你引人注目

如果你的网站有产品页面，人们在线购物的时候将一定会看到它们。但是很多产品页面缺乏足够的信息，甚至不足以让浏览器快速浏览。这是个严肃的问题，因为产品信息有助于让人们下定购买的决心。研究显示缺乏产品信息会导致大概8%的可用性问题和甚至高达10%的用户失败(也就是说用户放弃并离开这个网站) (Prioritizing Web Usability).

Apple为其产品提供独立的“技术特性”页面，这可以将复杂的详情页面独立于简单的产品销售页面，然后在他们(用户)需要的时候提供一个方便的入口。

为你的产品提供详细的信息，但是不要掉进用太多文字炮轰用户的陷阱。让这些信息易于理解。通过将文字分成小段并使用大量的子标题让页面可浏览，为你的产品添加大量的图片，并使用合适的语言：不要使用术语，你的用户可能不懂。

大部分用户无视广告

Jakob Nielsen在其AlertBox entry中报告说大部分用户根本就无视广告横幅。如果他们在一个页面中寻找一个信息片段或者专心的看内容，他们是不会被旁边的广告扰乱的。

这意味着用户不仅会避开广告，而且他们还会避开一切看起来像广告的东西，即便它们跟本不是广告。一些重风格的导航条会看起来像横幅广告，所以小心使用那些元素。

FlashDen左侧的方形横幅确实不是广告：它们只是内容链接，但是它们的确看起来和广告条很像，以至于会被一些用户无视。

也就是说，如果广告看起来像内容，人们会浏览并点击。这会带来更多的广告收入但是会以你的用户的信任为代价，因为他们点击他们认为真的是内容的东西。在你采取那种方式前，请先衡量一下这笔交易：短期收益与长期信任。

号外：来自于我们的个案研究的结论

最近几年，Smashing Magazine的编辑团队带领了一些个案研究以试图找到一些普遍的方案和实践。到目前为止，我们已经分析了网站表单、博客、排版和作品集；更多的个案研究将在下个月发布。我们发现了一些能够为你的下一个设计充当指导方针的有趣的模式。

在这里，我们将回顾一下我们在那些个案研究中发现的一些实践和设计模式，简化这些概述，以使你更方便。

根据我们的排版研究:

• 行高(像素) ÷ 主体字体大小(像素) = 1.48
  1.5 通常被推荐于传统印刷的书籍中，那么我们的研究也支持这个单凭经验的方法。只有很少的网站使用小于这个的，而且使用超过1.48的网站就像也在减少。
• 行长度(像素) ÷ 行高(像素) = 27.8
  平均的行的长度是538.64 像素(不包括外边距和内边距)，这是相当大的，考虑到很多网站仍然在body中使用是12至13像素大小的字体。
• 段落之间的空间(像素) ÷ 行高(像素) = 0.754
  结果是段落空间(就是一个段落的最后一行和下一段落的第一行之间的空间) 难得的等于行间空白了(这将是完美的垂直节奏的主要特点)。更常见的是，段落间距正好是行间空白的75%。原因可能是行间空白通常都包括下行线；而因为大部分字符都没有下行线，那么多余的空白就出现在了线的下面了。
• 每行字符数最好是55到75
  根据传统排版图书，每行文字的最佳字符数是55-75，但是事实上，每行75-85个字符更流行。

根据我们的博客设计研究:

• 布局通常采用固定宽度(基于像素) (92%)并且通常是居中的(94%)。固定布局的宽度大部分在951px和1000px之间(56%)。
• 首页显示10到20篇日志的摘要(62%)；
• 一个网站的整体布局的58%用来显示主内容。

根据我们的网站表单设计研究:

• 注册链接写为“sign up” (40%)并被放置在页面的右上角；
• 注册表单有简单的布局，以避免分散用户的注意力(61%)；
• 输入字段的标题加粗(62%)，字段垂直放置的要明显多于水平放置的(86%).
• 设计师趋向于采用一些强制性字段和可选字段；
• 未提供Email验证(82%)，但是需要密码验证(72%)；
• “Submit”按钮即有居左的(56%)也有居右的(26%)。

根据我们的作品集网站研究:

• 89%的布局水平居中，而且他们中的大部分使用巨大的水平导航菜单。
• 47.2%的作品集网站有一个客户页面，67.2%有一些独立的服务页面。
• 63.6%对每一个项目会有个详细的页面，包括个案研究、感言、截屏幻灯、草稿和草图等。
• 联系页面包括努力方向、手机号码、Email地址、邮寄地址、名片以及在线表单。

其它资源(英文)

• 15个你从未听说过的有价值的可用性PDF
• 15个你应该知道的重要的研究结论
• 你应该知道的10个额外的研究成果
• 良好的可用性简介
• 11个从眼动跟踪研究中获得的成果
• 25个超级有用的可用性手册和清单
• 10个增加销售和用户忠诚度的可用性结论
• 网站表单设计指南：一份眼动跟踪研究

对我们所讲的有什么想法吗？或者了解其它的有用的可用性结论？请在下面留言给我们，多谢！

关于作者

Dmitry Fadeyev Usability Post 博客的创建者，在那里你可以读到他关于良好设计和可用性的观点。Follow Dmitry on Twitter @usabilitypost

Google近日推出了一款网站性能优化工具：Page Speed（http://code.google.com/speed/page-speed/）。它旨在帮助站长与网站开发者分析网站中存在的性能方面的问题，并有针对性地提出改进意见。Page Speed在功能方面极其类似于Yahoo!的网站性能优化YSlow，不过YSlow要比Page Speed推出早得的多。它们都是基于Firebug的Fireffox插件，使用方法也类似。这里我主要介绍一下Google新推出的Page Speed的使用，对Yslow感兴趣的朋友可以参照我以前的这篇文章《你的网站为什么会慢？——用YSlow为你的网站提速》，同时还有我翻译的Yahoo!的文章Yahoo!网站性能最佳体验的34条黄金守则——内容、JavaScript和CSS、服务器、图片、Coockie与移动应用，相信一定会对你提高网站性能有帮助。

一、Page Speed的安装及使用

Page Speed是一款Firefox插件，同时他依附于别款插件Firebug，也就是说你的Firefox浏览器中必须已经安装了Firebug才能安装Page Speed。安装环境为Firefox 3.0.4以上，Fireug 1.3.3以上。

Page Speed的使用也很简单，在Firefox中点击右下角的Firebug图标启动后，再点击Page Speed选项卡即可。要注意的是，你要对你网站内的某个页面进行性能分析，你必须先把该页面加载完成后才能使用Page Speed，也就是说只有在浏览器左下角出现“Done”或者”完成”之后才可以启用Page Speed进行分析。如果页面中流媒体，可能不会现在“完成”，这种情况要等到流媒体可以播放。

 

然后点击“Analyze Performance”（性能分析），这时Page Speed会根据web performance best practices （网页性能最佳实践）进行逐项打分。然后根据重要程序和优先级对每项进行排列。

此外，你还可以点击每条建议前面的“加号”展开查看详细的描述，或者直接点击每条规则相看该规则的具体内容，还可以点击“Show Resource”（查看来源）来查看每条建议是针对页面中哪部分内容提出的。

对于分析结果中的符号说明一下：

1. 红色感叹号代表高优先级提示，表示这一项严重影响了你的页面性能，你需要优先对其进行性能优化；
2. 橙色三角代表此项提示需要引起你的注意，并进行适当改进；
3. 绿色的对号代表该项规则在你的网站中应用得到，你在修改了前面两部分的提示之后，它们有可能变为绿色的对号；
4. 蓝色消息符号是为你提供了额外的帮助信息，请稍加留意（需要注意的是，如果你的页面中出现了大量的此类符号，可能是因为你在页面加载完成之前就进行了网站性能分析）。

二、活动记录

活动记录是一条页面活动的时间轴，它记录了包括网络事件、JavaScript运行在内的所有浏览器活动。你可以使用它并配合性能分析中的数据进一步对网站性能做出评估。

• 查看页面运行过程中所耗费的时间，以毫秒计算；
• 查看浏览器事件，包括页面加载完成后的事件；
• 区分造成页面响应缓慢的原因，其中包括网络来时、DNS查找、连接建立、JavaScript运行等；
• 获取在特定时间或者事件下才响应的JavaScript事件列表；
• 可以对其它标签或者窗口中打开的页面进行分析；
• 多页面加载时的页面加载顺序；
• 对根据Page Speed优化前后的表现进行对比。

三、理解Page Speed中的事件

页面记录选项卡下是通过时间线来记录各种资源加载到页面所有需要的时间。事件的记录时间间隔为10毫秒，如果事件需要的时间少于10毫秒那么它将用较短的色块来表示。时间线中没有任何颜色的表示，在浏览器事件的运行依赖于其它进程，如DOM和CSS渲染、Flash ActionScript、渲染、操作系统事件等。

网络事件		描述
	DNS	浏览器查找DNS所需要的时间
	t连接等待	浏览器与网站服务器建立连接（TCP）需要一定的时间。由于浏览器可以打开的连接数目是有限的，如果达到这个限制他必须等其它连接关闭之后才能再重新建立一个新的连接。（更多关于浏览器连接的信息可以参照Parallel downloads across hostnames）。 这个事件显示了浏览器等其它连接完成的时间。
	连接	浏览器和web服务器建立连接。这个事件只有打开新连接时出现，已有连接重新打开使用不包含在内。
	请求发送	浏览器发送的HTTP请求。只显示GET方式的请求。
	已连接	浏览器通过网络等待接收数据。事件随着浏览器TCP连接的结束而结束。
本地事件		描述
	缓存	浏览器成功将内容加入到缓存中。
	可用数据	可用于浏览器呈现的数据。由于web服务器发送大量的数据，如果文件很大那么有可能一个资源会出现多个该事件。
	获取JS	浏览器获取JavaScript。该事件可能会延缓其它事件，如果此种情况出现，将会在其下一行列出。
	运行JS	浏览器执行JavaScript。该事件可能会延缓其它事件，如果此种情况出现，将会在其下一行列出。如果获取JS和运行JS中间有时间间隔，这说明源文件中包括有延时功能的函数。

此外，Page Speed还包括了对已完成的JavaScript函数的信息搜集功能，当页面中的JS函数一旦运行，PageSpeed就会捕捉到相关信息。不通过对Page Speed进行设置还可以对未触发函数、延时加载函数等进行收集。

下面的图片显示了7800毫秒时已经加载但还未触发的函数列表：

而下面则显示是已经触发运行了的JS函数：

此外Pge Speed还有诸如JavaScript函数控制、浏览器User Agent设置等更高级功能。具体使用大家可以与YSlow对比一下。

相信，用好这两款工具，对于站长和网站开发者来说会有极大的帮助。

“用户体验（User Experience，简称UX 或 UE）是一种纯主观的在用户使用一个产品（服务）的过程中建立起来的心理感受。因为它是纯主观的，就带有一定的不确定因素。个体差异也决定了每个用户的真实体验是无法通过其他途径来完全模拟或再现的。但是对于一个界定明确的用户群体来讲，其用户体验的共性是能够经由良好设计的实验来认识到。计算机技术和互联网的发展，使技术创新形态正在发生转变，以用户为中心、以人为本越来越得到重视，用户体验也因此被称做创新2.0模式的精髓。”—–百度百科

  现在，几乎人人都在谈、在做用户体验，有为了用户体验而用户体验的；有不知何为用户体验，就乱指挥一通的；有做了几天可用性改进就宣称飞跃的…..当然，也有很多是踏踏实实为广大人民做实事，做好产品设计的。

  不管怎样，以下的思考文字中希望有那么一点点是闪光的，希望这些东西能给朋友们一些帮助和借鉴。

  看了百度百科的词条，结合自己的经验，可以这么理解：用户体验，是通过接触某样有形或者无形的事物后，建立在用户身上的一个范围比较广的情感叠加，跟乐高积木是一样一样的，堆得好，可以很高，某一块不稳，就会全倒下。那，到底如何全方位来把握用户体验呢？

  1.一个购书体验：流程流畅度

  给自己买一本书，我想到的是淘宝和当当，有人会说：买书当然去当当或者卓越了。我不是这么认为的，首先，都是网购，淘宝也卖书，并且能讨价还价，能了解更多细节，而当当不能，但如果在淘宝上价格太高，没有当当划算，且不是很急着买，那我会选择当当。

  —–这里面有两个点：网络购物习惯养成的条件反射和买卖家之间的交流，这两个是体验的一部分。

  决定上当当后，打开首页，logo旁的“十年品质 放心低价”，有点暖，而导航下左边的这个绿色突出的区域也表明，当当主要核心业务就是书！整个配色在视觉上挺舒服，而导航和搜索也让我很快找到我要买的书—《教父》。

  ——站点的载入速度是个大问题，当当基本能在3秒内打开首页，不错的优化。广告语和用色贴合国内消费人群的心理，起码对于我来说，觉得：可信赖，不太乱。

  找到我要的书后，我点击了购买，进入了我的购物车，有一个疑虑、不舒服：

  —–不知道这个是好，还是坏，可能对于不同的人，有不同的感受，这个推荐本身是很好的，但让我疑惑的是，它大面积的空间和众多黄色按钮，让我找不着北了，因为到这步，

  我心里想着：该结算了，但处于商业目的，推荐区域在一定程度上(或许我比较闲的时候，推荐对我有用)干扰了我。

  接下来的结算流程很顺利，我选择的是货到付款，很好的是：最后提示我，发货地点是广州，会在2-3天后发货，邮箱也很快收到订单生成的邮件。接下来就是等待，三天后，接到声音不太舒服的电话，说是当当网的，我想，应该是书到了。可怜的是，对方收钱时，零钱不够。

  —–最终是买到书了，快递的小伙子找不了我的零钱，我也没要了，书的包装不太好。

  整个过程，总体打分8.5分。总的来说，这本书的购买的体验流畅度是很满意的，没有出现意外的中断，要知道体验的流程能完整的走完才意味着，这个产品、这个服务，是可用的，这是根基，其他的视觉效果和折扣等等，都是建立在他之上。而流畅度，就跟用户在这个过程中碰到疑惑和不解的强烈程度是成反比的，想提高流畅度，就需要捋清楚，让这个核心购买流程以最短的时间完成，减少干扰。

  2.边缘体验，一样的重要

  上面的购书例子，有个地方很重要，那就是最后的线下体验，我把他作为边缘体验的一种，有别于线上的核心业务。

  订单下来后，系统能根据我提交的送货地址，选出最近的发货地点，减少物流时间，并且让购买者知道，这个点是好的，说明：我一直为你着想。

  但快递环节却有点问题，因为存在一定的不可控因素。送快递的人，需要经过一定的培训，否则，是在砸当当的牌子。电话中的语气让人不舒服，书的包装问题也让人不安，书角磨破了，就这两个点，购买者就有可能把整个交易撤销。

  属于边缘体验范畴的还有很多，例如：你到了牛商网举办的一个论坛，门前的海报是否能够传递本次论坛的信息、是否能够将牛商网的品牌进行诠释，给你的良好感觉有多少？再例如市场营销人员的着装和谈吐，在用户眼里，在一定程度上，也在间接体验他们的产品，起码，穿着拖鞋的营销，不会给人好的感觉。边缘体验，一样重要。

  3.无形的体验

  无形的体验有两种，一种是某用户在使用、体验产品后得出口碑传播给另外的用户或者潜在用户，对于后者，他已开始无形情感体验；另一种是用内而外的，是生产此产品的团队或者说这个企业由内发出的一些信息，有意的或无意的信息。

  对于第一种，有时候口碑会决定了某个用户是否与产品有缘，举个例子，小姨买了一个xx牌子的冰箱，用了两个月，灯管坏了，打开冰箱门灯不亮了，联系维修后好景不长，还是坏，于是她对死党说：以后打死也不会买xx牌的东西了，这个死党有可能以后就跟这个牌子绝缘了，因为她对“它”的无形体验很不好。当然，这个口碑产生的根源，就是产品质量本身。

  而第二种范围包括的就比较大了，如果是上市公司，那么你的财务状况是否良好；组织结构是不是频繁大调整；员工整体对外的信息放射是否正面；网络媒体，传统媒体传播的信息是否有利公司发展（不管是不是软文），这些，都是用户或者潜在用户、普通人可能接触到的一面，这也是一个无形的体验。

  4.引领用户的“体验”

  在初步发展阶段，无数产品和服务都是跟随用户需求，用户需要什么，就给什么，以找准需求点为重中之重，这个是对的，但到了产品成熟期，到了市场占有率足够高后，需要考虑的，就是引导潮流，引领用户朝双赢的方向。web中的视觉概念设计，汽车中的概念车，走的，就是这个路线。

  5.核心产品体验

  这个放在最后是因为是人都知道，核心产品，必须做好可用性，通过不断迭代，适当做好减法，提供一个体验好的产品。具体到各个产品和服务各不相同，无需展开。

  总之，用户体验设计并不复杂，但需要耐得住性子，需要注意触角，因为，从接触这个品牌那一刻起，用户体验就在进行，是叠加还是消耗呢？就看能否尽量做到人人UE，能否将这些好的idea引导、聚合。

文章出自中国网络营销第一站——牛商网（http://www.nsw88.com），转载请注明出处并加上链接。

这个话题是应腾讯ISD同仁之邀在WebReBuild三周年交流会上做的主题分享。由于临场等原因有些问题当时没有讲明白，回来后按原有思路形成了一篇小论文，对其中一些问题进行了进一步阐述。现场有位同行朋友提出了对使用表现性语义的质疑，当时没有给出让他满意的答复，因此文章中花了较多的篇幅来探讨语义性有关的问题，算是对那位朋友的解答。

一、 公用样式模板的“公用”的含义

1. 能够应用在不同功能的web系统上（用在哪？）

企业的web开发团队除了开发一些在公共平台运营为公司用户服务的web产品，也会开发一些供公司内部团队使用的信息管理系统(IMS，Information Management System)，用以优化流程，提高办公效率。例如企业ERP（Enterprise Resource Planning）、人事管理、工作流程管理、销售管理、仓库资源管理等系统。这类系统主要供内部部门使用，功能繁杂，注重信息的组织和功能的实现，对前台界面的个性化要求不高，不必要每个系统都重新设计制作界面，提供一套公用样式模板可以有效地提高开发效率。

2. 提供给不同专业背景的人使用（给谁用？）

有一类web页面时效性很强，需要非常快速地制作上线，例如一些新闻专题；另外有些页面总量很大，但结构相似，例如上面提到的IMS系统的很多不同的功能模块。这类页面由于时间限制或者根本没有必要由专业的重构人员来精细制作，写好每一个页面每一个标签的代码，所以也有必要提供一套使用方便的公用样式模板，供内容编辑、或者后台开发人员直接使用。

二、 公用样式模板的设计要求

能够应用在多个web系统上要求

1. 公用模板设计需要具备抽象性、代表性

(1). 整体规划页面层次逻辑

1. h1,h2,h3,h4,h5,h6 的整体规划

   一本书的目录部分，往往能很清晰地体现出这本书的结构层次，第一章第一节第一小节，次序井然。好的网页也应该有清晰的层次逻辑，网页大标题、次级标题、段落内容等，层层展开。(X)HTML网页标记语言本身也给我们提供了标识网页层次的标签：h1/h2/h3/h4/h5/h6。在公用模板中要整体规划好网页内容的结构层次，并恰当地使用这些标签来体现。在禁用CSS的情况下，可以从浏览器默认样式方便地看到网页的结构层次。

2. 清晰的导航菜单和面包屑(crumb)标识在做好上面合理地规划h(n)标识的情况下，导航菜单和面包屑导航在网页上能更加直观地体现网页的层次，也是增强网页可用性必须具备的网页元素。

(2). 具有代表性的页面布局结构

网页结构布局也有一定的范式，往往包括页头、导航菜单、主体内容和页脚。遵循这些最普遍的布局原则才能最大程度保证公用模板的通用性。

(3). 具有代表性的页面元素

1. Logo、网页大标题

   Logo具有品牌标识作用。大标题最直接地告诉用户网页/系统的内容/用途，但不是必备的，有些网页只有logo和副标题，因此设计时网页大标题可以作为可选项目。

2. 导航菜单

   导航菜单的重要作用不再强调。需要注意的是，在设计模板菜单样式的时候，要有标识当前项的样式，以及需要特别强调的进行高亮显示的项目样式。还要考虑多级菜单对子菜单进行下拉或者折叠显示的情况。设计的时候考虑周全，在需要的时候可以方便地进行拓展。

3. 面包屑导航

   不多强调，相当于网页上的GPS。

4. 数据表格、文本内容

   这类元素往往是网页的主体内容，用以呈现格式化的信息。在设计制作数据表格的表头、单元格样式的时候，需要考虑根据不同的数据形式，样式可能也会不同。比如较长的文本内容可能需要在单元格里左对齐，而数字类型数据，为了直观地比较数位大小，通常需要右对齐。有时候数据内容比较多，需要分页进行显示，所以也有必要提供一个具有良好用户体验的分页样式。

5. 数据录入表单

   用以录入数据的表单组件：单选框、复选框、下拉框、文本框等等。可以根据需要对这类网页原生的交互组件的默认外观进行统一的初始化。如果对交互效果要求比较高，需要设置鼠标、键盘事件与表单项进行交互时的不同样式（如 onmouseover、onclick、onfocus等）。由于IE6-对伪类选择器（hover、focus）支持不完善，制作这些效果的时候要使用脚本进行一些兼容处理。另外，还有一些填写表单时的注意事项等提示类信息，以及对录入数据进行验证出错时的错误提示信息，这些信息通常会显示在表单旁边，验证错误时还需要将出错的表单项进行高亮显示，这些样式在公用模板里都需要进行设计。

6. 各类备注、报错、提示信息包括上面提到的附加在元素旁边显示的表单填写提示及验证报错，和一些对内容进行解释的备注说明等，还有一些可能会以单独模块出现，例如用户操作成功、失败或者是登陆超时等提示信息。
7. 交互UI组件：切换标签、下拉菜单和模态弹窗等

   除了网页表单控件以及浏览器提供的消息组件（alert、confirm、prompt），经常还需要用到一些自定义的交互组件，例如切换标签、下拉菜单，以及考虑到易用性问题而对浏览器消息组件进行封装的模态弹窗等（例如lightbox、thickbox），可以选择最常用组件集成到公用模板中。

能够供不同专业背景的人员使用则要求：

2. 使用方便，易于自学

(1). 简单易记的命名规则

1. 结构语义性：class=”newsList” wrapper、nav
2. 表现语义性：class=”textLeft” cRed、f14px

具有语义的内容是最容易理解记忆的。有一种记忆法就是使用一些有一定意义的联想来增强对陌生内容的记忆。公用模板中可以使用具有简明语义的名称来对选择符进行命名，这样，非专业做重构开发的模板使用者，不必具有专业的CSS方面的知识或者是阅读很复杂的说明文档即可从命名上对模板中的选择符的用法进行理解，掌握了其中的规律，就可以非常快速地自学以达到熟练运用。

Web标准的所谓的语义性，主要是指(X)THML标签上的语义，强调要按照标签元素最初的定义去使用他们；同时提倡要使用具有结构属性语义的标签，而避免使用具有表现语义的标签。例如使用h(n)来标识各级标题，ol用来建立一个有序列表，li来标识列表项；对于small、b、i、blink、center这类含有元素视觉表现语义的标签，则要尽量避免使用。事实上除了(X)HTML标签名上固定的语义，还可以通过一些标签自定义的属性值来增强语义。例如后来出现的微格式（Microformat），就是基于class属性值的语义性的应用。

由于id的唯一性，使用id选择符的样式在同一个页面中不能重用。为了保证定义样式的可重用性，通常需要使用类定义（class）作为选择符。在对class属性值进行语义化命名的时候，严格遵循web标准结构与表现分离准则的人可能会排斥使用表现性语义，他们认为一旦需要通过改变CSS定义来更新元素的外观，类选择符所含有的表现语义就会与它修改后的实际外观不符合。例如设置左对齐并且类命名为“textLeft”的样式，如果把CSS定义更改为右对齐，则类选择器的命名语义与它的实际内容并不符合。首先要承认这种考虑是非常细致的。但实际项目的开发往往非常复杂，要综合考虑多方面需求，很难在某一方面达到理想状态。在一个大型系统的诸多页面中，要将所有使用到样式的元素都用某个结构特征来进行描述，从我的个人经验来看这是非常伤神的一件事。这些具有细枝末节的结构语义的样式的通用性也很成问题——有些元素只是使用了相同的样式，比如相同的字体、颜色等，但他们代表的结构属性却并不相同，如果选择器全部以结构语义来进行命名，很多外观相同但结构语义不同的样式就要重复定义了。例如，我们在如下两个地方都用到了红色字体，一个是报错警示信息，一个是地方是股票上涨点数，如果全部用语义命名方式，就需要分别命名一个“error”和一个“strengthen”的类定义，并且都设置属性“color:red”，这个“color:red”就在这两个地方重复定义了。如果有一个以表现语义命名的类“cRed”并设置表现语义所对应的红色样式，就可以在这两个地方同时使用“cRed”这个类了。另外还需要强调的是，我们设计制作的是“公用样式模板”，已经是经过整体规划高度抽象化了的具有代表性的元素样式，应该保持已有CSS的稳固，在需求有变的情况下宁愿去改变(X)HTML端的选择器挂钩，而不应该随意改变CSS中已定义好的属性。在必要的地方使用表现语义进行命名也是有一定合理性的。

所以，任何固有的规则都会有两面性，需要我们根据实际情况去权衡利弊。在对可变需求有一定的预见性的情况下，灵活地打破规则书写更易维护代码这也是开发人员的一项专业素质。“遵守规范的一个重要标准，就是知道何时打破它，并大胆地打破。”不应该死守教条，这样只会画地为牢自筑樊篱。只有搁置争议，综合运用，才能在项目需求、开发成本、维护成本的多方博弈中取得均衡。

(2). 简单易理解的嵌套层次

1. 布局最好可视化，能通过 IDE 操作，局部运用table
2. table布局的弊端：不符语义性、解析慢、重用性

学业启蒙时代习字本上的方格子，办黑板报也先用三角尺来画格子，这些少年时的记忆都直观地给了我们这样的印象，规整的格子是来排版布局的最好辅助。互联网发展初期的网页也是用表格（table）来进行布局的，这个时期的Web设计人员直接在IDE的可视化视图下就可以完成页面的排版布局。随着技术的深入发展，table布局方式的弊端也逐步暴露出来——语义性差不利于搜索引擎，整个table全部加载完才显示出来导致浏览器解析缓慢，代码不够精简冗余度高等。网页设计制作人员开始使用更专业的方式来进行网页布局——(X)HTML来标记数据组织结构，CSS设置外观样式。这种新的方式克服了table布局时代的一些缺陷，也对网页制作人员有了更高的要求，需要专业的代码编写知识甚至一些复杂的技巧。比如，为实现三列等高自适应的布局，有些重构人员通过运用复杂的标签嵌套，配合一些奇异的CSS hack方式来最终实现效果。

在提供给其他专业背景人员使用的公用样式模板中，我们也推荐使用CSS进行布局，但那些复杂的嵌套方式则是不可取的。这对于使用者来说不易理解，也难以使用。简单易理解的嵌套层次是必要的，甚至，为了给使用者带来方便，我们还可以对web标准进行一些折衷——鉴于table布局的直观和在IDE可视化视图里可以直接进行操作，我们可以在局部范围使用一些小的table来实现多列的布局。如下图例：

整体框架布局采用CSS控制，在局部的小模块里，使用table（图中红色部分所示，实际运用中边框不可见）来实现多列的布局，其他地方，web标准推荐使用什么就采用什么标签。这样，一定程度保持了语义性（实际上，页面语义性标签对于搜索引擎的引导作用会越来越小，随着搜索引擎越来越智能化，分词技术、数据挖掘技术的进一步发展，搜索引擎完全可以脱离页面标记而直接从文本内容来分析页面。语义化更大的作用将会体现在方便数据共享(例如RSS、微格式等)和利于代码维护。个人观点，接受有风险，参考须谨慎），分散的小表格克服了浏览器对于大的table解析缓慢的弊端，这些仅供实现多列布局的table也不会影响代码重用而造成代码冗余。

对于一些网页元素，根据其特点扬长避短灵活地运用，才能最大程度地裨益我们的项目。

设计开发人员的专业水准

3. 设计风格统一，保持一致性

设计师主导着网页的视觉风格，他们充分发挥聪明才智使用户界面好用又好看。但任何创造性的工作，也都需要遵循一定的范式。书法家泼墨挥毫笔走龙蛇，看似漫不经心，实则章法井然法度森然，钤印题款都有讲究；音乐家作曲，灵感喷涌如滔滔江水绵绵不绝，音符的组织却必须符合韵律节拍；诗人情感迸发，花间一壶酒，笔下三千言，但好的诗作往往也需要讲求平仄格律。设计师在设计模板样式的时候，也要有一定规范。对于字体、字号，常用颜色，以及模块的边框、间距等，要有整体规划，保持一致性，同一元素在不同页面的风格保持统一。只有这样，负责代码编写的重构人员才能对元素样式进行抽象化，提炼出可以重用的部分编写高效代码。这些规范一定是设计师与重构开发人员在长期的交流探讨中逐步完善的，有一定跨专业的知识对于两者的合作将大有益处——请永远记住，你不是一个人在战斗。

4. 合理拆分样式，巧妙组合运用

网页模板的设计风格确定了，剩下就要靠页面工程师来把设计图稿实现成精良的网页了。考量网页重构品质的各项指标之中，包括浏览器兼容性、代码的易扩展和可重用性。要做好这些，必须对抽象出来的页面元素样式进行合理拆分，区分哪些样式可以作为全局公用，哪些需局部定义，并运用样式的继承覆盖原则进行优化。

(1). 样式拆分组合的理论依据

1. class=“cRed textLeft ”class属性可以赋值为多个类选择器名称，中间用空格分隔，这多个类定义的样式可以同时作用于标签元素。依据这一特性，可以在CSS里定义时对样式进行拆分打散，在(X)HTML里调用样式类时再将其组合使用。例如，有些常用的字号和颜色可以单独进行全局定义，在具体模块的类“newsList”中定义其他除字体和颜色之外的样式属性，用class调用样式的时候再组合多个选择器进行赋值 class=“newsList f14px cRed”。这样，颜色和字号属性在全局范围内就可以多次使用，提高了样式的复用率，松散耦合的样式也更利于扩展。而且，同一属性进行最少次数的定义，一定程度也优化了CSS性能。
2. 样式的继承覆盖原则，选择器优先级算法在对样式进行全局公用或局部特殊定义时，考虑最多的是样式的继承覆盖原则。对于最普遍的样式进行全局定义，在需要个性化定义的地方再对全局样式进行覆盖，可以很大地提高CSS效率。这正是辩证唯物主义关于矛盾普遍性和特殊性关系的典型实践。例如，为改善CSS的浏览器兼容性而定义的reset文件作为全局样式，将元素在各个浏览器中表现不同的默认样式进行了初始化，在页面的具体模块中需要个性定制元素样式的地方再对初始化的样式进行覆盖。要有效地利用继承和覆盖原则，关于选择器优先级的算法必须熟练掌握。id选择器、类选择器、标签选择器以及行内样式的优先级权重是不一样的，特别是这些选择器进行组合运用的时候。

本文从公用样式模板的设计制作为例，详解了一个项目从实际需求到技术要求的分析过程，以需求为主导，不放弃专业追求的理念贯彻其中，未涉及具体的技术实现细节，旨在提供一种思考问题的思路，希望能给大家提供借鉴。

附录：

演示幻灯片下载

本文来源：http://www.ued163.com/?p=597

最近对微格式进行了一些学习，在学习过程中收获不少。在此分享下，欢迎交流！
微型格式的优点：
1，语义化的HTML和CSS类名称来标记共同内容。
2，使机器可以阅读和理解可能只有人类可理解的数据，一系列的标准化方法。
3，微格式允许网站上的内容轻易地与其他应用对接，从而提高信息的使用率。

hCalendar微格式基本规则：
1，属性和子属性通过class来描述。
2，特定的hCalendar属性是建立在iCalendar属性名称基础上的如:vevent
3，属性和子属性名字大小写敏感
4，”根”属性不能同其他属性组合。如<div class=”vevent summary”>是无效的。
<dl class=”vevent”>
<dt>我的个人日程：</dt>
<dd><a href=”http://sports.163.com” class=”summary”><span class=”category”>游泳</span></a></dd>
<dt>活动时间：</dt>
<dd><abbr class=”dtstart” title=”2009-05-19T18:00:00″>05-19</abbr>–<abbr class=”dtend” title=”2009-06-19T18:00:00″>06-19</abbr>, <abbr class=”duration” title=”P4W”>持续4周</abbr></dd>
<dd class=”vcard”><a class=”fn” href=”http://www.ued163.com/”>Jalin</a> <span class=”title”>前端开发</span> <span class=”locality”>广州</span> <span class=”org”>UED163</span> <a href=”mailto:jalin668@126.com” class=”email”>jalin668@126.com</a></dd>
</dl>
<div class=”mytag”>
<a href=”http://www.163.com/firefox/” title=”firefox” rel=”tag”>firefox</a>
<a href=”http://www.163.com/IE/” title=”IE” rel=”tag”>IE</a>
<a href=”http://www.163.com/safari/” title=”safari” rel=”tag”>safari</a>
<a href=”http://www.163.com/chrome/” title=”chrome” rel=”tag”>chrome</a>
<a href=”http://www.163.com/oprea/” title=”oprea” rel=”tag”>oprea</a>
</div>
<div class=”copyright”><a href=”http://www.ued163.com/” rel=”license”>版权：UED163</a></div>

以上demo比较基础而且简单易懂，试着应用下吧:)

事件属性说明：
summary 事件的概要信息
category 事件的类型
url 事件的链接
dtstart 事件的开始时间/日期，即触发事件
duration 事件的持续时间
duration 日期/时间信息定义：
P2Y = 持续2年
P10D = 持续10天
P3H = 持续3个小时
P2W = 持续2周
P8DT8H8M = 持续12天8小时8分钟

vcard 联系人说明：
fn 表姓名属性值
email 表邮件属性值

reg 属性说明
我的标签：reg=”tag”
版权使用权rel属性说明：rel=”license”

以上代码产生效果显示:

检测微格式插件（现只有Firefox与Safari）：
firefox:Operator,Tails Export
Safari:Safari Microformats

微格式参考资料：
http://www.ablognotlimited.com/articles/getting-semantic-with-microformats-part-4-hcalendar/

http://microformats.org/
Dreamweaver微格式扩展
http://www.Webstandards.org/action/dwtf/microformats/