欢迎页/新手指点页—建立优质的出品第一映像

引导页

一、定义

Onboarding英文入职指导,个人翻译成——新用户欢迎页(新手指导页),指的是开行App的启航页(Launch
Screen)之后的欢迎页面,是用户对产品的第一影象。
谷歌 Material
design定义的拔取意况仅限于新用户在接纳集团下载完成,第五次运行App的体验。
Apple Human Interface
Guidelines定义的情况还包括于再次回到App的用户建立联系。

迎接页面

二、作用

掀起急切体验的新用户熟练界面,欢迎用户,帮忙用户显著询问App的用处,激励用户使用,提高参预度和留存率。

三、模式

Material design定义了两种情势

1. 独立自主采用模式——允许用户自定义体验

使用意况:UI可以遵照用户个性化定义,App有设置和需要用户同意的伸手;此处不相宜传达App正在解决一个新的挑衅或者提供一种新的功利、用途,也毫不通过此处告知用户首要UI的转移
可取:暗示用户如何与UI交互,个性化定制给了用户控制感,并让用户感兴趣,期待后续内容

注意:

  • 为用户提供对优化体验有意义的,影响显著的抉择;
  • 呼吁不可能通过正规使用得到用户信息和偏爱;
  • 维持选取项简洁,每个屏幕不超过10项,尽量控制在一屏上仍然让多屏幕看起来相互连接
自选设计模式1



自选设计模式2



自选设计模式3
2. 飞跃入门格局——介绍设置,直接让用户起初感受

应用情况:App已经计划好了促进用户出席和存在的利用作为;不适用于处理新挑战和提供新劳动的景色
可取:急速启动中央职能

注意:

  • 刺激用户操作,避免出现空白页(关于空页面的并行设计指南详见
    https://www.jianshu.com/p/d54ec8733bf1);
  • 提供支援和指点,通过UI指示,为用户提供就学怎么着运用App的空子
  • 预先显示最关键的操作,优异与用户参与度最细心相关的操作,或者以指示的花样向用户介绍大旨成效。
核心操作
3. 极品福利\最大便宜形式——简洁的轮播卡或动画卓绝呈现选择的便宜

拔取情况:处理新挑衅和提供新劳动,告知用户主要UI的转变;不适用于群众已非凡熟稔的界面、益处以及拔取格局
优点:优秀体现拔取App的六个根本的功利

注意:

  • 分选正确的与个人相关的利益点,而不是可是描述效用,陈述App可以缓解的题材,创制的重大利益,常用特色
  • 行使电动切换页面,旋转木马卡片样式每2s或3s自行切换3张,再添加分页导航,用户便知道欢迎页不是单一屏幕,当用户触控页面时,自动切换应该告一段落;
  • 屏幕可向前后滑动,提供开启或起初体验按钮
  • 摄像内容只包括一个先河按钮,没有分页点
  • 保障视觉的连续性,在角色、风格、排版、和按钮颜色等方面注重保持视觉连续性
  • 尽量使用插画和直观的意况,不要表现UI界面
旋转木马卡片

四、设计指南

1. 考虑承接的上一屏页面和下一屏页面
在欢迎页在此以前提供启动页(launch
screen),具体可参见启动页设计指南(https://www.jianshu.com/p/fe4bbd9ed423)
制止在欢迎页以前要求安装音信,尽可能从设备安装、默认设置中收获,或者通过共同服务得到。假诺必须要乞求设置音讯,可以第一次指示,让用户中期在设置中修改。
平时欢迎页之后会连续到登陆,用户很容易依照刚刚学到的内容举办操作。

2. 便捷响应
制止闪屏、菜单和下令影响启动速度,让用户连忙到达内容,最先拔取App。
假如有学科和介绍,提供跳过的方法,不要向再次回到用户提供这多少个情节。

3. 预期用户的帮忙需要
当仁不让搜索可能碰到困难的用户并提供帮扶。比如进入娱乐加载中或中断游戏时,可以提示有用的操作。

4. 课程内容不可以离开要点
为新用户提供指导,保证应用的直观是最重大的,带领过多的顺序设计需要重新考量。

5. 同意用户重看教程
提供重播教程入口,以防第一次错过某些消息。

6. 让学习变得有趣味性和可发现性
指出拔取动画片和交互情势。

7. 重启程序时回升原先气象
保存并復苏程序, 协助用户回到原岗位、原状态。

8. 确定突显趋势(横屏/竖屏)
在当下屏幕方向突显欢迎页,如果App同时补助竖屏和横屏格局;
假诺不得不在一个屏幕方向上呈现,就一贯维持该方向;有必不可少的话可以带领用户旋转设备。

9. 避免显示应用内许可商榷和免责声明
在动用下载在此以前,应用公司显示协议和免责阐明。

10. 保证一致性和可识别性
保障页面布局在具有平台和屏幕上的一致性,确保文字和背景颜色符合最小可识其它相比较度。

参照来源:
https://material.io/guidelines/growth-communications/onboarding.html\#onboarding-top-user-benefits
https://developer.apple.com/ios/human-interface-guidelines/app-architecture/onboarding/

发表评论

电子邮件地址不会被公开。 必填项已用*标注