陈浩杰 · Joshua Chen 的个人网站主页

背景 通过研究和总结 SaaS 网站的优秀案例，给自己在产品设计的过程中攒经验，是我进行这样工作的原因和动力。 在 SaaS 领域扎根 3 年半已来，一直在做软件和后台，产品在很牛 X 的路上一路狂奔，如何表达出来，并产生更加有效的客户“转化”，是我目前工作需要思考的。 本文以“优秀的表达呈现”和“有效的转化策略”为标准，总结一些不错的案列，共四个方面： 着陆页-首屏 产品说明 社会证明 CTA 一、着陆页-首屏 着陆页，访问者到达的第一个页面，点击广告或者搜索引擎结果后显示给访问者的网页。 有些将网站首页作为着陆页，有些根据广告采用有针对性的特定页面。当然，具体情况需要根据公司的业务而定。 着陆页的首屏，100%（基本）触达，直接映入访问者眼帘，所以重要性不言而喻，如何在第一印象中快速的解答访问者产生的疑问非常重要。 我翻遍了很多网站，虽各有巧妙的亮点，但有其结构性的东西，主要有四个部分： 介绍（标题+说明）：是什么？解决了什么？优势？ 配图：产品外观、产品介绍、呈现效果等等。 客户 logo：建立初期的信用。 CTA：注册、演示、在线沟通等等，提供行动的入口。 是的，以上四个部分就是为了回答，访问者首次进入后产生的疑问： 干啥的，效果如何？ 是我需要吗？ 为什么相信你？ 不错，哪里可以试试看？ 当然，这不是万能钥匙。但，在此思路上发挥你的创意或许会更棒！ sleeknote 绝佳模范案列，充分利用首屏，来回答访问者的疑问。 介绍：硕大的文字，简短而又无法忽略，澄清产品解决的问题，解答了访问者的第一反应，这是什么，能干嘛？ CAT：行动的号召，提供两个 CTA，一个高成本（七天免费使用），一个低成本（查看演示），让访问者选择而不是拒绝。 社会证明：列举客户，证明产品的价值，通过第三方背书建立初步可信度。 图片：一图胜千言，就算访问者不看右侧的介绍文案，也能理解产品是什么。 引导：动态图形结合文本，引导访问者继续浏览。 稿定抠图 通过 gif 动画，可谓一图胜千言。 图片：采用左图右文的布局方式，图片作为主角，通过 gif 一目了然其功能和效果。 介绍：通过数据（3 秒）加上左图动态演示，让人立即 get 到“快速”这个核心点。 addthis 反问句的标题，引起好奇心。 介绍：反问句的方式，看到的时候，内心不自然的就给出肯定的回答，并引起强烈的好奇。 社会证明：通过数据，1500万，哇，这么厉害，看来我可能也需要。 CTA：免费 + 快捷注册，打消访问者两大难题：成本 + 麻烦。 网站高度：窗口即使缩到很矮，“免费网站工具”也会在一屏内，精心的小设计，让访问者止不住滑下去一探究竟。 useproof 通过量化的数据和左侧实时的产品展示效果，简单明了。 介绍：能做什么，效果如何，并以结果为导向。 社会证明：客户量 + 评分，没有大客户，我有不错的数据呀。 预览：实时呈现产品的各种功能效果，一秒即懂。 二、产品说明 放心，访问者通常没什么耐心，也没那么熟悉你的产品，“简单粗暴，傻子都懂”是设计师作为“翻译者”最应该追求的目标。 你没法很好的解释，就别过多的指望访问者会注册尝试。 产品说明，最好用第三方的视角，多问问你的同事，如新入职同事、客服、财务或其他非技术人员，他们怎么理解，不要过于在意设计的“高大上、权威性、不可撼动、其他人都是傻 X”。 永远记住，你服务的是用户，手握一票否决权的上帝。 不过，有以下方法，可以参考： 文案介绍采用结构化的方式。可采用大标题、小标题、分点说明等方式，提高访问者获取和理解的速度。 在配图效果上，GIF > 静态图片。同时，与产品相关、相近程度越高的图片越好。 提供在线演示或视频解说。 benchmark 标题解释了功能（邮件营销）+ 优势（15 分钟）+ 客户群体（中小企业），并通过强大的 gif 快速的让访问者知道如何使用，而无需过多的解释。 batch 通过步骤和分点，简短而又明确，高效而又易于理解。 sleeknote 在线演示，预览效果，直观明了。 viral-loops 大标题 + 小标题 + 更多解释，从大概到具体，访问者可根据情况，是否深入了解。 三、社会证明 黄婆卖瓜自卖自夸，瓜好不好，最终还得看吃过瓜的人怎么说。 社会证明，就是为了消除潜在客户内心的不确定性，不安全感。通过背书，来增加产品可信度，给人靠谱、成熟、牛 X 的印象。 但是，如何增加背书的有效性，可以从以下角度考虑： 增加相关性。每个人都会更加关注自己和自己领域内的，按照行业分类，呈现出服务过的各个行业领头品牌，增加其与潜在客户的关联性。“卧槽，牛逼，XXX 也在用，注册试试。” 增强诚信背书。视频 > 评价人的头像+文字评价 > 文字评价 > 单纯的企业 logo，同样文字评价中，可量化的结果（数据） > 模糊的好评 那又有哪些社会证明的素材呢？ 总结如下： 服务的客户 第三方权威认证 可量化的产品数据 集成（对接第三方应用） 还有一个经常被忽略的，真人图像，这比满屏的插画和 C4D 给人更多的亲近感和信任 53KF 通过详细的量化数据和列举各行业代表客户，证明其领域内的地位。 zoom 通过视频，增加产品其可信度： 华为云 通过第三方的权威认证，树立其安全稳定的特性。 batch 通过量化的数据，体现其技术和服务能力。 smartlook 通过集成，向访问者证明其成熟、方便、可扩展。 bizmates 使用大量的真人和场景素材，不是网上的无版权和一眼假的商务图。当然，用心程度并不会浪费，都会呈现在给人的专业和信任感上。 四、CTA CTA 是 Call to action 的缩写，中文通常称之为行为召唤。 CTA，简单来理解就是你希望用户执行的行为。整个网站中有不同程度的 CTA ，高成本的（如注册、电话咨询）、低成本的（在线演示、在线咨询），甚至引导访问者浏览网站的路径指示。 不管怎样，CTA 要让访问者“觉得”是需要的，他们才会有点击的冲动。 Crazyegg 整个页面的最大的 CTA 是“展示我的热图”，而非注册，以为输入了网址，就能够查看到热图，还是太年轻，跳转到的既然是注册页面，沉没成本吗？不得而知，具体的转化只有官方知道了。 第二个 CTA 是下方的蓝色字体，默认这个网站是单屏，点击该链接，单屏变成了多屏，下方显示产品的具体功能。 指的启发的是：CTA 按钮的文案，使用“my”，以我的口吻（本文第一次提到），每个人都更关心自己并且不愿付出太多或承担太大责任。 对了，我来到这个网站，当然最关心的就是网站分析，切中我的想法，不假思索就输入了网址。 perspective 首屏提供两个 CTA ：注册 + 免费课程。在用户没有决定好是否注册时，进行引导。 点击后弹出邀请框，肯定回答的 CTA 按钮及我的口吻文案（本文第二次提到）。 引导至新的页面，近在眼前的视频内容，不注册是不是就前功尽弃了？ Helpscout 通过提供内容，获取邮箱，以便向潜在客户发送邮件广告和相关内容，促使后期的转化。 从众心理和害怕失去，促使访问者添加邮箱。 阅读文章，结束或者后半段的时候，提示访问者可以获取 pdf 版本，从而获得访问者的邮箱。 neilpatel 首屏硕大的问题，你需要更多流量吗？当然（我的内心直接回答），输入你的网址进行分析吧！ 第二屏，通过各种头衔和个人照片，建立权威和信任，CTA 文案使用我的口吻（本文第三次提到）。 第三屏，想学习营销吗，简单就 4 步，然后开始点击按钮，详细查看。 有没有发现，你被“设计”了，你跟着网站的引导，一步步的深入 > 投入 >  获得 > 想要更多，这大概就是内容营销的魅力，先给予的互惠原则。 最后 SaaS 网站设计，应该以“转化率”作为最终好坏的评判标准。 从而，以更有策略性的角度去看待、去深入、去量化。同时，采用其他工具辅助决策和优化，而非仅仅停留在页面风格，甚至只是局限在好看的层面。 当然，这只是开始，因为我还在研究的路上，感谢你的阅读。

