看作品
AI资产
AI资产
AI设计
AI设计
学课程
找工作
找设计师
找素材
登录
注册
1.5.6
看完59个案例,我总结了用户引导设计方法
行空设计
珠海
/
设计爱好者
/
2年前
/
3207浏览
版权
私信
关注
看完59个案例,我总结了用户引导设计方法
行空设计
关注
移动端常见的引导类型有以下6种,接下来我们可以从其定义、适用场景、设计拆解来看看每种类型引导页该如何设计。
新手引导页
定义:通过整页面的介绍来帮助用户理解产品。
适用场景:一般用于产品冷启动、较大版本升级后的新手引导。
设计拆解:引导页一般3-4页,图文➕操作按钮(如跳过)。说明文字需简明扼要降低阅读成本,视觉上需传递产品品牌、情怀态度。另外如内容类、社交类APP会把了解用户的相关设置放在引导页,设计上更偏向表单类,在此不过多展开。
由于引导页的设计越来越侧重情感化,主视觉除了
静态产品界面图
,还有提升用户观感和参与度的(串联式)
插画、
(滚屏交互)
动画、微动效、视频
等等。
静态产品界面图,新手引导较常见的设计方式
收藏
功能性插画,是产品功能的插画形式表现
收藏
场景式插画,以手绘/矢量插画形式传递产品价值
收藏
串联式插画,前后插画是连贯的
收藏
滚屏交互动画,用户(左右)滚屏时进行动画转场,形成互动效果
收藏
微动效/动画,该类引导页有酷炫的动画,一般结合滚屏交互增强用户体验
收藏
表单类引导页,相关设置前置以便产品使用
收藏
复合型引导页,一般常见于工具型产品,插画引导页+设置页
收藏
分步蒙层引导
定义:通过分步式的“高亮重点”将产品功能进行逐一介绍。
适用场景:作为产品新手引导,传统的分步蒙层引导叠加于产品界面上方,干扰性强且单次可传递的信息有限,不推荐使用,除非是
功能特别复杂
、
新概念或类游戏
的产品。
设计拆解:分步引导尽量控制为3步,图文➕步骤进度(可选)➕操作按钮(下一步/上一步/跳过)。说明文字需尽量精简,可以让用户快速
了解产品功能布局及特色
。
收藏
收藏
收藏
收藏
弹窗引导
定义:通过弹窗形式对产品使用途中的关键特性进行指引。
适用场景:弹窗承载信息量适中,一般用于
版本更新说明
、
功能引导
、
关键任务操作指引
、创新微交互演示或
运营活动
。
设计拆解:结构通常为上下布局,图文➕操作按钮。具体需根据所传递的目标信息进行设计,如更新说明以常规图文排版呈现清晰即可,而运营类弹窗视觉可跳脱规范外以吸引用户参与活动。
收藏
嵌入式引导
定义:嵌入产品流程中的引导页面或提示组件,对使用过程中重要功能进行说明。
适用场景:比弹窗引导干扰性低而接受度高,可以用于
新手引导(教学任务)
,
(危险)功能引导
,运营活动等,功能引导还可以引申为
空页面引导
。
设计拆解:嵌入式引导作为产品使用流程的一部分,需根据具体业务进行设计。运营活动通常用嵌入式的提示组件,图文➕关闭(可选),虽干扰更小但建议活动内容需和当前页内容相关。
收藏
操作交互引导
定义:用户在使用过程中触发的操作类引导提示。
适用场景:该类提示较轻量,一般在隐蔽功能触发时出现,介绍该功能的使用方式,帮助用户正确的使用。常见于工具和视频类产品。
设计拆解:该类引导侧重功能操作信息的传递,文字➕手势图(可选),图片信息传递效率高于文字,尽量结合图标图片提高阅读性,同时要注意精简文本。
收藏
气泡引导
定义:通过轻量气泡形式在功能更新时或首次使用时提示用户。
适用场景:气泡属于非模态弹窗(不影响当前操作),干扰性最小,可用于隐蔽小功能引导,内容推荐等。
设计拆解:设计元素有文字➕图片(可选)➕操作按钮(可选)。根据出现位置可分为toast和popover。toast通常出现在顶部或底部且会自动消失,最初为纯文字,后续为满足更多场景,演变出带操作按钮的气泡snackbar。popover气泡卡片出现在相应功能附近,有上下文关系且可以包含更多内容元素,其中纯文字提示气泡通常称为tooltips。
功能引导/tooltips
收藏
功能引导/popover
收藏
内容推荐/snackbar
收藏
变体/常驻提示条
收藏
那上述类型该如何在设计中正取使用呢?可以按以下步骤进行思考:
引导目的:
产品新手引导、功能提示、操作指引、运营推广
类型选取:
根据引导目的,结合具体用户场景下所需引导的强弱,选取合适的引导类型。上述引导类型的强度(信息量&干扰性)排序如下,页面引导>分步蒙层引导>弹窗引导>触发式操作引导>气泡引导。
引导设计
:单个提示的出现时机、视觉展示、消失机制、出现频率。还需注意一个页面中切勿同时重叠多个提示,app启动周期内注意较强引导数量如控制运营弹窗个数,避免影响用户体验。
16
举报
|
声明
23
分享
原创文章
UI
APP设计
引导页设计
相关推荐
换一换
弥散风蛇年海报设计教程
88
行空设计
会员精选
李嘉文个人作品集
337
Max麦麦
推广
轻质感等级勋章教程,超细节
212
行空设计
1500+大厂24节气海报,不重设计灵感(附资源)
352
行空设计
多巴胺配色不求人,11个经典案例讲透
1348
行空设计
关注
ui
1
甜甜圈魔王
玫瑰故事✖️刘亦菲Q版头像集.gif✖️基础教程
101
行空设计
平面理论告诉你,UI设计如何更有吸引力?
2
行空设计
阅读类APP·轻质感缺省图练习
1
行空设计
AICG落地✖️劳动节日海报
25
行空设计
UI作品集有效制作15点,HR都会多看几眼
2
行空设计
评论
登录
评论你的想法~
表情
发布评论
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
你可能喜欢
换一换
从冷峻科技到优雅雕塑 | M22品牌VI设计
206
干杯设计
「Alethea AI」品牌 & 视觉识别 - 检测AI制品专业机构
234
AtomergStudio
COZSENSE|家居品牌全案设计
331
人可_
变了,又没变 |杨天真的壹心娱乐VI升级
187
干杯设计
《玩界风格设定》
137
小脑府设计团队
东南亚零售电商项目-OH!SOME
176
夏夏夏目
相关收藏夹
换一换
关注
ui
1
甜甜圈魔王
关注
ui
QLHBFFbSMN
关注
学习
Z632711887
关注
C端ui
Barbarakean
关注
方法论
黄歪歪歪
关注
勋章设计
陈贞浩
大家都在看
查看更多
IP 形象
国庆
LOGO 设计
海报设计
插画设计
壁纸图片
作品集
VI 设计
UI 设计规范
AI 绘画
表情包
PPT模板
ui。=
ui 、
ui \
#ui
ui,
ui·
UI!
ui
ui
#设计
#设计
设计
#设计
以设计
设计’
设计
it设计
把设计
设计.
设计in
in设计
AS设计
it设计是
by设计
、设计
设计的
及设计
设计】
设计
是也设计
设计、
设计
#设计#
a设计
设计是
设计‘
的设计
设计
登录注册
16
登录即可同步推荐记录哦
23
登录即可加入我的收藏
评论
登录即可评论想法
分享
分享