1.UI-patterns

　　UI-patterns是一个顶级用户界面库，收集展示了一些改进过的设计模型，比如验证码、帐户注册、导航标签等。

2.Yahoo! Design Pattern Library

　　Yahoo开发网络有一个日渐丰富的设计模型库Yahoo! Design Pattern Library。这里展示了用户界面设计方面的通用设计模型。一些广为讨论的模型包括模块标签、拖放操作和评级评论。

3. UI Pattern Factory

　　UI Pattern Factory既是一个UI模型库又是一个UI画廊。它展示和讨论堆叠标签、旋转灯笼效果、即时点击编辑等UI模型。

4.Welie.com

　　Welie.com的交互设计模型库提供了各种交互设计的设计模型，包括面包屑导航、导航标签、评论框等等。

5.Pattern Tap

　　学习有效用户界面的设计，最好的办法是看看其他设计师是如何做的。你可以从Pattern Tap的设计模型展示中获得灵感。这儿收藏了表单设计、登录界面、二级导航、按钮等资源。

6.Design with Intent

　　Design with Intent 是 Dan Lockton 的博客，主题是理解和影响用户交互。

7.Usability First

　　Usability First旨在提供与网站和应用相关的可用性的有价值的资料。Usability first的分类包括网站设计、可用性投资回报率和网络无障碍设计。

8.Usability.gov

　　Usability.gov是由美国卫生与公众服务部提供的可用性和用户中心设计的政府资源。您可以在这儿学习可用性基础和可用性方法。

9.Designing Interfaces

　　Designing Interfaces是一本在线图书，也就是O’Reilly’s出版的《Designing Interfaces: Patterns for Effective Interaction Design.》的摘要。（豆瓣）

10.InfoDesign

　　InfoDesign主要讨论信息设计方面的话题。也有一些关于网络无障碍性、可用性和用户体验方面的文章分类。

11.useit.com

　　useit.com是可用性专家Jakob Nielsen建立的网站。网站的Alertbox部分是一个讨论当前可用性问题的双周专栏。

12.Functioning Form

　　Functioning Form是一个交互式设计博客，作者是国际公认的网络专家、作家Luke Wroblewski。你能在Functioning Form上找到诸如《英国航空公司网站表单设计》和《用户注册表单模型》之类的文章。

13.User Interface Engineering

User Interface Engineering公司主要进行用户界面工程的研究、培训和咨询，举办用户界面年会。公司网站的文献栏目下有大量用户界面设计方面的文章。这些话题包括web应用设计中的可用性挑战和帐户登录页面需要避免的设计失误。

14.Usable Web

　　Usable Web收集了用户界面设计方面的话题的链接。虽然网站不再更新一些文章已经过时，但你总能找到超越时间的文章和资源。

15.Usability Counts

　　Usability Counts博客的作者是Patrick Neeman 和 Ha Phan，两位都是用户体验方面的顾问。博文中有航空公司网站表单的设计实例，也有关于可用性的深入思考。

16.Usability Post

　　Usability Post是一个关于可用性设计的博客。博客文章中提到了很多技巧，比如用页面空白改进用户界面、用Photoshop颜色配置文件设计web图像等。

17.A List Apart: User Science

　　A List Apart是最好的基于标准的设计和开发的文章资源，其中的User Science专题涵盖用户界面设计的各个方面。User Science的议题进一步分成三类：网络无障碍、信息架构、可用性。

18.UXmatters

　　UXmatters是一个非营利性网络杂志。本杂志致力于分享有效用户体验技术，为专业人士提供用户界面（UX）资源。UXmatters杂志的议题包括可用性、以用户为中心的设计、Web 2.0应用等等。有的文章在讨论富网络应用对用户的帮助和搜索表单的可用性设计。

19.UX Magazine

　　UX Magazine 主要讨论关于用户体验的话题，诸如层样式设计、程序员的设计技巧等。

20.Boxes and Arrows

　　Boxes and Arrows提供交互设计、可用性设计和信息设计方面的专业信息。有的文章会教你设计具有良好可用性的在心邮件应用，还有利用VISIO展示富网络应用的例子。

英文原文:20 Websites to Help You Master User Interface Design
翻译:不是俺

　　不合适的内容，坏链接，糟糕的导航系统，不清楚的分类……哪些最影响商业成绩？以下的例子里，不合适的内容荣列“浪费企业最多金钱”榜首。

　　每年，不论在专业研究还是日常生活中，我都看到几千个设计上的错误。就像中了丹·诺曼的诅咒一样，半数的网页设计让我看了就感到生气：为什么人们不能按着丹 20年前就告诉他们的那样去做？

　　然而，网页设计者们也没有按照我 13年前说的去做，这就是让我大为吃惊的原因。下面罗列的几个近日遇到的最蠢设计算是我最近的小小收获。

没法提供信息的链接:《纽约时报》

nytimes.com 网站在每一篇文章下面都放了一个链接:

点击可查看清晰大图

　　谁会去点这个“下一篇商业文章”链接呢？除非是某些对“第 19篇文章”特别感兴趣的，否则没有几个人会去点击它。

　　除了数字以外，点遍这些链接看不到任何有用的信息 — 这种设计早在 12年前我就在对 Slate.com 的评论中批评过了。链接需要含有能帮助人们了解如果点击过去能链到什么地方的信息。人们没有时间每个链接都点一下去看到底可以链到什么地方。

　　《纽约时报》可以用统计学来为他们的设计辩护：也许不像我非难他们的那样，这种含糊的链接确实可以赢得几次点击。毕竟，如果你拥有上百万的用户，就算最蠢的设计点子也能排上点用场。就是这种设计哲学导致了类似时代广场这种冗长的网站，给人类感官以无情的打击。

　　问题在于，所有多余的元素都会损害网页上其它设计的效果。当你向人们推销那些无关紧要的链接的同时，也是在告诉人们忽略那些重要的链接。

