在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模式。

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

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

• #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

Keyword

有效地设置字体尺寸的keyword有：xx-small, x-small, small, medium, large, x-large, and xx-large 还有比较 keyword（smaller 和 larger）。

令人惊奇的是，各种平台和浏览器都能很好的兼容 keyword font size，看一下在Opera, Firefox, IE 6, and Safari的测试页面：

我们可以注意到，他们非常接近，但是在字体宽度和字体高度上有些不同。

当使用keywords时，父标签和子标签存在着一定的相互关系。例如，当 parent 设置为 medium child 设置为 large. 只有child 的 large 会起到作用。但是，如果 parent 设置的为medium 而 child 设置的是 larger （注意是larger而不是刚才的large），child 的尺寸就会比 parents 大。改变 parent 就会改变 child。

使用Keywords 是一种使用在 web 上的非常好的方式。在body上设置keyword font-size，然后在页面的其他地方使用相对尺寸是一种非常流行的技术。 这使得在页面上设置字体的大小（比如说是用Javascript）变得非常容易，很容易整体调整页面的尺寸。

但是，由于 keywords 得局限性并不能非常方便的控制你的字体。

px

如果你想更加精细的控制字体尺寸，使用像素值 pixel values (px) 是个非常不错的选择。在一个电脑屏幕上，没有比单个像素更小的单位了，使用像素值作为字体单位，你就是告诉浏览器你的字体所占的像素值：

Windows, Mac, Linux, IE, Firefox, Chrome, 不管是什么，当一个字体被设置成14px时，它永远是14px。但是，这并不代表没有任何差异，在下面的测试中，可以看到它和keyword一样有些差异。

由于像素值的特性，他们并不是相关的，如果一个parent 标签被设置为18px，一个child被设置为16px，child就是16px。但是，字体尺寸设置可以一起设置。比如，如果一个 parent 被设置为16px 而 child 被设置为 larger，child 就会比 parent 大，如下图所示：

“Larger” 把parent的16px转成20px，增加了25%。

像素值在一段时间内在可用性和易用性方面一个非常糟糕过去，在IE 6及以下的浏览器中，使用像素值设定的大小用户不能重新设定字体的大小。这就意味着年轻的设计者将字体设置为12px正好合适，但是稍微年长点的人希望改变字体尺寸去阅读它却无法做到。这个是IE6的原因，并不是我们的原因，但是我们必须去处理它

使用像素值设定字体尺寸是最精确的，同时也是最满意的，但是考虑到一些用户还在使用IE6，我们也要考虑到这一点。

em

Em 值可能是所有值中最难的，因为它是一个非常随意和抽象的概念。这里是它的定义：1em是当前标签的尺寸，如果你没有在页面上设置任何字体尺寸，那会是浏览器的默认尺寸，大部分是16px。所以默认是 1em = 16px。如果你把你的body设置为20px，那么 1em = 20 px。

我认为“em”值是基于大写字母M设定的。

当我们开始设置比较复杂的字体尺寸时，事情变得有些困难。比如说我们需要一个比价大的 header，我们可以设置为 h1 { font-size: 2em; } 其中 “2″ 实际上是em基数的倍数。如果基数是16px，那个header就是32px。这个数学公式非常清晰，但是你可以想象有时它并不是一个整数。

一个使用em非常流行的方法是设置body的字号为62.5%。因为浏览器的默认尺寸是16px，设置完后可以使他变成10px（我们不直接把他设置为10px，因为像素值并不是相关的）。使用10作为一个基数要比使用16来的容易的多。如果你需要设置字体尺寸为18px，只需设置为 font-size: 1.8em。

但是为什么要使用这种抽象的像素值呢？这里有三个原因：

1. 在IE 6下可以自己设定大小
2. 它是基于一个其他尺寸的，可以通过改变基数来做到整体的改变
3. EM像是个魔法

其中第一个原因是主要的元婴，如果你想使用像素值来设定字体大小，但又不想有易用性方面的问题，em是你最好的选择。

Em 不是只适用于字体，这也是一个长度单位（高、宽等）。可变宽度的网站使用em值来设定没一个值，是的网站具有可伸缩性，意味着当你改变一个尺寸的时候所有的尺寸跟着改变。em 在这种情况下和其他尺寸有一个直接的关系。如果你有一个10em的box，在它里面是1em的文字，它会占用1/10高度。这样的比例让em成为一个很好的设计技巧。

