量化用户体验有四个重要因素：

1. 品牌(branding)
2. 可用性(usability)
3. 功能性(functionality)
4. 内容(content)

这些因素不是独立的，单独作用的话，这些因素中没有一个能带来积极的用户体验；然而，如果综合起来，这些因素就组成了一个网站成功的主要因素。

举例来说，一个设计精美的网站，却频繁地出现服务器错误或超时。或者想象一个很棒的数据库应用程序，由于某种原因而从未被使用过，因为它被深深地掩埋在了网站信息架构的深处。在两种情况中，我们都可以看到，独立的品牌、可用性、功能和内容等要素是无法说明一个网站是成功的。然而，当综合在一起时，这些核心要素就构成了用户体验的基础。

比如说你来了一位新领导 ，他们对网站现状不满意，想让你帮忙把握网站的正确航向。如果你像我一样的话，第一件要做的事就是先浏览一下这个网站，然后在脑海中做一些粗略的记录。然后你怎样把这些想法和记录传达回给你的客户，而不是简单地像撕成八瓣一样对现有网站批判一番？

问题在于，我们每个人对一个网站是好还是坏的感知，是受我们个人背景和行业特性的影响而有所偏倚的。如果被叫来评价一个网站的优点和缺点，一个开发人员、可用性专员、设计人员或信息架构人员可能会有完全不同的评判。

一个客观的测量分析工具，会帮你提供给客户有事实依据的建议，而不仅仅是主观臆断和观点。本文中我们将探讨的方法会帮助你：

• 尽可能消除个人偏见（主观因素）。
• 让不同背景的人（设计人员，开发人员，客户）能够在理解网站上有统一的共识。
• 创立与竞争对手网站或者以往的开发相比较的基本规则。
• 为你的客户提供一个关于他们网站的优缺点的事实依据和可视化的展示。

如上所述，用户体验由四个相互关联的要素所组成：品牌、可用性、功能、内容。但是，我们如何量化和衡量这些看似无形的元素呢？

方法很简单。我们把分析分为四个部分，每个用户体验的元素为一个部分。对于每一个元素，我们创建一系列的描述或参数，用于针对性地测量网站。我们为每一个描述创建一个从1到X的尺度范围；并且在这个范围内给每个描述打分。一旦你完成了这个分析的第一部分，四个栏目中的每一个描述就都有了一个对应的分数。

在本文附上的范例分析中，我们只为每个元素使用了五个描述或参数。因此，我们使用了一个20分的尺度范围，这样网站的最高分值就是100。所以，如果我们为每个元素添加额外的五个描述或参数，我们就会使用10分的尺度范围来打分。

下面就是对范例分析中的每个元素以及描述或参数的概要：

品牌包括在网站中所有审美的、设计相关的项目。它带给网站想要的组织形象或信息的创意。用于测量品牌的描述包括：

• 网站提供给访客有吸引力的和难忘的体验
• 网站的视觉效果与品牌特征保持一致
• 图像、附加内容和多媒体对于体验的增值
• 网站传达出品牌的感知预示
• 网站利用了媒体的能力来增强和扩展品牌

功能包括所有技术方面的和“后台的”进程和应用。它让网站提供给所有最终用户交互式的服务，而且重要的是，注意这有的时候同时意味着前台公众用户和后台管理员。网站功能的描述包括：

• 用户及时获得对他们查询和提交信息的响应
• 任务进程的清晰告知（比如，成功页面或邮件更新提示）
• 网站和应用严格遵守通用的安全和隐私标准
• 在线功能与离线业务流程结合
• 网站包含管理员工具来加强管理员的效率

可用性带来的是所有网站元素和特性的总体易用性。可用性之下的二级主题包括导航和易用性（友好度）（注释：易用性处理的是使在线内容可用于用户的体验，享受和使用的问题）。可用性的描述包括：

• 网站防止错误发生，并帮用户从错误中恢复
• 整体网页侧重针对主要受众优化
• 网站帮助访问者达成一般目标和任务
• 网站遵循它自己的一致性和标准
• 网站为残疾用户提供内容

内容指的是网站的实际内容（文本，多媒体，图像）及其结构，或信息架构。我们来看信息和内容是如何按照定义的用户需要和客户的商业需求组织的。测量内容的描述包括：

• 链接密度有足够的清晰度，且容易导航
• 内容组织方便用户达到目标
• 内容及时准确
• 内容适合客户需要和商业需求
• 多语言的综合性内容

在多数情况下，我会为这四种元素分别使用10到20个独立的描述。我建议你使用如上描述作为你创建你自己的分析的基础。请记住，如果你添加了更多的描述，你必须也调整20分的尺度，以便每个元素的总分为100。例如，如果你为每个元素使用10个描述，那么你的评分尺度应该是1-20。如果你为每个元素使用20个描述，你的尺度应该是1-5。

