准备过程如下：

1.尽量以实际例子先把用户体验的概念能够普及一下

2.讲交互设计的通用原则（用了 注册表单、PC、手机上Map的设计）的例子来深入

3.最后以一个简历中的交互设计收尾 希望能给同学们一些实际的应用～

感想如下：

1.关于用户体验想讲出来就像量化一样，概念太大，只能讲一些基础的现象

2.学生的冲劲还是蛮大的，都拥有一番梦想，期待飞翔～

3.与社会现状差异还是蛮大的，对于企业而言应届毕业生确实有太多思想和能力太学术化及落后

晚上与老师和同学们一起聚餐，希望他们能够有好的发展：）

工作地点：北京 魏公村

一、互联网产品经理 （ 薪资标准：5-15K）

共4名（内部工作流产品、联盟产品、商业产品、平台产品 有相关经验者优先）

工作地：北京 魏公村

职位描述：

1.根据公司战略、用户需求和市场研究，制定产品发展的长期规划；

2.管理业务需求，完成需求分析，并完成产品设计；

3.根据产品实施效果以及业务发展状况，不断改进产品，深度挖掘用户需求；

4.协调各方资源推进并完成产品的设计、开发、推广及上线运营，并对其效益负责。

职位要求：

1.大学本科以上学历，2年以上产品设计、产品管理或系统分析相关工作经验；

2.逻辑思维能力强，分析问题有一定高度，具备良好的规划能力、文字表达能力；

3.具备良好的沟通协调能力、团队协作能力，能承受较大压力；

4.有互联网开放平台经验、商业产品经验、技术背景、项目管理经验者优先；

5.有教育培训行业经验者优先。

简历发送到 liug#51edu.com

二、互联网产品专员 策划 设计（薪资标准：4-8K）

职位描述：

1.能够协助产品经理做好产品文档的编写工作；

2.设计产品具体功能，组织协调其他部门高效完成产品开发；

3.把握项目周期，与研发等合作部门交流沟通，协调研发等相关部门，需求细化，紧密跟踪进度，保证项目的顺利进行，实现产品按时上线；

4.产品上线后，需关注产品的相关数据，并参与产品后期的运营工作；

5.收集竞争对手资料，研究竞争对手的优势，并对自有产品进行持续性优化。

任职资格：

1.专科以上学历；

2.了解互联网，喜欢nb的交互，有电商、网盟、商业产品经验的优先；

3.具备较好的文字功底，可熟练使用office系列软件及axure等产品原型设计软件；

4.有技术背景者优先；

简历发送到 liug#51edu.com

公司介绍：

精品学习集团是中国教育电子商务行业的先行者和领跑者，致力于为教育培训机构提供高效率的互联网招生平台和营销解决方案。

经过九年时间的快速发展，集团现已和超过一万家各类教育培训机构建立深层合作关系，为它们提供从效果营销、品牌包装到全案市场传播的多渠道、多层次的互联网营销服务。同时，集团已建立起以北京为中心，覆盖上海、广州、香港等中国所有大型城市的线下服务网络，是中国第一个真正全国性、全行业、全方位的综合教育电子商务平台。

搜课网（www.sooker.com），是中国最大的课程报名与招生精准营销平台。目前，搜课网的求学者日独立访客突破了10万，经过资质认证并开设课程展位的培训机构超过了10000家，并每天以新增30-50家的速度不断扩展，所发布的课程累计超过了10万门，领域涉及职业资格、职业技能、外语、IT、高端商学、大中小学考试辅导、兴趣爱好、幼儿亲子、出国留学等等；

详细介绍：http://www.51edu.com/aboutus/

我们接着说产品的事儿，这回说UED。

UED真的是被累死的。干吗这么说？从这个角度来说，运营最感谢哪种UED？运营最感谢两种，一种，是干活特别棒的，视觉设计做到炫，前端活儿好速度快， 这都算。可是，因为大家事情都很多，开始讲流程开始将团队的时候，出现“救世主”的机会越来越少。另一种，是“不辞劳苦”型的，页面想怎么改都行，很少怨 言尽力配合。

