晴耕雨读

landing page的五个设计原则

Copywriter不一定要自己设计landing page，不过作为一名广告文编写人你需要了解有效的landing page设计的原则，这样你才能更好的与专业的landing page设计师沟通和交流。理解landing page设计原理有利与你和你的团队认准相同的目标，并提升产品的转换。

关于页面布局，Omniture最近发表了一个叫做 Best Practices for Conversion: The New Engagement Funnel in 7 Steps的白皮书，在其中的第三步：组织和优化网站结构中详细介绍了页面布局相关的基本方针，通过他的指南可以帮助你更好的组织和格式化你的landing page：

• 仔细研究你的竞争者的landing page设计，并延伸他们的设计思想。 贯穿竞争者页面的转换过程，考虑那些你觉得与你的想法不一致的地方，思考是否应该修改或删除这些内容，你必须自己动手进行测试。
• 将landing page中最重要的文字放到页面最上方的300像素以内: 几乎有一半的访客不会使用浏览器的滚动条来浏览页面下一屏的内容，因此把你推销的卖点放到landing page的第一屏，并添加上一个call to action。
• 不要考虑得太复杂: 使用单字段格式，留出两个侧边空隙，居中的内容让你的访客更容易阅读。将大的段落分割为几个小段落，每个段落不要超过5行。你应该让访客跟随你的思想，而过于密集的文字会让他们无法完整的阅读。
• 使用醒目而且通俗的语言: 给你的links加上下划线，让它显得更为醒目。尽量使用通俗易懂的语言，有一说一，没有哪个访客愿意来思考你的语言有什么引申的含义。
• 确认你的页面读取速度足够快: 这一点非常重要，通常我们都建议针对不同的国家和地区都使用相同地区的主机。记住至今还有数百万的用户还在使用电话拨号，删除你landing page上不必要的图片，优化必要的图片大小，让你的landing page更快的被读取。如果你的页面在8秒内还不能完全被读取，那么你的用户很可能会迅速离开你的网站，同时你的adwords 关键词质量分也会大打折扣，这无疑会增加你的广告预算。

别忙，这里还有5个小常识你应当时常记在脑中：

• 基于 the F-Pattern Eye-Tracking 原理来格式化你的landing page: 互联网读者都倾向于一种粗略的F-shared模型来浏览web内容，因此把你的重要图片放到文字左面去。 (什么是F-shaped模型, 实际上就是普通人浏览web内容的眼球轨迹，也叫做尼尔森的F视觉模型，这里有一份调查报告，请参考 Jakob Nielsen’s eyetracking research.)
• 使用一致的网站配色/让你的ads视觉元素与landing page相互匹配: 平滑一致的颜色配置，不要让你的访客觉得不协调，看上去象个皮包公司。
• 不要使用剪切画！制作自己的广告图片： 尽量使用一个产品图片，如果没有产品，你可以使用自己制作的logo或本地计算机上面的一些相关图片，让访客有点击的欲望，在图片上添加一点有利可图的介绍是非常好的办法，比如big save，30% off等字样。如果你的图片看上去你自己都不愿意去点的话，删除它，因为它毫无用处。
• 把无关痛痒的元素放到侧边栏或者直接删除掉。
• 让你页面的表单输入更加简单： 不要为你的访客设置复杂的表单，你认为他们会一个一个认真填写吗？

记住, 你的landing page的目标是什么，促成销售或者引导注册，还是都有？你的landing page 文章与设计都应当围绕着即定的目标来进行，完成之后自己读一遍，有老婆的建议让老婆也读一遍，你会发现大多数人想的和你想的都不一样！

文案是网站的性格

网站文案就是网站的性格。好的文案不但能准确的的传达信息，更能让用户感受到良好的体验。很重要但不被重视的网站文案

网站文案其实大概包括：网站导航、栏目标题、告知提醒包括实时提示、警告、状态、还有出现最多的帮助。

大多数的互联网公司，我们听过有产品设计、交互设计、视觉设计、用户体验。很少听过文案设计这种职位吧？网站文案撰写的工作更多时候被设计师兼职和程序员兼职了，他们会在认为需要的地方加上自己认为合适的文案，设计师的感性提醒和程序员的接近机器语言的生硬警告这就造成一个网站，百家之言。大多数的网站文案有很多问题和需要改进的地方：

网站文案应该准确、简洁、易读

网站文案的目的就是要给用户传达一种信息，说明白就好。现在很多网站的文案实在是太罗嗦了，而且有的看了半天看不明白的。（难道我智商偏低？）