　　（补充：《纽约时报》重新设计了他们的网站。现在，文章下面的链接改叫“更多商业文章”。好了一点，但还不够好。我还是保留我的批评，因为这个愚蠢的设计他们用了长达一年之久 — 无论如何就算在他们对它进行了“部分的”修改之后，你仍能从他们的错误中学到东西。）

失控的模拟:订制机车

　　机车商 specialized.com  用博物馆的陈列作为自己悬挂系统的类目页样式：

点击可查看清晰大图

　　老实说，我喜欢用机车部件做的“鲸鱼骨架”。但在这样一个模拟的 3D 环境中浏览，想要看清各种悬挂系统的结构却痛苦异常。

　　3D 导航几乎每次都搞砸。难以操作，没法像 2D 界面那样做很多选择，而且运行速度很慢。

　　用户可以把对某个现实环境现有的知识运用到模拟环境中，因此使用模拟环境有时能让用户界面变得容易理解。本例中，尽管你知道怎样参观自然历史博物馆，但也不能帮助你更好地鉴别机车部件。使用模拟环境设计的网站几乎总是做过头，最终导致可用性的降低。犹如迷惑人的魔鬼，模拟环境让设计团队的注意力从网页本质的该展现给用户的实际内容上偏离开去。

不合适的内容:林肯中心的爵士演出

　　当在纽约参加我的可用性讨论会时，我想带演讲人们晚上出去听听爵士乐。下面是我在林肯中心爵士演出的网页上找到的信息：

点击可查看清晰大图

　　都有哪些信息呢？网页提供了音乐家们的名字和一张首席长号手的照片。就这些！没有演员简介，没有演出曲目介绍，没有乐评，没有链到某个乐评的链接，没有音频片断让你试听乐队的演出。

　　公平的讲，jalc.org 给出了一些演出的音乐片段。样本音乐片段显然是与音乐相关的网站利用多媒体的一个手段；用音频片断说明音乐比用文字要容易得多。在大都会歌剧团的网站上听上一段音乐片段，你在一分钟内就能明白晦涩的谭盾歌剧和生动的莫扎特古典音乐之间的区别。

　　然而，上面的网页仅仅提出了个充满希望的请求（大字体的那行文字），希望人们在对演出一无所知的情况下“下预约”。除非你对乐队足够了解，否则怎么可能？！

　　不过，该网页也提供了几个不错的功能，比如支持转发的邮件功能和给其他移动装置用的纯文本格式。但是，要是能提供更多内容就更好了。

卖弄的装饰性设计:柯里斯托弗·诺曼巧克力

　　吃克里斯托弗·诺曼巧克力是令人愉快的事情，浏览他的网页却味同嚼蜡。当你从主导航菜单选择了一个类目以后，你看不到一个罗列着同类产品的页面。取而代之的是一幅卖弄的画面，就像下面这个“几何与水果”：

点击可查看清晰大图

　　一般用户会以为这个类目下只有这两种产品，而且如果对页面上的梨或者多米诺盒子不感兴趣，他们会立即离开。而实际情况是，用户要点击进入画面之后，才可以看到有完整产品列表的那个真正的类目页面。

　　用这种卖弄的画面做网页主页糟糕透顶，不过用户最多只遇到一次这种情况。如果每个类目页面都用这种设计，用户就必须点过很多多余的页面才可以看到所有的产品。

差劲的设计的商业代价

　　这些差劲的设计理念让网站经营者付出多少代价？

　　《纽约时报》也许是付出代价最少的；大多数用户都会忽略那个没有意义的链接。同时，当然了，其它一般的链接得到了机会：在同样的地方，报纸可以提供一个链到和现在文章相关的其它页面的链接。能够从头到尾读完文章的用户很有可能去点击那个链接。因此，如果更好的利用该位置，或许网站有可能赢得额外 2-5% 的浏览量。

　　我断定那个内容糟糕的爵士演出网页损失最大。我们的产品页面用户测试报告（诺曼·尼尔森集团报告：《产品页面可用性的电子商务用户体验指导》）显示，当一个网页回答了用户对该产品的疑问时，他们极有可能作出购买的决定。几乎可以担保，只有那些对维克里夫·戈登极度忠诚的粉丝们，才会在没有提供任何实质信息的网页上预订林肯中心的那场演出。

　　我预测，如果加上更多信息，该网站能够卖出至少 5倍的票给那些平常观众们。在《提高可用性后的投资赢利》研究中，我们往往发现 1000% 甚至更多的销售增长。所以，加上有意义的内容，甚至可以让该网页成为能从那些非粉丝手里大赚利润的赢利法宝。总体销售额能够增长多少，就要看该演员的狂热拥护者的数量和那些仅仅有时喜欢听听爵士乐的观众数量之比。我认为，第二组人（非粉丝）的数量如此众多，如果网页内容组织得好，可以带来销售爆增。

　　其余两个网站付出的代价属于中间级别。对于大的网站来说，用笨拙的导航系统就像是给自己开了个死亡处方：如果要从超过1万个产品中找到自己想要的东西，用户是无法忍受浏览那些与目的分裂的过于卖弄的页面，或是那些过分虚拟的页面。但如果销售的产品数量不多的话 — 像克里斯托弗·诺曼和订制机车 — 积极的用户可以自己克服导航带来的麻烦。如果网站销售的产品很少，用户是不太可能在里边迷路的。

　　当然，消极用户一旦感到迷路就会立即离开网站。不管网站多么小，愚蠢的设计总会让他们损失金钱。

英文原文:Four Bad Designs
翻译:nicomm

　　我们并不打算重复探讨操作细节（比如：“搜索工具栏”应当怎么放置），相反，我们的目光将集中在网站有效设计的核心原则、启发式方法和入门上。这些如果能够使用得当，可以催产出更丰富的设计作品，且使呈现的信息更容易被获取。