做UED的，谁都不愿成为第二种，对吧？咱UED可是一个创造性劳动，所有跟“创意”有关的词儿，都能和UED挂钩。但是事实就是这样，很多UED的日常工作变得很民工化。

UED会抱怨：运营能不能想好了再提需求？运营你真要做那么多活动吗？活动到底有没有效果啊？活动在哪里推广呢？这次修改对你KPI是有好处，但是损害了用户体验，但是又不得不改。

更多时候，UED在“接需求”，而UED更愿意做的，却是“做创意”和“提建议”。

其实，运营更多时候并没有把UED设计师当成一个“做创意”和“提建议”的人，而是当成一个工具。那，UED不累死谁累死？UED苦于自己的创意得不到认可，收到的评价很少是“很棒”。

我想过，运营必须和UED保持很好的关系，还要想办法让UED觉得爽。大家是在共同做一件事，共同创造，共同收获。这样才有价值。我们是不是可以这样做：

• 跟UED当面沟通需求，并征求建议。
  前几年我们和UED做过一个需求提交模板，里面必填项是项目的目标，很多人都随便写，或者把数字贴上去。这样的内容UED看不明白也不会关注。所以，我们的项目最好能用文字和当面沟通的形式，当面跟UED设计师讲清楚，我们要什么，通过什么东西去要。
  运营会觉得麻烦，但是要知道，淘宝的UED都非常有想法，他们绝对不是等着需求照做的人，我的经验是，征求他们的建议，对运营很有帮助。
  个别运营曾经跟UED说“让你做你就做”，这是该打屁股的事儿。UED有时候比运营有想法的多。
• 告诉UED什么是核心信息。
  UED是从视觉和体验的角度考虑问题，而运营是从信息排布的角度去考虑。如果一个banner或页面做出来都不知所云，不知道往哪看，那不是UED的错，而一定是运营的问题。
  运营需要告诉UED，什么信息是核心的，什么是最想让用户看到的，什么是次要的可有可无的。UED根据这个去考虑，怎么在页面上安排内容，UED控制视觉中心和视觉流。这里要各司其职。
• 不要有偏见去沟通，给UED足够空间。
  不少运营同学来说，我不要那个xxx给我设计，他做的东西很烂的。UED来投诉说，运营xxx态度很差，我不愿意接他的需求。
  相信我们的UED，能来做淘宝UED的同学一定有几把刷子。UED最烦的，就是你已经把要的东西都画好了，还很详细，那他们的创意空间就没有了，对吧？告诉UED，你要的风格和感觉，和你要表达的核心信息，让他去做，不要总是催，空间，空间对UED来说真的很重要。
  大雄曾经花足足1周半做了一个页面，时间长了是么？但是美轮美奂！每一个细节都处理的很好，活动效果自然也很好。这说明如果设计师用心在做，一定能做出好东西。关键是，让设计师放松下来。
• 告诉UED，你要的是什么，还有不是什么。
  碰到很多运营和UED扯皮的事儿，大都是运营提的需求里，写要做成xx风格，模板上要求用一组形容词去描述，结果UED设计师照这个要求做出来，运营说“这完全不是我要的东西”，设计师就很委屈，你要的这些我都做到了呀。
  问题就是我们说了“是什么”，但没有说“不是什么”。有人提了一个“或活力的，卡通的，炫的，多彩的”风格，他心里想的是HelloKitty，结果设计师做出一个变形金刚。从需求上说完全没问题，可是如果说了“不是深色的，不是酷的”没准就好了。
• 要让UED有成就感。
  这个最关键，UED觉得自己“是民工”，“累死累活”却不知道啥结果的时候，我们的沟通就很成问题了。一定要让UED参与进来，活动效 果实时发给UED看，点击分布情况、转化率有事没事跟UED念叨一下，UED会觉得自己的劳动很有成果，觉得自己创造性的加上某些元素是有价值的，觉得自 己不是在做飞机稿，觉得自己真的能帮到运营。这样才能良性循环。我们这就出现过UED催着运营策划同学做活动的情况，因为他上次做爽了。

和UED的沟通，从我进入这行开始，就一直在折腾。运营和UED完美的合作可以流畅可以天衣无缝，大家共同创造共同收获才是最好。