一旦你完成了你的分析，并且得到了每个描述或参数的分值，就是时候把数据放入清晰而便于告知的格式中去了。

首先我们要做的是，把每个元素的所有的分值加总。因为我们已经设置了分值尺度，来为每个元素提供满分为100的分数，我们真正得到的是一个百分比的分数。一旦我们有了这些百分数，我发现最有效的是创建一个雷达图来直观地呈现。微软的Excel或者Open Office Calc都很适合，任何带有图表功能的数据表软件都可以。

使用你的数据表软件，你可以创建一个可视化的数据展示。

关于本文描述的分析和方法最棒的事情是，他们可以用于满足你的特定客户或项目需求。你当然可以在分析中添加第五个类别来描述易用性（友好度）或者商业指标。例如，你得到了一个政府客户，需要严格遵循508规则（针对美国）。你可以容易地创建一套描述或参数来专门处理易用性（友好度）元素，修改你的图表来相应展示。同样，你也可以很容易地创建一个类别来专门处理你的客户的重要商业指标，比如，ROI，点击率，转化量，或者重复顾客数。

可选地，这个分析平台还可以让你能够为你选择的元素添加更大的权重。比如说你有一个客户，他是奢侈品生产商，并且主要侧重在品牌和视觉效果上。你当然可以创建一个修改过的测量系统，来为品牌要素提供更大的权重，而为，比如说，可用性要素上减少权重。

译者：Leon Zhang, 数字营销宝典 (DigiMarketing.cn)

原作者：Robert Rubinoff；原文：http://www.sitepoint.com/print/quantify-user-experience

1.网站品牌

任何时候品牌效应都不能忽视，提高网站转化率也不例外。网站知名度、可信度、口碑、定位都决定了网站的转化率，具体包括：

• 网站完整的联系方式；
• 权威的网络认安全证标志；
• 网站经营资质证明；
• 网站备案信息；
• 第三方诚信认证；
• 媒体报道；

2.商品吸引力

用户最终花钱购买的是商品，所以商品质量的好坏也到了决定性的因素，任何时候都不要忽略到商品自身的重视，具体包括：

• 商品是否有质量保证；
• 商品是否有特色；
• 商品是否存在价格优势；
• 是否能够提供详细的商品介绍和使用说明；
• 商品图片是否有吸引力；
• 商品折扣和促销；
• 是否有返现或是商品赠送；

3.客户服务

在拥有品牌和商品质量的前提后，我们要考虑到是否对用户有一个贴心的服务制度，让用户购买商品无后顾之忧，主要包括：

• 在线客服能够及时应答客户疑问；
• 畅通的服务电话线路；
• 在线留言板以及及时解答；
• 及时且多套配送方案（配送时间/配送地域）；
• 可靠安全的支付方式，是否支持货到付款；
• 有效的退换货保证，并能及时响应；
• 便捷的订单查询和管理；
• 物流服务水平；

4.用户行为

即使我们已经拥有了很强的品牌影响力已经产品质量和服务，但是最终决定购买行为的是顾客，所以顾客行为对转化率的影响至关重要：

• 用户是否存在真实需求；
• 顾客忠诚度；
• 是否存在重复购买；
• 用户对商品及服务的真实评价；
• 顾客是否真的验收商品；
• 访问者在网站停留时间短及访问网页数量少；
• 老用户是否引导他人访问购买；
• 订单的评价价格；

5.访问者质量

• 在提升网站转化率时我们要对访问者进行一些分析，不同渠道的访问者的质量是不一样的，那么需要对访问者进行分析：
• 直接输入网址访问的用户；
• 其他网站的推介流量；
• 搜索引擎自然流量（SEO流量）；
• 搜索引擎付费流量（SEM流量）；
• 是否是新访客；
• 是否是活跃用户；
• 单个访客的成本是多少；

6.用户体验

一个网站是否拥有良好的用户体验跟提升转化率也是密不可分的，那些因素影响用户体验：

• 网站访问速度；
• 网站设计美观性；
• 网站易用性是否够高；
• 内容关联性是良好；
• 购买流程是否便捷；
• 商品分类陈列是否合理；
• 站内导航及搜索功能是否完善；
• 下单到收货的时间间隔是否令人满意；

本文转载自网络，原文出错未知。

通常当你的网站提供了注册服务，而用户注册并登陆过你的网站，那么用户可以更容易地被识别，因为网站一般都会保存注册用户的详细信息；但是你的网站并不需要注册，而用户的行为以浏览为主，这是用户识别就会显得较为困难，下面提供了几种常用的用户识别的方法：

识别用户的几种方法