这个简洁的原则就是：能不说就不说，能用图片就不用文案，能用一句就不要用一段。但是要注意准确和易读。尤其是用图片的时候。

网站文案要具有统一性

由于大多数公司没有专门负责写网站文案的，所以处在各个流程的团队成员都在兼职写文案，就造成南腔北调的文案了。例如一个登录：有人说账户有人说通行证，程序员大概会说id。类似这样的说法会让用户迷惑。

我还见过一个虚拟主机的促销页，写的是150元，点击详细进去发现价格是390元！这也许就不是网站文案的范畴了。但是统一是必须的。我们不承诺放弃使用武力。哈哈。

网站的文案要情感化

网站的文案很多时候是在提示、帮助用户完成一个使用。大多数的网站文案更像一个机器人在帮你。生硬而冰冷！反面的例子看看很多网站的帮助中心吧！

1、 给用户成就感：

用户在经过一些列操作而完成一个目标的时候，我们也应该为用户高兴，这时候不要吝惜的给一个：恭喜您成功。。。，现在就可以。。。之类的提示就会让用户很有成就感！

2、 鼓励用户：

用户不小心一个误操作（请注意这个误操作一般是我们设计的太糟糕造成的），你这时候不解人意的给出一个你出错了！会不会让人很沮丧？

而好的文案一般会清楚的告诉你哪里出了问题，并鼓励你再试一次。也有的网站很体贴的在旁边提示，例如：忘记密码了？

3、 适时营销一下：

有的网站则很适时的提示：还不是网站用户，花几秒钟注册一个吧？（这种人真会做生意啊！）既然说到登录的问题，不妨引申一下这个话题。很多网站都是考虑了密码忘记的问题，很少考虑用户名忘记的问题。易趣的有这种设计。

4、 为用户着想：

我们发现很多网站发布信息的时候往往会看到类似这样的提示：发布信息不完整将被删除！这岂不是典型的恐吓？

其实我们知道信息类网站最头疼的事情之一就是虚假信息了，但是我们换个方式告诉用户，您的信息越完整，越能提高您信息的可信度！会不会更好一点？这样其实是站在用户的角度是为他着想的。

网站的文案要出现在合适的地方

我们有时候去专卖店逛得时候，往往会遇到一个店员跟着你不断的给你介绍东西，虽然我理解他们的辛苦和无奈，我仍然很反感这样的，会尽快离开那里。而有时候则恰恰相反，我看中一件商品，想找个营业员询价等，却找不到了！

1、 做帮助要低调，不要干扰用户：

其实网站的文案也应该在合适的时候出现在合适的地方。把握好尺度的原则就是，这些文案在用户使用网站的时候不会造成干扰，这就需要我们好好考虑文案的颜色，大小等形式。以及放的位置等等。

2、 适时出现，适时消失

而用户需要帮助的时候能很快找到，并能够帮助用户解决问题。而解决问题之后再合适的消失。记得有个网站出现未登录提示后无法关闭！这不是耍流氓么？

网站文案也需要交互

这个交互可能更多的是说帮助文案，因为帮助很多时候是我们自己臆想的认为那些地方需要帮助的。例如微软的帮助会在最后问你，这个答案对你有帮助么？这样用户就可以跟我们交互了。

眼动研究FAQ：眼未动，心已动

眼动研究可以帮助我们记录用户浏览网页快速变化的眼睛运动数据，包括：注视点、注视时间、眼跳方向、眼跳距离和瞳孔直径等多种参数，还可以绘制眼动轨迹图，直观而全面地反映眼动的时空特征。

1.眼睛的生理、心理构造

我们的眼睛有两根轴线，一个是光轴， 一个是观察时视线的视轴。简单的说，视网膜与视轴相交处从内而外可以划分为：中央窝、近窝区、边缘视觉。中央窝是最集中的视觉区域，当离开中央窝后分辨率 急剧下降,并且越远越低。近窝区预先阅读中央窝的信息，边缘视觉善于捕捉运动和对比。

我们浏览网页主要分注视和扫视，注视时眼睛相对较旧的“固定”在一个特定的区域，主要信息通过中央窝获取。扫视时眼睛快速、短暂的浏览，主要信息通过近窝区和边缘视觉获取。

获取。扫视时眼睛快速、短暂的浏览，主要信息通过近窝区和边缘视觉获取。

2.眼动研究的意义及历史

