如何做pc端新功能的引导设计
一些自己做设计时的小经验 欢迎交流
由于负责的项目做了一次大的功能和视觉改版优化，也需要重新做一次功能引导。包含调研和着手设计步骤
下面是关于飞书和墨刀的调研：
飞书
分为强引导和弱引导
强引导为重要功能上线的引导，一般为多个功能的引导
弱引导为小功能上线的引导，一般为单个功能的引导
强引导
内容
黑色遮罩、主要功能按钮和提示气泡卡片；其中提示气泡卡片内容包含：标题（功能名称）、内容（主要更新内容）、提示卡片数量、操作按钮（上一步、下一步、我知道了）
形式
采用黑色遮罩+引导提示卡片的样式来进行引导
优点
1.整体色调统一
2.视觉焦点明显，重点内容突出；
3.内容排列清晰
页面示例
弱引导
内容
提示气泡卡片内容包含：标题（功能名称）、内容（主要更新内容）、操作按钮（我知道了）；操作按钮可能没有；
形式
提示卡片来进行引导
优点
1.整体色调统一
2.视觉焦点明显，重点内容突出；
3.内容排列清晰
页面示例
墨刀
分为强引导和弱引导
强引导为重要特色功能上线，一般为多个功能的引导；又分为了带有功能性操作的引导和纯展示类的引导
弱引导为小功能的引导，一般为单个功能的引导
强引导
纯展示类的引导
左侧内容
标题（上新啦！）、tab页签（主要功能）、立即体验按钮（和关闭按钮功能相同）
右侧内容
关闭按钮、视屏区域（对应左侧tab页签功能）、功能标题、功能简介
形式
采用了深色遮罩+卡片的设计；卡片为左右结构，左侧为导航区，右侧为内容区；功能介绍用视屏的形式展现
优点
结构清晰，上新功能一目了然，用视屏动图来表现功能生动形象。
页面示例
带有功能性操作类的引导
内容
可操作内容（直接传递出功能图片）、标题（功能内容标题）、内容（功能操作引导）、确定按钮
形式
深色遮罩+白色卡片，卡片内容为水平居中对齐
优点
内容清晰明了，重点信息突出
页面示例
弱引导
简单小功能引导
内容
功能内容简介（文案简短）、关闭按钮
形式
小气泡卡片
优点
卡片背景为大面具点睛色，视觉焦点清晰，文案精简易理解
页面示例
复杂的小功能引导
内容
标题（功能简介标题）、功能内容动画、功能内容介绍、操作按钮（包含同类功能入口按钮和新功能详情按钮）
形式
气泡卡片
优点
主次内容对比强烈清晰明了，采用视屏+文案介绍的形式展现更新功能，使新功能更易于理解和接收
其他设计参考
调研总结
pc端引导页一般都按照功能大小分为强引导和弱引导，设计形式多样。
强引导一般都是采用卡片+遮罩的设计形式，弱引导只有卡片；
强引导内容中除了有新功能标题和功能内容简介外，添加图片或视屏为比较常见的形式，可清晰明了的传递新功能的内容且有阅读的欲望；
弱引导内容较为简单大多数为功能文案，但也可根据功能大小细分为复杂功能引导和不复杂功能引导；设计形式也是多样，大多数为卡片设计，卡片+功能热区动效的形式也较为常见；
明确需求
跟产品讨论需要引导的页面功能点
区分需要引导的类型
区分强引导的功能点和弱引导的功能点
细分强引导功能点类型和弱引导功能点类型
哪些强引导是需要分步骤，哪些不需要
弱化功能点是否根据内容需要细分为复杂引导和简单引导
梳理引导功能点页面和具体内容
明确功能点存在的页面
明确哪些页面可以存在多个引导
明确哪些页面需要引导的功能点可以有连贯性（分步骤）
明确哪些页面上强引导下需要弱化引导
明确功能点的具体内容
明确功能点的文案，包含功能点概要描述（对应标题，建议10字以内），功能点详细描述（对应内容，建议40字以内）
明确有无需要动画来引导的功能点，若有明确具体需求内容
明确使用概念动画还是功能操作类动画
若使用概念动画，明确动画的核心思想
若使用功能操作类动画，明确操作的动画内容
明确哪些需要图片来引导的功能点，若有明确具体需求内容
明确使用概念图还是功能操作页面图片
若使用概念图，确认图片的核心思想
若使用操作页面图，确认具体图片是否需要做处理，若需要则明确需要处理的点
设计阶段
根据明确的需求开始着手设计并设计组内部评审定稿
根据明确的需求，详细做下引导页的分类，得出通用的类型和需要特殊处理的类型（若有）
查看视觉参考，结合招聘系统开始设计分好的引导页类型进行初稿设计
找出通用强引导类型内容共同点和差异点，就共同点开始设计
找出通用弱引导类型内容共同点和差异点，就共同点开始设计
强弱引导通用模版设计初稿出来时，分别补充进去强弱引导内容差异点，查验是否需要调整
调整好各个通用引导页类型下的设计初稿和特殊处理引导页设计
设计内部就设计模版和设计初稿评审，调整优化设计，得出通用类型的引导页设计页面示例终稿和需要特殊处理的引导页设计页面示例
和产品开发测试人员评审通用引导类型设计和特殊处理的设计
若有问题及时调整，会议上达成意见统一
会后调整设计，找到相关人员再次确认最终达到统一并定稿
完成所有引导页的需求设计
套用通用引导类型定稿的设计开始着手所有具体需求的设计
需要图片和视屏的设计需要设计内部评审和跟产品确认
输出所有引导页的设计
