1. 主页 > 设计资讯 > 行业动态

新手指南设计规范

互联网产品设计中的新手指导,就是让用户在短时间内快速了解产品的特性和用途,轻松体验产品的功能,达到自己的目的。

一、什么是新手指南

“成长黑客”提到:

欲望-摩擦=转化。摩擦是一个令人讨厌的障碍,它阻止人们完成他们想完成的事情。摩擦直接影响用户的转化,最大的摩擦点是用户旅程的起点——“新用户体验”。

新手指导的存在是为了消除“新用户体验”中的摩擦点。

回想我们刚进公司的时候,公司会给大家安排入职培训,让新人快速融入新环境,开始新工作。这其实就是公司给我们安排的“新手导游”,新手导游英语入职,本来就是入职培训的意思。

新手指南设计规范(图1)

互联网产品设计中的新手指导,就是让用户在短时间内快速了解产品的特性和用途,轻松体验产品的功能,达到自己的目的。

一般来说,新手指导有两个目的:

让新用户掌握核心功能;提高产品留存率。

二、设计原则

根据工作项目,总结了七项基本设计原则,这些原则可以为设计实践提供指导,也可以作为评估设计质量的内部标准:

新手指南设计规范(图2)

1.建立情感联系

通过拟人化的形象和文案与用户建立情感联系,让用户有继续的欲望。

建立情感联系是人的基本需求。当人们开始对事物付出自己的感情时,就会变得更愿意有深刻的理解,更难以割舍。

新手指南设计规范(图3)

2.建立用户目标

提示用户的兴趣点和里程碑进度,比如签到金币,显示7天打卡进度和每日奖励,以此吸引用户每天签到,为用户确立每天签到的目标。

新手指南设计规范(图4)

3.及时反馈,强化兴趣点

用户操作后及时给出反馈,突出兴趣点刺激用户,让用户清楚的知道自己通过操作能得到什么。

新手指南设计规范(图5)

4.设计节奏

通过周期性的反馈来刺激用户,减少用户的疲劳感。如果把新手引导的用户旅程比作看电影,我们会在不同阶段给用户一个小高潮,最后把剧情推到剧末的最高峰。这种节奏可以让用户感觉更沉浸在操作过程中。

新手指南设计规范(图6)

5.分层开函数

面对一些内容多样的产品,我们往往采用分级和开放功能的方法,避免用户一次承受过多的学习。根据功能的重要性和核心程度,分前、中、后三个阶段开放功能,减少了单一学习的量,给用户更长的过渡期。同时也可以避免用户在前期不了解产品时的误操作,减少功能无法使用的束缚感。

新手指南设计规范(图7)

6.避免单一风格

当我们采用统一的引导方式时,用户很容易找到提示位置,可以概括为反复点击,从而形成“惯性思维”。我们需要做的是根据不同的具体功能改变引导方式。打断玩家的“惯性思维”,让玩家多思考,才能真正理解指导的内容,而不是无意识地处于玩空的状态。

新手指南设计规范(图8)

7.简化词语的表达

尽可能以视觉形式显示信息。如果一定要用词,就尽量简化,通过分词和红标帮助用户查看关键信息。

新手指南设计规范(图9)

第三,设计模式

设计模式这个术语来自于《设计系统》这本书,用来指代任何可重用的界面元素,包括按钮、文本框、图标、颜色匹配、字体,以及可重用的交互行为和功能流程。这些元素用于解决特定的设计问题和满足特定的产品要求。

设计师可以根据场景直接使用设计模式完成新手指导的界面设计,也可以以设计模式为出发点,衍生出更多业务场景的解决方案,满足个性化设计需求。

新手指南设计规范(图10)

下面将从定义、组件、使用场景、使用规则和示例方面介绍六种常用的新手指导设计模式:

新手指南设计规范(图11)

1.指南页面

定义:

用户第一次打开app时出现的指南页面,基本由3-5页组成。在用户使用产品之前,为产品营造良好的基调和氛围,宣传产品的功能和亮点,或者告知用户核心的操作方法。指南页面的内容必须经过精心选择,以确保能够给用户带来新鲜感,吸引他们的注意力。否则对用户来说就是一种干扰,他们只会选择快速通过。

新手指南设计规范(图12)

组件:文字介绍+图片介绍+操作指导。

使用场景:用户第一次应用app,并充分展示APP的功能。

使用规则:

引导页最多不超过5页;图片介绍尽可能符合真实的使用场景,并且有趣;有明确的操作引导用户进行下一步操作,例:翻页指示、下一步按钮。

2.覆盖指南

定义:

遮蔽指南,顾名思义,就是用黑色半透明的面具遮蔽一个产品的整个界面,在面具上方标出界面,搭配手势、文字、符号、插图等。这种引导模式可以让用户专注于圈出的功能点或手势描述,而不受页面上其他元素的干扰。

新手指南设计规范(图13)

组件:黑屏+高亮内容+内容介绍+操作指导。