还有一个潜在的问题，就是他的相关性，所有的em值都取决于parents的值。如果把em代替像素值来用，就会带来问题。比如，你可能将你的“p”（段落）和“li”（列表）设置为1.2em。今天看上去还不错，但是明天发布了一篇文章的段落中含有一个列表。那边列表的尺寸要比其他的都大（1.2 x 1.2）。除了移除标签，没有什么更好的方法。

%

百分比怎么使用相当的明显，它们的工作方式和你想象的一样。如果一个 parent 的尺寸是20px，child的尺寸是50%，那么它就是10px。就像em的规则一样。同样它也会出现和em一样的问题。

一个非常流行的技术使用百分比来设定字体大小：所以用像“small”设定body，使用百分比来设定其他所有的元素。这样就可以通过改变 keyword 来改变页面其他地方的尺寸。

pt

最后的度量单位是point values (pt). Point values只是用于印刷! 1 point 是真实生活中的度量单位。72pts = 1 英寸. 1英寸 = 真实生活中的1英寸，不是屏幕上显示的1英寸。

和像素值一样，point sizes 在纸上也是非常精密的。不管什么平台使用point size设置打印的字体是最好的选择。

因为分辨率的不同，我们不在屏幕上使用point sizes。

翻译自：http://css-tricks.com/css-font-size/

一、腾讯形象店LOGO设计

1） M字中间两个门为两只企鹅手牵手；
2）中间两只企鹅大小一致，表示“印象”（通过折叠，一只企鹅印出另一只企鹅）；
3）多彩表现业务多元化，而企鹅(QQ)是主要平台，通过M(Main)表现；
4）“腾讯印象”4字使用“腾讯网”字体，引入母品牌元素；
5）外框形状为文字泡泡，象征沟通。

图形化slogan（沟通+色彩=放松）含义为：
1） 沟通。外框的文字泡泡表示交谈；
2）色彩。色彩是影响人情绪的一种方式，从LOGO的多彩到室内视觉体验，不时改变到访者的心情；
3）放松。改变情绪，缓解压力，由沟通、色彩变化引导

专用字体：

二、腾讯形象店设计过程

1、背景

对于经营状况不佳的项目，了解背景是一个求医问诊的过程。而对于一个全新的项目，可以当作是保健计划，尽可能去避免未来发生的疾病。

形象店消费群体为内部员工及员工家属朋友，不存在竞争。但不排除对外连锁，因此未来连锁管理的统一规范建设也是在设计中需要考虑。

礼品的风格、档次等参差不齐需要要思考如何包装好载体去避免与主品牌冲突，并反过来帮助塑造品牌形象。另外，如何管理好所有品牌并清晰区分层级关系也是需要思考解决的问题。

为了烘托气氛，增加访客停留时间提高店面档次，特加入咖啡元素。如何利用咖啡品牌为新生的image制造价值。

2、发散

一开始在白板以缓解工作压力为主线发散思维，然后整理归纳、清晰主次轻重，导出影响情绪的元素：沟通和色彩。slogan：communicate + color = relax。

然后把组内的潮男潮女拉过来，听取意见，什么是最能让人放松的场景和元素。

3、做一次体验联想

品牌联想是在记忆中信息节点与品牌节点的相联结，包含了品牌在消费者心中的意义。这个记忆网络节点可以是代表一个品牌、一项产品或一项属性，连结任何两个节点即成为消费者心目中的品牌联想。

对体验过程中触发的感觉进行排序，从视觉、嗅觉、听觉、触觉、味觉到机体模糊知觉，联想每种感觉中最佳的体验行为，并为它们添加少许创意，追求最佳relax组合方案。

4、取名

以下是我们当时想到的所有名字：

其中，image脱颖而出成为最终方案。该名字能较好反映形象店“橱窗”、“形象展示”定位，避开售卖，强调体验与感受。

5、Quickdesign*

Quickdesign是指在既定时间内根据想法快速出方案的行为。这次使用它快速出了一套方案，在明确设计方向中起到不错的作用。

这个方案对字体、主要识别符号、通用标识、图形化slogan进行规定，强调统一视觉体验。

6、草图绘制

以图形和文字两个方向进行草图绘制，输出一批线稿，最终确定以文字为主要设计方向。

7、尝试设计

