42 个移动端启动页面优化 Tips

我们都听过这句话，“你只会有一次机会去打造第一印象”, 当涉及到移动端的启动页面时，这句话会更加令人信服. 在最基本的层面上，启动页面将会是消费者同你网站的第一次接触.

拥有好的第一印象是很重要的. 今年早些时候我们发布了这篇文章， 《响应式设计不是一种移动端优化策略》 ，它专门讲为你的移动通信媒介打造专用移动端启动页面来将访问者转换成消费者的重要性.

 移动端统计数据:

• 今年美国智能手机的移动商务收入为148亿美元. (Statista)
• 到 2016, 移动端本地搜索有望创造32亿美元的收入，相比之下，桌面端为102亿美元. (Kelsey 报告)
• 50%的智能手机用户曾通过他们的手机进行过消费(Prosper Mobile Insights).
• 73% 的智能手机用户声称他们曾使用移动端 web 而不是 app 来进行购买( JumpTap.com ).

下面是42个移动端启动界面的优化建议，它们能帮助你将更多的移动端访问者转换成付费顾客，这些建议分为如下类别:

•  策略
•  基础
•  AB 测试

策略

1. 知道从哪里开始 —— 创建一个完整的移动端 web 是昂贵的，且会耽误许多的时间。所以起步的最好方式是通过跟踪分析，了解转型中的痛点和漏洞。一旦你了解了这些，你就会明白从哪里开始了。你所要在转型中关注的应该是流量，用户量和购买模式.

2. 了解你的顾客的目标 —— 确保你能了解移动端和桌面端用户的目标有何不同。你是不是想要他们拥有完全一样的体验呢？我们使用 web 和移动端相比有所不同，其体验是不同的，而且又是我们因为完全不同的原因同时使用两种或者三种设别.。要考虑到你的访问者会在你的移动端站点上做些什么，理解他们尝试要达成的目标是什么，并且创建一个用户导游来帮助他们更快跟敏捷的达成其目标。

3. 定义你的目标 —— 一旦你了解并且也定义好了访问者的目标，那你就要定义好启动页面的目标并在心里针对那个目标设计一种体验。扔掉那些不重要的信息、针对过个调用的动作按钮以及其它的噱头。要专注于启动页面最重要的元素，以及如何让它们帮助你的访问者完成你的目标。

4. 改变他们的生活： 有无数的公司在做同样的事情。人们在移动端的站点上花费的时间很少，并且需要在几秒中之内理解你（页面上）最有价值的部分。记得要关注客户和他们的利益。至少要说明：“我们是世界上最好的”，多一些可以说：“这将会改变你的生活”。

5. 定义所需的操作 –  你希望访问者在你的移动登录页上，知道一个他所需要的操作，那就要制定一个清晰的行为召唤（call to action），最好是明显的，具有逻辑性的，这能让访问者明确地移动到下一步。

6. 在重要的位置表述  – 一个访问者应该能够很快就区分他们，而不是去阅读复杂的文本和故事。确保你有价值的位置是在页面的顶部。你的标题和行为召唤（call to action）应该在折页（fold）（当访问者登录到页面的时候就能看到的部分）之上，这样能更快速地让访问者取其所需。

7. 清晰地知道后果  – 重要地是让访问者能清晰地理解，如果他们提供信息，你将会如何使用收集到的信息。

基础

8.   忘记滚动 —— 要创建出适合一个移动端屏幕边界的页面，并且这样的页面不需要滚动。这一点同时适用于横屏和竖屏模式.

9. 同时为横向和纵向的屏幕做设计 —— 大多数人在设计移动端启动界面时都会考虑到纵向视图, 但是有赖于访问者会横着拿他们的手机，所以他们也可能会在横屏模式下浏览你的移动端网站。要确保你的移动端启动界面针对这两种情况都能进行缩放.

10. 使用本地化设置 —— 启用了 GPS 的设备可以运用特殊的本地化内容来减少文化差异的摩擦，提高转换率。 在你的注册表单中你可以通过他们输入的邮编侦测到访问者的国别和城市。 可以让“邮编”作为你的第一个地址信息输入项，并好好利用这一项信息来做点事情。

11. 移除外部链接 —— 通过移除连接到网站其它部分的外部链接，你可以控制访问者的浏览过程，使其更专注于你需要他们做出的动作。记住，移动端浏览器新的tab —— 打开立即就会是访问者原理你所设定的目标位置。要使其编程一次快速轻松的浏览过程，而别让他们跑到别的地方去了。

12. 去掉杂七杂八的东西 —— 集中在重点上，尽可能保持页面整洁，减少摩擦，保证按钮之间的间距足够大。杂七杂八的东西以及文字和颜色越少，访问者越愿意完成这项渠道。

13. 保持流程和设计的一致性 ——不要使访问者感到惊讶或被愚弄，在手机登录界面上使用他们在广告上看到的相同信息和设计。与信息保持一致，将有助于使页面的访问变现，同时提供广告品质。

14.别让用户缩放 ——登录页面的焦点由你决定。登录页面的设计方式将决定用户在网站上的操作。如果让用户缩放，他们将选择网站的焦点，而不是你。

15.点击呼叫 ——很多移动搜索用户的目标都是立刻获取联系。相比复制粘帖号码，直接使用“点击呼叫”按钮将更容易让用户快速开始对话。在开始前，设置好你的电话追踪器以便跟踪来电。