使用场景:展示新功能,说明功能在界面中的位置变化,说明操作方式,体现具体的手势交互划分,说明界面的整体结构。

使用规则:

内容聚焦:让用户一眼就能看到高亮内容,切勿被其他元素干扰;内容介绍必须保持与高亮内容的亲密性;操作按钮显而易见,可能的话将整个页面都设置为点击热区。

3.气泡/弹出提示

定义:通常在用户第一次进入页面时出现,其表现为操作按钮旁边弹出一个气泡提示框或直接弹出一个弹出窗口。

新手指南设计规范(图14)

组成元素:气泡+文字;弹出窗口+图形信息+按钮。

使用场景:通知用户新功能上线,引导用户使用核心功能,或者通知用户一些隐藏的菜单内容。不想过多干扰用户操作的时候用泡泡。如果当前提示内容比较重要,内容较多,建议使用弹出窗口。

使用规则:

在用户进入相关场景后才出现;气泡提示需采用较为突出的颜色吸引用户,且用户必须点击指示内容后才会消失,否则很容易被忽略;弹窗内尽可能以图文方式介绍。

4.动画/视频指导

定义:动画和视频的共同优点是非常直观和吸引人。用户可以根据动态演示快速了解整个产品。但是这种指导方式的内容不能太长,否则传递的信息量会导致用户失去耐心或者干脆什么都不记得。

新手指南设计规范(图15)

构成要素:文字介绍+内容+操作指导。

使用场景:适用于操作复杂或动态演示直观的产品。

使用规则:

用户无法自己控制演示进度的展示方式,因此内容演示最好控制在10秒以内;只引导关键内容,避免信息量过大;保证演示内容的质量,用户可清晰观察到演示内容,否则建议图文的形式。

5.操作指南

定义:

操作指南会引导你一步一步操作,鼓励用户参与其中,边使用边学习。这样,用户很容易沉浸其中,学习速度也很快,而且由于操作反馈及时,用户很容易获得很强的成就感。

新手指南设计规范(图16)

组成部分:内容介绍+指导内容+操作指导。

使用场景:工具产品和游戏。

使用规则:

操作引导突出且明确指示出操作的方式,否则用户很容易因为操作失败的挫败感而放弃;保持内容与操作的亲密性;操作成功后及时给予反馈。

6.默认任务

定义:

预设任务是指用户输入产品后,自动为用户创建一些与产品表单相关的示例,而不是为用户留下空页面。在引导的同时,突出产品的特点,让用户沉浸在产品的真实场景中学习,让用户在产品的后续使用中更快上手。

新手指南设计规范(图17)

组件元素:引导内容+操作引导。

使用场景:这种指导最常用于工具产品,如原型工具、设计软件、文档、任务列表等产品。

使用规则:

不要限制用户的操作,应用此类引导需要让用户自由探索;需要提前设计好用户操作路径;引导内容要符合该产品实际核心使用场景。

第四,高级应用

在普通设计中应用上述七大设计原则和六大设计模式时,基本上,即使你掌握了新手指导的初步设计,高级应用是什么?

新手指南设计规范(图18)

就拿最近修订的金币来说,最新版本的金币频道取消了传统的新手指南(什么?没有新手指导是否先进??),取而代之的是一个上锁的庄园,一个独特的新人和任务交换楼层。淘宝为什么要这么做?是因为数据表明新手指导没用吗?其实仔细分析一下淘宝呈现给新人的内容,其实就是以上设计原则和模式的灵活运用。

对于正在淘金币的新人来说,首先要学习什么是金币,然后学习金币庄园的游戏规则。学习量其实很大。因此,与原来的操作指导相比,金币淘选采用分级开放的原则,让用户先了解金币是什么。7天之后,他们可以解锁庄园,然后学习如何玩庄园的游戏。在此之前,他们总是把奖金作为一个突出的兴趣点,每天吸引用户前来。

另外这里也应用了预设任务的引导模式,严格来说是预设任务的变体。其实有三个预设任务:1。登录;2.金币兑换;3.金币任务。

一方面是培养用户的签到习惯;另一方面,用户需要通过交换和任务的地板来尝试一下,直接体验什么是金币,通过金币的任务来获取金币,获取后交换优惠券,从而了解什么是金币。这样,用户在无意识的引导下,逐渐学会了洗金币和庄园游戏。

写在最后

新手指导的设计规范就像一本武侠秘籍。用秘籍上的招式练武,一定会突飞猛进。但是,最终真正的高手练习是掌握所有招式,这样就没有招式可赢了。

希望大家可以借此设计规范多实践,欢迎分享。

参考文献:

“成长黑客”——范炳

《设计系统》——阿拉·霍尔马托娃

本文由设计学习网整理发布,不代表设计学习网立场,转载联系作者并注明出处.

联系我们

在线咨询:点击这里给我发消息

微信号:ffjianzhan@qq.com

工作日:9:30-18:30,节假日休息