网页设计有效性原则

　　为了能够合理利用这些原则，我们首先需要理解用户是怎样与网页交互活动的，是怎么思考的，行为的基本模式又是怎样的。

用户是怎么思考的？

　　通俗地讲，用户在互联网上的行为习惯与日常商店中的顾客们并无二样。来访者们扫视每个新页面，浏览其中的一些文本，点击他们最感兴趣的链接，或者隐约觉得能带他们找到他们想要内容的链接。事实上，页面的绝大部分，他们根本不看。

　　许多用户找寻感兴趣（或者他们觉得有用）且可以点击的信息，只要一些看起来符合期望的目标出现，用户就会去点击。如果新页面没有满足用户的期望，用户将点击“后退”，继续搜索。

• 用户看重质量和信誉。如果一个网站向用户提供了高质量的内容，用户就演绎忍受广告和糟糕的设计。这就是为何有些网站设计平平，但提供了高质量内容，就年复一年拥有着骄人的流量。内容重于形式。
• 用户不是阅读，而是浏览。用户分析一个网页的时候，寻找一些重要的节点或者锚点，目的是希望这些链接能够指引他们到期望的内容。

  
  用户不是阅读，而是扫视浏览。主要“高亮”区域在页面内容的中间断开了。这是典型的扫视浏览模式。

• 互联网用户是无耐心且必须立即被满足的。非常简单的原则：如果一个网站没有达到用户的期望，设计师的工作就失败了，公司也会有经济损失。认知负荷越高、导航越不直观，用户越倾向于离开这个网站，寻找它的替代品。　　
  
• 用户不做最优的抉择。用户不会寻找最便捷的方法找到他们需要的信息。他们也不是线性浏览一个网页，按顺序从一个站点跳转到另一个站点。相反，用户是很容易满足的，他们通常选择第一个让他们满意的选项。只要他们找到一个他们觉得能指向期望目标的链接，他们通常会立即点击。最优的抉择是有难度的，需要花费很多时间。满意即可非常高效。[ 视频 ]

  

  
  两个图片都显示：网页阅读模式是非线性的。右下方的路径图显示了用户浏览一个网页的视线轨迹。

• 用户遵从他们的直觉。在通常的情况下，用户杂乱无章地扫视而非阅读设计师们呈现的信息。根据Steve Krug的研究，最根本的原因是：用户不关心。“如果我们发现一些东西奏效，我们就会被吸引。这些东西是怎么运作的对我们来说不重要，我们只要能够使用它们就足够了。如果你的受众喜欢大的公告栏，就要做的就是设计一个更大的，公告栏。” 
• 用户希望有可控感。用户想控制他们自己的浏览行为本身，且依赖网站呈现的连续的内容。例如，他们不想一个新窗口出乎意料地弹出，他们希望用“后退”按钮返回刚刚的页面；因此，从不在一个新的浏览窗口中打开超链接是一个好的行为。

1.别让用户思考

　　根据Krug的可用性第一原则，网页应当清晰且不言自明。当你创建一个网站的时候，你的工作就是避免问题——那些需要用户反复慎重考虑前因后果才能做出决定的选择。

　　如果网站的导航和结构不是直观的，产生的问题就会数量大增，且使得用户很难理解系统是如何工作的，怎样才能从A点跳转到B点。一个清晰的架构，中等强度温和的视觉引导，易于识别的链接，可以帮助用户找到实现目标的途径。

　　让我们来看一个案例。Beyondis.co.uk 宣称自己是“超越栏目，超越产品，超越分布”的。这是何含义呢？自从发现用户倾向于“F”模式的网页浏览习惯，以上提到“栏目、产品、分布”是用户浏览网页时，首先必见的三元素。

　　虽然设计本身非常简单且直观，但用户仍然需要去找寻才能明白这个网页是做什么的。这就是所谓的不必要的问题。设计师职责是要让问题降到0。具有视觉效果的解释已经放在右边。只要交换左右模块的位置，可用性就会增加。

　　ExpressionEngine 使用了与Beyondi非常相似的结构，但避免了不必要的问题。更进一步的是，宣传性的口号起到了效果，用户们会选择尝试服务，下载免费使用版本。

　　通过减少认知负荷，你可以使访客更容易获取系统背后的思想。只要你做到了这一点，你就可以理解为何这个系统是有用的，而用户又是怎样从中获益的。如果人们在你的网页上迷路的话，他们是不会使用你的网站的。

2. 别浪费用户的耐心

　　在任何一个你想向用户提供服务或者使用工具的项目工程了，尽量使你的门槛降低，对用户的要求减少。一项服务要求用户付出的越少，越有可能被一个随机进入的访者真正尝试。如果不用填那些他们以后都不会再次用到的长长的网页表格，首次来访的用户都会愿意尝试服务。请让用户自由浏览网页，让他们不用交换私人信息就能尝试你的服务。强迫用户填写电子邮箱地址来测试用户特征是不合理的。

　　正如37Signals team的开发者Ryan Singe所言，用户们如果在看到产品之后被要求留下电子邮箱地址的话，可能是愿意的，因此他们对于留下电邮的回报是有想法的。

　　Stikkit是一个用户友好的极佳例子，它清晰易懂，且几乎不向访客索取任何东西。这也是你在你的网站应当使你的用户体验到的。

　　很明显，Mite就索取很多。但是整个注册表可以在30秒之内完成——因为网页是横向的，用户不需要滚动页面。

　　如果要理想化地去除所有的障碍，首先就是不需要贡献些什么或者填写注册。仅仅一个用户注册表本身就足以阻碍用户在网站的随意浏览行为，且会对网站浏览产生很大不利影响。

3. 抓住用户的注意

