引导页

一、定义

Onboarding英文入职带领,个人翻译成——新用户欢迎页(新手指点页),指的是开行App的启动页(Launch
Screen)之后的欢迎页面,是用户对成品的第一印象。
Google 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/

发表评论

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

网站地图xml地图