如何设计欢迎页面/新手指南页面以构建良好的产品第一印象？

　　一、定义

入职英语入门指南，个人翻译成— —新用户欢迎页面（新手指南页面），是指启动App Launch页面（Launch Screen）后的欢迎页面，是用户对该产品的第一印象。

Google Material设计定义的使用方案仅限于新用户在应用商店中下载并首次运行应用的体验。

Apple人机界面指南定义的方案还包括与返回应用程序的用户建立联系。

欢迎页面

　二、作用

渴望体验的新用户熟悉界面。欢迎用户帮助用户清楚地了解应用程序的用途，激励用户使用，并增加参与度和保留率。

　三、模式

材料设计定义了三种模式

　　1. 自主选择模式——允许用户自定义体验

使用场景：可以根据用户自定义UI。该应用程序具有需要用户同意的设置和请求。传达应用正在解决新的挑战或提供新的利益，使用而不是在此通知用户是不恰当的。主要UI更改

优点：建议用户如何与UI交互，个性化为用户提供控制感，并使用户感兴趣，期待后续内容

注意：

为用户提供对优化体验有意义的有意义的选择;

请求无法通过正常使用获取用户信息和偏好;

保持您的选择简单，每个屏幕不超过10个，尝试在一个屏幕上控制或使多个屏幕看起来彼此连接

可选设计模式1

可选设计模式2

可选设计模式3

　　2. 快速入门模式——介绍设置，直接让用户开始体验

使用场景：该应用程序旨在促进用户参与和保留;它不适用于解决新挑战和提供新服务的场景

优点：快速启动核心功能

注意：

鼓励用户避免空白页面

提供帮助和指导，并为用户提供通过UI提示学习如何使用应用程序的机会

优先考虑最关键的操作，突出与用户参与最相关的操作，或以提示的形式向用户呈现核心功能。

核心业务

　3. 最佳福利最大益处模式——简洁的轮播卡或动画突出显示应用的好处

使用场景：处理新挑战并提供新服务，以告知用户主要UI更改;不适用于公众已经熟悉的界面，好处和使用模式

优点：突出显示使用应用程序的三个主要好处

注意：

选择正确的与个人相关的兴趣点，而不是简单地描述功能，陈述App可以解决的问题，创建的主要好处以及共同特征

通过自动切换页面，轮播卡样式每2s或3s自动切换3个，并且通过页面导航，用户知道欢迎页面不是单个屏幕。当用户触摸页面时，自动切换应该停止;

可以向前和向后滑动屏幕以提供打开或启动体验按钮

视频内容仅包含一个开始按钮，没有分页符

保持视觉连续性，并专注于在角色，风格，排版和按钮颜色方面保持视觉连续性

尝试使用插图和直观的场景，不要渲染UI界面

转盘卡

　四、设计指南

　　1. 考虑承接的上一屏页面和下一屏页面

在欢迎页面之前提供启动屏幕，请参阅启动页面设计指南

避免在欢迎页面之前询问设置信息，尽可能从设备设置，默认设置或同步服务中获取。如果您必须请求设置信息，您可以第一次提示并让用户稍后在设置中进行修改。

通常欢迎页面将连接到登录，用户可以轻松地跟踪刚学到的内容。

　2. 快速响应

避免影响启动速度的启动屏幕，菜单和命令，允许用户快速访问内容并开始使用该应用程序。

如果您有教程和介绍，请提供跳过方法，不要将此内容提供给返回的用户。

　　3. 预料用户的帮助需求

主动寻找可能遇到困难并提供帮助的用户。例如，当进入游戏加载或暂停游戏时，您可以提示进行有用的操作。

　4. 教程内容不能偏离要点

为新用户提供指导并确保应用程序的直观性至关重要。需要重新考虑引导过多的编程。

　5. 允许用户重看教程

提供播放教程条目以防止首次错过某些信息。

　　6. 让学习变得有趣味性和可发现性

建议使用动画和交互方法。

　7. 重启程序时恢复先前状态

保存并恢复程序，以帮助用户返回其原始位置和原始状态。

　8. 确定呈现方向(横屏/竖屏)

如果应用程序同时支持纵向和横向模式，则在当前屏幕方向上显示欢迎页面;

如果它只能以一个屏幕方向呈现，它将始终朝着那个方向;如有必要，可引导用户旋转设备。

　9. 避免显示应用内许可协议和免责声明

应用程序商店在下载应用程序之前呈现协议和免责声明。

　　10. 确保一致性和可识别性

在所有平台和屏幕上保持页面布局一致，确保文本和背景颜色与最小可识别对比度相匹配。

参考来源：

https://material.io/guidelines/growth-communications/onboarding.htmlonboarding-top-user-benefits

https://developer.apple.com/ios/human-interface-guidelines/app-architecture/onboarding/

作者：Meowmaid

资料来源：https://www.jianshu.com/p/c50200ac0f7b

本文是在@Meowmaid的许可下发布的。

该地图来自unsplash，基于CC0协议

« 制造流行度：用6分 | 代购源码网站基础优化的细节是什么？ »