插画设计说明内容-超全面！交互设计师的工作流程指南

工作过程

交互设计师的工作不仅仅是输出设计方案，还要参与前期需求讨论、后期开发、测试验收等产品设计和实现的多个环节。在得到新的项目需求后，从设计思维开始，早期产品分析，产品设计，设计评审，用户测试，直到产品上市。 我们的工作流程如下：

在项目开发过程中，不可避免地会产生一些产出。 以下是我们总结的输出产品以及可以同步的平台。

需求分析阶段

需求分析是软件规划阶段的一项重要活动，也是软件生命周期的重要环节。 这个阶段是分析系统在功能上需要实现“什么”，而不是考虑如何“实现”。 需求分析的目标是分析、整理用户对要开发的软件提出的“需求”或“需求”，经确认后，形成完整、清晰、规范的文档，以确定软件需要实现哪些功能实施以及需要完成哪些工作。 此外，软件的一些非功能性需求（如软件性能、可靠性、响应时间、可扩展性等）、软件设计约束以及运行时与其他软件的关系也是软件需求分析的目标。

越是高水平的交互设计师，越需要有产品思维，越需要从产品的整体角度、产品的本源来考虑用户的诉求。 因此，虽然这个阶段是产品经理和产品设计师比较关注的知识点，但作为交互设计师，你也应该逐渐积累这方面的技能。

1、用户研究报告文件

文档的价值和目的

为什么要进行这项调查？ 可以是确认产品功能是否好用，可以是了解用户喜好，也可以是推广新产品。 以本次调查为例，目的是通过用户研究，理性了解用户，根据其目的、行为、态度差异将其区分为不同类型，然后从每一类型中提取典型特征，给出人群画像，最终发现 找出不同人群的产品偏好和潜在需求，以及他们对品牌的认知度，以指导营销和产品设计。

文档目录结构

2、用户画像

用户画像是根据真实数据严格定义的高保真虚拟用户，是真实用户的虚拟代表。 用户画像不是真实的用户，但在设计过程中代表了真实的用户。 用户画像并非虚构，而是经过严格研究的。

这里我们需要区分一下人物角色和用户画像的概念。 角色通常在产品概念的早期阶段使用，有关角色的信息通常是由我们编写的。 我们希望角色与我们收集和了解到的内容保持一致，并且为了使角色更加逼真，他们的一些具体细节可以虚构。 通过群体定量统计分析、用户标签处理、海量数据挖掘，获得用户画像。 特别需要指出的是，有些人把角色和肖像当成同一个概念，但它们随着产品阶段的不同而处于不断变化的过程中，其功能和作用也有所不同。

用户画像的目的

为了保证产品是为有需要的人设计的，也为产品设计提供了依据。 有助于了解和定位目标用户、挖掘核心需求、丰富场景、预测趋势。

3、产品功能列表

当需求分析、筛选、优先级确定后得到结果后，交互设计师需要将产品功能以列表的形式呈现出来。 这是分析需求后提出解决方案的第一步。

产品清单价值

功能需求清单的价值首先在于帮助产品经理理清思路，其次可以帮助项目组的其他成员了解产品的功能需求，以便提前做好相关准备。

功能列表内容：

4.场景分镜

故事板起源于动画行业。 在影视中，故事板的作用是安排情节中的重要镜头。 它们相当于视觉脚本。 故事板展示了各个镜头之间的关系以及它们如何连接在一起，为观众提供完整的体验。

如今，“故事板”也广泛应用于产品设计过程中。 产品设计分镜和动画、影视制作分镜虽然都是由一系列图片和语言组成的视觉表达，但它们之间表达的信息和目标用户是不同的。

故事板的价值

我们“产品设计故事板”的目的是让产品设计者充分了解特定产品使用场景下用户与产品的交互。

原型制作阶段

明确产品定位后，就进入原型设计阶段。 在这个阶段，交互设计师需要编写交互文档。 交互文档，即交互设计文档。 英文“Design Requirement Document”，缩写“DRD”。 主要用于承载设计思想、设计方案、信息架构、原型线框图、交互指令等。

DRD不是项目的必需部分，一般不会为交互设计师预留相应的时间估算。 如果没有这份文件插画设计说明内容，项目仍将继续，但项目可能会产生不必要的沟通成本和时间成本。 严重时，工程质量也会受到影响。 因此，交互设计师需要决定是否要写。

以下是DRD的目录结构：

由于是非必要环节，这里不再详细介绍。

在产品的设计过程中，功能结构图是必不可少的。 信息架构图取决于产品和PM本身。 通常我们在初步确定产品功能结构图（产品功能框架）后开始绘制产品结构图。 在产品设计过程中，产品功能结构图是产品概念化阶段的初始输出，产品结构图是产品概念化最终阶段的输出。 当产品结构图完成后，我们心里就​​对产品的基本外观有了一个大概的了解。 轮廓。 同时，以产品结构图作为绘制线框图的基础，可以避免我们在产品设计绘制时进行修改，陷入只注重细节而误入森林的陷阱。

1、流程图的基本构成及常用符号