16. 调整键盘 — 确保在每个表格区域中使用合适的键盘。访问者可以不用改变键盘输出而快速的插入数字或者邮件。

17. 保持表格最小化 — 所有设备上的注册表单都让人沮丧，手机上的注册表单更是如此。由于在手机上输入非常费劲，所以在可能的情况下尽量避免打开文本域。确保表格够大够清楚，可使用全屏，并使字段和提交按钮大的可以用拇指点击（忽略右边区域，因为它太小不能拖拽）。

18. 简化搜索 —让访问者可以很容易的快速找到他们需要的内容。将搜索元素放在核心位置，可以保证用户可以快速的找到他们所需要的。（记住，这并不是最重要的因素，所以不要让它反超其他元素）

20. 允许“稍后购买 ” —— 有时候我们没有足够的实际或精力来完成注册或购买流程。可以在其他设备上通过 email 或加到购物车的简单方式，让使用者可以很容易的在其他设备上稍后完成购买流程。

21. QA，QA，再QA —— 因为手机网站在你自己的手机上测试通过，并不意味着它可以在别人的手机上也可以。在开始前，在谷歌 Analytics上核查，以找出访问者最常使用的的手机屏幕。确保在多种设备上检查你的登录界面，并在一段时间内进行跟踪。

22. 要求少一些 —— 为了减少摩擦、提高转化率，可对访问者要求少一些。在开始时，只获取所需要的最重要的信息，稍后再获取额外的信息。手机屏幕很小、时间宝贵，如果难以操作，人们将不会逗留。

23.使副本最小化 —— 大多数访问者不想通读文章的好几个段落。将最重要的信息放在登录页面上，使访问者快速移动到下一步。

24. 强调你的行动引导 –
行动的引导是一个访问者在启动页面看到的第一样东西。提供一个快速的方式让用户跟着你的行动引导，完成整个流程。让你的行动引导按钮可视，并且容易通过触摸屏点击。

通过 Naked Wines 检验以下示例：

• 大量文本
• 行动引导按钮被切断

25. 优化你的表单 – 让的的表单尽可能的简单，让访问者快速完成你的表单，尝试着分离成多个简单的步骤。

26. 标题尽量短 – 标题长度不要超过 3-4 词，尽量一行显示。

27. 构建限制数据大小 – 移动数据连接会比家庭宽带连接慢，用户并没有那么多耐心等待移动网站的加载。确保符合移动用户的需求，更轻量级。

28. 远离 Flash –也许在 Web 上看着不错(无法转换)，但在移动端并不合适。使用 HTML5，GIFs 和 JPEGs 会更好一些。

29. 将导航位置考虑进来  – 我们使用智能手机来看电视，开车，购物和完成各种功能。应使移动端顺眼，并使用图标来进行快速导航（包括短文字说明）。

30. 拥抱第三方社交平台登录 – 第三方登录有着很高的转化率，对于鼓励访客和你的商品进行社交互动是个极佳的方式。

31. 提供移动独享 – 大多数人更喜欢使用 PC 屏幕来下单。为了提高转换率，可尝试提供移动端独享，以减少与 PC 端正面竞争，增加销售。

32. 为动作而设计 – 将所有的可点击元素设计为按钮(不仅仅是文本链接)， 确保它们足够大，并留白以突出。

33. 少即是多—— 尽量使用少一点的文字，去除所有不必要的设计元素，只留下功能要素。

34. 消息个性化 ——智能手机提供了很多重要的用户信息。手机为用户提供了如 GPS 和基于位置服务的一体化特性，如：运往华盛顿！

35. 考虑字体因素 ——让文本更易读。使用更大的字体、行间距和字间距让文本容易阅读和略读。

36. 使   SEO 优化而不破坏转换策略 ——避免在手机登录页面使用大量文字，或者引入可伸展的 div 而引发混乱。这将缩短页面，使用户可以点击他们感兴趣的内容。

手机上的 AB 测试

37. 测试关键绩效指标（KPI）—— 开始测试前，确定你的商业目标，然后把它们转换为数字化的关键绩效指标（KPI）（例如注册数量、购买数量、下载次数）。一旦确定了关键绩效指标，就要确保建立正确的跟踪机制。

38.达到显著效果 —— 当你运行测试时，确保在达到显著效果前一直运行，你可以使用 Google Experiments 或者 A/B test calculator 来知道何时达到这个效果。达到显著效果可以确保你尽可能的从测试中了解更多，并知道它们的正确性。

39.避开特殊日期 ——在可以提供最真实的测试结果的环境下开展测试。避免在节假日、特殊活动或者结账日测试。

40.保持系统性—— 为了达到清晰并可理解的测试结果，确保在一段时间运行一个测试，或者如果你有足够的流量来同时运行多个测试组。

41. 测试策略，不是元素 –
当你处理好所有技术性问题和元素之后，可以增加用户转换率，但是要确保有测试策略，这样能更好的理解你的用户。测试按钮颜色或者标题只会让你关注某一个点。为了能获得最大的胜利，从你的测试中获取更多有价值的东西，你需要开启测试情绪化策略。

42. 使用一个清单 – 建议使用一个清单来记住以上讲述的所有启动页面优化的策略，确保没有漏掉任何重要的部分。一个清单也可以确保你和你的团队为每个项目都能按照这些策略去优化。

结束

响应式设计并不是一个移动优化策略。为了得到更多的移动访问者，创建专用的启动页面和启动页面的不同用户体验是成功的关键。