用户体验五要素是我们在做产品分析时经常用到的一种分析方法，很多人将之作为自己做竞品分析、产品设计等等文档的模板使用。 个人觉得用户体验五要素可看不可用，可看是因为里面的一些分析思路真的很好很全面，我们使用用户体验五要素可以把产品分析得很细致入微且不遗漏。不可用的原因在于五要素的理念把产品的分析限制得很死，我们可以把五要素看成一个填空题，把在产品当中看到的东西挨个填进去就可以形成一篇文档，但是却不能帮助我们更好地理解产品。 所以今天我们对用户体验五要素书中的知识点概念进行简单地介绍，辅助大家理解其中的思路，具体的用法不作介绍。既然是讲用户体验五要素，我们就用五要素的形式对这个方法由宏观向细节讲述。 一、战略层： 什么是用户体验五要素： 1、什么是用户体验：用户在使用产品过程中建立起来的一种纯主观感受。 2、用户体验的重要性：给用户一个积极、高效的体验，他们会持续使用你的产品，产品满足用户某方面的需求并来盈利，帮助人们提高生活质量，提高工作效率，改善人际关系，等等。 3、五要素：战略层、范围层、结构层、框架层、表现层 4、用户体验要素的作用：要素之间相互作用完成任务，创建一个总体的用户体验设计。 5、适用场景：设计：战略层→范围层→结构层→框架层→表现层 用户体验：表现层→框架层→结构层→范围层→战略层 设计的时候我们要先明确产品设计方向，做好战略层和范围层的设计，然后为产品制作骨架结构层，有了骨架还需要肌肉，我们就把框架层做好，最后的表现层自然就是我们的皮肤了。 用户体验和我们做竞品分析很像，都是从外向内进行一个逆向的推理，认识一个人最开始就是见到他的外表，久了就会知道一些性格，再往后了解这个人的真面目，从一点点的细节去了解这个人。产品也是从一个个页面开始，逐渐了解整个产品。 二、范围层： 1、用户体验五要素设计产品包含哪两种形式的产品：信息型产品和功能型产品 2、什么是信息型媒介产品：关键词（信息），内容型的产品的实质就是连接人与内容的，所以这个内容从哪来，到哪里去，如何去，就显得至关重要了。 3、什么是功能型平台产品：关键词（任务），这类产品多从一个或者多个的用户目标出发，通过一个个的功能点来满足用户的一个又一个的需求，从而满足用户的终极需求。 三、结构层： 五要素的具体定义： 1、战略层:成功的用户体验，其基础必须是一个被明确表达的战略。了解企业与用户对产品的期望和目标，能够促进用户体验的确立和制定。 2、范围层：我的产品需要有什么功能和内容？ 3、结构层：（是抽象与具体之间的分界线，此处的决策更倾向于抽象化。）结构层确定各个将要呈现给用户的选项的模式和顺序。结构层是用来设计用户如何到达某个页面。并且要考虑他们完成事情之后能够去哪里。 结构层可以通过树状图整理产品整个的页面的结构。 4、框架层：产品的框架层：按钮、控件、照片、文本区域的位置。框架层是用于优化页面设计布局的，哪些元件该放在什么位置，同样的内容应该用那种方法表现等。 5、表现层：视觉、听觉、（触觉）的体验设计。 四、框架层： 从五要素继续细分。 1、战略层： 产品目标：（1）、我们希望从产品得到什么？。产品目标决定产品定位。 用户需求：（2）、用户希望从产品得到什么？ 。使用场景、用户群体决定用户需求。 战略层是为产品设计的整体走向指明方向的，所以这一步虽然抽象，但却非常重要。 2、范围层：功能规格：对产品的“功能组合”的详细描述，需要何种模式的功能。 内容需求：对各种“内容元素”的要求的详细描述，需要何种顺序的信息展示。 3、结构层：交互设计：影响用户执行和完成任务的元素。交互设计的作用和路线很像，都是指示用户如何快速、准确地达到自己的目标，好的路线一般都是不怎么曲折的，好的交互设计也不会让用户操作的时候在几个页面内反复跳转。 信息架构：关注如何将信息表达给用户的元素。信息架构的作用和指路牌比较像，当你来到叉路口时可以提醒你该往哪里走，让你可以清晰、不迷路地找到你需要的信息。 二者有些相似，却又不尽相同。 4、框架层：信息设计：用一种能“反映用户思路”和“支持他们完成任务”的方式来分类和排列这些信息元素。选择表现形式和分类排列的设计功能。 界面设计（功能）：选择正确的界面元素和正确的界面布局，让用户能快速找到目标功能。将重要的功能放在显眼的位置，相似的功能分类放置在一起等等。 导航设计（信息）：屏幕上元素的组合，允许用户在相关的内容之间自由的切换，找到足够多有效的信息。 5、表现层：感知设计：“弥补网站框架层的逻辑排布”的视觉呈现问题。有的人称之为视觉设计，这是不准确的，像app的话还会有听觉、触觉的感知，所以应该称之为感知设计。有的页面功能很多，且都很重要，这种时候就不存在取舍的问题了，通过色彩等感知设计能够将一些不起眼的重要功能突出显示。

