怎么样设计落地页，才可得到更高的转化率？
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">点击 </span><strong style="color: blue;"><span style="color: black;">▲ 三分设 </span></strong><span style="color: black;">关注，和 6 万设计师<span style="color: black;">一块</span>学习进步</span></h2>
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><a style="color: black;"><span style="color: black;"><span style="color: black;"><img src="https://mmbiz.qpic.cn/mmbiz_png/emyVgtwLlkA5yBib2kqXia0Qulk6Lls1TFvdPqcH78FUl1ZLfiasyqj0tm4ZzN3KxLq01gJf0vCsyzgFcSPBibewtA/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></span></span></a></h2>
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><span style="color: black;"><span style="color: black;">知识库 </span><strong style="color: blue;">2022 </strong></span><span style="color: black;">· 第 </span><span style="color: black;"><strong style="color: blue;">172 </strong></span><span style="color: black;">篇</span></span></h2><span style="color: black;">前言：落地页的<span style="color: black;">每一个</span>元素都必须有它存在的目的，<span style="color: black;">不可</span>只是看起来很不错——它们必须是经过深思熟虑且有战略指向的。当<span style="color: black;">咱们</span>追求为用户创造更新颖、更沉浸的交互体验时，有时会忽略<span style="color: black;">哪些</span>能<span style="color: black;">保证</span>落地页高准化率的设计要点。</span><span style="color: black;"><span style="color: black;">倘若</span>你想要转化<span style="color: black;">更加多</span>的潜在客户或是<span style="color: black;">增多</span><span style="color: black;">营销</span>额，<span style="color: black;">那样</span>你需要的是一个高转化率的落地页 (Landing Page)。<span style="color: black;">按照</span> Hubspot 的数据，<span style="color: black;">持有</span>超过 30 个落地页的<span style="color: black;">机构</span>所获取的客户转化率，是少于 10 个落地页的<span style="color: black;">机构</span>的 7 倍。</span><img src="https://mmbiz.qpic.cn/mmbiz_png/ExsnuZZkwPM7CicpabRiaaKbibe8re8iacKFvElDcv9CIp4twfL3ic4u56YbMfstNKJ3Uun51Z1y5Vw9GhoLhwGC4gQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">Hubspot 关于落地页与用户流量的数据</span><span style="color: black;">落地页是独立的网页，专为特定的市场营销活动或搜索<span style="color: black;">宣传</span>而设计。当用户点击搜索结果、电子邮件或<span style="color: black;">宣传</span>中的链接时，落地页<span style="color: black;">便是</span>用户“落地”的<span style="color: black;">地区</span>。</span><span style="color: black;">与<span style="color: black;">一般</span><span style="color: black;">拥有</span>许多<span style="color: black;">目的</span>并鼓励探索的网页<span style="color: black;">区别</span>，落地页<span style="color: black;">一般</span>会引导用户完成<span style="color: black;">知道</span>的<span style="color: black;">行径</span>召唤 (Call to Action)，例如购买、订阅<span style="color: black;">新闻</span>或是取得联络。</span><span style="color: black;"><strong style="color: blue;"><span style="color: black;">首页和落地页之间<span style="color: black;">重点</span>的区别</span></strong></span><span style="color: black;"><span style="color: black;">首要</span><span style="color: black;">咱们</span>要<span style="color: black;">知道</span>首页(Homepage)与落地页之间的区别是什么。从 unbounce 给出的示例图<span style="color: black;">咱们</span><span style="color: black;">能够</span>看到首页和落地页<span style="color: black;">显著</span><span style="color: black;">区别</span>的布局，首页有许多链接，而落地页<span style="color: black;">仅有</span>一个。</span><img src="https://mmbiz.qpic.cn/mmbiz_png/ExsnuZZkwPM7CicpabRiaaKbibe8re8iacKFaOSFjngzYojNcVBm1vXvuGnrW1YluvUyhQ4HiaNFlJdoLBaBHNibUBsQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">unbounce 对首页和落地页之间区别示例</span><span style="color: black;">首页<span style="color: black;">一般</span>会有许多潜在的干扰<span style="color: black;">原因</span>，落地页却非常聚焦。落地页上的链接越少，转化率就越高，这<span style="color: black;">便是</span><span style="color: black;">为何</span>专业营销人员总会使用落地页来<span style="color: black;">做为</span>其流量的目的地。</span><span style="color: black;"><span style="color: black;">那样</span>，<span style="color: black;">咱们</span>要<span style="color: black;">怎样</span>创建落地页面来引导用户，又不借助操控技巧或灰色策略 (Dark Pattern) 呢？关键在于<span style="color: black;">知道</span>的焦点、有说服力的宣传说明、经过深思熟虑的设计和<span style="color: black;">连续</span>的测<span style="color: black;">实验</span>证。</span><span style="color: black;"><span style="color: black;">起始</span>设计之前，<span style="color: black;">咱们</span>必须要有一个<span style="color: black;">知道</span>的焦点，即清晰地定义<span style="color: black;">咱们</span>的价值主张 (Value Proposition)</span><span style="color: black;"><strong style="color: blue;"><span style="color: black;">清晰地定义<span style="color: black;">咱们</span>的主张</span></strong></span><span style="color: black;">当用户<span style="color: black;">拜访</span>落地页时，你<span style="color: black;">仅有</span>不到 8 秒的时间来吸引<span style="color: black;">她们</span>的<span style="color: black;">重视</span>力。创建落地页的<span style="color: black;">第1</span>步，是<span style="color: black;">知道</span>这个页面是用来做什么的，并尽可能简明有效地传递这个信息。这个信息<span style="color: black;">一般</span>被<span style="color: black;">叫作</span>为“价值主张”。</span><span style="color: black;"><span style="color: black;">咱们</span><span style="color: black;">能够</span><span style="color: black;">经过</span>一句话来向用户传递价值主张。这句话由两个部分<span style="color: black;">构成</span>：你能<span style="color: black;">处理</span>什么问题 (<span style="color: black;">或</span><span style="color: black;">供给</span>什么服务) ？你将<span style="color: black;">怎样</span>做到？</span><span style="color: black;">例如 Skype 的价值主张是：</span><span style="color: black;">“Skype 可让你<span style="color: black;">容易</span>保持联系，通话、聊天和协作。”</span><span style="color: black;"><span style="color: black;">第1</span>部分概述了它<span style="color: black;">供给</span>的服务，第二部分则说明了服务的<span style="color: black;">详细</span>方式。</span><span style="color: black;"><img src="https://mmbiz.qpic.cn/mmbiz_png/ExsnuZZkwPM7CicpabRiaaKbibe8re8iacKF5e87ML2z1ShLOIeU6ZJMD7Qg3z8eFW4IbNfsZsfTB6eSQVxsjE0DAg/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></span><span style="color: black;">Skype 的价值主张<span style="color: black;">同期</span><span style="color: black;">表现</span>了所<span style="color: black;">供给</span>的服务和服务方式</span><span style="color: black;">但要<span style="color: black;">重视</span>，你的价值主张很容易变得毫无<span style="color: black;">道理</span>。例如“一流”、“友好”等修饰词是任何<span style="color: black;">机构</span>都<span style="color: black;">能够</span>拿来套用的。为了避免言之无物，审视一下你的价值主张的对立面<span style="color: black;">是不是</span>依然能阐述有效的立场。例如，<span style="color: black;">倘若</span>你的<span style="color: black;">价</span><span style="color: black;">值</span><span style="color: black;">主张</span>是：</span><span style="color: black;">“<span style="color: black;">咱们</span>以<span style="color: black;">恰当</span>的价格<span style="color: black;">供给</span>高质量的<span style="color: black;">制品</span>。”</span><span style="color: black;">那它的对立面将变得毫不可取：</span><span style="color: black;">“<span style="color: black;">咱们</span>以天价<span style="color: black;">供给</span>劣质<span style="color: black;">制品</span>。”</span><span style="color: black;">这就<span style="color: black;">表现</span>出你的<span style="color: black;">价</span><span style="color: black;">值</span><span style="color: black;">主张</span>言之无物了。</span><span style="color: black;">但<span style="color: black;">倘若</span>你的<span style="color: black;">价</span><span style="color: black;">值</span><span style="color: black;">主张</span>是：</span><span style="color: black;">“<span style="color: black;">咱们</span>向独具慧眼的买家<span style="color: black;">供给</span>手工<span style="color: black;">制品</span>。”</span><span style="color: black;">那它的对立面将<span style="color: black;">一样</span>有效：</span><span style="color: black;">“<span style="color: black;">咱们</span>向<span style="color: black;">公众</span>市场<span style="color: black;">供给</span>工厂制造的<span style="color: black;">制品</span>。”</span><span style="color: black;">当然，你的价值主张不必局限于这一句话。你<span style="color: black;">能够</span><span style="color: black;">陈列</span>出你能够<span style="color: black;">供给</span>的所有<span style="color: black;">优良</span>和特点并加以描述。</span><span style="color: black;"><img src="https://mmbiz.qpic.cn/mmbiz_png/ExsnuZZkwPM7CicpabRiaaKbibe8re8iacKF9K8za8iaiakfibEQ4mkcjWpMcXic1lReBibyCIUiaqR7AJ6cVAvtag06z6tA/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></span><span style="color: black;">Pipedrive 很好地<span style="color: black;">陈列</span>出了<span style="color: black;">制品</span>的服务特点</span><span style="color: black;"><span style="color: black;">显示</span>了价值主张后，接下来就该<span style="color: black;">思虑</span>你的<span style="color: black;">行径</span>召唤 (Call to Action) 了。</span><span style="color: black;"><strong style="color: blue;"><span style="color: black;"><span style="color: black;">知道</span>你的的<span style="color: black;">行径</span>召唤</span></strong></span><span style="color: black;"><span style="color: black;">每一个</span>落地页都需要<span style="color: black;">知道</span>的<span style="color: black;">行径</span>召唤：你<span style="color: black;">期盼</span>用户做什么?</span><span style="color: black;">为了让你的落地页聚焦，<span style="color: black;">提高</span>用户操作的几率，你要克制住设置<span style="color: black;">太多</span><span style="color: black;">行径</span>召唤的冲动。<span style="color: black;">例如</span>，引导用户在社交<span style="color: black;">媒介</span>上关注你的<span style="color: black;">同期</span>，<span style="color: black;">亦</span>会分散<span style="color: black;">她们</span>完成主<span style="color: black;">行径</span>召唤的<span style="color: black;">重视</span>力。 </span><span style="color: black;"><span style="color: black;">一般</span>设置一主一次两个<span style="color: black;">行径</span>召唤是合适的。当主<span style="color: black;">行径</span>召唤是“取得联络”<span style="color: black;">或</span>“购买”时，次<span style="color: black;">行径</span>召唤就<span style="color: black;">能够</span>是“订阅<span style="color: black;">新闻</span>”，这为<span style="color: black;">无</span><span style="color: black;">选取</span>主<span style="color: black;">行径</span>召唤的用户<span style="color: black;">供给</span>了一个合适的备选。</span><span style="color: black;">次<span style="color: black;">行径</span>召唤的设计相对而言<span style="color: black;">不消</span>过于<span style="color: black;">明显</span>，<span style="color: black;">能够</span>展示在页面下方，<span style="color: black;">乃至</span>在退出页面时的浮层上。<span style="color: black;">不外</span>，部分用户对弹窗非常抵触，<span style="color: black;">因此</span>要<span style="color: black;">小心</span><span style="color: black;">运用</span>弹窗。</span><span style="color: black;"><img src="https://mmbiz.qpic.cn/mmbiz_png/ExsnuZZkwPM7CicpabRiaaKbibe8re8iacKFnHKTpjibG4P7pjTwqh0hbvibL2k3fbw0WPaqia5WXQ5SV2icrA8MDqEibCw/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></span><span style="color: black;">尽管弹窗有时候挺烦人的，这仍是个不错的在退出时唤起次<span style="color: black;">行径</span>召唤的弹窗应用案例</span><span style="color: black;">但即使你能顺利地引导用户达成<span style="color: black;">行径</span>召唤，有时<span style="color: black;">亦</span>仍然避免不了其他<span style="color: black;">原因</span>使<span style="color: black;">她们</span>失望。为了应对这种<span style="color: black;">状况</span>，你需要<span style="color: black;">认识</span>问题所在并找到<span style="color: black;">处理</span><span style="color: black;">办法</span>，这<span style="color: black;">便是</span><span style="color: black;">咱们</span><span style="color: black;">一般</span>说的异议处理 (Objection Handling) 。</span><span style="color: black;"><strong style="color: blue;"><span style="color: black;">理解用户异议</span></strong></span><span style="color: black;">阻止用户在落地页上操作的<span style="color: black;">原由</span>是什么？是<span style="color: black;">由于</span>要收取运费，<span style="color: black;">或</span>是担心隐私问题？相比竞对，你的商品看起来过于昂贵？</span><span style="color: black;"><span style="color: black;">倘若</span>你<span style="color: black;">不可</span><span style="color: black;">容易</span>地<span style="color: black;">陈列</span>出用户可能提出的反对意见，你可能需要<span style="color: black;">经过</span>用研来找到答案。</span><span style="color: black;">不必担心这会花费<span style="color: black;">非常多</span>精力，只需在落地页加上一个单问题调查<span style="color: black;">就可</span>。你<span style="color: black;">能够</span>在用户<span style="color: black;">无</span>进行任何操作就离开网页时，向<span style="color: black;">她们</span>提出一个问题：</span><span style="color: black;">“决定离开了吗？请告诉<span style="color: black;">咱们</span>不注册的<span style="color: black;">原由</span>吧，那将会<span style="color: black;">特别有</span><span style="color: black;">帮忙</span>。”</span><span style="color: black;">你<span style="color: black;">能够</span>向用户列出<span style="color: black;">有些</span>可能的选项，<span style="color: black;">或</span>让用户<span style="color: black;">自动</span><span style="color: black;">弥补</span>。</span><span style="color: black;"><img src="https://mmbiz.qpic.cn/mmbiz_png/ExsnuZZkwPM7CicpabRiaaKbibe8re8iacKFHfyciato6oIpZblicTexHGkPYUicA3TjG0iaUOZnmdMmgyQ6ibfP4XtgSdg/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></span><span style="color: black;">单问题调查<span style="color: black;">能够</span>帮你<span style="color: black;">晓得</span><span style="color: black;">为何</span>用户不进行操作</span>一旦<span style="color: black;">认识</span>到<span style="color: black;">原由</span>，你就<span style="color: black;">能够</span><span style="color: black;">起始</span>着手<span style="color: black;">处理</span>它们了。理想<span style="color: black;">状况</span>下，这<span style="color: black;">寓意</span>着你得消除<span style="color: black;">阻碍</span>，例如<span style="color: black;">供给</span>免费送货或退款<span style="color: black;">保准</span>。<span style="color: black;">倘若</span><span style="color: black;">没法</span>消除，<span style="color: black;">亦</span>要尽可能在页面的文案中有相应的反馈。<span style="color: black;">针对</span>异议，<span style="color: black;">处理</span>总是好过忽略的。例如，麦当劳<span style="color: black;">晓得</span>许多人声<span style="color: black;">叫作</span><span style="color: black;">她们</span>的鸡肉来自禽类肉质较差的部位。麦当劳没<span style="color: black;">有没有</span>视这些顾虑，而是直接<span style="color: black;">经过</span><span style="color: black;">她们</span>的网站主动澄清。<img src="https://mmbiz.qpic.cn/mmbiz_png/ExsnuZZkwPPqlSBbiafIPWBehZfpaGITO3xicXUCfaGYR2LEDQZVAZFOrBMcHwasHDTOHPNOs2ylicz4ichvjKIUYg/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">麦当劳直面用户的担忧</span><span style="color: black;">隐私安全<span style="color: black;">便是</span>一个很好的例子。人们在阅读隐私条例时不会担心<span style="color: black;">关联</span>问题，但在要提交邮件<span style="color: black;">位置</span>时就会<span style="color: black;">起始</span>有所顾虑。这<span style="color: black;">便是</span><span style="color: black;">为何</span>在用户录入表单时，展示数据<span style="color: black;">守护</span>和隐私安全<span style="color: black;">特别有</span>必要。用户<span style="color: black;">一般</span>不会主动在你的网站上搜索答案，他们只会自觉联想到最坏的<span style="color: black;">状况</span>。</span><span style="color: black;"><img src="https://mmbiz.qpic.cn/mmbiz_png/ExsnuZZkwPM7CicpabRiaaKbibe8re8iacKFxia5FlQGZeCGyKZtdPBZKeKjdrtmQSs6dr1LJ2ACa4u6sZRMLKlsKuQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></span><span style="color: black;">将隐私条例与订阅<span style="color: black;">新闻</span>的表单紧密地排版在<span style="color: black;">一块</span>，这<span style="color: black;">一般</span>会<span style="color: black;">增多</span>转化率</span><span style="color: black;">价值主张、<span style="color: black;">行径</span>召唤、异议处理，完<span style="color: black;">成为了</span>这些理性工作后，接下来该给用户带来更感性的一面了。</span><span style="color: black;"><strong style="color: blue;"><span style="color: black;">塑造你的个性</span></strong></span><span style="color: black;"><span style="color: black;">咱们</span>的<span style="color: black;">行径</span>经常取决于潜<span style="color: black;">认识</span>层面。<span style="color: black;">按照</span><span style="color: black;">发布</span>在《<span style="color: black;">行径</span>与信息技术》杂志上的<span style="color: black;">科研</span>，人们在 50 毫秒内就对一个网站产生了初步印象。<span style="color: black;">因为</span>光环效应 (Halo Effectt)，这些初始印象会<span style="color: black;">始终</span><span style="color: black;">连续</span>。</span><span style="color: black;">换句话说，尽管两者之间<span style="color: black;">无</span>直接的因果关系，网站的品牌和风格塑造了<span style="color: black;">咱们</span>对<span style="color: black;">实质</span><span style="color: black;">制品</span>的印象。这说明了风格的重要性，但更重要的是，<span style="color: black;">咱们</span>要清楚地<span style="color: black;">认识</span>到<span style="color: black;">咱们</span>想传达的<span style="color: black;">第1</span>印象是什么，<span style="color: black;">而后</span><span style="color: black;">保证</span><span style="color: black;">咱们</span>的设计能够做到这一点。</span><span style="color: black;"><strong style="color: blue;"><span style="color: black;">确定你想要传达什么</span></strong></span><span style="color: black;">你<span style="color: black;">能够</span><span style="color: black;">经过</span>创建一个简短的关键词列表来着手，以此传达你<span style="color: black;">期盼</span>用户在<span style="color: black;">拜访</span>网站时<span style="color: black;">得到</span>的印象。</span><span style="color: black;">有些关键词非常通用，<span style="color: black;">例如</span>你<span style="color: black;">期盼</span>你的落地页能传达“可信赖的”。但大部分的关键词还得取决于你的受众和<span style="color: black;">制品</span>特点。</span><span style="color: black;">一旦有了关键词列表，设计师就会基于这些关键词去完成设计，下一步<span style="color: black;">便是</span>测试。</span><span style="color: black;"><strong style="color: blue;"><span style="color: black;">测试你的设计风格</span></strong></span><span style="color: black;"><span style="color: black;">倘若</span>设计师<span style="color: black;">供给</span>了多个<span style="color: black;">方法</span>，<span style="color: black;">那样</span>简单的偏好测试就<span style="color: black;">能够</span>帮你做出选自。你<span style="color: black;">能够</span>询问用户哪种设计更“合适”。</span><span style="color: black;"><img src="https://mmbiz.qpic.cn/mmbiz_png/ExsnuZZkwPM7CicpabRiaaKbibe8re8iacKFTpJjk7wLwOyN8m8UaKbO2DCcUf50DHzqNgch1Gw4tS4xGK9sxx10tg/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></span><span style="color: black;">简单的偏好测试<span style="color: black;">一般</span>是确定最佳设计<span style="color: black;">方法</span>的最佳<span style="color: black;">办法</span></span><span style="color: black;"><span style="color: black;">倘若</span><span style="color: black;">仅有</span>一个设计<span style="color: black;">方法</span>，则<span style="color: black;">能够</span>进行语义差异调查，让用户基于你的关键字对网站进行评级。</span><img src="https://mmbiz.qpic.cn/mmbiz_png/ExsnuZZkwPM7CicpabRiaaKbibe8re8iacKFocxiblKK21IyzbzfibptcA6ib7gpricEDx3eUibCYnRwJNt0sL9Gq0HfPng/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;"><span style="color: black;">经过</span>调查<span style="color: black;">能够</span>确定设计<span style="color: black;">是不是</span><span style="color: black;">运用</span>户产生了正确的感知</span><span style="color: black;">当然，风格并不是设计的<span style="color: black;">独一</span><span style="color: black;">思虑</span><span style="color: black;">原因</span>，视觉层级<span style="color: black;">亦</span>得是清晰正确的。</span><span style="color: black;"><strong style="color: blue;"><span style="color: black;">创建你的视觉层级</span></strong></span><span style="color: black;">为落地页<span style="color: black;">创立</span>清晰的视觉层级<span style="color: black;">能够</span><span style="color: black;">保证</span>用户在正确的<span style="color: black;">机会</span>看到正确的信息，并且不会因无关或次要的内容而分心。</span><span style="color: black;"><strong style="color: blue;"><span style="color: black;">在正确的<span style="color: black;">机会</span>回答正确的问题</span></strong></span><span style="color: black;"><span style="color: black;">首要</span>，<span style="color: black;">保证</span>你在正确的页面位置向用户<span style="color: black;">供给</span>正确的信息。</span><span style="color: black;">为此，你需要<span style="color: black;">认识</span>人们在看你的落地页时的思考过程。</span><span style="color: black;">当然，<span style="color: black;">咱们</span><span style="color: black;">不可</span>做到百分百确定，<span style="color: black;">由于</span><span style="color: black;">每一个</span>人都是不<span style="color: black;">同样</span>的。可用性测试<span style="color: black;">亦</span>只能是给<span style="color: black;">咱们</span><span style="color: black;">供给</span>一个参考，但<span style="color: black;">咱们</span>仍能进行<span style="color: black;">有些</span>有<span style="color: black;">按照</span>的推测。</span><span style="color: black;"><span style="color: black;">一般</span><span style="color: black;">来讲</span>，用户在查看落地页时会下<span style="color: black;">认识</span>地提出一系列问题。这些问题依次为：</span><span style="color: black;">这个页面<span style="color: black;">供给</span>了什么？（价值主张）</span><span style="color: black;">那对我有什么<span style="color: black;">帮忙</span>？（<span style="color: black;">优良</span>）</span><span style="color: black;"><span style="color: black;">制品</span><span style="color: black;">怎样</span>运作？（特点）</span><span style="color: black;"><span style="color: black;">为何</span>我要信任此页面？（社会认</span><span style="color: black;">同）</span><span style="color: black;">接下来我该怎么办？（<span style="color: black;">行径</span>召唤）</span><span style="color: black;"><span style="color: black;">因此呢</span>，页面的视觉层级在<span style="color: black;">必定</span>程度上能够映射用户提出的这些问题的<span style="color: black;">次序</span>是至关重要的。</span><span style="color: black;">例如，典型的落地页层级可能如下所示：</span><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">一个落地页需要承载价值主张、<span style="color: black;">优良</span>、特点和社会认同</span><span style="color: black;">页面内容以正确的结构<span style="color: black;">次序</span>展示只完<span style="color: black;">成为了</span>有效视觉层级的一半，另一个挑战是<span style="color: black;">保证</span>用户看到最关键的屏幕元素。</span><span style="color: black;"><span style="color: black;">咱们</span>有多种方式来吸引用户的<span style="color: black;">重视</span>力，<span style="color: black;">包含</span>但不限于：</span><span style="color: black;">定位</span><span style="color: black;">颜色</span><span style="color: black;">尺寸</span><span style="color: black;">意象</span><span style="color: black;">动画</span><span style="color: black;">负空间</span><span style="color: black;"><span style="color: black;">不外</span>，最有效的技巧可能是最小化页面上的其他干扰。</span><span style="color: black;"><strong style="color: blue;"><span style="color: black;">简化你的界面</span></strong></span><span style="color: black;"><span style="color: black;">咱们</span><span style="color: black;">能够</span><span style="color: black;">经过</span></span><span style="color: black;">三个问题系统地<span style="color: black;">检测</span>落地页上的<span style="color: black;">每一个</span>元素。</span><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">简化落地页的过程</span><span style="color: black;">第1</span>个问题：<span style="color: black;">是不是</span><span style="color: black;">能够</span>删除这个元素？<span style="color: black;">倘若</span>删除它，后果是什么？这些后果<span style="color: black;">是不是</span>会比其他元素<span style="color: black;">导致</span>的认知<span style="color: black;">包袱</span>更具破坏性？<span style="color: black;">倘若</span>不会，那最好将它删除。<span style="color: black;">倘若</span>你觉得这个元素非常有价值<span style="color: black;">没法</span>删除，<span style="color: black;">那样</span>第二个问题是：我<span style="color: black;">能够</span><span style="color: black;">隐匿</span>这个元素吗？我能<span style="color: black;">不可</span>把它放在子页面、标签下<span style="color: black;">或</span>折叠面板中？<span style="color: black;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></span><span style="color: black;">Vibecast 将次要内容收在了折叠面板内</span>这种<span style="color: black;">办法</span>适用于次要内容，尽管部分用户会想<span style="color: black;">得到</span><span style="color: black;">更加多</span><span style="color: black;">仔细</span>信息，大<span style="color: black;">都数</span>人是不会太感兴趣的。最后，<span style="color: black;">倘若</span>这个元素用户必须知晓、<span style="color: black;">没法</span><span style="color: black;">隐匿</span>，<span style="color: black;">那样</span>，<span style="color: black;">是不是</span>可以缩小这个元素呢？<span style="color: black;">例如</span>人们可能很想<span style="color: black;">晓得</span>你的退货政策，但这个信息并<span style="color: black;">无</span>你的<span style="color: black;">制品</span>功能<span style="color: black;">或</span><span style="color: black;">优良</span><span style="color: black;">那样</span>重要。<span style="color: black;">咱们</span><span style="color: black;">能够</span>在视觉上进行适当的弱化，让它<span style="color: black;">不外</span>于抢眼。 <span style="color: black;">经过</span>这种简单的<span style="color: black;">办法</span>以及其他设计技巧，你<span style="color: black;">能够</span>创建有效的视觉层级来将用户的<span style="color: black;">重视</span>力吸引到最关键的屏幕元素上，例如<span style="color: black;">行径</span>召唤。但为了<span style="color: black;">保证</span>万无一失，你还要进行验证。<span style="color: black;"><strong style="color: blue;">测试你的视觉层级</strong></span><span style="color: black;">幸运的是，有一种<span style="color: black;">方便</span>的<span style="color: black;">办法</span><span style="color: black;">能够</span>测试用户<span style="color: black;">是不是</span>看到了必要的屏幕元素。</span><span style="color: black;">这种<span style="color: black;">办法</span>叫“五秒测试”。</span><span style="color: black;">顾名思义，测试过程是向用户展示你的设计，五秒钟后让用户回忆<span style="color: black;">她们</span>记住了什么元素。</span><span style="color: black;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></span><span style="color: black;">Usability Hub <span style="color: black;">供给</span>了<span style="color: black;">方便</span>的五秒测试</span><span style="color: black;"><span style="color: black;">按照</span>用户记住的内容以及<span style="color: black;">她们</span>回忆的<span style="color: black;">次序</span>，你能更好地<span style="color: black;">认识</span>到页面层级对吸引注意力到最重要的元素上的有效性。</span><span style="color: black;">在设计出色的落地页时，即使是上线后，验证<span style="color: black;">亦</span>至关重要。</span><span style="color: black;"><strong style="color: blue;"><span style="color: black;">监控、迭代和测试</span></strong></span><span style="color: black;">无</span>团队<span style="color: black;">能够</span>在创建落地页时一步到位，总会有改进的余地。<span style="color: black;">针对</span>落地页上线后的打磨优化，测试是非常重要的一环。一旦你的新落地页上线，必须<span style="color: black;">运用</span>类似 Hotjar 或 Fullstory 之类的用户<span style="color: black;">行径</span>监测工具仔细监控。这些工具<span style="color: black;">能够</span>让你观察页面上的用户<span style="color: black;">行径</span>，从而提出改进<span style="color: black;">意见</span>。 你<span style="color: black;">能够</span><span style="color: black;">运用</span> A/B 测试来对文案、图像和色彩进行较小的改进，<span style="color: black;">很强</span>的改动<span style="color: black;">能够</span><span style="color: black;">经过</span>可用性测试来验证设计原型。 无论采用哪种<span style="color: black;">办法</span>，<span style="color: black;">最后</span>都会形成一个监控、迭代和测试的周期，这将<span style="color: black;">保证</span>任何落地页的<span style="color: black;">长时间</span>有效运作。<span style="color: black;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">附录：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">https://blog.hubspot.com/blog/tabid/6307/bid/15424/the-key-to-more-leads-create-more-targeted-conversion-opportunities-data.aspx</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">https://unbounce.com/landing-page-articles/what-is-a-landing-page/</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">https://informatix.com.au/blog/3-ways-to-captivate-your-audience/</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">http://news.bbc.co.uk/2/hi/technology/4616700.stm</p>https://www.surveygizmo.com/resources/blog/how-to-measure-attitudes-with-semantic-differential-questions/
</span><span style="color: black;">原文标题：<span style="color: black;">How To Create A Compelling Landing Page</span></span><span style="color: black;">原创作者：</span><span style="color: black;">Paul Boag </span><span style="color: black;">原文链接：<span style="color: black;">https://www.smashingmagazine.com/2020/04/landing-page-design/</span></span><span style="color: black;">翻译作者：<span style="color: black;">王佳乐</span></span><span style="color: black;"><span style="color: black;">文案</span>编辑：<span style="color: black;">王翎旭</span></span><span style="color: black;">该译文并非完整原文，内容已做部分<span style="color: black;">调节</span>。如在阅读过程中<span style="color: black;">发掘</span>错误与疏漏之处，欢迎不吝指出。如需转载，请注明来自<strong style="color: blue;">阅文体验设计<span style="color: black;">微X</span>公众号 ( id: YUX_design ) </strong></span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">热门<span style="color: black;">文案</span><span style="color: black;">举荐</span></strong></span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;"><span style="color: black;">折叠式卡片的实践案例（文末附组件）</span></a></p><span style="color: black;"><a style="color: black;">虚拟校园<span style="color: black;">制品</span>的用户体验升级</a></span><span style="color: black;"><a style="color: black;">OOUX一个面向对象的体验设计思维</a></span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><a style="color: black;">2022 年 UXUI 设计趋势</a></span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><a style="color: black;"><span style="color: black;">诈骗</span>、迷惑、拖延...五宗罪：用户体验的<span style="color: black;">暗淡</span>模式</a></span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><a style="color: black;">设计师们应该多玩电子游戏，游戏化设计<span style="color: black;">背面</span>的</a>极致体验</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;"><span style="color: black;">为数字项目制定用户体验策略的 6 个实用工具！</span></a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;"><span style="color: black;">符号学分析导论，图标构建的 3 大要素</span></a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;"><span style="color: black;">在校的学弟学妹们，想要进大厂实习， 请务必提前准备！</span></a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;"><span style="color: black;">Google 最新的设计语言 MATERIAL YOU 来了，7 年<span style="color: black;">败兴</span>最大更新</span></a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;"><span style="color: black;">解密设计系统的 11 大优点，<span style="color: black;">最终</span><span style="color: black;">能够</span>说服你的管理层</span></a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;"><span style="color: black;">咱们</span><span style="color: black;">一块</span>聊设计</span></strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">三分设·微信读者群/城市群/内推群/</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">欢迎添加 ⭐️ 星标，获取每日好文<span style="color: black;">举荐</span>，<span style="color: black;"><span style="color: black;">每日</span>早上 8 点，准时充电。</span>加入设计</span><span style="color: black;"><span style="color: black;">微X</span>交流群 </span><span style="color: black;"><strong style="color: blue;">三分设读者 5 群</strong></span><span style="color: black;">，期待与<span style="color: black;">更加多</span>优秀用户体验设计师<span style="color: black;">一块</span>成长，<span style="color: black;"> 添加 益达 <span style="color: black;">微X</span>号【</span><strong style="color: blue;"><strong style="color: blue;">Lil_Bug</strong></strong><span style="color: black;">】<span style="color: black;">or【</span><strong style="color: blue;"><span style="color: black;"> Red-boy2020</span></strong><span style="color: black;">】</span>，备注【 </span><strong style="color: blue;">三分设读者</strong><span style="color: black;"> 】加入读者群！</span></span></span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">分享设计心得，<span style="color: black;">定时</span>直播，零距离连麦，答疑解惑</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;"><strong style="color: blue;"><strong style="color: blue;"><strong style="color: blue;"><span style="color: black;"><strong style="color: blue;"><strong style="color: blue;"><span style="color: black;">文案</span>不错，点个在看吧↓<strong style="color: blue;">↓<strong style="color: blue;"><strong style="color: blue;">↓</strong></strong></strong></strong></strong></span></strong></strong></strong></strong></span></p>
外贸B2B平台有哪些？ “沙发”（SF，第一个回帖的人）
页:
[1]