在线阅读：李钊（臭鱼）-腾讯ISD薯片会

在线阅读：刘轶-腾讯ISD

在线阅读：任爱松（无酬）-淘宝网碳酸饮料会

在线阅读：李敬（游仙）-淘宝网UDC

在线阅读：朱君标-阿里巴巴中文站方凳会

在线阅读：刘小民（lemon）-HP图谈

在线阅读：刘为民（Michael）-HP+Design

在线阅读：于宗博（Alite）-交互设计禅意花园

在线阅读：贺师俊-人本设计沙龙

在线阅读：陈晓华-阿里巴巴ITBU有一点

你是否曾经想过设计一个漂亮的网页，但是却不知道怎样入手？说实话，几年前我也是这样。当我浏览网页的时候我看到这么多好看的网页，我就希望自己有技术创作这样的设计作品。

今天我可以这么做了，而且我将教你怎么做这样的设计！从根本上，对于这种设计你需要一点photoshop的操作技能和观察细节的能力。通过以下的教程，我将会指出其中极细微的细节之处，而这些细节讲使你的网页设计漂亮起来。打开photoshop,我们开始啦！

正文

先看效果图

第一步：下载960网格模板

我一直以来做的设计几乎全部是基于960网格模板的. 因此在我们开始创作之前，先下载这个模板. 你能在960.gs上找到这些模板. 下载之后解压zip里面关于PSD的模板. 你会发现有两种规格: 一个是12栏式的而另一个是16栏式的. 他们的区别就像名字所说的，一个是按12栏分布一个按16栏. 更详细的介绍一下吧, 如果你的设计里面分3个区块你就选择12栏式的,那是因为12能被3整除; 同理假如你的设计分四个区块, 你可以选12栏式或者16栏式，那时因为12和16都可以被4整除. 你会发现这个技巧将用于下面教程.

第二步：构造你想象的结构

在我们打开PSD网格模板创作前, 我们首先需要先构造一下想象中的结构. 从上面的这张图，你可以看出来：因为在一个排版中又有排版，所以这是一个有点复杂的结构.

第三步

构造了结构之后我们继续. 打开16栏式的PSD模板文件. 打开 “图像 >画布大小” . 把画布的宽度设置为 1200px 高度设置为 1700px .把背景色设置为 #ffffff 既白色.

第四步

用长方形工具在顶部画一个宽100%高大概80px的长方形. 用颜色： #dddddd 填充它.

第五步

在长方形那层上面创建一个新层. 按住CRTL键鼠标点击长方形层. 长方形就被选中了，然后把目标移至刚建的新层上. 选择半径 600px 的软笔刷（如图）, 把其颜色设置为白色, 然后就像图片所示那样在选框上边缘点几下. 通过这个技巧你画出了一个微妙的照亮效果. 你现在可以把这两层联合起来了.

第六步

建一个新层，再用长方形工具如图所示在上端画一个深灰色的小长方形.

第七步

在距离上端长方形500px处开始画一个宽 100% 高 575px 的长方形. 设置其由 #d2d2d0到 #ffffff 的渐变色, 角度为-90,缩放为100%

第八步

现在我们如第五步那样添加照亮效果. 这个技巧我们将很频繁地使用;因此下次用到的时候我只提示是第五步的效果 .

在当前层之上简历一个新层. Ctrl+鼠标点击这个大的长方形. 选择 600px的软笔刷, 设置颜色为白色，如图所示对选区的边缘点击多下.

第九步

创建一个新层画一个400px高的长方形. 这是用作我们网页页头的. 给它设置一个线性渐变，由颜色 #2787b7 to #258fcd.

以下展示颜色的微妙变化：

第十步

在页首长方形块底端画一条1px的灰蓝色的线, 混合属性中添加阴影效果. 阴影参数: 正底叠加, 透明度: 65%, 方向: -90, 距离: 1px ， 宽度: 6px. 之后再建一个新层，在灰蓝色线下面画一条1px的白线.通过这种方式，我们就可以创建一个轮廓鲜明的边缘. 可以说在你的设计中，你可以把这个技巧用于其他色块.