　　因为网站都是通常既提供静态的内容又提供动态的内容，一些用户界面就会比另一些更加吸引人。很明显，图像比文本更吸引眼球——就好像加粗的句子比未加粗的更容易引起注意。

　　人类的眼睛是一个高度非线性运作的设备，网页用户能够直觉地识别边界、模式和运动。这是为什么视频广告特别容易引起反感，但是从市场营销的角度来说，他们的确完美地吸引了用户的注意。

　　Humanized.com很好地利用了焦点原理。这个页面上直接呈现给用户的视觉元素只有一个“free”，它非常地吸引注意力，当仍然非常简洁且信息传递单纯。细小的线索给用户提供了充分地信息去找到“free”的产品。

　　使用中等强度的视觉元素来将用户的注意力吸引到网页的特定区域，能够使你网站的访客不假思索地从A点轻松到达B点，忽略背后可能存在的逻辑关系。访客遇到的问题越少，就越会具有良好的方向感，且会更加信任这个网站呈现的公司。换言之：对于这个屏幕呈现的内容需要琢磨的越少，可用性的首要目标——用户体验，就会越好。

4. 尽量使特征明显呈现

　　当代网页设计总是嘲笑用鲜明视觉效果的大按钮指示用户：第一步——第二步——第三步……但是从设计的角度来说，这些元素事实上并非化石。相反的，这些导航是极其有效的，因为他们能够以一种非常简单和友好地方式带领网页的浏览者在网站内容间穿梭。

　　Dibusoft.com将视觉的宜人性和清晰的网站结构相结合。这个网张有9个主要的导航选择，都放置在一眼能够看见的位置上。尽管，这些导航的颜色也许有些太浅了。

　　让用户看清楚功能的合理性是成功用户界面的基准。这个是否达到了，实际上并不重要，重要的是内容是否被很好地理解了，而用户是否觉得他们与这个系统的交互非常舒服。

5. 有效书写

　　由于网站与打印出版史不一样，它需要与用户喜欢的书写方式相匹配，且与浏览习惯相契合。鼓吹浮夸的文字将不会被阅读。大段没有图像、标粗或者斜体关键字的文本将被忽略。夸张的语言将被忽略。

　　说正经的。避免太过于高校或者自作聪明的名字，市场导向的名字，公司名，或者不被树枝的技术名词。例如，如果你描述了一种服务，需要用户注册一个账户，“注册”比“就从这开始吧！”要好，而后者依然好过“探寻我们打服务”。

　　Eleven2.com直击要害。没有华丽的语辞，没有夸张的陈述。取而代之的是一个价格：这就是用户来此需要的。

有效书写的优化解决方案

• 使用简短的语句（直击要害，越快越好）
• 使用铺陈的方式（将内容分类，使用多层标题，用视觉线索和树状图）
• 使用平白直观的语言（一个宣传口号不用听上去像广告；给用户一些理性和客观的理由，让他们驻足在你的网站，享用你的服务）

6. 尽量简洁

　　“简洁”是网站设计的首要原则。用户们很少驻足一个网站是因为喜欢它的设计，通常情况下他们是在找寻他们需要的信息，当然设计为他们提供了寻找帮助。尽量简洁，而不是复杂。

　　Crcbus为网页访客提供了一个整洁简单的设计。也许因为它是意大利语的，你不能明白这个网站是干嘛的，但是，可以可以清晰地识别出导航，标题，内容区域和脚注。注意，图标都可以清晰地传递信息。只要将鼠标悬浮在图标上，更多的信息就自动呈现出来。

　　从用户的角度出发，好网页应当是一个纯文本的，没有广告的，新加内容与用户寻找目标密切相关的。这也是一个方便打印的网页带来用户良好体验的原因之一

　　Finch清晰地呈现了网站信息，让用户在没有无关内容干扰的情况下，做出进一步浏览的选择。

7. 别怕留白

　　事实上，在网页上留出空白区域的好处怎么估计都不过分。它不仅使网页访客的认知负荷减少，而且更容易获取网页所呈现的信息。新用户浏览网页时要做的第一件事情，通常是扫视全页，将内容区域在心理上划分成合适的组块，然后再对信息进行加工。

　　复杂的结构不易于阅读，扫视，分析和使用。如果有两种选择，一是用明显的竖线将两个区域隔开，另一个是使用一些空白达到这种效果，通常比较好的选择是后者，即留出空白。分层减少页面复杂感（Simon法则）：视觉上的层次感觉越好，你网页上的内容信息就越容易被获取。

　　空白区域是很好的。Cameron.io用空白区域作为设计的主打元素。这样就使得主要信息被层次鲜明地突出了。

8. 用“可视化”语言有效交流

　　Aaron Marcus在“有效的视觉表达”一文中，曾经提及过三个基本原则，其中一个就“视觉语言”，即用户在屏幕上所看到的内容。

• 组织：为用户提供清晰稳定的概念结构。一致性，页面布局，模块关系和页面导航是组织中的重要概念。同样的表达方式和规则适用于所有元素。
• 经济化：尽量少地使用视觉元素。简约、清晰、区别性和重点突出，这四个要点需要被权衡。简约的含义是：只有表达需要的重要元素才可以被呈现。清晰则指的是：所有的组件都应当与它们传递的意义相吻合，不要引起歧义或者表达含糊。区别性是非常重要的，它要求所有元素都应当是独一无二的。重点突出则是指：关键的元素要能够被认知轻易捕获。
• 表达：使用用户能力能够接受的表达方式。为了使得表达顺畅，用户界面必须在可读性，易读性，结构，象征性，许多的观点，颜色和材质效果之间来找到一种平衡。在一个页面里最多只能用三种字体,最多只能用3种字号——文本每行最多呈现18个字或者50-80个字符。

9. 规范是我们的朋友

