[[新手指引和帮助画布.canvas]]
#交互设计
# 可参考产品
- [[Shopify]] 每年都有很大的更新，整个产品都比较成熟。
# 类型
## 常规新手指引
### 浮窗的形式
最常见的那种，有操作步骤的，半强制，可跳过。
### 动态图片展示
更友好和轻量的的新手提示，再 Hover 时展现。
### Onboarding 类的展示
很简洁，感觉这样用户可能会更有看下去的欲望？至少我是这样。
![[Pasted image 20211011140153.png]]
## 就地解决
### 直接在新手引导中完成设置？
Slack 在初次使用会直接让用户进行一些 preference 的设置，这些设置肯定也在更深的位置存在，但是这样确实变得非常简单。
### 常见帮助 icon 与固定显示
可以再Popover中插入动态图片，解释起来更加生动。
### 在首次使用某功能后出现
^f11e27
1. 来自Airtable，首次增加了一新的视图。
2. 来自 Arc 新增标签时。
3. 来自Arc，首次次使用Easel后出现。
4. 来自 miro
5. 来自 Artboard，插入一个模板后，出现了一个 [[Alert 警告提示]] ，就不会那么打扰。 
## 复杂多步骤指引 Quick star
### Housepro Call
一个 TMS 产品。
1. 整理的 Checklist
2. 进入对应任务的步骤
3. 通过Start Tutorial 进入实操。
### Framer
[Untitled – Framer](https://beta.framer.com/projects/Untitled--jPQPB7gvD94Y4ph7vFZO-2kMtK?tutorial=vwnd_CYKcoQ&node=augiA20Il)
视频结合界面做的比较好的，特别是看一部分视频，自动暂停让用户去操作。就像有人在身边教学一样。
### Emerge 与 [[Shopify]]
- 在首页展示需关注的核心任务。
- 把新手需要做的事都列在工作台上，和 shopify 有异曲同工之妙。
### 小饿通
^830abe
比较好的方案，可以和 Jira 的任务模式结合
- 右侧可以收缩展开
- 当前界面配套的图文教程和视频常驻（当时 C3 的想法被实现了！）
- 全局搜索直达文档界面 
### [[Jira]] 右侧任务
^143040
优秀方案
- 任务列
- 可唤起界面显示，可随时缩小。
- 缩小在右下角
- 也有视频
1. 来自 [[Jira]] 的 
### Moodo
 来自 Moo. Do
### Loom
来自录屏软件 Loom 
### Tpad
项目管理工具 [[Tpad]]，也非常的细致，应该是做了大量的思考的。 
### Vika
[[vika]] 表感觉引导的也不错
### 金蝶精斗云
类似游戏任务的效果，虽然视觉差点，但是能解决用户问题。
## 详细文档类
1. [General checklist Shopify Help Center](https://help.shopify.com/en/manual/intro-to-shopify/initial-setup/new-to-shopify-checklists/general-checklist) shopify 为各行各业的人准备了上线商城的任务清单，非常的详细。
# 按流程
## 功能的露出
石墨文档给一个禁用的功能，通过 hover 来介绍。
# 最佳实践
## 按场景
### 面对全新产品，流程较复杂，用户无法自己完成。
客户不知道从哪里开始，需要有人介绍，此时需要有一个合理系统的流程类指引。通过客户反馈与调研可以知道，用户关心哪些核心流程，例如销售流程，采购流程等，让用户学会产品核心使用流程，了解核心价值。
- 通过多步骤的指引方式，列出用户关心的流程。
- 交互很新颖，例如新的工具和新的交互，可以通过嵌入视频，或精心制作的互动式引导。
### 具体某功能的介绍
不要想着一次性强加过多的知识到用户，通过给到用户大的方向，在使用过程中，合适的时机给到指引。
- 非模态带动态演示的弹出窗口。[[新手指引和引导 Quick Star & Onboarding#^f11e27]]
## Do
### 在恰当的时间出现帮助提示。
- 有些低频，但又需要提示的功能，可以在用户第一次操作（初始使用）时/后出现。
- 我第一次点赞了一个图片，通过[[消息提示 Toast&Message]]贴心的告诉我在哪里可以找到。![[CleanShot 2023-06-02 at 20.39.01.gif]]
- 例如：我第一次使用幕布的小圆点功能，它进行了更多的提示。
- [[快捷键交互设计#^fae2c9|click up的提示案例]]
- [[miro]] 在我初次使用贴图后，也出现了相关提示。
- 利用空状态进行提示
- CRM 产品 Freshmale 
## Don't
### 强硬的大量介绍内容
用户真的没有耐心。
## 相关
[[管理后台网站新手指引]]
## 资源
- [Superhuman's Secret 1-on-1 Onboarding Revealed](https://growth.design/case-studies/superhuman-user-onboarding) 
- People are **more likely to remember** things when faced with an unexpected situation. In this case, the idea of going through my mailbox without a mouse is very unusual.当遇到意外情况时，人们更容易记住事情。案例：在没有鼠标的情况下翻阅我的邮箱的想法是非常不寻常的。
- [Onboarding love 🖤 Create onboarding flows like Top SaaS](https://www.marbleflows.com/onboarding) 一个专注收集on boarding 流程的国外网站，还做成了交互，非常的厉害了。 
- <https://www.figma.com/file/hFE3R2k8sdkrV9xq2SZdni/Customer-onboarding-designs-%26-components---by-Bento-(Community)?node-id=50%3A48005> 一个非常棒的新手引导研究案例，Figma文件。
- [Personalized & Embedded User Onboarding Software | Bento](https://www.trybento.co/) 一家专注Onboarding的国外第三方创业公司，不得不说国外是真的很分啊。