尝试建立在明确方向的基础上，底气较足。

同样对字体、主要识别符号进行规定，另外增加了部分应用范例，比如代金券：

8、印象派作品

我们在设计上借鉴了印象派*绘画的特点，与“腾讯印象”呼应

[印象派]：“印象派绘画用点取代了传统绘画简单的线与面，从而达到传统绘画所无法达到的对光的描绘。具体的说，当我们从近处观察印象派绘画作品时，我们看到的是许多不同的色彩凌乱的点，但是当我们从远处观察他们时，这些点就会像七色光一样汇聚起来，给人光的感觉，达到异想不到的效果。”

9、另外两个方案

10、家具选购

在品牌设计过程中还参与家具选购，希望从每个节点着手去塑造品牌形象。

三、结束语

此次品牌设计之路走得比较顺畅，得益于前期的资料收集阶段及清晰方向的措施，还有行政部同事的授权与支持，使得项目获得较大自由度并帮助实现大部分想法。

品牌管理是一个艰辛的过程，实际上是为它编织的一个美丽故事。十年、二十年再来看，它仍然具备生命力并能给到惊喜，那时，它已代表一种身份、态度、文化、信念、精神支柱……

本文转自：http://cdc.tencent.com/?p=2096

如果你能正确的读出一下上面每个字的颜色，说明你要么是天才，要么是色盲。下面开始我们的主题。本文转自蓝色理想。

哪里有光，哪里就有颜色。有时我们会认为颜色是独立的——这是蓝色，那是红色，但事实上，颜色不可能单独存在，它总是与另外的颜色产生联系，就象音乐的音符，没有某一种颜色是所谓的“好”或“坏”。只有当与其它颜色搭配作为一个整体时，我们才能说，是协调或者不协调。色轮告诉我们颜色之间的相互的关系。

白色光包含了所有的可见颜色，我们看到是由紫到红之间的无穷光谱组成的可见光区域，就象你所看到的彩虹颜色。为了在使用颜色时更加实用，人们对它进行了简化，将它们分为12 种基本的色相。

色轮由 12 种基本的颜色组成。首先包含的是三原色（ Primary colors ），即蓝、黄、红。原色混合产生了二次色（ Secondary colors ），用二次色混合，产生了三次色（ tertiary colors ）。

原色是色轮中所有颜色的“父母”。在色轮中，只有这三种颜色不是 由其它颜色调合而成。上图可以看出，三原色在色环中的位置是平均分布的。

二次色所处的位置是位于两种三原色一半的地方（见上图）。每一种二次色都是由离它最近的两种原色等量调合而成的颜色。

三次色是由相邻的两种二次色调合而成。

共同的颜色：

你可能会发现，每一种颜色都拥有部分相邻的颜色，如此循环成一个色环。共同的颜色是颜色关系的基本要点，必须对此有深入的了解。

在上图这七种颜色中，都共同拥有蓝色。越远的颜色（如草绿色）含有的蓝色就越少。绿色及紫色这两种二次色都含有蓝色。

在上图七种颜色中，都拥有黄色。同样的，离得越远的颜色，拥有的黄色就越少。绿色及橙色这两种二次色都含有黄色。

在上图七种颜色中，都拥有红色。向两边散开时，红色就含得越少。橙色及紫色这两种二次色都含有红色。

颜色有明暗之分——或者称为颜色数值。为了显示颜色的明暗，所以色轮有多个环。两个外围的大环是暗色（ Shadow colors ），里面两个小环是明色 (tint colors) 。

色轮有五个同心环组成，从暗到亮——暗色处于大环，明色处于小环，而中间是颜色的基本色相。

从上图我们可以看出，处于右边的暗色就是加上黑色，而左边的明色则是加上白色。五个圆环已经清楚表示了颜色如何由暗到亮的过程。但这种明色及暗色的关系只是相对而言。

颜色关系

下面我们列出六种基本的颜色关系。每一种颜色关系都可以有无数种搭配的可能，当你掌握它们时，你对颜色的视野才会显得开阔。

单色搭配（ Monochromatic ）：一种色相由暗、中、明三种色调组成。这就是单色。单色搭配上并没有形成颜色的层次，但形成了明暗的层次。这种搭配在设计中应用时，出来的效果永远不错，其重要性也可见一斑。