　　使用传统的元素设计出的网站并非索然无趣。事实上，传统规范非常有用，因为他们减少了学习的周期且节省了去收集有效性的精力。例如，如果所有网站对于RSS源都启用不同的视觉特征，这将是可用性的一个梦魇。这与我们习惯于对数据规范整理，或者对于商场的货架规律摆放，并无区别。

　　如果你遵从规范，你将获得用户的信心，信赖，信任，且证明你的可靠。遵从用户的希望——理解他们对于一个网站导航、文字结构、搜索栏位置的期望，等等。（参考Nielsen： Usability Alertbox）

BabelFish in use: Amazon.com in Russian.

　　在可用性测试方面一个典型的例子是：将网页翻译成日语（假设你的网站用户不懂日语，例如，是使用Babelfish的），然后请你的可用性测试被试在异种语言的网页中寻找一些内容。如果规范被良好的遵从，那么用户是可以找到一些不适特别特殊的目标内容的，尽管他们对于这种语言一窍不通。

　　Steve Krug建议仅仅在你确认自己有一个更好的想法的时候再去创新，但是如果没有的话，好好遵守现有规范。

10. 早些测试，常常测试。

　　TETO原则可被应用于任何网页设计，因为对于现有布局的重要的问题和细节，可用性测试总是能提供关键的洞见。

　　测试不要做的太迟，太少，或是为了不合适的理由而做。“不为了不合适的理由儿测试”的意思是，许多设计方面的决策是为着当下的，你不能普适性地宣布某些布局方式就一定优于其它，因为你需要从一个特殊的角度去权衡（考虑需求，投资者的利益，预算，等等）

一些要点需要牢记于心:

• 根据Steve Krug的研究，测试一个用户要比一个都不测好一倍，且在项目启动之初测试一个用户要比项目告罄的时候测试五十个要好得多。根据Boehm的法则一，错误在需求和设计活动中是非常常见的，而越迟被发现，代价就越昂贵。
• 测试是一个迭代的过程。这意味着你需要设计些东西，然后接着就测试它，修正它，然后再接着测试。也许第一轮不能发现一些问题，因为这些问题可能被其它问题所覆盖，用户们在其它问题上就已经被绊住了。
• 可用性测试总是带来有用的结果。无论是被指出现有网站存在的问题或者是没有触犯某些主流的设计错误，都会使您对于自己的项目做出一个有意义的审视。
• 根据Weinberg’的法则，网站的代码开发者不适合做为测试人员。这个原则同样适用于设计师。因为你对一个网站设计了相当长的时间，你已经不能够从一个全新的角度去审视它。你知道它是如何搭建的、如何工作的——你比独立的测试人员和网站访客们“知道的太多”。

　　基线原则：如果你想做出一个极好的网站，那一定得测试。

参考文献

• Designing Effective User Interfaces by Suzanne Martin
• Summary on Web Design
• UID presentation (Flash)
• Research-Based Web Design & Usability Guidelines
• “The psychology of computer programming” by Gerald Weinberg
• “Designing Web Usability” by Jakob Nielsen [JN / DWU]
• “Prioritizing Web Usability” by Jakob Nielsen
• “Don’t Make Me Think” by Steve Krug
• “Usability for the Web: Designing Web Sites that Work” by Tom Brinck, Darren Gergle, Scott Wood
• A Summary of Principles for User-Interface Design
  

英文原文:10 Principles Of Effective Web Design

中文原载:Xiaoxiao’s Weblog                 翻译:熊猫

　　希望大家在欣赏这些原创的设计的同时，仔细观察它们的细节，理解它们的创意。然后一起来讨论如何才能将自己的分类列表设计得如此漂亮。

　　有几个设计出色的网站在这里出现了不下一次，主要是因为它们的分类列表在网站上有多种样式。

页脚

　　相比使用侧边栏，网页设计中一个普遍流行的方式是在页脚位置放置补充信息（比如导航、分类列表、缩略图等）。如果使用页脚而取代侧边栏，那么页脚将能为页面的主要内容提供更多的空间；而且它还能为页面的底部创建漂亮的锚。在这里我们能看到在网站中被定义为“楼底”的页脚。我们还能了解到一些放在底部内容区的“伪页脚”。

　　这里面有一些实例我们曾经在之前侧边栏介绍中看到过，它们双重推荐！

现在一起来讨论一下页脚吧…

第一个:Viget Labs Inspire.

点击缩略图查看大图

　　这个网站的页脚为分类占用的很大的区域，而且色调比较深。category listing板块使用的宽度与上面的主内容区的宽度是相同的，当然月份形式的archives板块的宽度是等同于侧边栏的。

点击缩略图查看大图

　　这种分类列表的排版是非常漂亮的，我想重点强调一下的就是它的用线条布局和简洁朴素的处理手法。

下一个，Designing the News.

点击缩略图查看大图

　　Designing the News这个网站也是在页面底部使用了深色的区域来显示补充信息。

点击缩略图查看大图

　　在分类的处理上这里超级简单：仅仅是一个popular tags列表和latest experiment板块。

Nimbupani Designs 有一个让人感兴趣而且印象深刻方案

点击缩略图查看大图

　　任何人都不可能看不到这个页面尾部的分类列表；因为嫩黄色很难别人忽视！

点击缩略图查看大图

　　边框的缝纫效果使页脚变得很活泼。分类列表仅仅使用了Popular列表和Categories的标签云。

其他方法

让我们再来看看Komodo Media

点击缩略图查看大图

　　Komodo在主内容区底部使用了一个非常非常漂亮的日历；这就是我所谓的“伪页脚”，因为它相比在网站的底部，更像是在日志区域的底部。

点击缩略图查看大图

　　这个日历使用横排的形式，每行展示了一年中的一些有价值的日志，并在包含日志的月份进行高亮和链接。板块头部的木纹和叶子的细节处理的相当棒。