眼动实验的原理主要是：在实验当中，主试利用一小束对人体无害的微弱光束，射向被测试人的眼睛，这束从眼球表面反射回来的光就记录了眼球运动的情况。它的意义在于通过对结果进行分析，我们可以了解：用户如何观看一个界面和挖掘影响观看行为背后的设计因素，从而识别界面尚待改进的地方，提供客观的数据来指导设计。

眼动研究在前期主要有观察法、机械记录法、电流记录法等。

观察法是用肉眼直接观察被试的眼动情况，这是一种比较原始的眼动实验法。实验时在被试的面前放一面镜子，主试站在被试后面，由镜子里观察被试的眼动。后来又出现了一种窥视孔法，就是在被试阅读的材料中间穿一个直径为0.76cm的小圆孔。主试可以通过小孔观察被试阅读时的眼动。观察法简便易行，可以在没有仪器的情况下使人了解眼动方面的知识。但它只能对眼动进行比较粗略的研究，其结果不够精确。因此，这一方法很快就被新的方法所取代。

机械记录法是通过把眼睛与记录测验装置用机械传动方法联结起来实现的。主要有头部支点杠杆法、气动法、角膜吸附环状物法等类型，眼动的机械记录法装置复杂，调整起来很麻烦，其实验结果的准确性也较低。

电流记录法原理是：眼球运动可以产生生物电现象，角膜和网膜间存在一个电位差，当眼睛注视前方不动时，可以记录到稳定的基准电位。电位的变化由置于皮肤相应位置的电极导入放大器的电流计显示在示波器上。也可由记录器在记录纸上描记电流变化的波形图。这种方法可以记录到离开注视点70°的眼动，其精确度为1.5°～2.0°。

3.眼动研究FAQ

问：热点图是否越红=越好，没颜色=没用？

答：不一定。需结合场景，用户的主观解释及其他（点击）分析；颜色代表相对趋势，没颜色不代表绝对看不到。

问：注视时间越长越有吸引力？

答：不一定，注视时间长也可能表示该区域难以理解。

问：我的项目是不是直接拿眼动仪就行了

答：眼动数据不能解决一切问题，且眼动研究对样本数要求高，测试设计要求更严谨。

横排导航与纵列导航的区别

几乎整个世界的阅读习惯都是从左到右逐行进行（中国古代是从上到下逐列进行），那么在横排导航中，左边的项目一定比右边的项目重要么？这也未必，因为越来越多的用户将导航与段落区别开来，进行跳跃式阅读，出现了“金箍棒”状态，那么就意味着在横排导航中，最后一个元素会有一个小的跃升；所以，有经验的网站策划师会把最重要的项目放在横排导航的第一位，而次要项目放在横排导航的最后一位，其它项目从第二位依次排列开。

横排段落:权重由左至右逐渐降低

横排导航:权重逐渐降低，最后出现跃升

由于用户阅读的横扫描习惯，纵列导航保持了一个简单的递减关系，上面的权重最高，下面的权重最低。

纵列导航:权重由上至下逐渐降低

导航链接的分类与

导航链接从内容方面可以分为：信息导航、目录导航、功能导航。

信息导航主要是标题列表、信息摘要等。

导航链接从表现方面可以分为：文字导航、图片导航、多媒体导航。

导航链接从使用方面可以分为：全局导航、局部导航、辅助导航、友好导航、内链导航、地图导航。

基于用户体验的链接设计

网站浏览的每一阶段都是交互式的，即需要用户的行为引发网站的反应，用户的行为主要是通过点击网站上的链接而实现的，网站上对导航以及流量的引导也是通过链接来实现的。网站设计需要根据用户的使用经验，强化重要链接以有效引导流向，需要追求点击率和功能的可操作性。

网站上的链接从内容上分为三类，一是信息链接，二是功能链接，三是导航链接；从呈现上看，链接有两种形式：一是文字链接，二是图片链接。

网站的互动性是靠链接实现的，有效的链接设计是决定网站使用性的关键因素。

1.链接的组织

网站的结构和导航确定了信息查找方式，对于每条信息来说，查找的路径越多，它被阅读的可能性就越大，这也是提高网站浏览量的一种好办法。但对于用户来说，过多的入口容易抓不住重点而忽略真正重要的链接，甚至可能在网站内部迷失方向。因此，链接数量过多会使用户混乱，降低重要链接的被点击率。所以要在链接数量的多少上取得平衡，同时要进行合理组织和规划，一般而言，主要功能和导航链接尽量不要超过10个。找到一种解决方案，把握链接之中的重点和层次是设计的关键。