类比色搭配（ Analogous ）：相邻的颜色我们称为类比色。类比色都拥有共同的颜色（在上图中，是黄色及红色）。这种颜色搭配产生了一种令人悦目、低对比度的和谐美感。类比色非常丰富，在设计时应用这种搭配同样让你轻易产生不错的视觉效果。

补色搭配（ Complement ）：在色轮上直线相对的两种颜色称为补色，在上图中，是橙色及蓝色。补色形成强列的对比效果，传达出活力、能量、兴奋等意义。补色要达到最佳的效果，最好是其中一种面积比较小，另一种比较大。比如在一个蓝色的区域里搭配橙色的小圆点。

分裂补色（ Split complement ）：如果我们同时用补色及类比色的方法来确定的颜色关系，就称为分裂补色。这种颜色搭配既具有类比色的低对比度的美感，又具有补色的力量感。形成了一种既和谐又有重点的颜色关系。如在上面三种颜色中，红色就显得更加突出。

原色搭配（ Primary ）：除了在一些儿童的产品中，三原色同时使用是比较少见的。但是，无论是在中国还是在美国的文化中，红黄搭配都是非常受欢迎。红黄搭配应用的范围很广——从快餐店到加油站，我们都可以看见这两种颜色同时在一起。蓝红搭配也很常见，但只有当两者的区域是分离时，才会显得吸引人，如果是紧邻在一起，则会产生冲突感。

二次色搭配 (Secondary) ：二次色之间都拥有一种共同的颜色——其中两种共同拥有蓝色，两种共同拥有黄色，两种共同拥有红色——所以它们轻易能够形成协调的搭配。如果三种二次色同时使用，则显得很舒适、吸引，并具有丰富的色调。它们同时具有的颜色深度及广度，这一点在其它颜色关系上很难找到。

看了这么多理论，还是考一下自己吧：

下面这四个封面中，都各自运用了我们在上面所述的其中一种颜色搭配。你能说出它们是运用了哪一种颜色搭配吗？（提示：眼睛只集中在一些大区域的颜色，不要理会细微的颜色区域。也不用理会黑白两种颜色）

（答案见本页底部）上图所用颜色数值：

答案:

当我们用色轮对其分析后,就很容易得到答案：A:单色搭配;B:补色搭配;C:三原色搭配;D:类比色搭配

附标准色轮矢量图下载：http://www.box.net/shared/864z4x5960

在线配色程序：http://www.biaodianfu.com/tools/color.htm

我们怎样才能建立有效的鼓动性按钮，抓住用户的注意力，吸引他们点击？我们将尝试分享一些有效的设计技术和通过一些例子来回答这个问题。

一、行动召唤最佳实例

设计网站界面行动召唤按钮需要深谋远虑和一定的规划；它必须是你的原型和信息结构流程正常工作的一部分。在本节中，我们将讨论行动召唤按钮的设计技术。

用大小吸引用户注意

在网页中，一个元素相对于其周围元素的大小表明其重要性：元素越大，它就越重要。判断网站上某种行为的重要性，设计与重要性相匹配的行动按钮。

行动召唤按钮相对于周边元素的大小

展示此大小的想法来表明他们的行动召唤按钮的重要性。将按钮的大小与公司的logo对比。为了吸引用户的注意，行动召唤按钮在宽度方面比logo大了约20%。尽管logo在页面中放置得比较高，你的眼睛还是被吸引到了行动召唤按钮上，因为它相对于周边元素显得非常的大。

行动召唤按钮相对于行动召唤的大小

一个网页可能会有多个行动召唤。可以通过改变行动召唤的大小来说明某一个行动召唤相比其他行动的重要性。在paramore|redd就有这样一个实例，页面的让用户注册并获取邮件通知的行动召唤按钮明显的大于继续阅读召唤按钮，以此来说明他们更希望你订阅内容而不是继续查看内容。

使用突出的位置吸引用户注意

页面中的行动召唤按钮的位置是吸引访问者的注意的关键。放置在突出的位置，比如页面的章节的头部可以带来较高的页面转换，因为用户将更有可能注意到行动召唤按钮并采取行动。

放置在明显的区域

将一个行动召唤按钮放置在一个明显的区域是一个让它在页面布局中突出的一个方法。你可以在dailymile看到这个概念，行动召唤按钮看起来在一个比其它元素高的层面上。

放置在网页顶部