另一个网站我们以前也看到过，Intensify.org by Rachel在页面的底部总结回顾电影、书籍和音乐。

点击缩略图查看大图

点击缩略图查看大图

　　在底部的Movies板块，网页标准字体与手绘效果的组合让人感觉很有趣很活泼。

交互

Fling Media有点与众不同

点击缩略图查看大图

　　在页面的底部是一个内容可以横向滚动控制的板块。

点击缩略图查看大图

　　每个日志在这里都表现为一个小页面：非常可爱！

存档页

　　一些网站有一个专门的存档页面，但遗憾的是，我看过的大多实例使用的都是很乏味的日志列表。所以现在我们来讨论一下那些引人注目的存档页面。

　　我们将通过后面的几个实例了解网页设计师展示存档页面的不同方法，而且有少数网站我们之前看到过（三重推荐！）

Jason Santa Maria的存档页面，命名为Articles，相当的简洁，做的非常好。

点击缩略图查看大图

　　由“Recent Entries”、一个类别列表、月份分类和“design tags”组成。“design tag”是一个有趣的概念，Jason打算为网站设计添加额外的风格和形象的描述，随日志而定；这些标签根据设计的属性分类并能随引导相关日志。

Boagworld 为分类页面使用了简洁风格的列表

点击缩略图查看大图

　　这个列表也使用的简洁风格，但展示了很多近期更新的细节，标签过滤可以让你更快更方便的找到相关的日志。

Orderedlist也是使用了简洁风格的列表，而且提供了“live-search”的搜索框。

点击缩略图查看大图

Designing the News 使用了月份和类别板块来组成简洁的存档页面。

点击缩略图查看大图

　　当我想在这个页面点击进入其他页面的时候，我发现分类组合搜索是个不错的功能。

再来看看Jeff Croft的网站

点击缩略图查看大图

　　Jeff曾经在侧边栏使用的条形图表，现在在这个标签存档页面也一样使用这种风格，这种风格的确能给人耳目一新的视觉冲击。

The Statement的另一种表现

点击缩略图查看大图

说实话，最后这个AvalonStar，我实在不知道用什么话来描述了，华丽！不多说，大家看吧。

点击缩略图查看大图

总结

　　希望大家能喜欢这次的分类列表赏析之旅！正如你看到的那样，分类列表可以以不同的排版和风格展现出来，只要你能够想到并且运用得当，那么无论它在什么位置、有什么功能，都将是一道亮丽的风景线。多在分类列表上下点功夫，搞些令人意料之外而且很漂亮的样式，能为整个网站增色很多。

转载声明:
原载:彬Go
本文链接:http://blog.bingo929.com/beautiful-web-site-archives-pt2.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

　　希望大家在欣赏这些原创的设计的同时，仔细观察它们的细节，理解它们的创意。然后一起来讨论如何才能将自己的分类列表设计得如此漂亮。

　　有几个设计出色的网站在这里出现了不下一次，主要是因为它们的分类列表在网站上有多种样式。

侧边栏

　　网站最普遍的一个显示分类列表的地方是侧边栏。这些列表可以代表性的分解成按类别的列表和按日期的列表，有时还会包括那种更新列表、日历或标签云的形式。

首先来看看Szabolcs Bakos的网站，New Concept.

点击查看清晰大图

　　在这个实例当中，分类列表显示在页面右侧两个侧边栏中的第一个，也就是整个三栏中的第二栏。

　　这个分类列表从Categories开始，然后将complete archive和 category archive这两个组成另一块，紧接着是Recent Comments。很好的块级处理让网页看起来非常漂亮。

第二个是Viget Labs Inspire

点击查看清晰大图

　　分类列表也是在侧边栏，展示了recent comments和recent entries两个板块，小而简洁。板块间的间距和排版处理的都非常好，使得网站很吸引人。

　　侧边栏的头部处理的非常漂亮，设计者使用了类似水彩画的背景图片装饰，使得recent comment板块能特别吸引人的注意。上面的文字对比度有些偏低，所以读起来有些费劲；但这些文字在网页中的重要性并不是很高，所以这种处理效果还是非常棒的。

第三个，The Statement

点击查看清晰大图

　　The Statement为它的分类列表使用了醒目的侧边栏，使人感觉到了一定了空间感。

　　The most popular posts板块显得特别突出，其实是用几个简单有趣的数字形式的风格来标示出流行的顺序。

日历

　　下面我们来看看日历形式的侧边栏，这种形式在初期的博客中经常能看到，现在的博客几乎很少在使用日历了。

这个是Viget Extend

点击查看清晰大图

先来张日历部分的特写

　　这个日历的表现形式很漂亮，标注的日期显得很醒目，而且可以左右控制日期的变化（废话！）。

下面来看看Intensify.org by Rachel

点击查看清晰大图

这个网站依然在侧边栏使用了日历

　　日历没有将每个日期以块的形式显示，链接使用了醒目有趣的桃红色下划线。

标签云

先来个比较与众不同的　coda.coza

点击查看清晰大图

　　这个网站的侧边栏使用了标签云来显示那些比较流行的关键词。下面依然有recent comments 和 most popular posts板块。这种列表简单而又漂亮。需要注意的是，那些标签云在鼠标悬停的时候也有特殊的效果。

　　那些标签在没有悬停的时候显得对比度很低，但仍能看到它们是以不同的字号来显示它们的流行度。

其它处理方式

这是Jeff Croft的首页

点击查看清晰大图

　　Jeff的网站非常简洁，仔细观察的话可以发现一些漂亮的细节，比如圆角的处理、阴影的处理和令人惊讶的图表，使网站增色不少。

　　侧边栏的分类风格主要侧重于简洁，但是最抢眼的就是他的既有趣又独一无二的流行标签的显示方式；相比于使用标签云，他更喜欢使用线型图表的显示方式。说实话，我看了以后就想模仿这种风格了^_^