当用户并未注册登录的情况下，识别用户的唯一途径就只剩下用户浏览行为的点击流数据，通常情况下它们会保存在WEB日志里面，关于WEB日志的详细说明可以参考我之前的文章——WEB日志格式。而WEB日志本身存在的缺陷可能导致用户识别的不准确性，关于WEB日志的缺陷可以参考之前的文章——WEB日志的作用和缺陷，所以我们在选择用户识别方法的过程中，在条件允许的情况下尽量选择更为准确的方法：

1、基于IP的用户识别

IP地址是最容易获取的信息，任何的WEB日志中均会包含，但其局限性也较为明显：伪IP、代理、动态IP、局域网共享同一公网IP出口……这些情况都会影响基于IP来识别用户的准确性，所以IP识别用户的准确性比较低，目前一般不会直接采用IP来识别用户。

获取难度：★

准确度：★

2、基于IP+Agent的用户识别

同样基于最简单形式的WEB日志，我们可以增加一项——Agent，来提高单一IP方式识别用户的准确性。Agent也是WEB日志中一般都会 包含的信息，通过IP+Agent的方式可以适当提高IP代理、公用IP这类情况下用户的分辨度，同时通过Agent还可以识别网络爬虫等特殊“用户”， 但同样准确度也欠高。

获取难度：★

准确度：★★

3、基于cookie的用户识别

当你通过自定义Apache日志格式或者JavaScript的方法获得用户cookie的时候，其实你已经找到了一个更有效的用户识别的手 段。cookie在未被清除的其前提下可以认为是跟某个访问客户端电脑绑定的（一个客户端有可能包含多个cookie），所以用cookie来标识用户其 实指的是用户使用的客户端电脑，而并非用户本身。

用cookie识别用户的方法当然也存在缺陷：最常见的就是cookie被清除而导致用户无法与原先记录实现对应；同时由于客户端电脑会被共用，或者用户会在不同的电脑上访问你的网站，这个时候cookie就无法直接对应到该用户了。

获取难度：★☆

准确度：★★☆

4、基于用户ID的用户识别

基于用户ID的用户识别是最为准确，因为一般情况下用户不同共享他的用户ID，所以我们可以认为数据中的userid唯一地指向该用户，几乎不 存在偏差。当然要使用用户ID来识别用户是需要一定的前提条件的：网站必须是提供用户注册登录服务的，并且可以通过一些手段在点击流数据中记录 userid。

获取难度：★★

准确度：★★★

所以对于一个需要用户ID注册登录的网站来说，用户唯一标识符的选择可以遵从以下顺序：当用户注册登录时以userid为准，当用户在未登录状 态浏览时以用户的cookie为准，当用户未登录且cookie无法获取的情况下以IP+Agent为准；这样就能从最大程度上识别唯一用户。

这里推荐一个网站日志中cookie项的自定义设置方法，以便更好地识别用户。cookie是从用户端存放的cookie文件记录中获取的，这 个文件里面一般在包含一个cookieid的同时也会记下用户在该网站的userid（如果你的网站需要注册登陆并且该用户曾经登录过你的网站且 cookie未被删除），所以在记录日志文件中cookie项的时候可以优先去查询cookie中是否含有用户ID类的信息，如果存在则将用户ID写到日 志的cookie项，如果不存在则查找是否有cookieid，如果有则记录，没有则记为”-”，这样日志中的cookie就可以直接作为最有效的用户唯 一标识符被用作统计。当然这里需要注意该方法只有网站本身才能够实现，因为用户ID作为用户隐私信息只有该网站才知道其在cookie的设置及存放位置， 第三方统计工具一般很难获取。

获取用户信息的途径

通过以上的方法实现用户身份的唯一标识后，我们可以通过一些途径来采集用户的基础信息、特征信息及行为信息，然后为每位用户建立起详细的Profile：

1)　用户注册时填写的用户注册信息及基本资料；

2)　从网站日志中得到的用户浏览行为数据；

3)　从数据库中获取的用户网站业务应用数据；

4)　基于用户历史数据的推导和预测；

5)　通过直接联系用户或者用户调研的途径获得的用户数据；

6)　有第三方服务机构提供的用户数据。

识别并获取用户信息的价值

通过用户身份识别及用户基本信息的采集，我们可以通过网站分析的各种方法在网站是实现一些有价值的应用：

• 基于用户特征信息的用户细分；
• 基于用户的个性化页面设置；
• 基于用户行为数据的关联推荐；
• 基于用户兴趣的定向营销；
• ……

原文链接：http://webdataanalysis.net/personal-view/web-user-identification/

关联推荐在营销上被分为两类：

• 向上营销(Up Marketing)：根据既有客户过去的消费喜好，提供更高价值或者其他用以加强其原有功能或者用途的产品或服务。
• 交叉营销(Cross Marketing)：从客户的购买行为中发现客户的多种需求，向其推销相关的产品或服务。

向上营销是基于同类产品线的升级或优化产品的推荐，而交叉营销是基于相似但不同类的产品的推荐。举个简单的例子，可以看一下苹果的产品线：