Your Web Job页面最右上角的“Post a Job!”行动召唤按钮。通过将行动召唤按钮放到一个非常醒目的位置，这样好让用户会注意到它或者记住它，比如一个职位发布者想要在他们发布职位之前浏览一下网站，“Post a Job!”按钮将随时被他们使用，无论哪个页面引导他们跳转，他们会更可能记得他们可以很容易的执行这个行动，因为它的位置足够显眼。

放在网页的中间

将一个行动召唤按钮定位到页面的中间，而不是两侧（或更小的和不重要）的位置是一个很有效的吸引注意和诱导行动的方法。在PicsEngine中，尽管这个行动召唤按钮没有使用与其背景色和页面中周边元素高对比的色彩，但它依然能够因为其居中的位置而很容易引起用户的注意。

使用空白来从其他页面元素中区分行动召唤按钮

在行动召唤按钮周围使用空白是一个让它在有很多元素中脱颖而出的方法。

用于区分行动召唤按钮的空白

IconDock展示如何有效的利用空白。即便使用一个很小而且简单设计的行动召唤按钮，因为在它和邻近元素之间的存在的空白空间使它依然很突出。

使用空白空间的距离来表明逻辑

行动召唤按钮与其周边的元素之间的空白越大，说明他们的联系越小。所以，如果有其它元素能够有助于说服用户采取行动，那么就减少那些元素与空白空间的间距。在Donor Tools的“Sign Up”行动召唤按钮上方有些用户注册好处的文字，而在它的右边是一个用于美化的浏览器截图，对鼓励用户点击“Sign Up”不是必须的。通过减少文字和行动召唤按钮之间的空白，将这两个元素可视的组织到了一起。浏览器截图和行动按钮的距离保证用户视线不会从行动召唤按钮上面移走。

使用高对比度的颜色

决定在行动召唤按钮上使用哪个颜色是非常重要的。在你的行动召唤按钮上使用一个相对于周边元素和背景色对比度高的色彩，以确保用户注意到你的行动召唤按钮。

与周边元素形成对比的颜色

Notepod充分反映了一个行动召唤按钮和它周边元素的色彩反差是如何有效的吸引用户注意的。周围的元素都是黑色的，而这个行动召唤按钮却是一个明亮的蓝色。

背景色与前景色的反差

Valley Creek Church将一个浅黄色得“Learn More”召唤按钮放置在一个灰度图片上。即使在一个复杂图形的图像下面使用一个简单的行动召唤按钮设计，它依然因为颜色的选择而醒目。

提供次要的替代行动

一个页面可以有多个行动召唤按钮。有时候有必要提供一个次要行动以说服用户稍后访问所需的主要的行动召唤。例如，在用户注册一些网络服务之前，一些用户需要了解更多的信息才去执行注册的行为,次要行为可以请求用户体验一次产品之旅或者访问展示产品更多信息的页面。

在主要行动旁边显示次要行动

OfficeVP显示两个紧挨着的行动召唤按钮（居中并放在页面头部）。通过辨别颜色，用户可以看到他们有两个不同的路线：他们既可以直接注册（主要行动），或者在注册前了解更多，选择第二个行为，体验一下。

Transmissions 也展示了在期望的重要行动旁边放一个次要行动按钮。在这种情况下，主要行动就是让用户购买该应用。如果他们想在购买前试用一下，那么第二个行动就是先下载试用该应用。请注意，主要行动通过做的比次要行动按钮更醒目（相对于背景色比次要行动按钮有更鲜明）来被标识出来，这样就很有效的从左到右移动目光。另外，两个行动召唤按钮之间相对于该区域其它元素缩少的空白，有效的将按钮组织到了一起。

在主要行动召唤按钮下面显示次要行动按钮

另外，您可能将次要按钮放到主要行动下面。如果你需要更好的区分行动召唤按钮的话，这可能就是有必要的。Virb 的“Join Now” 行动召唤按钮被放在次要行动“体验产品之旅”的上面。注意，次要行动按钮因为它的默认状态被用比较弱的色彩和主要行动隔开了。

传递一种紧迫感

通过通过大胆，自信，和指挥的话语表达这个行动可以改变用户的看法，用这种方法说服他们不应再等待，以及等待可能会造成某些惩罚或错失良机。