交互式

首先，来看看Alex Buga.

点击查看清晰大图

这个侧边栏的分类处理的小而简洁。板块的间距和排版都很吸引人。

　　侧边栏的recent articles板块可以再按下“展开”和“收缩”按钮时显示和隐藏内容。这样可以让每个内容都变得很紧凑。

下面是Darren Hoyt Dot Com

点击查看清晰大图

　　这个网站的侧边栏的分类列表避免了那种保守的设计风格，而且看起来比较紧凑，节省了空间。

　　这种列表的风格很漂亮，我很喜欢这种颜色，很舒服。鼠标悬停以后展开的内容过度也很柔和。

再来一个，Komodo Media.

点击查看清晰大图

　　这种分类列表的切换变化的风格，给人一种与众不同的视觉感受，而且能是板块整洁并且节省空间。

　　这种切换的形式有时会阻碍可用性，因为用户可能会看不到其他标签，但那些小图标使得这些标签能引起用户的注意。

继续阅读《20+漂亮的网站分类存档设计赏析(下)》

转载声明:
原载:彬Go
本文链接:http://blog.bingo929.com/beautiful-web-site-archives-pt1.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

　　今天暴风彬彬要和大家一起探讨一个网站可用性话题，那就是分类和标签的可用性问题。像博客或网络杂志这类的网站会以各种各样的方式组织和排序它们的内容以使更多的内容得到关注。按日期排序和按作者排序是网站系统通常的自动处理方式，在这两种方式基础上有两种概念来完成排序:分类(Categories)和标签(Tags)。你可以同时使用这两种方法，但是可能会制造很多影响用户体验的困扰。那么你到底应该用哪种方法和为什么要用那种方法呢？让我们来一一调查这两种排列方法。

分类(Categories)

　　分类就像是文件夹一样，它能把所有类似主题或题目的东西全都收集到一起。这种方法如果严格的说并不是十分准确，因为在数码世界，你可以为你的某个内容追加超过一种分类，但是功能是和现实一样的——将它归类。

　　当然，分类的主要优势就是它会有一定的数量，整理起来比较有逻辑性。如果你要使用分类的话，请确保不要让分类的数量过多。这样才会有利于用户扫描分类列表并快速选择他们需要的主题。分类能够很好的组织你的内容结构并能让用户更容易得到浏览体验。

　　分类的主要缺点集中表现在管理员或内容发布者身上。首先，如果你决定使用分类列表。那么对你来说确保不会出现某些分类内容过多或过少是很难的。你没理由把所有日志放进同一个分类，或者一个分类中只有一篇日志。其次，无论什么时候发布新的内容，你都需要考虑需要把它放到哪个分类下，如果你的分类不多，那还容易些，但想把分类保持在一定的数量还是很难的。分类如果太多，肯定会造成一定的困扰。从几十个或上百的分类中寻找一个适合新内容的分类，难道不是一件令人头痛的事情吗？

标签(Tags)

　　标签在数码世界就像是真实的标签，你可以为你的东西附上小标签。标签相对分类的优点是它们不用预先设置，当你为新内容添加标签的时候，可以手工定义并且可以随意定义它的标签名字。如果标签不存在，你也可以照样将它创建。你从来都不用担心要去寻找之前定义过的分类并把新内容添加进去，你只需要为新内容写一个最适合它的标签就OK了。

　　标签的缺点就在于它的浏览体验，目前最常用的一种标签浏览方式就是”标签云”。标签云就是把标签一个挨着一个的列举出来，每个标签链接都有它自己的字号大小，字号大小取决于有多少内容使用了这个标签。

　　标签云可以很好的展现那个标签下的内容更多，但是标签浏览起来比较困难的原因就是数量太多了，也许某个特定内容只能通过某个特定标签访问，而这个标签字号有很小，用户很难找到。又或者某个特定内容与好多标签都有关系，用户会变得迷茫，不知哪个标签才是他真正想要的。

那么我们到底应该使用哪种呢？

　　回答是:看情况！这要取决于你的网站内容类型和你的搜索工作。

　　如果你的网站类似于Youtube或Flickr那种用户可以自己提交自己的内容，而且你网站会有数以千计的提交内容的话，标签要比分类实用得多。分类会使得浏览变得更麻烦，而且会有很多解决不了的难题。每个标签都会包含很多内容，但只会有一部分标签得到更多的关注。

　　如果你的站内搜索使用标签来浏览网站的就旧记录，标签还是可以明确受益的。如果你搜索的是很简单的关键词，像外接Google搜索过滤你的网站地址，那么标签并不会对搜索结果起到什么作用。

　　我并不认为博客使用标签有多大的意义，当然，他能方便tag网站内容，但是对浏览体验没多大好处。你的博客肯定会有某个标签仅仅有一篇文章，那有什么用？用户更愿意浏览有详尽内容的主题，这就是分类的主要功能所在。更重要的是，如果你觉得内容关系到两种分类的话，完全可以将它分别放入这两个分类中。

　　以上仅仅是我对分类和标签的观点，我相信您也有一些不同的想法。暴风彬彬欢迎您留下您关于分类和标签的看法，或者您在自己的博客使用的是分类还是标签呢？请在下面留下您宝贵的评论。

转载声明:
原载:彬Go
本文链接:http://blog.bingo929.com/user-behavior-of-the-page.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

　　支持深层链接的一个主要原因是，同主页相比，用户会更加充分地阅读网站内部页面上的内容。

　　我们看到了内部页面和主页有同样的现象：即随着经验的增多，人们扫描第一次访问页面的速度会加快，同时决定他们想要在网站上做什么的过程也会更快。和进入到一个主页时相比，当用户进入到一个内部页面时，他们会花费70％～80％的更多时间来审视他们进入网站的位置，这是因为他们访问的内部页面和他们的任务有着更直接的关系。