当你购买一个ipod nano3的时候，向你推荐升级产品nano4、nano5或者功能类似的itouch就叫做“向上营销”；而推荐Iphone、Mac或ipad的时候就是“交叉营销”了。

而关联推荐在实现方式上也可以分为两种：以产品分析为基础的关联推荐和以用户分析为基础的关联推荐。

• 产品分析的关联推荐指的是通过分析产品的特征发现它们之间的共同点，比如《Web Analytics》和《Web Analytics 2.0》的作者都是Avinash Kaushik，而且书名都包含Web Analytics，都是网站分析类的书籍，同时也可能是同一个出版社……那么基于产品的关联就可以向购买了《Web Analytics》的用户推荐《Web Analytics 2.0》。
• 基于用户分析的推荐是通过分析用户的历史行为数据，可能会发现购买了《Web Analytics》的很多用户也买了《The Elements of User Experience》这本书，那么就可以基于这个发现进行推荐，这种方法就是数据挖掘中的关联规则（Association Rules）挖掘，其中最经典的案例就是沃尔玛的啤酒和尿布的故事。

目前很多的关联推荐还是基于产品层面的，因为实现上更为简单（对于网站而言，产品数据明显少于用户行为数据，而且可能相差好几个数量级，所以分析工作就会 轻很多），基于产品的推荐更多地以上面所述的两种营销手段来实现，更偏向于传统的“推式”营销（个人对这种营销方式比较没有好感，尤其“捆绑销售”之类）。

基于用户行为分析的关联推荐

所以个人更偏向于基于用户分析的实现方式，这样更有利于发现用户的潜在需求，帮助用户更好的选择它们需要的产品，并由用户决定是否购买，也就是 所谓的“拉式”营销。通过向用户推荐产品或服务，激发用户的潜在需求，促使用户消费，更加符合“以用户为中心”的理念。所以下面主要简单描述下以用户行为 分析为基础的关联推荐，无论你是电子商务网站或是其他任何类型的网站，其实都可以实现这个功能，只要你具备以下前提：

1. 能够有效地识别网站用户；
2. 保留了用户的历史行为数据（点击流数据（clickstream）或运营数据（outcomes））；
3. 当然还需要一个不错的网站数据分析师。

这里以电子商务网站为例来说明一下关联规则的具体实现。目前大部分电子商务网站都提供用户注册的功能，而购物的用户一般都是基于登录的条件下完成的，所以这里为用户识别提供了最为有效的标示符——用户ID（关于用户识别的方法，请参考这篇文章——网站用户的识别）；同时网站会把所有用户的购物数据储存在自己的运营数据库里面，这个为用户行为分析提供了数据基础——用户历史购物数据。所以满足了上述的前两个条件，我们就可以着手进行分析了。

关联规则的实现原理是从所有的用户购物数据中（如果数据量过大，可以选取一定的时间区间，如一年、一个季度等），寻找当用户购买了A商品的基础上，又购买了B商品的人数所占的比例，当这个比例达到了预设的一个目标水平的时候，我们就认为这两个商品是存在一定关联的，所以当用户购买了A商品但还未购买B商品时，我们就可以向该类用户推荐B商品。如下图：

从上图可以看到其中牵涉3个集合：所有购买过商品的用户全集U、购买了A商品的用户集合A以及在购买了A商品之后又购买了B商品的用户集合G。基于这3个集合可以计算关联规则挖掘中的2个关键指标——支持度（Support）和置信度（Confidence）：

• 支持度=购买了A和B商品（集合G）的人数/所有购买过商品（集合U）的人数
• 置信度=购买了A和B商品（集合G）的人数/购买了A商品（集合A）的人数

得到这两个指标之后，需要为这两个指标设立一个最低门槛，即最小支持度和最小置信度。因为在用户的购买行为中，购买A商品的用户可能不仅购买B商品，还购买了C、D、E……等一系列商品，所以我们需要分别算出所有这些组合的支持度和置信度，只有满足比如支持度>0.2，置信度>0.6的这些商品组合才可以认为是有关联的，值得推荐的。

当然，如果你的网站不是电子商务网站，你同样可以用用户浏览网站的点击流数据实现关联推荐的功能。同样是基于用户历史行为，比如浏览了A页面的用户也浏览的B页面、观看了A视频的用户也观看了B视频、下载了A文件的用户也下载了B文件……

数据挖掘中的关联规则挖掘一般采用基于频繁集的Apriori算法，是一个较为简单有效的算法，这里就不具体介绍了，有兴趣的朋友可以去查下资料。

在进行关联规则分析时需要注意的一些问题