tap tap tap给一个行动召唤按钮添加了紧迫性。“Buy Now”按钮上面有“价格信息(Intro price)”的文字，巧妙的暗示用户行动拖延越久，这个价格过期后可能要支付更多费用。

通常情况下，创造紧迫感可以有效的暗示用户去采取行动。使用诸如“现在（now）”，“立即（immediately）”与“马上（right now）”可以传递这种紧迫感。Organizing for America (BarackObama.com) 呼吁网站访问者“DONATE NOW”的例子。如果只是说“Donate”，紧迫感就会消失，可能更少的用户也会去采取行动。

告诉用户采取行动是很容易的

通常，用户迟疑采取行动是源于担心行动将是困难，昂贵或费时的。通过照顾这些担心，你的行动召唤按钮能带来更多的转换（点击）。

例如，在Basecamp上，行动召唤按钮明确显示用户注册将会花费的时间以及注册是不花钱的（free）。 这种做法消除了用户将要在线采取行动是的两个主要顾虑：费用（这也会要求他们采取额外的操作比如拿出他们的信用卡）和时间限制。

在Tea Round App这个例子中，他们告诉用户注册他们的邮件服务将不会受到垃圾邮件，这是无论何时将你的Email提供给第三方服务时所担心的一件事。

告诉用户期待什么

大部分网站用户都不太愿意相信在网页上呈现的内容。声称免费服务的链接，却不得不输入他们的信用卡号码才能得到他们想要的服务。为了增加点击转换率和重建信任，预期用户的怀疑并告诉他们通过采取你为他们准备的行动将会得到什么。当设计一个行动召唤按钮，考虑到用户可能会有的所有潜在的问题，然后确定你可以及时的回答他们。

Mozilla Firefox 告诉用户通过点击他们的行动召唤按钮的详细的预期。这个行动召唤按钮告诉你你将会得到Firefox 3.5，它是免费的，以及（对于更多的特性它的确切的版本是3.5.3 forWindows 操作系统，语言是English，然后你可以预期一个7.7MB 的下载。

Onehub预料到用户是否（在采取行动上）需要先支付或者他们是否能够试用一下产品，告诉用户如果他们采取注册的行为，他们将获得30天的免费试用。

二、行动召唤按钮设计展示

现在，我们已经介绍了设计要求行动召唤按钮的一些最佳实践，让我们来看看一些网页上的行动召唤按钮的典型实现。我们将结合设计和技术来探讨如何在实现良好的设计。

Campaign Monitor这套行动召唤按钮显示两个潜在的用户行为：“Try it for free”和“View features”。对于已经了解Campaign Monitor 和想要现在尝试的用户来说，他们可以执行首要行动，而其它的想要在作出时间承诺之前浏览一下可以选择查看该网络应用更多特性的次要行动。

Fileshare HQ这个行动召唤按钮告诉用户预期的事情：开始在片刻间分享文件（start sharing files in minutes）。

Livestream.com这组行动召唤按钮使用垂直排列组合来展示给用户的这些行动的期待的重要性顺序。主要期望的行动是获取一次评估，接着是了解服务的详情，最后是对比不同方案之间的差别。

Traffik CMS这个行动召唤按钮被放在一个非常醒目的位置，在页面的最顶部，并用大小和色彩从周边相关元素中高亮了出来。

Hambo Design这个行动召唤按钮告诉用户预期的事情：获得报价，没有附加的东西。

The Resumator你可以在这个行动召唤按钮上看到很多最佳实践。首先，它使用了空白、大小和颜色来清晰的将自己和页面其它元素区分开来。然后，为了创造逻辑的分组以说服用户采取行动，它在按钮上面的推荐文字使用较少的空白，然后将次要行动“Take a tour first”放到它的下面。

Wufoo提供了两个行动，用户可以看到一个水平排列的样式，主要期待行动是左边的那个。这些按钮很大而且很难被错过，尽管在全局设计的时候它们并不是很显眼。

Mobile Web Design这个行动召唤按钮被放在一个醒目的位置；它相对于周围元素有较大的型号和独特的颜色。为了“Purchas the book”提供附加的上下文，这个行动召唤按钮下面放置了价格和格式（传统图书或者PDF）。

