【干货】交互设计方案规范（附sketch输出模版）

cxz23

上海/产品设计师/4年前/932浏览

版权

cxz23

从内容和形式角度，分享一份合格的交互输出方案的打开方式～

1. 背景

1.1 针对问题：

【用户】设计稿内容形式千人千面，影响方案传达的品质，有障于查阅体验；
【设计师】在方案呈现上，设计师会浪费一定精力（例如要涵盖哪些类目？结构复杂的方案如何拆解表现？设计说明写哪些方面，要细到什么程度？如何标注排版等）
【备忘】目前内容上不够体系化，不利于设计方案的系统性追溯，例如缺少设计构思的记录沉淀。帮助你理清思路，并记录下来，便于回顾。

1.2 应对方案：

把自己的设计稿当做产品去经营，确保逻辑严谨，清晰明确；美观适用，便于迭代和协同；保证用户体验。

目标：01.从内容以及形式上构建一致性，输出一套交互设计稿模版，提升查阅品质；提高设计师出稿效率，帮其理清思路并记录下来，便于回顾。
版本：完整版，简单版
定义内容：内容结构，版式布局，交互说明规则，标注形式等
输出物：sketch（见附件1），Axure（待补充）

2. 内容构成

可区分完整版和简版，对比如下：


版本/内容		完整版	简版	备注
概览（简介）	名称/版本/成员
版本记录
图例说明
设计分析	需求分析（问题/目标/需求点）			需求的价值和原因，即做什么？
设计思路（应对方案/侧重点）		可选	即怎么做（推导出的具象策略）
研究&分析结论		可选	即交互支撑点（备份分析结论，支撑设计方案）
交互方案	结构图（页面结构图/操作流程图）		可选	结构层，逻辑层
页面交互图			交互原型图
通用说明	规范组件/通用模块		可选	规范，可复用的模块
废弃站	过程稿件		可选

应用决策：

结合需求的“重要评级”和需求实际情况（复杂程度/类型/紧急程度）来决策，灵活选用：

基于重要评级：S级应用完整版，A优先应用完整版，B级允许应用简单版；
结合复杂程度：若定义为B级，且结构复杂或需求类型需要，可在简版基础上增加内容维度，反之，可适当简化内容维度，但不能完全降级。
结合时间紧急程度：同理，在评级和复杂度基础上，可结合考虑交稿日期，可适当简化辅助性的内容维护。
注意：项目评级请具体参照附件-UED设计评级

3. 内容说明

结合内容构成，分别具体说明如下：

3.1 概览：

记录需求的基本情况：如需求名称，参与成员，版本记录和通用图例。

需求名称：统一规范，简明扼要。命名格式同iwork，例如：【业务线】版本号_本次需求名称。

版本记录：即更新日志。为迭代而生，便于快速定位，追溯和沟通。录入建议如下：

倒序排列，最新版本（即3，2，1）放置最上方，便于查阅；
发布内容简明且条理清晰，建议标记【增】【改】【删】；格式如：【增/改/删】模块范围（编号+名称）：内容简述；
备注：必要时在此记录关联信息，如状态”定稿版“，超链接，过程情况等。

图例说明：为了读者便于理解，汇总设计稿中所涉及的标识的辅助说明。如：操作/跳转图例、标签图例、流程图例以及手势操作图例等。

3.2 设计分析：

【推导过程完整化结构化，便于理清思路，明确方向，回溯总结】记录庖丁解牛的分析决策过程，并结构化呈现出来，有利于读者了解其来龙去脉。提高设计方案的说服力。也利于设计师本人思路的梳理和方案的完整回顾，从而培养产品思维和体验思维。

主要包含以下3部分：

需求分析：即基于原始需求信息分析得到的需求情况，重点关注需求的背景，目的以及需求范围，便于明确要做什么？为什么做这个，以确保统一战线。

设计思路：即设计目标，侧重点，应对策略，风险问题等。通过设计分析，明确怎么做的问题，为方案设计打好基石。

调研分析：基于具体需求类型，附录相关的研究分析结论，或者数据情况。（例如用户画像，竞品分析，用户体验地图，数据分析，旧版分析等）

注：可根据实际需要，灵活扩展或收敛。

3.3 交互方案：

此部分是设计稿的核心，内容可分为：信息架构图和页面交互图。

信息架构图：是用户体验的结构层，信息的骨架，利于全局纵览。可具象为“页面结构图”和“操作流程图”：页面结构图，意在表达需由哪些部分构成；操作流程图重在清晰且直观的阐述某功能层面的逻辑信息。有助于帮助我们梳理逻辑，避免遗漏。注意事项如下：

内容是否要涉及“页面结构图”或“操作流程图”，基于需求的实际需要来定夺。例如涉及结构优化，信息层级相对复杂，建议设计方案里包含页面结构图，反之可以不体现结构图。
针对内容结构的复杂程度，可基于逻辑关系进行拆解分类，避免杂乱无章，查阅者看不懂。
工具：除模版内提供的线框图外，Axure自动生成外，允许在第三方工具内完成绘制，并插入至此，例如页面结构图-幕布，百度脑图，X-mind；流程图软件-Creately等

页面交互图：具象到页面级，通过图文并茂来表述设计方案。内容主要包含：模块名称，各页面标题+页面原型，设计说明，图形标注。注意事项如下：

命名编号：为便于查找匹配，拆分的模块以及其内的各页面需按逻辑关系来编号命名。如1_模块1名称，1.1_模块内某页面名称，2_模块2... ；02.具体页面名称上建议体现路径关系，例如：1.2_父级页名称>子级名称。
【内容结构】结构要清晰明确，对应信息架构图，结合产品结构进行页面划分；逻辑严谨，美观适用，不重复不遗漏。
排版布局：建议横向排版主流程，纵向排版辅助或分支流程页面；各页面原型图下边排放交互说明；确保页面布局规范，有效传递设计方案。
原型稿： 01.原型图只需画出主流程线即可，其余的可以体现在交互说名里，这样避免杂乱；02.设计稿子尽量使用真实数据；03.相对简单明确的逻辑流程，可省略不画跳转指向(flow line)，尽量不干扰主体原型内容，保持简洁。
图形标注：01.布局整齐有序，尽量不要干扰到设计稿的主体内容；02.统一样式，与图例对应；同一个设计稿中布局样式统一；03.尽量标记出较出稿“修改”，新增或待细化等状态，方便定位。
设计说明：01.与标注编号一一对应；02. 内容条理清晰，定义明确，描述简洁易懂，用词准确无歧义（交代清楚，避免查阅者看不明白）；03.规则类别：简介，操作流程（对象，场景条件，行为，状态，反馈），适配样式，限制条件，异常情况等；04.核心说明，建议图文并茂（局部示例图/流程图）；05. 通用规则尽量复用（或引用）提高输出效率；；06.文本格式：最子级条目使用无序列符合标记“.”，强调内容建议用大括号（“【】”）标记，引用内容用“”。