• 注意关联推荐的适用范围和前提条件，并不是每一类网站都适合或需要进行关联推荐的；
• 最小支持度和最小执行度的设立需要根据网站运营的特征设定，不宜偏高或偏低，建议基于实验或实践的基础上不断优化，寻找一个最佳的权衡点。
• 需要特别注意的是，在关联规则中A商品与B商品有关联，并不意味着B商品与A商品的关联也成立，因为两者的置信度算法是不同的，关联方向不可逆。
• 关联规则分析在算法上其实并不难，但是要将其在网站上真正实现好，在满足上面3个前提的基础上还需要持续地优化算法，而更主要的是需要网站各部门的协作实现。

所以，基于用户行为分析的关联推荐完全从用户的角度进行分析，比单纯地比较产品间的关联更为深入和有效，更加符合用户的行为习惯，有利于发现用户的潜在需求，不妨尝试一下。

原文链接：http://webdataanalysis.net/web-quantitative-analysis/association-recommendation/

Attention （吸引客户的注意力）：通过突出重点的设计，能让用户在几秒内吸引用户的注意力。

Interest（让客户产生兴趣）：告诉消费者购买该产品的能给你带来的利益和好处，如果需要，可以通过视觉设计来突出功能。

Desire（提高客户购买欲）：能够引起消费者购买欲望的就是消费者需要该产品；让消费者知道该产品可以很好地解决他的问题，满足他的欲望。

Action（告诉客户如何得到它）：当消费者打算购买商品的时候，那么你就要告诉他怎么购买，购买流程是怎样。提供清晰可靠的Call on action，将注册，购物流程和网站的交互尽量最简化。

Satisfaction（让客户感到满意）：虽然这个不能直接提高转化率，但是获得一个新用户的成本是维持一个老用户的成本的2～6倍，在获得良好口碑的同时，可以让一个用户不断地回头购买你的商品，而且该用户会向他的朋友推荐你的商品。

下面来分享一个典型的案例：Mission Bicycle就是这样一个使用 AIDAS模型的公司。

• Attention：一副巨大图片足够吸引访问者的关注
• Interest：一个大标题告诉访问者为什么你需要这个自行车，这个自行车可以让你达到什么预期。
• Desire：橱窗上摆设最近生产设计的自行车和优势介绍刺激访问者的点击消费欲望。
• Action：当访问者想购买了，一个显眼的购买按钮显得十分重要。提醒访问者，这里是购买按钮，免得别人找了老半天要找不到支付，流失了客户。

Satisfaction: 在网站的左侧有Feedback的按钮，用户可以反馈、咨询，而且点击feedback之后还可以让访问者看到最近顾客对产品的评价。

注意是达到广告诉求的第一步，对于广告人员来说，搞清楚人们如何注意，怎样引起人们的注意，有莫大的价值。同理，电子商务网站更加有必要遵循AIDAS原理，让用户在浏览的过程中，从关注到购买到满足，在设计的细节上达到增大刺激物的强度和提高刺激物的感染力，从而提升网站的转化率和顾客忠诚度。

原文链接（英文）：http://www.seo.com/blog/increase-conversions-sales-model/

信用卡被拒绝通常是很令人尴尬的事情，即使是在网上也是如此。如何优雅的处理那些错误提示的呢？当处理这些出错信息时，给出一个可能的解决方法。如果错误是基于无效的CVV代码，那么用图展示给用户看在卡上的哪里可以找到这些代码。最重要的一点，在用户可能需要帮助的地方显示用户服务联系方式。

二、登录

许多用户厌恶记住额外的用户名和密码。除了这个原因外，你也将会面临老用户在一系列购物后忘了他们的登录信息等情况。当然，你会提供密码找回功能，但如果用户的email不能正常工作或已经无法接入了，这时他们将束手无策。基于这些原因，提供用户一个来宾（guest）支付选项，来宾支付不需要创建帐户信息。当订单过程结束后，你能提示用户是否为下次购物创建一个新帐号。

三、默认信用卡类型选择

更好的做法是基于卡号自动识别信用卡类型（就像Paypal所做的那样）。

四、取消按钮

不要让用户能太过轻易的取消订单。一个取消按钮就相当于问用户“你真的想购买它吗？”。

五、向上销售和交叉销售

一般情况下有时间和地点提供给交叉销售，但如果在结帐时就风险太大了。太多的选项可能给用户自相矛盾的选择，这将导致他放弃购物。通常来说，一旦某人来到了购物车结帐，就应该停止一切营销和推销活动。

六、免责声明，解释和警告

不必要的信息只会在我的心里留下隐私可能被侵犯的阴影。其他不必要的免责声明包括“点击预订按钮超过1次将导致两次收费”（你需要的是解决这个问题而不是解释它！）和“产品目前无货”（或许你应该在网上显示精确的库存情况）。作为一个基本原则，让免责声明出现在必须的地方。如果它有可能让用户再次思考他们的购物选择，那就去掉它！

七、不安全的页面错误