第十一步

创建一个新层,在画布顶端用“长方形”工具化一个50px高的长方形,就如图所示，这个长方形是用作导航的.

为其添加阴影效果.参数如图所示.

第十二步

开始话导航啦.使用“圆角工具” ，设置半径为5px,画一个圆角长方形，用颜色 #f6a836 填充它, 之后给他添加以下效果:

1. 内阴影- 颜色: #ffffff, 混合模式:正底叠加, 透明度: 60%, 角度: 120*, 距离: 7px, 大小: 6px.
2. 内发光 – 混合模式: 正常, 颜色: #ffffff, 大小: 4px. 其他参数默认设置.
3. 描边 – 大小: 1px, 位置: 内部, 颜色: #ce7e01.

Ctrl+鼠标点击层产生如图选区. 选择： 选择-> 修改 > 收缩 然后在弹出框中输入1px，确定.

在上面再建一层, 把混合模式设置成叠加 ,然后好像第五步那样加照亮效果,不过这次用的是小笔刷 . 然后就是增加导航文字了.我用 Arial 字体作为导航的连接字体, 所有效果设置为 “无”.

第十三步

现在我们开始创建搜索框, 圆角长方形，半径5px,在如第四步所示的网格的右边、顶端灰色背景网格纹中间创建一个用于搜索的色块. 为它增加以下样式:

内阴影：颜色: #000000,混合模式: 正片叠加, 透明度: 9%, 角度: 90*,距离: 0px, 大小: 6px

描边： 大小: 1px, 位置:内部, 颜色: #dfdfdf.

给它添加“search”的文本和一个亮底暗色的“GO”按钮.如下图所示：

到目前为止已经创建了很多层了，为了条例清楚，我们建立一个叫“search”的层文件夹. 把所有于搜索相关的层一并拖到这个层文件夹里面去. 迟点，我们都会这样处理，可以让我们的创作更合理.

第十四步

新建一个新层，然后就像画”搜索框”一样在这层上面画一个”Sign Up”按钮（字长刚好为背景长的一半）. 把这个组合放在搜索框下方条纹竖直方向中间.

再一次如第五步那样创建亮光效果.

使用更小的软笔刷.这次的笔触大小为45px.

第十五步

加了logo和网站描述之后，我们的网页就如上所示.

第十六步

现在我们回到层结构那里提早做一些工作.创建一个空的层文件夹并命名为”top_bar” .移动所有的图层到这个文件夹里面（包括logo,条纹,搜索框,注册按钮，导航和背景）.

创建另外一个空层文件夹并命名为”header”.这里用于放置头部图层 .如上图所示

第十七步

头部看起来有的平淡，因此我们可以再任意位置加相同的亮光效果. 选中蓝色的头部区域.在它上面创建一个新层并设置其混合样式为 叠加.

选一个大点的600px软笔刷,颜色为#ffffff白色。然后再导航下方点击几次。假如想更有层次感，你还可以把颜色调为黑色，然后在头部区底部重复同样操作。

第十八步

在这一步我介绍一下我是怎么实现头部图片的反光效果的。选择两张图片，我用了我自己另外做的两个网页模板图片，缩放其中一个然后把他放在比较大的那个的下方。复制这两层，用自由变换工具按住shift键等比例缩放一下，用长方形工具在上层的图片下端外部画一个选区，到选择->修改->羽化，填入30px或者大点羽化一下选框。（这里原教程说得不大清楚，我实现的方法是这样的：羽化之后选择反选，然后选取画笔工具，选白色，再在图片的左边角和右下角点击数下，然后用长方形选框和delete键修整边缘）

为了让两个图片更加突出，可以新建一层，设置该层模式为叠加，重复第五步的效果添加的操作。

在添加了一些按钮和漂亮的条纹之后，头部区域就是像上面那样子的。不要方剂把图层都放在’header’层文件夹里面。

第十九步

