最近看了很多的PHP模板引擎，今天看到了一个非常棒的Javascript模板引擎，用以更方便的呈现前台数据。它的一个超级简单的、快速的，高速缓存的，非常容易使用的模板引擎。

下面就来看下这个模板引擎是如何工作的。

// Simple JavaScript Templating
// John Resig - http://ejohn.org/ - MIT Licensed
(function(){
  var cache = {};

  this.tmpl = function tmpl(str, data){
    // 判断出我们是否获取一个模板或是否我们要加载一个模板并确定要缓存结果
    //Figure out if we're getting a template, or if we need to load the template - and be sure to cache the result.

    var fn = !/\W/.test(str) ?
      cache[str] = cache[str] ||
        tmpl(document.getElementById(str).innerHTML) :

      // 生成一个可作为模板的可重复使用的函数
      // 生成器 （将会被缓存）
      new Function("obj",
        "var p=[],print=function(){p.push.apply(p,arguments);};" +

        // 使用with(){} 作为局部变量引入数据
        "with(obj){p.push('" +

        // 将模板内容转化成JavaScript
        Convert the template into pure JavaScript
        str
          .replace(/[\r\t\n]/g, " ")
          .split("<%").join("\t")
          .replace(/((^|%>)[^\t]*)'/g, "$1\r")
          .replace(/\t=(.*?)%>/g, "',$1,'")
          .split("\t").join("');")
          .split("%>").join("p.push('")
          .split("\r").join("\\'")
      + "');}return p.join('');");

    // 提供一个基础的currying给用户
    return data ? fn( data ) : fn;
  };
})();

Currying 的意思为将原来的函数只可带一个参数列表以多个参数列表（注意不是多个参数）实现，如：def foo(x)(y)(z){}。

上面的只是具体实现的JS库，那到底怎么使用呢？

<script type="text/html" id="item_tmpl">
  <div id="<%=id%>" even" : "")%>">
    <div>
      <img src="<%=profile_image_url%>"/>
    </div>
    <div>
      <p><b><a href="/<%=from_user%>"><%=from_user%></a>:</b> <%=text%></p>
    </div>
  </div>
</script>

或是这样

<script type="text/html" id="user_tmpl">
  <% for ( var i = 0; i < users.length; i++ ) { %>
    <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
  <% } %>
</script>

上面的使用代码中出现了一个特别的script内容类型text/html，这样的类型浏览器就不要去执行其中的内容，用户也就看不到其中的内容。这样就可以非常简单的把你想要的内容模板嵌入到你的页面中。这是一种快速的曲线救国的策略。

讲了这么多，那么怎么把数据给模板引擎呢，这还需使用Javascript来实现：

var results = document.getElementById("results");
results.innerHTML = tmpl("item_tmpl", dataObject);

同样的你可以预先编译好需要呈现的代码供后面的使用，如下面的循环：

var show_user = tmpl("item_tmpl"), html = "";
for ( var i = 0; i < users.length; i++ ) {
  html += show_user( users[i] );

以上就是全部代码，整个逻辑非常的清晰，就是把模板语言“编译”为Javascript的原生语法。这个引擎的优点在于：

1. 可以使用任何Javascript支持的语法。
2. Parse模板的过程在闭包内执行，不会产生全局变量。
3. 对“编译”后的模板进行了缓存，下次可以跳过“编译”的过程直接使用。

最后大家还是要试一下才知道好不好用。

原代码地址：http://ejohn.org/blog/javascript-micro-templating/

Related posts:

1. 使用GA在URL上添加UTM参数避免重复页面方法
2. 使用JS让链接从新窗口打开
3. 使用谷歌统计来跟踪网页加载时间

Facebook 的产品设计五维

情感

1. 精准定位——设计对受众定位清晰，符合该设计目标用户群的使用体验。
2. 亲和力——所有交互元素的设计上，用户对信息沟通顺畅，感觉似有人一般的亲和感。
3. 分享——承载对Facebook连接、自由、生活的文化认同。
4. 留恋度——给人超出想象的空间，让人留恋往返，对产品期待更多，得到二次访问。

易用

1. 反馈及时——在交互过程中，用户的操作能够在屏幕上及时得到反馈效果，帮助用户提高效率。
2. 方位清晰——清晰的知道自己在那里，退路在那里，能够去那里。
3. 路径简短——完成任务在尽可能控制在三步之内，完成某项任务所花废的步骤和时间最短最好。
4. 容错性好——设计限制因素，突出正确操作，隐藏可能的错误操作，减少勿操作。

形美

1. 文字悦读——信息传达易读，符合中文阅读习惯，信息传达快速。
2. 颜色合适——利用大众对颜色理解的寓意，使用正确的色彩加强产品的印象。
3. 布局美观——均衡与对称的构图，使画面整体具有稳定性。
4. 空间感强——运用几何透视的原理，设计中表现远近、层次、穿插等关系。

气势

1. 专业性——细节完美，找不到明显的设计瑕疵。
2. 整体性——所有交互元素的设计上，用户对信息沟通顺畅，感觉似有人一般的亲和感。
3. 品牌成分——体现Facebook品牌形象，并使品牌资产保持延续与统一。
4. 惊喜度——局部设计有贴心且另人惊喜的体验。

创新

1. 共性——符合已知事物的普遍认知。
2. 异性——在共性基础上，给人耳目一新的感受。
3. 复制性——能够促进Facebook其它产品的发展。
4. 颠覆性——在互联网上前所未见，能够变成同行业新的标准。

以上的五维可以说是面面俱到，从逻辑上将可以很好的辨别一个功能和页面到底用户体验如何，基于这样的标准，接下来就是按照标准进行评价了，为了评分更加公正，可以进行内部评分和外部评分来进行区分来达到最好的效果。

产品设计内部评审规则

评价周期

1. 每个设计师每个月被评审1次。
2. Team leader每周组织一次评审，提前通知设计师。

人员组成

1. 大评委1人(组织本次评审者，由产品设计主管担任)
2. 评委4人以上（部门经理1 人、主管1人、同事1人、其它。）
3. 被评设计师

评审流程

1. 每次由被评设计师自行上报一个最近上线的作品。
2. 会议形式，被评设计师向评委团进行设计理念简单介绍。
3. 评委各自填写评审表，完成后交由大评委。
4. 大评委对评审表进行数据计算，意见汇总，并制作评审报告。
5. 组长负责每次新改版上线的用户数据收集。
6. 保留好原始评审表，进行存档。
7. 打印评审报告，并将评审意见告诉设计师，完成本次评审。

打分规则

1. 产品设计五大指标总共20条，每一条进行0-5分的打分，如果全部满意即为100分。
2. 单条如果打5分，必须写出理由。打0-4分可以不写理由。
3. 计分时，去掉一个最高分和一个最低分，剩下的分数相加后的平均即为最后得分。
4. 根据线上用户调查数据和评委打分各占50%，最后得出该设计的最终得分。

产品设计外部评审规则

线上用户调研也是用Facebook的产品设计五维去做，但不能用评委的版本，否则收集不到任何有用的信息。用户版只从情感、易用、形美、气势、创新五个大维度出题，不需要细化了，并且选项不能有任何引导性。而文字造成不要使用专业术语，用网友常用的网络用语就可以了。

产品设计用户在线调查问卷

1、您对新XXX的整体满意度如何？(情感)

A 非常满意  B 比较满意  C 一般  D 比较不满意  E 非常不满意

2、您觉得XXX是否好看？(形美)

A 漂亮，太棒了  B 还可 C 一般  D 有点难看  E 恶心，不想再看第二次

3、您认为XXX使用起来怎么样？(易用)

A 更清晰了，方便使用  B 还可以  C没什么感觉  D不如原来方便 E太费劲了

4、您认为新XXX功能怎么样？(气势)

A太棒了，我喜欢  B还可以  C一般  D有点多余  E完全多余的

5、您认为对新XXX的功能XXX怎么样？(创新)

A非常有用，太好了  B比较有用  C一般  D不关注  E对我没什么用

Facebook产品设计五维最终呈现给设计师的是图标化评审报告，不仅能知道设计师在团队中的水平，还能知道具体在那方面做的好，那方面有提高的空间，指导意义远远大于分数的意义。

以下为来自19楼的两份资料：产品设计评审模型& 产品设计评委打分表

原文链接：http://blog.19ued.com/?p=1144

No related posts.

  Googl用户体验团队致力于创建有用的（useful）、快速的（fast）、简单的（simple）、有吸引力的（engaging）、创新的（ innovative）、适合大众的（universal）、有用的（profitable）、漂亮的（beautiful）、值得信赖的（trustworthy）、个性化的（personable）的应用。

Google用户体验的十大准则

1.将焦点集中在用户的生活，工作，和他们的梦想上。

Google 用户体验小组努力发现用户的真正需求，包括那些他们自己都无法阐明的需求。有了这些信息，Google 就可以创建解决现实问题的产品并激发所有人的创造力。Google的目标不仅仅是按部就班的工作，而是改善人们的生活。总之，一个精心设计的 Google 产品在日常生活中是非常有用的。他并不是靠花哨的视觉效果和技术打动用户的，虽然也有具备这些特性。他不会强迫用户去使用他们不想要的特性，但是他会引导有兴趣的用户自发的去使用他们。他不会入侵别人的生活，但是回想那些想要探索世界信息、工作的更加快速和便捷、分享想法的用户敞开大门。

2.每一毫秒的价值

没有什么比用户的时间更加宝贵。Google页面的快速加载得力于精简的代码和精心挑选的图片。为了让用户更加容易的找到想要的内容，Google将最重要的功能和文本放在最显眼的位置。一些不必要的点击、输入、步骤和其他操作都被Google去除了。Google 的产品只会请求一次信息并且包含了智能的默认选项。所有任务都是高效的。速度为用户带来便利。如果没有充足的理由，Google 绝对不会牺牲速度。

3.简单就是力量

简单造就了良好设计中的许多元素，包括易用性、速度、视觉效果和可访问性。一个产品从设计之初就应该保持简单。Google 不打算创建功能繁复的产品，我们最好的设计只包含那些用户完成目标过程中所必需的功能。即使产品需要大量的特性和复杂的视觉设计，也要看起来简单而强大。在以牺牲简单为代价去追求一个不太重要的功能之前，Google 会三思而后行。Google希望将产品推向新的发展方向，而不仅仅是增加更多功能。

4.引导新手和吸引专家

为多数人设计并不意味着为降低标准设计。最好的 Google 设计表面上看起来很简单，但是却包含了强大的功能，可以让需要的用户很容易地访问到。Google的目标是为新用户提供美妙的初始体验，同时也吸引那些经验丰富的用户，他们会让其他人也来使用这个产品。一个精心设计的 Google 产品会让新用户很快熟悉，在必要的时候提供帮助，并且保证用户可以通过简单符合直觉的操作使用产品的大多数有价值的功能。逐步披露高级功能会鼓励用户去扩展他们对产品的使用。在适当情况下，Google 会适时地提供一些智能功能来吸引那些资深网络用户——那些在多个设备和电脑之间共享数据的人、在线上和线下工作的人、以及需要存储空间的人。

5.敢于创新

设计上的一致性是 Google 产品获得信任的基石，它令用户舒适并提高他们的工作效率。但是要想把设计从沉闷乏味变得令人愉快就要依靠想象力。Google 鼓励那些创新、冒险的设计，只要它们符合用户需求。团队鼓励新的想法并发展它们。不是为了去适应现有的产品功能，Google 更着眼于改变整个游戏规则。

6.为全世界设计

万维网已经向世界各地的人们开放了互联网上的所有资源。例如，很多用户通过移动设备来使用 Google 的产品，而不是坐在桌子前面通过电脑。我们设计出的产品应该在用户随意选择的任何一种媒介上都可以适时调整和使用。在可能的情况下，Google 会适时地支持较慢的连接速度和旧版的浏览器，而且 Google 会允许用户选择如何浏览信息（屏幕大小，字体大小）和如何输入信息（智能查询分析）。用户体验团队会研究世界上用户体验的根本差异，为每一个用户、每一个设备和每一种文化设计出合适的产品。简单的翻译，或者功能上的“优雅降级”，都不足以满足人们的需要。Google 还致力于改善产品的可访问性。Google对简单和具有包容性产品的渴望，以及Google 让全世界的信息普遍可访问的使命，都要求产品支持辅助技术，向包括有身体和认知缺陷在内的所有用户提供愉悦的体验。

7.安排今天和明天的业务

那些盈利的 Google 产品竭力做到以有助于用户的方式赚钱。为了实现这一崇高目标，设计师将和产品团队一起确保商业计划能够和用户的目标无缝集成。他们会确保广告具有相关性、有用并可以明确地识别出是广告。 Google 也会注意保护那些广告客户和其它靠 Google 谋生的人的利益。如果靠某个产品增加收入会减少 Google 未来的用户数量，那么 Google 绝对不会做这种尝试。如果一个有利可图的设计没有让用户满意，它就会被打回重做。不是每个产品都需要盈利，但是不能有产品对业务不利。

8. 愉悦用户的眼睛，但不分散注意力。

如果人们看到一个 Google 的产品时说“哇，真漂亮！”，用户体验团队就可以欢呼了。一个积极的第一印象会让用户觉得舒服，使他们确信这个产品是可靠和专业的，并且会鼓励用户做出自己的产品。简约美学对于大部分的 Google 产品都是适用的，因为一个干净、清爽、加载迅速，而且不会分散用户的注意力的设计一定符合用户需求的。吸引人的图像、颜色和字体需要与速度、可扫描文本和简易导航取得平衡。尽管如此，考虑到用户和文化背景的因素，“简单优雅”并不是对所有产品来说都是最合适的。Google 产品的视觉设计会让用户感到满意并且有助于使用。

9. 值得信任。

好的设计可以深深赢得使用 Google 产品的用户的信任。Google 可靠性的建立是从基础就开始的，例如，界面确保高效和专业、动作容易撤销、广告被明确识别、术语的一致性以及令用户惊喜而非惊诧。此外，Google 的产品是向全世界开放的，它包含指向竞争对手的链接并且鼓励用户做出贡献，如社区地图或者 iGoogle 小工具。一个更大的挑战是确保 Google 对用户控制自己数据的权利表示了尊重。在如何使用信息和信息如何共享给他人（如果有的话）方面，Google 是透明的，所以用户可以做出知情的选择。我们的产品在有危险的时候会警告用户，比如不安全的链接，使用户容易受到垃圾邮件骚扰的行为，或者将数据分享在 Google 之外的其它地方而被存储的可能性。Google 越大，遵循“不作恶”的座右铭就越重要。

10. 有人情味。

Google 包括了各种各样的人格特质，而Google的设计也是有人性的。文本和设计元素都是友好、机灵并且智能的，而不是枯燥、古板或傲慢的。Google 的文本直接和用户对话，并提供实际、非正式的协助，就像任何一个人回答邻居所提出的问题一样。而且 Google 不会让有趣或个性干扰到设计的其它元素，尤其是当人们被生活或找到重要信息的能力严重困扰的时候。

Google 并不是什么都懂，而且没有设计是完美的。Google的产品希望得到反馈，Google 会根据这些反馈采取行动。当实践这些设计准则的时候，Google 用户体验团队会在每个产品的可用时间里寻找最佳的平衡。然后，迭代、创新和改善会循环往复。

原文链接（E文）：http://www.google.com/corporate/ux.html

Related posts:

1. Google也是会犯错的
2. 来自Google的10条价值观
3. Google索引库到底有多大的猜想

用户在填写表单时会出错，这是很正常的事。但是处理这些错误时每个在线的流程非常重要的一个环节，如果用户出错，他们应当在第一时间被告知出了问题。错误的提醒应当以文字描述的形式在页面的顶端呈现。

Opodo 在页面顶部为用户提供了清晰的总结，应当如何纠正错误。

二、保证错误被高亮展示在对应区域边上

因为当错误在一张表中发生时，使用者可能已经滚动到底部，从而无法看到顶部的错误提示。 同样的，如果提示信息是以弹出方式出现的，使用者可能无法找到哪边出错了，因为他们需要关闭弹出窗口再寻找错误。在提醒使用者出错之外，在出错的区域周围应当有一条提示信息，标注哪边错误了，如何更改。

BMI 没有提供错误总结或错误提示框，因此使用者需要把页面卷动到底部才会意识到有什么地方出错了。

三、提供清晰的纠正错误的指引

无论网站多么想要避免，使用者难免会在预订过程中犯一些错误。如果使用者不能马上明白错误在哪以及怎么去解决，他们就会放弃这个过程。当提供给他们高度可视化以及富含信息的错误提示时，使用者就可以很快的纠正错误，继续预订流程。如果用户发觉有些错误难以解决的话，他们更愿意去一个全程有帮助提示的站点。这些指导应当包括：

• 出错原因的解释以及如何修正
• 不把错误归结在使用者身上
• 不要使用“出错”之类明显负面的字眼
• 慎用专业词语以及长词

STA 没有明确解释错误的原因，可能会让使用者感到困惑，不知如何解决问题。

尽管只提供了一个弹出框，Ryanair解释了错误的原因，这样一来访问者就知道怎么去解决问题了。

四、保证系统可以智能纠正常见的错误

尽管使用者在经过预订流程时会犯各种各样的错误，但有些典型错误是可以通过利用某些智能技术被避免的。例如一个电话号码的提交可以有N种方式：

• (020) 7423 6320
• 020-7423-6320
• 020 7423 6320

预订流程应当利用空格，标点或者框结构使得这些数字和文字排列更有序，其他类似的信息都可以这么处理，比如：信用卡信息、生日、邮政编码、姓名。网站应当明确指出指定的格式是什么样的，但是仍然保留接受不同格式数据的可能。

Thomas Cook强制顾客在填写电话号码时加上国际编码和地区代码，也许会让许多人感到困惑，使得最终的结果出错。

机票预订可用性测试之航班搜索页

机票预订可用性测试之搜索结果页

机票预订可用性测试之预订流程页

机票预订可用性测试之错误与出错页

原始文章（E文）：http://www.webcredible.co.uk/user-friendly-resources/white-papers/travel-usability-2010.shtml  翻译：虞邵阳

Related posts:

1. 在DreamHost上使用SSH时会用到的命令
2. 电子商务网站定向销售
3. 机票预订可用性测试之航班搜索页

有些旅行者不习惯在线上完成全部的搜索和预订流程。他们可能只在网上搜索想要的结果，之后在电话上预订。有技术困难或者有进一步需求的客户会利用电话来预订，因此需要在搜索和预订页上醒目的展示联系电话。访问者可能会对有预订电话的网站更加信任，同同时他们可以在任何时候拿起电话询问，特别是当他们卡在某一步时。

Netflights 是唯一一家在站点的页首上提供了他们的电话号码和呼叫中心开放时间的网站。

二、使用适当的“向上销售”

航班的边缘利润是很少的，因此很多旅游站点非常热衷于交叉销售或者向上销售一些其他产品给用户。可是，很多交叉销售的方法会潜在的增加用户离开的概率。需要保证的是所有额外的产品都应当是“被选的”，不能让任何的使用者被自动的加入到一些额外销售的名单中。

Jet2.com 因为有自动加入的保险，以及没有清晰提示这些额外增加的项目。 例如，选座时，并没有清晰的提示说选座功能需要花费3.99元。注意到这些额外费用的访问者需要重新开展预订流程来避免这些额外的费用。

三、展示一条清晰的进程条

在预订过程中，访问者应当被清楚地告知他们目前处于预订过程中的什么位置以及还有多少步骤。通常用一个进度条表示即可。进度条应当是：

• 很容易注意到
• 标签非常易懂
• 高亮目前用户的位置
• 有一个流程的外观

British Airways 提供了一个带有简约标签的杰出进度条，每一个步骤都会被清晰的标注出。

Expedia 既没有提供一个进度条也没有给每一步标注数字，这会让访问者难以了解还有多少步才能完成预订过程。

四、保证取消或者改变预订信息的方法醒目

旅行的特性意味着用户经常会想知道改变或者取消行程的条款——即使只是为了心安而了解。很多站点让这些信息非常难寻，深埋在网站使用者条款中。一些条款的简介应当在预订流程中被展示——这样也会增加用户的信任度。

Monarch 提供了详细的条款和合同信息，包括在支付页上退款和改签的费用信息。

机票预订可用性测试之航班搜索页

机票预订可用性测试之搜索结果页

机票预订可用性测试之预订流程页

机票预订可用性测试之错误与出错页

原始文章（E文）：http://www.webcredible.co.uk/user-friendly-resources/white-papers/travel-usability-2010.shtml  翻译：虞邵阳

Related posts:

1. 机票预订可用性测试之搜索结果页
2. 机票预订可用性测试之航班搜索页
3. 机票预订可用性测试之错误与出错页

通常，搜索结果页会提供大量的信息——清晰并且高效的组织和呈现这些信息给访问者就十分重要。如果访问者需要费力的解读内容，那他们很可能就不会继续流程了。

Travel Republic 拥有一个非常清晰并且组织良好的，以价格排序的搜索结果页。同时还提供了一个每个航线最低价格的快速浏览。

二、允许操作和分类各项结果

如果访问者搜索到了一长串的结果，那么提供进一步精确定位以找到预期结果的功能就十分必要。为大量的搜索结果排序，从而使带有关键指标的产品能够排至页首，对于某些目标并不明确的使用者来说十分重要。旅行者通常会按照价格排序来找出低价的航班，商务旅行者则可能会按照起飞和降落的时间排序。另一方面，过滤功能可以让使用者删去不符合要求的产品。这个功能对于某些有特定需求的旅行者很有用，例如想要乘直达航班的或者某个航空公司的忠实会员。

Travel Republic 在右方的下拉条中为搜索结果排序提供了广泛的选项

Opodo 的过滤功能很强大，不过都被隐藏在页面的折叠部分，如果能够做的更醒目，访问者会利用的更多。

三、让页面“友善”的被分享

不是每一个涉及预订流程的用户会最终下单，有些只是想要查看一下价格或者航班时间。敲定一个航程通常是朋友间或者一家人的决定，因此你的站点能够支持打印功能是非常重要的。确保打印出的内容易读并且没有遗漏重要信息。网站应当提供“邮寄给一个好友”功能(或者其他社区分享渠道)，邮件内容包含一个“重新整理”过的不限时间内带有相同搜索结果的页面。这样，访问者就可以通过一个方便快捷的方法寻求朋友的回馈，显著的提升用户体验。

Expedia 提供了很多分享选项，不过这些功能都只对注册用户有效。

BMI 是唯一的在航班预订流程中提供了“发送给好友”以及“打印”该页功能的网站。

四、支持喜爱“对比购买”的访问者

大部分的人会在多个旅行站点之间比较时间和价格，所以第一次访问大都不会预订航班。比较后购买在电子商务中十分普遍。特别是在电子商务旅游行业，平均每4个访问者中就有一人是从竞争对手站点同一分类中来的。鉴于这种行为，站点应当保证不同会话之间的搜索能够被保存。这样一来，访问者从另一站点返回后，不需要再次输入搜索条件。例如：提供“最近搜索”的内容。

BMI 是唯一提供了过去所有搜索总览的网站

五、尽早的展示价格

访问者通常会因在预订流程中额外出现的其他费用感到失望。对于任何一个电子商务的结算流程，这种现象都很明显。因此航班的价格必须绝对的清楚。因此在预订流程中，需要越早越清楚醒目的展示包含了所有费用的全价。访问者会在了解了所有价格信息后对于其他可选项做出选择，如果他们在之后得知有额外的费用的话，他们会被迫重新考虑。客户对于为一些他们本不知道的东西付钱的反应是十分消极的。

Ryanair 没有提示去程和归程的总价，容易让使用者对报价产生混淆。

EasyJet 在预定流程中给出了总价格，同时还包含了不同支付手段产生的额外费用。

六、更简单的开始定制或者重新搜索

预订流程不能假设使用者会对于搜索结果很满意。如果他们不满意，就应当帮助他们寻找另一个更合适的航班。最简单的方法就是在搜索结果页直接可以开展另一次新搜索。其中所有之前输入的搜索要素（例如日期，机场和人数）应当被保留。

Netflights 在整个预订过程的页面上保留了搜索框，因此访问者可以在任何时候开展新的搜索。

BMI 没有在搜索结果页上放搜索框，访问者只有通过点击“改变您的搜索”来加载搜索页。

七、提供每个机场的信息

如果用户不清楚下列内容，他们一般不会预订在某个特定机场的航班：

1. 机场在哪
2. 如何到达机场
3. 交通状况如何
4. 到达机场需要的时间

这些问题变得越来越重要，因为机场越来越多，前往一个不熟悉机场的概率也越来越大。许多网站都不能够提供机场的确切位置以及如何到达该机场。

BMI 机场信息可以在导航条上清晰的看到。

八、使用清晰的航班确认页

在搜索结果页选择了航班后，一个信息总结页应当被展现出来。这样访问者才能在继续预订流程之前，确认他们选择的航班细节。这个确认页面需要多种的信息的清晰展示，来帮助访问者最终拿主意，内容应当包括：

1. 价格，清晰的在页首展示
2. 起点与终点的地点以及机场全名的清晰展示
3. 任何额外的，没有被包含的费用。
4. 相关的航班信息，起飞降落的时间以及其他舱位等信息。
5. 清晰的下一步指导，保证用户能够了解如何开展预订的下一步。

STA 提供了清楚易懂的被选择航班细节的总结，同时有非常清晰的下一步按钮。

机票预订可用性测试之航班搜索页

机票预订可用性测试之搜索结果页

机票预订可用性测试之预订流程页

机票预订可用性测试之错误与出错页

原始文章（E文）：http://www.webcredible.co.uk/user-friendly-resources/white-papers/travel-usability-2010.shtml  翻译：虞邵阳

Related posts:

1. 机票预订可用性测试之错误与出错页
2. 旅游网站该如何利用移动互联网
3. 机票预订可用性测试之预订流程页

很多访问者来到一个旅游站点并不是想闲逛­，他们通常已经有了一个明确的目的地，他们想要立刻找出旅途所需要的花费。在首页上提供预订流程的入口，可以明确的告诉访问者他们可以如何计划自己的旅程，并且提高他们下次继续使用的机会。

Travelocity 以航班搜索为默认选项，在顶部进行了清晰的提示。

First Choice 默认没有清晰的展示搜索的选项和备选方案（例如：航班搜索）

二、提供预订流程功能性帮助

一位通过旅游中介预约旅程的客户可以在搜索航班时添加特殊的需求（例如想要公务舱，或者不想要任何附加费用）。通过在线预订的用户也有相同的需求，而预订流程需要能满足这些需求。

搜索功能应当提供下列内容以供选择：

• 可修改的的日期
• 联程、往返航班
• 仅选择直达航班
• 舱位选择

Expedia 有大量的选项供使用者选择。

Thomas Cook 没有提供进阶的搜索功能帮助搜寻机票

三、 提供一个易用的日历控件

在网站上添加日期输入框是很不稳定的，一方面用户会很容易输错日期，另一方面人们没有日历的帮助，也很难算准日期。大部分预订表单都支持通过日历输入日期，但是如果它没有被设计的很好，是弊大于利的。

• 一个好的日历需要满足以下易用性标准：
• 有一个清晰易懂的按钮让用户启用日历
• 日历应当和相关日期区域紧密贴近
• 每个月之前和之后的链接都在同一位置
• 如果不使用日历的话，使用者可以手动输入日期
• 使用者能够很方便的关闭日历功能
• 日历上归程的日期应当从去程结束的日期开始。
• 日历不能遮挡显示日期的区域

British Airways提供了一个双月日历，让访问者更方便的选择2个月之内的日期

四、完成“第一步”时提供容错空间

人们经常会在完成第一步航班搜索时出错，比如很多站点要求键入目的地名称，而正确拼写一个外地或国外的地名是很困难的。人们通常也不知道一个外地机场的全名，或者在目的地会是否有超过一个机场。许多站点会让访问者列举一个机场，而不是让他们选择一个城市名。

British Airways 智能化的提供了和拼错的地名最相近的目的地。

Ebookers没有提供任何拼写纠错的帮助。

机票预订可用性测试之航班搜索页

机票预订可用性测试之搜索结果页

机票预订可用性测试之预订流程页

机票预订可用性测试之错误与出错页

原始文章（E文）：http://www.webcredible.co.uk/user-friendly-resources/white-papers/travel-usability-2010.shtml  翻译：虞邵阳

Related posts:

1. 机票预订可用性测试之预订流程页
2. 机票预订可用性测试之错误与出错页
3. 机票预订可用性测试之搜索结果页

第一部分：无障碍

本节不仅包含传统的无障碍问题，包括任何可能阻止用户正常访问网站的信息的的问题。 

1、网站加载时间是合理的 叫我老派，但我仍希望看到在根据100KB的网站来（60KB的甚至更好）。

2、充足的文本到背景对比度 暗光，灰，看似时尚，但用户不会毁掉我的视力看你的博客。 眼睛和显示器差异很大，所以保持你的核心内容对比度高。 黑白组合还是最好的选择。

3、 字体大小/间距是易于阅读 可读性差增加的沮丧和失望会导致用户现场遗弃。 此外，请确保您的行间距是足够的空白 – 空白空间是一个设计师的最好的朋友。

4、 Flash和加载项少用 不管你的网站看起来多么伟大，人们不会等待插件加载5分钟。 有节制地使用新技术时，才真正提高自己的目标。 坚持使用标准的HTML / CSS。

5、 有适当的图片alt标签 不仅为图片无法加载的时候使用ALT标签，搜索引擎也需要他们理解你的图片。 

6、 网站页面定制Not-found/404 如果您网站上的页面不存在，创建自定义404页面，最好是指导你的访问者的内容。如果页面是个白页，很可能因此失去一个用户。

第二部分：身份

一个关键的问题，当有人第一次来到你的网站。你需要快速的告诉他“你是谁？” ，及“你是做什么？”，“我为什么要相信你？”等。

7、公司标志(LOGO)放置突出 把你的品牌标志放置在容易发现的地方， 人们期待它，喜欢它时，你使他们的生活方便。

8、使公司的服务明确的口号 你是做什么？” 简明地描述口号。 避免使用营销术语或你自己独特的价值主张。

9、主页易消化在5秒 在可用性测试中，我们经常谈论的5秒规则。网站的访问者是一个善变的一群，他们需要在短短几秒钟获得你网站主页的基本数据。

10、清晰的公司信息 古老的“关于我们”网页可能看起来枯燥，但信心是重要的，在网络上，人们需要一种简单的方法来了解您的详情。

11、 清楚地公司联系信息 同样，游客想知道，如果他们需要如何与您取得联系。

第三部分：导航

一旦人们不知道你是谁，你做什么，他们需要明确的路径，来寻找他们感兴趣的内容。 信息体系结构是一个巨大的话题，但这些问题涵盖了一些基本知识。

12、 主导航容易辨认 让你的主导航很容易找到，阅读和使用。 如果你有两个或更多的航区，使其明白为什么它们是不同的。

13、导航标签是清楚和简明 你的主要导航要短一些，直截了当，易于平常人掌握。

14、按钮/链接数量是合理的 当你的目录数目大于7或更多时，你需要考虑是否是真的需要他们。如果你的菜单使用的是三级导航菜单，那么请重新设计吧。

15、公司LOGO链接到首页 这听起来可能影响不大，但人们期望LOGO链接到首。当用户来到你的网页后不知道该做什么的时候，他们往往会点击LOGO。

16、链接颜色保持一致且容易识别 蓝色的链接是互联网标准的链接颜色。为了不破坏内容的可读性，在内容中不要大量使用蓝色链接或下划线。

17、网站搜索是很容易访问 如果你的网站提供搜索功能，请确保它是突出的。一遍的搜索框都放在右上角，在设计搜索按钮时，请简单明了的进行设计。

第四部分：内容

你应该听说过“内容为王”这句话。请确保你的内容是一致的。有组织的，易于阅读的。

18、明确表述主题的大标题  很多人在线上并不阅读而是扫描，将标题和内容却别看来，让去显示的更加清楚。为了搜索引擎优化，可以使用<h1><h2>标签。

19、主要内容应该放在页面的上面 请将最重要的信息在浏览器第一屏就显示出来。

20、保持页面样式和颜色的一致性，要拥护知道他们还在访问你的网站。不同的颜色代表不同的功能。

21、慎重使用强调或粗体 不要过分的强调你的内容和过多的强调你的内容。

22、广告和弹出窗口要不吸引人 不要强迫用户点击你的广告。尽量的将你的广告和内容区分开来。

23、主要内容简介易懂 避免行话套话。

24、网址有意义且用户界面友好 设计基于关键字的有意义的网址。

25、HTML页面标题 <title>标签需要使用描述性的语句，页面标题往往是用户第一个看到的内容，所以从一开始就需要给访客留下好的映像。

http://www.usereffect.com/topic/25-point-website-usability-checklist

Related posts:

1. 百度对博客系统的收录情况
2. 《PHP 6与MySQL5基础教程》英文版PDF下载
3. Google Search Appliance 相关查询

• 一个容易记忆及拼写的域名
• 简短的URL网址
• 容易输入的URL
• 可视化的URL结构
• 用户可以删除URL最后的一层到达上级目录
• URL保持不变

事实上，用户不需要像服务器一样了解每个URL，事实上更多的人是通过大概的印象曲访问网站的。

• 很多人会在没有访问网站前猜测网站的域名，所以你最好使用公司名称或品牌作为域名。
• 更多的人更喜欢记住网站名而不是将网站添加到书签，所以最好注册一个易于拼写的域名。
• 在用户将你的URL通过邮件告知别人时，保证你的URL要少于78个字符，因为如果URL过程可能会造成换行。
• 如果很多人通过输入那么最好使用简短的URL。
• 不要再URL中大下写混用，因为很多人会忽视大小写，但是部分服务器不会。
• 在服务器上进行拼写检查来减少由于拼写错误造成的问题。

持续的吸引外链

来自第三网站的外链对流量很重要，所以在生成你的URL的时候要考虑到易于传播。

• 保证所有的URL都是持续可以访问的，且链向的页面不做改变。
• 不要把文件的URL改来改去， 保证同一个文件前后只有一个URL。

域名是否必须是.COM?

很多人考虑是否.COM域名是否要比.CN（国别域名）要好？是的，很多人已经习惯了域名以.COM结尾。这是由于早期由美国人开发的浏览器会自动补全.COM（现在苹果的ipad上默认也有.COM按钮），基于这种情况，我的建议是：

• 如果网站是英文的或国际性最好使用.com域名
• 如果网站使用的是其他语言可以使用国别域名代替（强烈不建议使用CN域名，其中缘由大家都懂的）
• 如果网站内容是区域性的，无所谓使用哪种域名

国别域名相比.COM域名主要优势是，还有很多可以注册的简短的、易记的域名。

当前的域名很可能会消失

从长远的发展来看，需要大量的名称（按照人类语言习惯）来识别世界上每个实体。新的顶级域名会是向.shop，表示是一家商店。在用户输入前就对实体类别进行过滤。

由于旧的用户习惯，旧的浏览器或软件还是会存在很多年，所以好的域名还是会影响很多年。

原文链接：http://www.useit.com/alertbox/990321.html

No related posts.

“在悠闲领域，如果不打造精品很难向客户收钱，复制者、追随者可以很快做一个相似产品。只有花三年时间，别人才很难超越你的高度。”《植物大站僵尸》最开始“并不好玩”，是创作团队经过接近3年不断修改的结果，是“每三个月一次”的坚持更新给了这款游戏强劲的生命力。

James Gwertzman介绍，在游戏的完善和更新方面，《植物大战僵尸》的第一个版本叫做种种子，即玩家把植物中到土里，植物逐渐长大，再开始和僵尸作战，右边则是种植工，这个游戏一点都不好玩，因为种种子之后还要等着种子长大的过程很烦人。到了06年，团队设计了随机挑选植物，但玩家要等到植物卡出现在上面再选择，这依然不算有意思。到了07年，这款游戏已经很好玩，那时的背景已和现在的版本差不多，包括格局设计、僵尸形状等，但还有一个最主要的问题，即新玩家不了解植物图标、价格，最开始向日葵是100分，豆荚也需要100分，但用户不知道要最先选择向日葵还是豆荚才能完成游戏，因此要解决如何教新玩家先种向日葵的问题。当时团队并没有简单地设置一个文字游戏提醒，因为这样的设计不够有趣，最后团队提出了解决方案，即把向日葵的价格调成50分，豆荚还是100分，这样新的玩家就自然被带领着先种很多的向日葵，再通过向日葵挣钱去买各种植物，虽然这只是游戏中一个很小的变化，却有效改变了整个游戏的格局。

PopCap VP 谈“植物大战僵尸”创作经验：

1. 从其他游戏获得灵感，并创新。

“从其他的游戏中得到灵感”——这是James Gwertzman首先提到的，灵感的样子是无形的并不代表它一定要诞生于虚无，《植物大战僵尸》的灵感基础其实偶然和朴素。他的最初起源于《魔兽争霸》的塔防游戏模式，某一天他的制作人忽然发现塔防游戏中的绿色部分很像植物，那么如果真的做成种上很多植物来防御入侵的话那不就还是一个很有趣的点子吗？当然这仅仅是最初的构想，之后又使用了休闲游戏中同屏幕游戏的特点以及相当早期的一个使用传送带的啤酒招待游戏，通过整合后至此一个属于自己全新创意油然而生。

2. 做出原型

《植物大战僵尸》很擅长“跨界”：在游戏的核心层，George Fan借鉴的是《魔兽争霸》塔防地图游戏，只不过他把冷冷的防御塔变成了灵动的植物；在金钱、植物种类等的资源收集上，他借鉴的是《疯狂水族馆》；游戏的表现形式——5轨道路线则是源于《酒吧招待》。当然，最聪明的跨界则是“植物”和“僵尸”，这两个毫不搭边的角色以这种方式进行碰撞，成功制造了“疯狂”（疯狂的好玩, 疯狂的上瘾）。 

3. 增加好玩元素，去除令人沮丧的东西。

“增加乐趣，去除烦闷”“不要担心你的与众不同”——在得到最初的原始模型后，你需要不断的在游戏的可玩性上增加自己的特点，这个过程即可挖掘自己和同类型的游戏的不同，也来自于任何奇思妙想。事实上当初制作《植物大战僵尸》的时候，正是农场类游戏兴盛的阶段，每个人都在种植物，可是你的花园里有僵尸吗？这里就有。而游戏中近乎隐藏的“雪人僵尸”这是来自于愚人节，当初他们定制了一个游戏的愚人节版本号称有着各种添加，可是打开游戏后得到的却是一群被冻僵的僵尸和冰的没法种植物的土地，是一个让人忍俊不禁的4月1日冷笑话。但是在收集了有关于这个版本的各类有趣回复后，“雪人僵尸”作为隐藏僵尸成为了游戏中创意的亮点和游戏开发秘话遗留了下来。

4. 不要害怕创新

《植物大战僵尸》的出品方PopCap是一家富于创新精神的小规模游戏开发商，擅长开发小游戏。《连线》曾经对此做过评价：“这款游戏证明，在游戏行业的激烈市场竞争中，有时少就是多。”这款游戏的确把“减法”这一设计思想发挥到了极致，上手极其简单，但是，越往下走就越考验玩家的智慧与策略。《植物大战僵尸》设计师George Fan曾供职于暴雪，他解读说，“从我打算创造这个游戏开始，我已经决定在游戏的‘复杂’和‘简单’之间取得一个良好的平衡。我很中意战略型游戏，所以我在其中设计了很多战略因素，所以这可以被称为这个游戏的‘高端’ 一面。从另一方面讲，我很讨厌那种需要阅读大量教程和说明书才知道怎么去玩的游戏，所以我把游戏的上手变得更加简单，所以这可以被成为这个游戏‘简单’的一面。” 

麻省理工学院媒体实验室的教授前田约翰一直在鼓吹简单哲学，他认为“达到简单的最简单方法，就是用心割舍”。“用心”和“割舍”缺一不可，简单是为了制造更加惊艳的体验。乔布斯设计iPhone时的一大思考就是如何更简单，他认为手指就是最好的鼠标和键盘，他去掉了传统的QWERTY键盘，选择了全新的触摸屏方案，而且他抛弃了笔触屏（电阻式），选用了更先进的指触屏（电容式），他创造了“少就是多”的全新格局。从某种层面上讲，时下流行的“偷菜”、“钓鱼”游戏也是这样一种路子：以最简单的方式制造高端体验。

5. 不要担忧游戏的名字

“不要纠结于游戏名字”——这是一个每个游戏都遇到过的有趣经历，制作者总是想要自己的游戏有一个有趣名字，最初他们为了方便起见订立了最初的名字—— 植物大战僵尸（Plants vs. Zombies）。之后，随着游戏的开发，越来越多的个性名字出现：“Dawn of the Dead”、“Lawn of the Dead”等等，前前后后整整出现了数百个有趣的名字，其中不乏充满禅意的幽默搞笑之作。不过最后的结论自然也就是我们说知道的，游戏依旧沿用了最初的《植物大战僵尸》。名字是很重要的，但是他不是最重要的，关键是你有好的创意与游戏品质。

6. 让团队承担创新责任

团队很重要：要选择最能配合你的伙伴。好的美工和程序能相互鼓励并且全身心的投入到游戏的开发中，而不是逃避责任，得过且过。跟团队中的每个人分享创造游戏的乐趣。

7. 早测试、多测试、鼓励反馈

尽早测试，测试能够搜集到宝贵的反馈。发挥论坛的用处吧，玩家才是最好的测试员。

8. 避免玩家做出错误选择

防止玩家们做出不当的选择。许多休闲游戏玩家跟专业玩家的行为是不一样的。你得帮助在游戏中他们做出正确的选择。

9. 度量

了解用户的行为模式，比如说每一关花了多长时间，并且对游戏做出最贴近玩家的改变。

10. 玩得开心。

作为一个小公司，PopCap拥有独特的公司文化：把设计师当做艺术家，而不是流水线式的制造。做减法是为了聚焦，PopCap在《植物大战僵尸》成功地实现了这种聚焦——一切为了情感体验。《植物大战僵尸》提供的50个等级的冒险模式、循环的生存模式、20种各异的小游戏、禅境花园和解谜模式，照顾到不同人群的体验。这个游戏总计有40种植物对阵25类僵尸，丰富而搞笑的植物和僵尸种类让游戏充满乐趣。比如，有个舞王僵尸非常可爱，一召唤可以跑出来4个小僵尸。有个旷工僵尸很擅长钻地，有个骑海豚的僵尸则成为不少玩家的梦魇。这个小游戏制造的情感体验如此强大，以至于不少玩家在游戏中流连忘返，在“植物大战僵尸”贴吧里交流布阵经验，甚至有“无炮流”等流派来挑战极限。

《植物大战僵尸年度版》简体中文版下载:下载点1 下载点2 下载点3

《植物大战僵尸年度版》中文去广告精简版（推荐）：Rayfile下载 纳米盘下载

Plants vs. Zombies HD for ipad：http://itunes.apple.com/us/app/plants-vs-zombies-hd/id363282253?mt=8

《植物大战僵尸》IPAD版本下载：http://u.115.com/file/f17e9dcb72

Related posts:

1. keso评论：Web已死？
2. Revolution .vs. Evolution
3. 防御工事：星形要塞