这可能是最有可能被预防的结帐错误，包括技术因素或使用不安全的页面元素（图像、javascript文件等等）。当这样的情况发生时，一些浏览器诸如IE，喜欢警告用户“这些页面包含不安全的元素”。当你准备进入你的个人支付信息界面时，这不是一个令人愉快的讯息。为了防止这样的情况发生，确保经常用能显示这些警告的浏览器使用一下你的付费流程。

八、只有一种支付方式

如果身上没有现金但又不能刷卡消费时你会不会愤怒无比？当网站只能接受信用卡消费时许多用户会感到相似的挫折感。可选的支付方式最近已经成为用户的一种期望，包括Paypal，e-Checks，BillMeLater和Google Checkout等。加入一些另外的支付方式可以从长远角度预防购物的流失率。

九、终结于收据页面

很多购物流程都终结于收据页面（receipt page），这很令从业者羞耻。相比在浪费在订单确认页面的“谢谢订货”等总结性发言，为什么不进一步继续服务你的用户呢？加上一个“推荐给好友”表单、展示顾客服务的常见问题或要求顾客完成调查报告等等。

十、隐藏额外的费用

没人喜欢在最后一秒看到额外的费用。确保所有相关的费用和税费都已经在之前已经显示了。

十一、没有明显的800电话

人们喜欢通过和人交流后再买东西，所以顾客总是喜欢有人能立刻在他们有疑问时回答他们的问题。当然不是所有的用户在看到800电话时都会拨打，但这只不过是提供一种信任的感觉。

十二、产品缺货

一些在线支付要等到用户开始生成购买进程时才告知用户缺货。产品的库存情况应该在产品页面和购物车里随时可见。任何程度的延迟都将惹恼你的顾客。避免在结帐时发生错误是电子商务的首要问题。不要仅仅生搬硬套我的观点，仔细地测试你的网站。用Google的网站优化工具，进行A/B测试来改善你的支付功能，这并不复杂也并不昂贵。

英文原文：http://www.getelastic.com/12-checkout-blunders/

在photoshop中一共有四种色彩模式，他们分别为：HSB,RGB,CMYK,LAB。入下图所示：

1.RGB模式

RGB是色光的色彩模式。R代表红色，G代表绿色，B代表蓝色，三种色彩叠加形成了其它的色彩。因为三种颜色都有256个亮度水平级，所以三种色彩叠加就形成1670万种颜色了。也就是真彩色，通过它们足以在现绚丽的世界。对于单独的R或G或B而言，当数值为0的时候，代表这个颜色不发光；如果为255，则该颜色为最高亮度。这就好像调光台灯一样，数字0就等于把灯关了，数字255就等于把调光旋钮开到最大。

上图为12色环，当红色光与绿色光相加时，会出现黄色，当绿色光与蓝色光相加时，或出现青色，当红色光与蓝色光相加时会出现品红。

我们用放大镜就近观电脑显示器或电视机的屏幕，会看到数量极多的分为红色绿色蓝色三种颜色的小点。屏幕上的所有颜色，也就是我们看到的所有图像内容，都是由它们调和而成的。在RGB模式中，由红、绿、蓝相叠加可以产生其它颜色，因此该模式也叫加色模式。所有显示器、投影设备以及电视机等等许多设备都依赖于这种加色模式来实现的。

2.CMYK模式

CMYK也称作印刷色彩模式，顾名思义就是用来印刷的。它和RGB相比有一个很大的不同：RGB模式是一种发光的色彩模式，你在一间黑暗的房间内仍然可以看见屏幕上的内容；当阳光照射到一个物体上时，这个物体将吸收一部分光线，并将剩下的光线进行反射，反射的光线就是我们所看见的物体颜色。CMYK是一种依靠反光的色彩模式，我们是怎样阅读报纸的内容呢？是由阳光或灯光照射到报纸上，再反射到我们的眼中，才看到内容。它需要由外界光源，如果你在黑暗房间内是无法阅读报纸的。

前面说过，只要在屏幕上显示的图像，就是RGB模式表现的。现在加上一句：只要是在印刷品上看到的图像，就是CMYK模式表现的。比如期刊、杂志、报纸、宣传画等，都是印刷出来的，那么就是CMYK模式的了。
和RGB类似，CMY是3种印刷油墨名称的首字母：青色Cyan、洋红色Magenta、黄色Yellow。而K取的是black最后一个字母，之所以不取首字母，是为了避免与蓝色(Blue)混淆。从理论上来说，只需要CMY三种油墨就足够了，它们三个加在一起就应该得到黑色。但是由于目前制造工艺还不能造出高纯度的油墨，CMY相加的结果实际是一种暗红色。因此还需要加入一种专门的黑墨来调和。

3.HSB模式

HSB是基于人眼视觉效果创建的颜色，在HSB模式中，H表示色相，S表示饱和度，B表示亮度。photoshop中的调色板就是按照HSB模式创建的。