界面的疏密度要适中，要在信息传达的密度和舒适度之间取得平衡，真正提高信息传达的效率和点击率，需要精心设计界面链接的数量和呈现方式，既能尽量准确地提供给用户引导性人口，又不要拥挤杂乱，让人无所适从。从链接的组织方面来看，设计要点是：

(1)需要有组织，有分类；

(2)要有节奏，有层次，有重点;

(3)要有针对性，避免技术紧张和麻木感的同时，让用户可对链接的相互关系以及点击后的效果产生正确的预期；

(4)页面内的链接(锚点)尽管可以帮助用户迅速找到信息，但同时也容易造成困惑，更好的解决方式是降低页面的长度或者进行有效的分类和分页。

1.有组织、有分类:左侧的链接根据内容的不同分成了两类，一类是竞选的结果,另一类是相关新闻。

2.有节奏，有层次：链接之间有空隙，不仅让链接更加明确和有重点，也能让更多的链接得到关注。

3.有针对性：导航链接、标题链接、嵌入链接、按钮链接，四种链接并没有产生杂乱感，反而让页面富有变化，引人人胜。

网站首页的12个任务

在首页设计的时候我们应该赋予首页的十二个任务：

　　第一个任务：体现站点的标识和使命

　　据说当今全球网站数量已经上亿了，平均每天看1万个网站，那么一个人要花30年才能看完这些网站，可是30年中又会有无数的网站诞生，也许又要花60年才能再看完，总之这辈子笔者是看不完了。说明网站竞争相当激烈，同一个类型的网站同时有上万家在竞争是不足为奇的，所以在竞争中一个网站的首页就显得格外重要。

　　首页要不能放过任何一个可能访问或者正在访问甚至访问过的用户，大家都削尖了脑袋想办法如何处理这三个问题。那么对于任何一个访问网站的用户，我们要了解他第一次打开网站关心的是什么。一般来说，用户第一次打开一个网站大部分关心的是这四个问题：

　　A 这是什么网站？

　　B 网站上有什么？

　　C 我能在这里做什么？

　　D 为什么我应该选择这里，而不是其他地方？

　　下面我们以阿里巴巴为例看看他是如何表达这四个问题的。

　　阿里巴巴在国内是电子商务类网站用户体验公认做得最好的，他的网站LOGO，橙色加黑色，网站整体CI就是这个色，标识下方的“全球领先的网上贸易市场”

　　第一个问题：阿里巴巴是做什么的？看完这个LOGO如果您还不知道，那么接着您的视线从LOGO位置水平向右移，看到导航，还不知道是做什么的？天！好吧，请托动滚动条，浏览一下网页。

　　第二个问题：我能在这里做什么？从阿里巴巴首页右上角的导航条，很明显的告诉用户，用户在这里可以“采购”和“销售”这是主打服务，其他的看用户的需求。

　　第三个问题：网站上有些什么？如果前两个问题你在阿里巴巴上已经没有疑问了，那么这个问题阿里巴巴已经在首页上很好的回答你了。

　　第四个问题：为什么我应该在这里？“全球领先的网上贸易市场”这句话的效果不要小看哦！

　　好了，通过阿里巴巴的例子，已经告诉各位用户网站的第一个任务――体现站点的标识和使命。首页要告诉用户我这是什么网站，我是做什么的，为什么你应该来我的网址。

　　第二个任务：网站导航和站点层次

　　网站要给出网站提供的服务的概貌，既要包括内容――“我能在这里找到什么？”。也要包括功能――“我能做什么？”。还有这些服务是如何组织的。这项工作通常由持久导航来处理。其实一个网站的导航是非常重要的，他是网站的通道，通道如何设计才能让用户最方便快捷的到他想去的页面，如何设计才能把网站最好的内容体现在用户面前，导航设计有哪些讲究，避免出现哪些错误。

　　第三个任务：搜索

　　对于信息量大的网站搜索是很必要的，否则即使你其他元素处理得再好，用户在你网站上体验的感觉就像波音747的靠背椅全部换成了小板凳！

　　第四个任务：导读

　　就像杂志封面一样，首页要用一些“里面有精彩内容”的暗示来吸引我，“内容推荐”部分应该突出最新、最好、最热门等的内容片断，例如头条或者热销和热文等等。“功能推荐”部分邀请用户去访问网站更多的栏目或者使用一些个性化功能或邮件简报等。

　　第五个任务：内容更新