　　既然用户在内部页面上花费45～60秒钟的时间，那么在理论上，他们就可能阅读大约200个单词，不过，通常他们会将一部分时间用于评估网站的导航系统以及决定下一步去哪里。然而，他们仍可能会阅读1 00个单词量的信息，这同他们进入主页时只阅读1 O～2n小单词相比已经显得相当多了。支持深层链接的一个主要原因就是因为用户在网站的内部页面上会阅读更多的内容。

主页和内部页面的比较

使用Web的经验　　花在主页上的时间　　花在内部页面上的时间
      经验不足                      35秒                               60秒
      经验丰富                      25秒                               45秒 

　　与主页相比，人们会花费更多的时间在内部页面上。可以再次看到，具有更多web使用经验的用户能够以更快的速度扫描屏幕，而新手用户更倾向于很仔细地观看屏幕．

　　当用户浏览某个网站并访问其中的内部页面时，他们在每个页面上平均花费了27秒钟的时间。这个极短的时间强调了以下设计要点的重要性：即在每个页面上，对于用户想要得到的东西要表达得像水晶一样清楚。人们没有时间阅读所有的内容，因此他们将会在数秒钟的时间内对页面做出判断。

设计提示:对内部页面上的链接进行优化

　　在内部页面上所花费的大约半分钟的时间内，用户将其中的大部分用在了内容区域上，而不是导航区域。应当在这个区域中放置重要的链接，这样用户就很可能会看到它们。

　　上图中显示的是用户是通过点击页面上的哪些位置来导航到同一个网站中的其他位置的。这里的数据是通过对4719个点击进行平均后得到的。

　　如果您对网站可用性研究很感兴趣，可以参考彬Go更多网站可用性相关文档或订阅彬Go，也可以在此留言与暴风彬彬一同探讨网站可用性。

本文出自《网站优化-通过提高网站可用性构建用户满意的网站》

转载声明:
原载:彬Go
本文链接:http://blog.bingo929.com/user-behavior-of-the-page.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

　　当我们谈论网站可用性的时候，我们总会提及用户界面(UI)——按钮、标记(label)、标签(tab)等的设计与布局。但是，还有一个可能会被你忽视的元素可能会把你辛辛苦苦设计的网站毁于一旦，那就是(文字)内容。

　　这些文字内容就是你的网站上用文本方式提及的方方面面，它涵盖了何种类型的文本内容。今天暴风彬彬要谈论的网站可用性分析就是关于网站的文字内容如何对访问者起到引导和告知的作用，例如:引导用户如何下载需要的文件，如何订阅你网站的Feed，告知这个网站是关于什么的等等。虽然说内容为王，但一定要把我还内容的布置才是关键。

　　那么，文字内容是如何影响网站可用性的呢？为了回答这个问题，让我来以图解的方式为您讲解用户通常是如何浏览网页的。可以说是非常混乱。我们从来都不会阅读某个特定网页的所有内容。相反，我们习惯用眼快速扫描整个网页，飞速地从网页上的这个点跳转到另一个点，并尝试着寻找自己想要的内容。下图为一个用户大致的浏览网页的路径，红线和红点表示不同的视觉移动及停留点。

　　这些行为发生的非常快，仅仅需要几秒钟我们就能完成页面的扫描，找到我们感兴趣的东西。

　　文字内容可能引起的最大问题就是它的长度，写一篇长篇大论很容易，尤其是在知道要谈论什么的时候。你可能会很天真地认为写了很多对用户有帮助的内容，所以他们一定会读完全部。其实他们根本不会那样做！

　　用户很乐于扫视一小段一小段的信息，而且大部分人会对大段大段的文字失去耐性，有时甚至只会接受一句一句的内容。你必须在网页上提供既简短明了又有一定视觉焦点的内容。这种焦点有两个作用:吸引用户的注意力 和 让他们采取进一步的行动。

　　下面让我们来看一个实例，下图所示是MacPorts的首页上的内容部分，Mac工具可以帮助你安装各种开源软件。

　　它的文字内容实在太多了，没有人愿意阅读全部内容，即使阅读了全部内容，用户的心情也会受到打击。我猜测大部分来这里的用户的目的都是下载MacPorts，但是那个installation链接去埋藏在文字内容深处，很难发现。事实上，这些文字的80%的内容是可以删掉而且不会损失一点信息价值。下面是我的快速重新设计:

　　虽然不是很完美，但是多网站可用性已经有了很大的提升。如果给我更多的时间去重新设计，我还会重写页眉及页脚部分。其实整个重新设计最重要的部分就是”get started”部分，他会引导用户如何开始他们的浏览旅程。明确的目标、简明的标记文本、更大的字体和点击引导都能帮助用户更好的扫视页面，从而提升了用户体验，也提高了网站可用性。用户能够看到那些有效的链接，并在没有阅读多少文字内容的同时快速找到他们想要找的东西。

　　有用的文字内容必须简短明了，使用更大的字体来吸引用户的注意力，在不失细节的情况下使用简介的下一步描述。最重要的是删除多余的没有价值的文字和句子。

　　让人更难受的是，也许你会觉得你写的内容足够简短了，你是它的作者，你知道你要说的是什么。但是浏览者不一定能了解你的意思，他们会试图找出他们需要的东西。但是，请记住，用户并不一定是来阅读的，他们是来做他们想做的事情，每个人的目的不一定相同，所以你要节省他们的时间并且所见你的内容来吸引每个用户的注意力，从而让他们更加便于在几秒钟内扫描整个页面。用户只有在这几秒内扫描并发现他们想要的东西，才会继续在你的网站上停留更长的时间。

转载声明：
原载:彬Go
本文链接:http://blog.bingo929.com/usable-website-content.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作！

本教程翻译自:How Usable is Your Copy?