【技巧和案例分享】引导页如何设计，才能把用户顺利“引进门”？

如今&＃xff0c;同类产品竞争越演越烈。用户对产品的第一印象往往决定了一切。而用户的第一印象又起始于引导页。也就是说&＃xff0c;引导页的好坏&＃xff0c;很大程度上直接影响用户是否最终使用或购买产品。如果设计师能够一开始就添加引人入胜的引导页设计&＃xff0c;产品吸引和说服用户使用和购买的机率就会更大。

因此&＃xff0c;本文将结合真实的设计案例&＃xff0c;为大家介绍引导页相关构成和设计技巧&＃xff0c;和大家一起探讨引导页如何设计&＃xff0c;才能短时间内留下最好的第一印象&＃xff0c;提供最佳用户体验。 一起来看看吧&＃xff01;

什么是引导页&＃xff1f;

首先&＃xff0c;我们先了解一下“引导页&＃xff08;onboarding&＃xff09;”这一基本术语。引导页&＃xff08;Onboarding page&＃xff09;&＃xff0c;最初来源于招聘和人力资源领域&＃xff0c;用于指代一切能够帮助新员工快速上手、适应环境的流程、技术和方法。大家都知道&＃xff0c;刚入职的员工多少都会有些压力&＃xff0c;需要努力学习和适应&＃xff0c;才能有所改善。而这些来自企业层面的引导流程和协助方法&＃xff0c;不仅能够快速缓解他们的焦虑和紧张情绪&＃xff0c;还能够有效提升他们的自信心&＃xff0c;让他们更加高效地学习、工作和交往&＃xff0c;从而快速为企业创造价值。

其次&＃xff0c;用户体验设计领域迅速吸收了这一术语&＃xff0c;用于指代网页或App设计中&＃xff0c;能够安慰用户并简单介绍产品的一系列交互设计和设计技巧。

考虑到用户&＃xff08;尤其是第一次使用产品的新用户&＃xff09;&＃xff0c;并不会花费太多时间了解产品的工作原理&＃xff0c;用户引导页设计&＃xff0c;首先需要解决的问题就是&＃xff1a;明确设计优先级。毕竟&＃xff0c;用户愿意学习产品的时间和能够记住的内容都是有限的。 所以&＃xff0c;即使产品信息确实很多&＃xff0c;也千万不要尝试在引导页展示所有细节。正确的方法应该是给各个信息设定优先级&＃xff0c;由产品相关人员共同决定产品信息展示的先后顺序。当然&＃xff0c;在此需要注意的是&＃xff0c;教程、向导、提示以及说明之类都是产品最基本的信息&＃xff0c;需要优先进行考虑。

正在上传…重新上传取消

Bee Exchange的引导页设计&＃xff0c;文案简洁有力&＃xff0c;视觉层次结构清晰&＃xff0c;直观高效地展示用户最关心的产品内容。

利用动画&＃xff0c;提升界面活力

另一个能够有效提升趣味性和用户参与度的方法&＃xff0c;就是在引导页中添加动画。好的动画设计&＃xff0c;不仅能够让人机交互更加生动自然&＃xff0c;还能为界面注入活力&＃xff0c;轻松打造出让人眼前一亮的视觉效果。更重要的是&＃xff0c;动画还能有效突出一些重要的细节。当然&＃xff0c;类似的设计也会增加界面加载难度。所以&＃xff0c;设计师需要谨慎评估&＃xff0c;向开发了解相关技术可行性之后&＃xff0c;再考虑是否添加。

吸睛的3D动画设计&＃xff0c;能够有效提升引导页的趣味性和吸引力。

允许跳过

引导页设计&＃xff0c;也需提供跳过选择。因为并非所有用户都需要使用引导。事实上&＃xff0c;根据大量产品设计实践证明&＃xff0c;即使是第一次使用产品的新用户&＃xff0c;也可能想要直接跳过教程引导。所以&＃xff0c;是否添加类似功能&＃xff0c;也需要设计师反复测试和分析之后&＃xff0c;再决定。

添加提示设计

工具提示是帮助用户体验界面功能的重要方式。它们在用户一步步探索界面功能的过程中&＃xff0c;逐一展示&＃xff0c;提示按钮或界面功能&＃xff0c;突出产品特色&＃xff0c;是用户使用产品的重要引导性设计。

Amazon工具提示设计&＃xff0c;引导非注册用户及时注册登录。

考虑空状态设计

对于那些需要用户填充信息的产品&＃xff0c;设计师则需要考虑空状态的设计。因为在用户添加任何个人信息或内容之前&＃xff0c;它们往往都是空白的。此时界面该如何布局才能留住用&＃xff0c;就变得至关重要。例如&＃xff0c; 某些产品设计中的愿望清单、项目集合以及用户反馈等界面&＃xff0c;虽然它们暂时是空白的&＃xff0c;但确是获取用户反馈和提升用户参与度的重要方式&＃xff0c;不容忽视。

Dropbox的收藏项目模块的空状态设计&＃xff0c;就通过添加有趣的插画和简短的提示文案设计&＃xff0c;引导用户如何选择和使用该功能模块。

注意情感化设计

富有情感的产品&＃xff0c;拥有独特的魅力&＃xff0c;能够快速与目标用户建立牢固的情感联系。而情感化设计&＃xff0c;就是实现这一目标最灵活有效的方式之一。设计师需在充分调查和了解用户之后&＃xff0c;确定整体的感情基调&＃xff0c;然后再开始设计。在未确定产品与用户交流应该使用的基本语气、语调以及感情色彩之前&＃xff0c;千万不要贸然开始撰写任何文案。

此外&＃xff0c;切忌不要幽默过度。尤其是那些面向多国售卖产品的企业&＃xff0c;需要特别注意。因为很多在我们看来十分趣味幽默的设计&＃xff0c;在他国用户看来&＃xff0c;可能一点都不幽默&＃xff0c;有时甚至可能会冒犯到他们&＃xff0c;最终影响产品销量。总之&＃xff0c;情感化设计&＃xff0c;也需要设计师把握好度。

避免过度设计

老实说&＃xff0c;并不是所有用户都需要使用引导或帮助。所以&＃xff0c;设计过程中&＃xff0c;也不要过分突出引导性或帮助性设计。事实上&＃xff0c;在以下情境中&＃xff0c;引导页设计甚至会带来反效果&＃xff1a;

• 引导性内容太多

• 引导性内容太分散用户注意

• 引导性内容不够清晰

• 用户无法跳过或取消引导设计&＃xff08;例如并未提供“不再提示”之类的设置选项&＃xff09;

• 引导性内容并未提供任何有用信息

总之&＃xff0c;设计师需要注意平衡和取舍&＃xff0c;及时测试&＃xff0c;不断优化。

结语

综上所述&＃xff0c;优质的引导页设计是产品与用户之间不可或缺的沟通桥梁&＃xff0c;能够快速与用户建立牢固的情感联系&＃xff0c;清晰展示产品特色同时&＃xff0c;轻松给用户留下最好的第一印象&＃xff0c;从而提升产品销售量。设计师们需要格外重视。