最终效果图里面你会看到在内容区域里面有很漂亮的切换页。为了创建这种切换页我们需要实现额外的一些操作，这是很有必要的。首先用圆角长方形工具创建一个高70px圆角半径为10px的图形（注意要画路径图），现在我们不要底部圆角的部分而为它郑家一个更好的角效果。用直接选取工具单击这个图形的路径，单击垂直点然后按住shift键往下拉直到如图所示状态.现在看起来不错了，但是还是比较简陋。然后…(把圆角变直角！？？？我汗，那还不如直接画个直角的长方形？)

如图创建了一个比较好的角（我汗）

第二十步

选择直线工具，设置大小为1px

第二十一步

按住shift键画灰色的分割线。

第二十二步

为每个切换标题添加小图标。我用了来自WebAppers.com的图标。通常一个切换标题激活了其他的就处于非激活状态了。为了清楚表达这一点，我们需要想个办法完成它。我降低其他图标的饱和度并且降低标题字眼和描述文字的透明度一保证激活的标题处于高亮状态。

第二十三部

为了使激活的按钮更加明显，我们将给它添加一个时尚的背景。为了达到这样的效果我们把整个对象选中然后裁切选区（按住alt画选区即可把不要的选区去掉）最终使选中的范围只有第一个按钮。

如上图所示即为所要达到的选区。

用一个更小的软笔刷，画出一个白色背景。

第二十四步

增加一个阴影：在切换菜单的后面如上图所示画一个深灰色的长方形。

点击图层区底部的小图标给该层增加一个蒙版。

把前景色设置为黑色，选一个大的软笔刷，在蒙版层上面点击（如图所示，蒙板上面出了白色之外的颜色都会遮挡图层）使部分黑色去掉。结果，我们创建了一个比较好看的阴影效果。

最后我们加点细节。在切换菜单下方画一个1px的灰线。然后如上一步一样用蒙版的方式使左右两端渐变。现在我们就得到一条比较时尚好看的线了。

现在切换菜单就像这样。

第二十五步

现在开始设计第一个切换按钮的内容。我们需要一个精准设计的图像（有好看的标题和一些文字内容）。首先我们得创建这个精准的图片。这里我认为我们最好打破这个图片尖锐的棱角设计，从而创造一个多彩的效果。因此我现在画一个白色有1像素灰色边框的长方形，再给它加上细微的阴影效果。

复制这一层并用变形工具稍微旋转。重复这个操作几次

把你选好的图片导进来，放在白色长方形上面。不用担心图片会溢出，我们会修整它。选中最上层的长方形，按选择->修改->收缩 ，输入5px,确认，然后在图层管理区下方点击添加图层蒙版，这样图片就只显示选区范围。

这就是你现在图层的状态。

第二十六步

不要忘记整理图层，这里新建图层夹把图层归类。

增加一个漂亮的标题、一些文本和列表，我们的设计工作又完成一部分。现在继续下一步吧。

再组织一下图层。

第二十七步: 感谢信

我认为这一个部分要比较大的，因此我把范围限定在主区域上的一个大的盒子里面。首先创建一个大的淡灰色的大概高220像素的长方形。设置其有1像素的灰色边。

然后再画一个上下左右都比它小10像素的另一个长方形。同样设置其1像素的淡灰色边框。

最后写上文本就可以了。

第二十八步

终于要做页脚啦。画一个400像素高的、深黑色的长方形。

第二十九步

如第五步一样给它加亮光效果。

第三十步

下来，如图所示，在区域上方画一个10像素高的长方形，并且通过在顶端和底部各多加两条线增强细节处理。

第三十一步

创建低端部分用于放置重复的导航。你可以拷贝顶端放置导航的长方形，移动并变形使其40像素高。把它放到你画布的最低端。你要注意你可能要扩张你的画布使所有东西都有适合的位置。制约扩张画布的操作你可以这样：图像->画布大小 设置即可。

第三十二步

再次强化细节。给页脚的导航区顶端加一条白色边，这样有比较好的边框效果。

第三十三步

给页脚增加内容，你可以依据网格合理安置它们。

第三十四步

然后就是把页脚相关的图层整合起来。

最终设计

做到这里，我们的设计就完成了。（这里做的设计作者改了一下之后放在ThemeForest.net上卖了）

最后总结

