着陆页转化与用户体验设计
针对单一目标页面的规则：登录、注册、留下邮箱、请求某物。提炼自一整套营销、转化和UX电子书（UserTesting、UXPin、SmartBug、Usabilla等，约2014-2016年）。书中引用的数字已过时，但背后的行为规律不变。
每条规则包含一个指令、简短理由和示例。评审时可直接从末尾的检查清单开始。
1. 价值主张与首屏
-
通过五秒测试。 理由：访问者会在几秒内决定页面是否适合自己。如果他们说不出你是做什么的，就会点击返回。 示例：把页面展示给某人五秒，然后隐藏，问“这是什么？为谁而设？”如果他们无法回答，先重写标题，再做其他改动。
-
标题写访问者的成果，而不是关于你。 理由：谈论“我们”的页面需要读者自行翻译。用“你”和具体的成果替他们完成翻译。 示例：“我们策划营销邮件”改成“看看400个品牌如何撰写邮件，已分类且可搜索”。
-
在标题下方列出两到三个具体的行动理由。 理由：标题激发动机；理由转化那些犹豫不决的人。 示例：标题下方列出三行：“每周新增品牌”“完整邮件，非缩略图”“免费浏览”。
-
展示真实内容，而非库存照片。 理由：通用图片显得敷衍，降低页面可信度。产品截图证明产品真实存在。 示例：将微笑团队照片替换为真实的邮件存档网格截图。
-
首屏只展示主张，然后让用户滚动。 理由：英雄区必须承载价值主张和主要操作，但把所有功能塞进首屏会造成混乱。只要层级清晰，用户会滚动。 示例：英雄区包含标题、副标题、一个按钮和产品预览。功能、证明和FAQ放在下方。
-
先设计小屏幕。 理由：手机布局迫使你排定内容优先级。能在手机上存活的内容才是关键，桌面版可以从此干净地扩展。 示例：先用375px线框只包含标题、按钮和一条证明，然后逐步加宽，直到出现过多空白时再添加下一个元素。
-
保持首屏快速加载。 理由：超过约一秒钟的延迟会让用户感觉失控，慢页面既损失访客又影响搜索排名。 示例：使用一张压缩预览图，无自动播放视频，无轮播。
[来源：《集客营销最该防范的33种网站设计罪行》；《高转化率与优质UX的潜在客户生成技术》；《成功UX设计的要素》；《永恒的UX设计趋势：响应与自适应》；《响应式网页设计最佳实践》]
2. 行动号召（CTA）
-
每个着陆页只有一个目标和主要CTA。 理由：每个额外操作都会与你期望的操作竞争。既让人看视频、读六条推荐又填表的页面，会在途中失去他们。 示例：一个“打开存档”按钮，在顶部和底部各出现一次，其余元素不做按钮样式。
-
按钮文字说明下一步会发生什么。 理由：“提交”和“点击这里”描述的是机制，而非回报。动词加事物能让页面目标一目了然。 示例：“提交”改为“请求此品牌”；“登录”改为“打开存档”。
-
在用户承诺之前清楚告知能得到什么。 理由：人们会问“我用邮件换什么？”用文案回答，如果可能，配上结果图片。 示例：在门控按钮旁边，写一行“免费。用Google登录。只需十秒。”并附上存档预览。
-
通过对比而非喧闹来突出CTA。 理由：在平静的页面上，饱和度高的按钮吸引视线。与品牌冲突的刺眼颜色会让整个网站显得廉价。 示例：保持周围UI低饱和度，只给主要按钮使用品牌最强色。
-
只有按钮才应该看起来像按钮。 理由：框起来的文字或虚假按钮会浪费点击，并让用户学会不信任页面其他部分。 示例：不要把“400+品牌”放在带边框的胶囊里；把它样式化为标签或纯文本。
-
触控目标要大且间距足够。 理由：手指比光标精度低。小或拥挤的目标会导致误触和双击。 示例：主要按钮至少44x44点，并与最近的链接保持清晰间距。
-
不要将重要信息隐藏在悬停之后。 理由：触摸屏没有悬停。只在鼠标悬停时出现的信息对手机用户不可见。 示例：把“你能得到的”提示直接放在按钮下方，而非悬浮框中。
-
为尚未准备好的用户提供更轻量的路径。 理由：大多数访问者在首次访问时并未准备好执行主要操作。一个次级的、低承诺的选项能防止他们空手离开，但必须在视觉上保持次要位置。 示例：在主按钮下方添加文本链接“或在新品牌上线时获取邮件通知”。
[来源：《33种网站设计罪行》；《成功UX设计的要素》；《用UI模式设计更好的UX》；《响应式网页设计最佳实践》；《永恒的UX设计趋势：响应与自适应》]
3. 潜在客户获取与注册表单
-
只询问你即将使用的内容。 理由：每个字段都会降低完成率。在一个测试中，将表单从11个字段缩减到4个，注册量提升了超过100%，且潜在客户质量未下降。 示例：“请求下一个品牌”的表单只需要品牌名称和邮箱。不包含姓名、公司、电话。
-
移除令人困惑的字段。 理由：一个模棱两可的字段可能毁掉整个表单。一个著名案例中，移除了一个导致误读的可选“公司”字段，营收增加了数百万美元。 示例：如果在品牌请求表单中添加“网站”，人们可能不知道是指他们的网站还是品牌的网站。要么删除，要么精确标注。
-
逐步收集更多信息，而非一次性完成。 理由：每次访问询问少量信息（渐进式画像）比一次性长表单（人们会填垃圾信息）获得更高的完成率和更干净的数据。 示例：第一次请求只问邮箱；稍后发送邮件询问“你从事什么行业？”
-
接受任何合理格式的输入。 理由：因为你想要“Nike”而拒绝“Nike.com”会因为解析器而惩罚用户。在服务器端清洗数据。 示例：去除空格，剥离“www.”和“.com”，不区分大小写匹配。
-
将表单放在其解锁的价值旁边。 理由：直接放在有用内容之后的表单，转化率远高于用户已学会忽略的通用侧边栏框。 示例：将“缺少品牌？请求添加”直接放在存档预览下方，而非页脚。
-
保持登录和注册在视觉上区分明显。 理由：当两个表单堆叠在一起时，许多新访客会误填错误的表单。 示例：一个“使用Google继续”按钮处理两种情况，或使用两个清晰分隔的面板。
-
提供显示密码切换按钮和可见的“忘记密码”链接。 理由：在手机上输错密码会促使用户发送重置邮件，从而打断流程。 示例：密码字段中的眼睛图标；重置链接放在它正下方。
-
在页面上用简单语言确认成功。 理由：用户需要知道表单已提交成功以及下一步将发生什么。 示例：“已收到。当Glossier品牌加入存档时，我们会邮件通知你。”
-
用一行简短文字解释你会如何处理邮箱。 理由：隐私担忧是用户在最后一个字段停下的常见原因。用通俗语言胜过链接法律文本。 示例：“当你的品牌加入时会收到一封邮件。除非你要求，否则不会发送新闻通讯。”
[来源：《3个常见的UX设计错误》；《33种网站设计罪行》；《成功UX设计的要素》；《高转化率与优质UX的潜在客户生成技术》；《设计高转化结账流程》（仅表单规则）]
4. 社会证明与信任
-
有真实数字时，使用真实数字。 理由：人们更信任硬数字而非形容词。 示例：“来自312个品牌的2,140封邮件”优于“一个巨大的库”。
-
每条推荐都注明真实人物。 理由：姓名、职位和照片让引言 relatable。匿名引言读起来像是编造的。 示例：“为我节省了编写欢迎系列邮件的时间。”Priya S.，某DTC品牌生命周期营销人员，附头像照。
-
低调展示可识别的logo。 理由：通过关联获利是有效的，但彩色logo会与CTA竞争。 示例：在英雄区下方放置一排灰色logo。
-
将证明放在疑问浮现的地方。 理由：放在页面中间、靠近所支持主张的推荐，比末尾的推荐墙更有效。 示例：在“完整邮件，非缩略图”之后，引用一位使用过全尺寸视图的人的话。
-
测试社会证明，而非直接假设它有用。 理由：订阅数有时反而降低转化率，尤其是当数字较小时。 示例：A/B测试英雄区是否包含“加入800名营销人员”。
-
用精细打磨和诚实赢得信任。 理由：视觉质量是人们判断可信度的第一要素。错别字、破损按钮和混乱对齐都会被解读为“不正规”。 示例：上线前校对每个字符串，点击每个链接。
-
绝不使用暗黑模式。 理由：诸如隐藏勾选或难以找到的取消链接等伎俩只能赢一次，但会永远失去用户。 示例：使用未勾选的、清晰标注的“同时发送每周摘要”复选框；绝不使用预先勾选的、埋在小字中的复选框。
-
坦诚说明成本和条款。 理由：人们更喜欢尽早看到价格，而声称“免费”但结果附有条件的做法会破坏信任。 示例：如果浏览免费、下载付费，请在着陆页上标明，而不是在登录后。
[来源：《成功UX设计的要素》；《高转化率与优质UX的潜在客户生成技术》]
5. 页面流程与结构
-
在设计页面之前先规划路径。 理由：如果没有计划好的“他们下一步做什么”，页面会变成死胡同。 示例：写清楚：到达、阅读标题、看到预览、点击“打开存档”、登录、进入存档内部。
-
从单目标着陆页中移除主导航。 理由：每个导航链接都是离开该主张的出口。 示例：页眉中只有logo+一个CTA，没有“博客/关于/定价”菜单。
-
不要在真实页面之前放置启动页。 理由：它增加了一步，且未向访客传达任何信息。 示例：没有“进入网站”门控页面。着陆页就是前门。
-
每个页面都以一个下一步行动结束。 理由：一个突然结束的页面会让访客自己搜寻下一步。如果他们几秒内找不到，就会离开。 示例：FAQ部分以与英雄区相同的CTA结束。
-
为扫读者写作。 理由：大多数人只阅读标题、副标题和首句。 示例：简短段落、清晰的副标题、功能使用项目符号列表。
-
通过分组和间距降低认知负荷。 理由：空白可提升理解力，将相关内容分组能让人们在删除任何内容之前吸收更多信息。 示例：将9个零散的功能点分组为3张卡片。
-
使用熟悉的模式，除非你有证据证明自己的更好。 理由：可识别的模式让人们无需思考即可行动。打破它们会强制学习并导致错误。 示例：将登录入口放在右上角，而非隐藏在某个手势中。如果你在规则中使用了“除非”或“除了”，就是重新思考的时候了。
-
根据链接背后的内容标注链接。 理由：清晰的标签提供“信息 scent”。花哨的标签会隐藏它。 示例：“浏览品牌”，而非“好东西”。
-
满足基本的可访问性。 理由：这对每个人都是好的UX，包括在阳光强烈下或使用慢速手机的人。 示例：文本对比度至少4.5:1，正文至少16px，行高约1.5，表单字段有真实标签。
-
主动设计空状态和等待状态。 理由：登录后的空白屏幕看起来像出错了。清晰的空状态或加载状态告诉用户预期什么，并保持他们的掌控感。 示例：“正在加载2,140封邮件...”并显示骨架网格，而非白屏。
[来源：《33种网站设计罪行》；《3个常见的UX设计错误》；《用UI模式设计更好的UX》；《成功UX设计的要素》；《响应式网页设计最佳实践》；《愚人按钮：UX设计中的安慰剂》]
6. 应避免的设计罪行
一个快速清单，列出最常导致页面失败的错误。每行指出应该怎么做。
- 轮播和滑块。 很少有人点击第一张幻灯片之后的，且它们会拖慢页面。改用一张强有力的图片。
- 自动播放视频或声音。 会惊吓到用户，导致他们离开。使用播放按钮让他们自己选择。
- 俗气的库存照片。 在要求数据的页面上显得可疑。使用真实产品截图。
- 着陆页上存在多个竞争的CTA。 只选一个。
- 默认的“提交”按钮。 重命名为具体行动。
- 表单长于其价值的回报。 削减到最小。
- 杂乱。 每个区块都应赢得自己的位置。一直删直到心疼。
- 文字墙。 分解为标题、短段落和项目符号。
- 低对比度或过小的文字。 浅灰色文字在白色背景上无法阅读。
- 与页面内容无关的CTA。 与页面不匹配的全局侧边栏广告转化率低。让匹配的提议与页面内容一致。
- 谈论你自己。 把“我们”换成“你”和访客的成果。
- 忽视移动端直到最后。 先设计手机版本。
……
（原文截断，但规则列表完整保留）