流程图是由特定的图形组成的，但具体的外观是由图表本身的目的和读者的阅读习惯或惯例决定的。 因此，所使用的图形并不固定，形式也不是最重要的。 达到描述效果，读者可以阅读。 就明白了。

2.业务流程图（泳道图）

业务流程图不是操作流程图或页面流程图。 它是产品的整体业务流程，与业务直接挂钩，可以说是产品的核心流程。

影响

通过业务流程图，深入研究关键事件的流程，分析为什么这样做，探究更深层次的问题，从而对现有不合理的业务流程进行重组和优化，进而制定优化方案，改进现有流程； 详细说明该项目中各个角色之间的关系如何？

图纸规格/建议

3、功能结构图

功能结构图是按照功能的从属关系绘制的图。 图中的每个方框称为一个功能模块。 功能模块可以根据具体情况分为较大或较小的尺寸。 最小的功能模块可以是程序中的各个处理过程，而较大的功能模块可以是完成某项任务的一组程序。 通俗地说，功能结构图就是以功能模块为类别，介绍该模块下各功能的组成部分的图。

影响

4.信息架构图

信息架构属于用户体验的结构层吉祥物，是产品的骨架。 一般来说，产品经理或更高级别的经理会给出大致的框架。 除非是重大产品迭代，否则不会有重大变化。

影响

信息结构图组件

5、任务流程图

任务流程图通过图形化的表达方式解释了产品在功能层面的逻辑和信息。 它可以更加清晰直观地展示用户使用某个功能时会产生的一系列操作和反馈图标。

影响

根据业务流程，梳理任务流程，讲解角色和程序之间的交互过程，你如何操作，系统如何反馈。

任务流程与需求文档中的业务流程不同。 虽然都是流程图，但业务流程更注重业务限制、后台逻辑等，并没有过多关注用户操作逻辑。 任务过程需要关注用户如何操作、界面如何提供反馈等，从而引导用户完成用户目标。

六、产品结构图

产品结构图是综合展示产品信息和功能逻辑的图。 简单地说，产品结构图是产品原型的简化表达。

影响

它可以在早期需求评审或其他类似场景中作为产品原型的替代品，因为产品结构图比产品原型具有更低的实施成本，并且可以快速添加、删除和修改产品功能结构，从而降低此方面的PM实施成本过程。

7. 线框

页面线框是在页面级别解释产品信息的图形表达。

成分

8.多种互动指令

限制

限制，包括范围值、极限值等。

范围值主要指数据的取值范围。 例如插画设计说明内容，当你的界面上出现下拉菜单、筛选按钮、滑块等控件时，你必须明确标记它们的选择范围，否则开发者将不知道如何设置它们，如图所示。

限制值主要指数据的显示限制。 比如应该显示的最大字数、如何显示废弃的字、是否换行等等，如图所示。

状态

包括默认状态、普通状态、特殊状态等。

默认状态主要是指默认显示的文本、数据、选项等。 这些内容需要进行标记，否则开发者可能很难意识到这是用户填写的效果还是默认就有的。

常见状态主要是指某个模块经常遇到的一些状态。 这些状态需要在原型上表达。 例如，普通的积分模块一般会有三种状态：未登录、登录后未登录、登录后已登录，如图所示。

特殊状态一般是指异常情况下的样式、文案、说明等卡通形象，如图。

操作

包括常见操作、特殊操作、误操作、手势操作等。

普通操作主要是指正常操作时获得的反馈状态。 例如，一个普通的翻页控件在不同的操作之后会立即出现如下状态。

特种作业主要是指极端情况下的作业。 一般用户不会这样操作，但是一旦遇到极端的情况，还是需要想对策，因为对于开发者来说，无论是正常的还是极端的操作情况，都得写相应的代码。 如下所示，是填写用户信息的示例。 在没有写交互描述的情况下，打开往往会遇到很多问题：已经检查了2个人，又检查了第三个人怎么办？ 如果“张某某”被勾选了怎么办，下面的区块中就会相应出现张某某的信息，那么此时是否允许修改张某某的身份证信息？如果允许的话，之后还会检查“张某某”吗？修改吗？提交表格后需要更新。添加参保人信息？修改身份证号以外的信息，还会勾选“张XX”吗？提交表格时，原来保存的信息还会被勾选吗？被覆盖吗？出生日期、性别等修改了，身份证号码不符怎么办？…

面对各种复杂的情况，一方面要积极与开发人员讨论，看看是否有其他方案可以简化各种逻辑判断； 另一方面，得出结论后，我们必须写出清晰的交互指令。 避免开发人员遇到棘手的情况。

误操作主要是指用户错误操作的情况。 但是，我们在设计时应该尽力避免用户犯错误的机会。 如图所示，提示已经告诉用户“库存有5件”。 如果用户此时在“数量”栏中输入“6”，会发生什么情况呢？ 系统会自动为用户将其更改为“5”并省略。 由用户手动修正。

手势操作主要指用户操作移动产品的方式。 常见的有单击、双击、长按、捏合、拉伸、滑动等。