• 色相：是纯色，即组成可见光谱的单色。红色在0度，绿色在120度，蓝色在240度。它基本上是RGB模式全色度的饼状图。
• 饱和度：表示色彩的纯度，为0时为会色。白、黑和其他灰色色彩都没有饱和度的。在最大饱和度时，每一色相具有最纯的色光。
• 亮度：是色彩的明亮读。为0时即为黑色。最大亮度是色彩最鲜明的状态。

在HSB模式中，S和B的取值都是百分比，唯有H的取值单位是度，这个度是什么意思？是角度，表示色相位于色相环上的位置，将我们前面学过的色相环加上角度标志就明白了。如左下图。从0度的红色开始，逆时针方向增加角度，60度是黄色，180度是青色等等。360度又回到红色。可以自己调节H滑块对照一下。需要注意的是，由于在Photoshop的HSB模式中只能输入整数，因此能够选择的色彩数量是360万种。虽然在数量上不及RGB模式，但对于我们来说也是足够使用了。

我们再看一下Photoshop的拾色器，拾色器的H方式其实就是HSB取色方式。色谱就是色相，而大框就包含了饱和度和明度(横方向是饱和度，竖方向是明度)。如下右图。

4.LAB模式

RGB模式是一种发光屏幕的加色模式，CMYK模式是一种颜色反光的印刷减色模式。那么，Lab有是什么处理模式呢？

Lab模式既不依赖光线，也不依赖于颜料，它是CIE组织确定的一个理论上包括了人眼可以看见的所有色彩的色彩模式。Lab模式弥补了RGB和CMYK两种色彩模式的不足。

Lab模式由三个通道组成，但不是R、G、B通道。它的一个通道是亮度，即L。另外两个是色彩通道，用A和B来表示。A通道包括的颜色是从深绿色（底亮度值）到灰色（中亮度值）再到亮粉红色（高亮度值）；B通道则是从亮蓝色（底亮度值）到灰色（中亮度值）再到黄色（高亮度值）。因此，这种色彩混合后将产生明亮的色彩。

Lab模式所定义的色彩最多，且与光线及设备无关并且处理速度与RGB模式同样快，比CMYK模式快很多。因此，可以放心大胆的在图象编辑中使用Lab模式。而且，Lab模式在转换成CMYK模式时色彩没有丢失或被替换。因此，最佳避免色彩损失的方法是：应用Lab模式编辑图象，再转换为CMYK模式打印输出。

当你将RGB模式转换成CMYK模式时，Photoshop将自动将RGB模式转换为Lab模式，再转换为CMYK模式。

在内容区外面，依次围绕着 padding 区，border 区，margin 区，这一模型结构在所有主流浏览器都是一致的。通过盒子模型，我们可以为我们的内容设置边界，留白以及边距，盒子模型最典型的应用是这样：我们有一段内容，可以为这段内容设置一个边框，为了让内容不至于紧挨着边框，可以设置 padding ，为了让这个盒子不至于和别的盒子靠得太紧，可以设置 margin。

到目前为止，一切都很完美，直到当我们想为这个盒子设置一个尺寸的时候。IE6 和 W3C 标准浏览器对盒子模型有不同的解释，下图是两种类型的浏览器对盒子尺寸的不同解释示意图：

在现实世界中，我们描述一个物理盒子的时候，如果谈到尺寸，是不会只计算其盛放的物体的尺寸的，我们还会算上空隙与盒体本身。拿集装箱装箱为例，我们有 100 只花瓶，每只花瓶用1个纸盒包装，为了防止花瓶破碎，我们在花瓶周围塞上泡沫，这相当于 padding，纸盒的外围纸板相当于 border，在装集装箱的时候，为了防止纸盒之间相互碰撞，纸盒之间塞上稻草，这相当于 margin，很显然，我们向货运公司报告我们货物尺寸的时候，是要将整个纸盒的尺寸，连同纸盒之间需要塞稻草的空隙都告诉他们的，倘若只报告花瓶的尺 寸，货运公司是没有办法装箱的。再举一个例子，假若我们有一面墙，要在上面挂10幅油画，油画是用相框裱糊的，相框的边框相当于 border，油画和边框之间的距离相当于 padding，相框之间的间隔相当于 margin，这个例子和 Web 布局设计已经很接近了，对任何人来说，使用 IE6 的盒子模型，将整个相框，包括油画当做一个整体更容易布局，当你知道了整个相框的尺寸后，不必再去考虑 padding, border, margin 这个因素的影响，每个相框就是一个整体，至于 padding, border 与 margin，这是浏览器自己事，不需要设计者去关心。

在具体 Web 设计中，尤其牵扯到复杂网格布局的时候，IE6 的盒子模型更容易控制，我们不妨看看以下几个设计场景。

1. 面板式界面设计