　　如果网站的成功取决于用户是否经常来访，那么首页应该有一些经常更新的内容。即使是不需要固定访问者的网站也需要有一些活跃的迹象，哪怕只是一个到最新的新闻链接，告诉用户这里并不是一潭死水。
　　第六个任务：登陆注册

　　如果网站使用会员制，首页应该为新用户注册和老用户登陆提供链接或者直接登陆框，免得用户四处寻找，至于是提供链接还是直接的登陆框，需要设计师来衡量，是黏性较强还是较弱，是老用户多还是新用户多，页面位置该不该腾出一个地方出来放置登陆框，用户的习惯会是怎样的。

　　第七个任务：快捷方式

　　最常访问的内容片断，如软件升级等，值得在首页上放置链接，免得用户四处寻找。现在很多网站的快捷方式是网站一厢情愿的，不是用户经常访问哪些内容网站就把这部分内容以快捷方式的形式体现在首页，而是网站方面最近新推出了什么业务，网站有什么新的动向，把这些内容作为快捷方式，最好是根据网站特点来考虑，看看是为用户多考虑合适还是为自己多考虑合适。

　　第八个任务：友情链接

　　需要在首页上预留空间，用来放置广告、交叉推广、合作品牌的友情链接等等。

　　第九个任务：让用户看到他正在寻找的东西

　　首页应该让用户想要的任何东西显而易见，如果这些内容在站内某个角落的话。当然，不是把网站的所有东西都罗列出来，弄得一个首页十几屏，用脑子嘛！

　　第十个任务：告诉用户还有他没有寻找到的

　　首页应该让用户看到一些很精彩的、用户也许会感兴趣的内容，就算用户并没有寻找他们。

　　第十一个任务：告诉用户从哪里开始

　　用户第一次到一个网站还无从下手，感觉就像和女生睡觉，都把她衣服脱光了，她还呆若木鸡，面无表情。

　　第十二个任务：建立可信度和信任感

　　对于一些访问者来说，首页将是你的网站给他们留下好印象的唯一机会。网站应该经常的倾听和收集会员的反馈，并定期对会员的反馈进行快速的处理和答复，总之一切都是为了方便用户，帮助他们解决问题，长持以往，取得用户对企业的信任和支持。各种相关的官方性的标识最好是也放在首页，例如：icp证件、工商红盾、网络报警等等。

“安全性升级用户指示”和“用户安全性升级指示”

“安全性升级用户指示”和“用户安全性升级指示”

这两句话乍看上去似乎没什么区别都是指对安全性升级的一些说明性文字，但是差别却真正存在。

“安全性升级用户指示”：重点在于网站，将网站放置在重要位置，以网站的角度来思考这个问题。

“用户安全性升级指示”：重点在于用户，是围绕用户为中心的设计，表明这个安全性升级是为了用户来做的。

所以，无论是放置这种提示性文字，和设计过程中需要提到的，都必须是以用户为中心的设计。

增加用户好感度的一些方式

增加网站好感度的方式（即可用性）

@ 知道人们在你的网站上相做什么，并让它们简易明白（询问用户想做的三件事是什么？）

@ 告诉用户想知道的（比如价格、运费）

@ 尽量减少步骤

@ 了解用户可能有哪些疑问，并且给予解答信息

@ 为用户提供协助（比如友好的打印页面）

@ 容易从错误中恢复（错误在每个网站都会发生，当错误发生时如果有正确的建议和引导，用户将会很容易从这种挫折中恢复过来）

@ 如果因为技术等问题不得不做出一些用户体验的让步，记得通过一些方式（如道歉语句）来挽回用户的好感度

@ 对于给出的帮助信息要保证准确，没有歧义，组织要良好。

用户和网页互动的五个方面

网页不是用来阅读的，而是浏览的。

按照人们生活中的习惯性方式来浏览，从上至下，从左至右（阿拉伯等习惯不同）。也就是说网页的重点位置是在左边，人们是从左上角往右下角查看。

由于大部分人在浏览网页的时是处于忙碌的状态或者节省时间的初衷，所以在点击链接或按钮前不会做出最佳选择，而是自认为满意即可。即时错误也没有太大损失，直接后退重新选择即可。而且这种带有猜测性质的点击有可能带来意外的发现。这也可能是人类好奇心的表现。

用户不会研究你的网站。即使是老用户，他们只会按照他们既定的映像。

所以有5个重要的方面：

@ 在每个页面上建立清楚的视觉层次

@ 尽量利用习惯用法

@ 把页面划分成明确定义的区域

@ 明显标识可以点击的地方

@ 最大限度降低干扰