我希望你喜欢本教程并且从中或多或少学到点知识。现在是你创作的时候了。记住，只要你注重于细节，你就会创造出漂亮的网页设计，尽管你photoshop只会那么两三个工具。现在你有设计的冲动没？

转载自：蓝色理想

有效的行动召唤按钮的最佳实践

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

用大小吸引用户注意

在网页中，一个元素相对于其周围元素的大小表明其重要性：元素越大，它就越重要。判断网站的某种行为有多么至关重要，行动召唤按钮的型号也应相应的调整。

行动召唤按钮与周边元素

Lifetree Creative展示大小的主意以表明他们的行动召唤按钮的重要性。将按钮的大小与公司的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

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

这里，你可以看到使用高对比色彩的以使行动召唤按钮脱颖而出的做法，尽管是在明显较大的页面元素中间。

行动召唤按钮的附加资源

如果你想了解更多的关于行动召唤按钮的信息，这里是一些其它网站上的相关资源和文章：

如何在Photoshop中制作一个光滑而简洁的按钮

这个教程是在Six Revision，由我(Jacob Gube)编写，将一步步向你展示如何制作大号的和能引起注意的行动召唤按钮。

网页设计中的灵感按钮

如果你需要一些优秀按钮设计的灵感，看一下这个Pattern Tap的收集吧。

有效的行动召唤按钮的10种技术

Paul Boag讨论一些关于制作良好的行动召唤按钮的技术

良好的行动召唤按钮

UX Booth关于“好的行动召唤按钮的组成”方面有一篇好文章

Firefox展示一个强大的行动召唤按钮是如何提升入口页面的性能的

阅读一下一个好的行动召唤按钮如何提高转换。你将发现一个Firefox、Opera和IE使用的行动召唤按钮之间的对比。

网站设计趋势：行动召唤按钮(中文翻译)

Lee Munroe将一系列的行动召唤按钮放到一起，并附加了一个在当前设计趋势方面的讨论。

转载自：蓝色理想

CSS Sprites简介

通常被意译为“CSS图像拼合”或“CSS贴图定位”。CSS Sprites并不是一门新技术，目前它已经在网页开发中发展得较为成熟，阿里巴巴各子公司的网页中到处都可发现css sprites 的影子。但CSS Sprites并不是什么金科玉律，但在很多情况下，它有着一定的优势，最重要的是它可以减轻服务器的负载，提高网页加载速度。随着Web设计向着精致、巧妙的方向发展，设计师们开始考虑使用非Javascript的方 式制作鼠标滑过、悬停菜单的效果，这时CSS Sprite应运而生。

说白了，CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

当页面加载时，不是加载每个单独图片，而是一次加载整个组合图片。这是一个了不起的改进，它大大减少了HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。

CSS Sprites应用

在这方面，淘宝网做的比较好，我就以淘宝网为例吧。

实例一：淘宝频道页面导航

效果图：

点击放大

sprites图：

实例二：淘宝首页

效果图：

点击放大

sprites图：

CSS Sprites优点

CSS Sprites为什么突然跑火，跟能够提升网站性能有关。显而易见，这是它的巨大优点之一。

1. 利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
2. 个人认为CSS Sprites能减少图片的字节，我曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

CSS Sprites缺点

诚然CSS Sprites是如此的强大，但是也存在一些不可忽视的缺点。

1. 在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好只够的空间，防止板块内不会出现不必要的背景，否则可能会出现出现干扰图片的情况；这些还好，做痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；
2. CSS Sprites在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；不过网上已经有高手开发出“CSS Sprites 样式生成工具”，大家可以尝试一下。
3. CSS Sprites在维护的时候比较麻烦，sprites是一般双刃剑，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，有只能（最好）往下加图片，这样图片的字节就增加了，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐，而且重新算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情。当然，在性能的口号下，这些都是可以克服的。
4. 由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。

CSS Sprites总结

性能压倒一切。CSS Sprites非常值得学习和应用，特别是页面有一堆ico（图标）。总之很多时候大家要权衡一下利弊，在决定是不是应用CSS Sprites。为保持兼容性和维护性，sprites图片中的各个部分保持一定的距离是一种不错的做法。