目录 1.3交互是什么 1.3.1交互设计的组成 1.3.2 跨学科小组协作 1.3.3 商业中的交互设计   1.3 交互设计是什么 交互设计就是关于创建新的用户体验的问题，其目的是增强和扩充人们工作、通信及交互的方式。Winograd（1997）——人类交流和交互空间的设计 1.3.1 交互设计的组成 成功的交互设计需要涉及多个学科。 我们需要理解用户如何作用和响应具体时间，以及用户与事件之间如何通信和交互。 同样我们需要理解设计不同类型的交互式媒体，并赋予其有效且富有美感的交互方式。   HCI的用途     跨科学领域 1.3.2跨科学小组协作 设计组包含越多背景不同的人员，意味着成员之间的沟通以及设计的进展将越发困难 不同背景的人会有不同的视角和方法     小结：交互设计是一门综合性学科，而完成一个稍大的项目从头到尾需要很多工作者，而统一的信息以及信息传播格式是一个关键点。（作为面向用户的产品，因此也应该有用户代表参与设计） 沟通也是一个很重要的点。 1.3.3 商业中的交互设计 好的交互设计可以造就一家公司的成功，反之，则可能导致一家公司的失败。 随着对交互设计需求的日益增长，出现了越来越多针对交互设计的咨询公司。 公司往往能够意识到交互设计的重要性，但就是不知道如何进行。 咨询公司的合作形式可以是专家咨询，也就是对产品的可用性和设计进行仔细的审查 或者咨询公司也可以更全面地协助客户创建他们的产品。 IEDO——“以用户为中心”的设计思想。