页面上包含几个面板，比如一个登录面板，一个最新新闻面板，一个投票面板，这类设计典型的做法是，用背景图的方式，首先逐个设计出这些面板的外观图，将需要用具体内容替换的地方空着，这些面板，无非就是一些使用面板外观图片做背景图的盒子，然后，在这些盒子里面，放上具体的内容，使用 padding 控制内容的摆放位置，使用 margin 调整面板本身的摆放位置，由于面板的尺寸是固定的，我们依此确立了盒子的尺寸之后，就无需再关心尺寸问题，然后，不论你怎样调整 padding 和 margin都不会影响面板本身的结构。这是 IE6 盒子模型。而在 W3C 的盒子模型中，调整 padding 和 margin ，都会影响盒子的尺寸，你在调整内容摆放位置的同时，极有可能打乱面板本身的结构。

2. 百分比级尺寸 + 像素级边界问题

W3C 盒子模型在设计中最让人头疼的是，假如你有一个不确定宽度的容器，想在里面放置两个同样大小的盒子，最合理的的做法当时是设置每个盒子的宽度为 50%，这样，不管你的容器宽度为多大，这两个盒子总能自动适应这个宽度，然而，前提是你不要设置任何 padding 或 border，而，现实中，为了防止两个盒子中的内容互相挨得太近，你肯定要设置 padding，一旦设置了 padding，就会发现你的容器被撑破了。

当然你会说，每个盒子的宽度不要设为 50%，可以设为 45%，然后为每个盒子再加一个 5% 的 padding，这是一个解决办法，但我们在设计中经常有这样的习惯，虽然一段内容的宽度可能不确定，但我们总喜欢它拥有固定 padding，我们并不希望 padding 自动适应，况且，在很多时候，我们希望为一个自适应宽度的盒子，设置一个 1 像素的 border，在这种情形，W3C 盒子模型将陷入困境。

而遇到这种情形，IE6 盒子模型不需要任何周折，你只管将每个盒子的宽度设置为 50%，它们会自动适应容器的宽度，然后，不管你你怎样设置 padding 和 border，都不会撑破你的容器。

W3C 在盒子模型上迷途知返
虽然 W3C 永远都不会承认，但他们显然意识到了这个问题，重新定义盒子模型是不可能了，所以，在 CSS3 中，我们看到了下面这个属性：box-sizing
box-sizing 有两个可选值，一个是默认的 content-box 一个是 border-box，选用后者，盒子模型将按 IE6 的方式进行处理。

原文地址:http://www.comsharp.com/GetKnowledge/zh-CN/TeamBlogTimothyPage_K983.aspx

支持模拟对话框类型：

ajax调用：

<a href=”http://nyromodal.nyrodev.com/demoSent.php” class=”nyroModal”>Ajax</a>

ajax调用并支持抽取制定内容：

如果只需要显示页面上某一个元素，那么只需要在请求时把该元素ID号做为锚点加入请求地址中。以下代码只显示demoSent.php中ID号为UserInfo的元素，如果UserInfo不存在，则显示所有内容。

<a href=”http://nyromodal.nyrodev.com/demoSent.php#UserInfo” class=”nyroModal”>Ajax</a>

单张图片显示（会自动缩放图片大小）

<a href=”http://nyromodal.nyrodev.com/img/img2.jpg” class=”nyroModal” title=”3rd Street Promenade”>Image</a>

具体使用方法，请看官方网站的实例。

官方网址：http://nyromodal.nyrodev.com/

使用十六进制记数法，要表述颜色的第一个方法是指定要混合的三原色中每一种色彩的量。 通过指定红、绿、蓝的三原色组合，您可以构造出任何颜色。

十六进制代码中每六位数代表一个最终颜色值。

• #XXxxxx – 红色值
• #xxXXxx – 绿色值
• #xxxxXX – 蓝色值

每种颜色的量指定为两位十六进制数。 这意味着没有该颜色为 00，而全是该颜色为 FF。共有 216 个颜色，它们能在任何至少显示 256 个颜色的系统上给出相同的显示。 这些颜色分别由各颜色的 0%、20%、40%、60%、80% 和 100% 与其他各颜色的所有这些百分比混合形成的。 例如，如果您将 20% 的红色、80% 的绿色和 40% 的蓝色结合，就会生成有一些蓝色和少许红色的深绿色。

在本表中显示与那些百分比等值的十六进制值。

要使用十六进制值来生成颜色，您需要在这些值之前加上 # 号来表示它们是十六进制的。 例如，要得到 20% 的红色、80% 的绿色和 40% 的蓝色，应写为 #33CC66。 您可以使用 216 种安全颜色以外的颜色，但是它们在不同浏览器上的显示可能会不同。

这是常用颜色的代码。

您可以通过以下网址了解关于网页上的颜色和十六进制记数法的详情。

http://www.w3.org/MarkUp/Guide/Style.html