NCover这些行动召唤按钮很整齐。主要行动在蓝色的次要行动的上面。用户被吸引到这个按钮是因为大小，而且对次要期望行动使用蓝色调可以减弱它对相对于主要期望的行动。空白的使用以创建三个相关元素的逻辑分组有助于实现销售：文字告诉用户Ncover是干什么的，注册行动召唤按钮，以及体验行动召唤按钮。相比之下，注意此组和右边的元素之间的空白变化。

Xero本组行动召唤按钮展示一个次要行动的用法。在主要期待行动的右边，有一个文字链接请求“了解更多(find out more)”，对于不想立马注册的用户来说，这个设计增加了用户会在注册之前“了解更多”的可能性。

Tao Effect – Espionage这组行动召唤按钮，为用户提供三个选择：Download、Buy Now和Upgrade。主要期待行动就是下载这个应用，紧跟着两个同样的行动“Buy Now”和“upgrade”。区别是在行动召唤按钮上使用不同的颜色，主要行动比两个次要行动的颜色更醒目。

The Invoice Machine这里可以看到两个使用蓝色边框高亮的行动召唤按钮，因为它们使用了同样的风格，我们可以假定它们有相同的重要性。或许该公司确定用户在看到他们提供的东西之前不太可能选择注册的行为，也或者他们确信产品之旅将更有效的帮他们将访问者转换为会员。

Ekklesia 360使用按钮展示的图标来表示一个向前意识（由指向箭头表示）。他们利用对深蓝色背景的高对比度的颜色，使调用的页面设计得更加突出。

Checkout在它的行动召唤按钮使用一个相对于全局设计的非常突出的颜色，尽管在它上面的图片明显比按钮的型号还要大，它依然能够吸引用户的注意。

spinen使用直接而清晰的语言告诉用户当他们采取行动后预期的事情：点击这个按钮将让他们找到产品的更多信息。

Codebase这个行动召唤按钮告诉用户，通过执行这个行动他们能得到什么：免费15天的试用。它通过使用高对比色彩、左边的一个图标以及大量的空白来吸引用户的注意。

GoodBarry在这个行动召唤按钮中，你可以看到空白、型号以及聪明的色彩选择是如何有效的让一个行动召唤按钮变得非常醒目。强调这个行动是免费的“FREE”能够暗示用户他们的预期。

Wake Interactive这个行动召唤按钮相对于其周边元素的色彩令它突出出来，尽管它的周围的空白比较小。

OH! Media这个行动召唤按钮真的从页面中脱颖而出了，因为它的位置、周围的空白以及最重要的颜色的选择。看一下这个页面，目光将被直接吸引到这个行动召唤按钮上。

Pixelcrayons看看空白能够如何很棒的提升行动召唤按钮吸引注意。

Ballpark这个行动召唤按钮的型号有效的吸引了用户的注意。它清晰而直接的语言明确地告诉用户执行行动之后的预期结果。

One Theme Per Month这个行动召唤按钮组将主要希望行动放到替代行动的中间。通过为主要期望行动添加一个非常醒目的颜色，以及一个较大的空间，试图将它的重要性放到次要行动的上面。

Scrapblog相对于周边元素的鲜明的色彩、足够的空间、以及型号等一些用户注意的效果。简单的语言传递一种很容易的感觉，你可以通过点击立马“开始（start）”。

13 Creative这个行动召唤按钮显示如何通过使用一个非传统的设计，在周围元素比较大的情况下吸引用户的注意。

Kalculator这个行动召唤按钮明确的告诉用户：通过点击这个按钮，他们可以只付$3.99。使用单词“only”提示这是个相当不错的交易，这显然有利于销售。

Web Design Beach是一组使用两种不同颜色的行动召唤按钮。更醒目的那个，“get a quote” 暗示它就是主要期待行动。

The Highland Fling该行动召唤按钮设法通过大量的空白、显眼的位置和使用一个图标以使自己显眼以吸引注意力。通过使用单词“now”，传递了一种紧迫感和立马行动的需求。

 Commercial IQ这个行动召唤按钮的型号和项目位置吸引了用户的注意。放大镜图标给行动添加了语境。添加“Free for search”文字消除了用户关于行动的费用的顾虑。

dashboard这里，你可以看到使用高对比色彩的以使行动召唤按钮脱颖而出的做法。

转自（略有修改）：http://www.qianduan.net/call-to-action-buttons-examples-and-best-practices.html

原文地址：http://www.smashingmagazine.com/2009/10/13/call-to-action-buttons-examples-and-best-practices/