交互设计输出物标准.pptx

Powered by 阿里巴巴中文站 leo.lee 简单、高效、突出重点 交互设计输出物标准 UED各阶段输出物 为什么要对各阶段输出物的名称进行修正？ 更加形象化的表达，体现专业性，减少歧义 prototype mockup demo 交互原型 视觉稿 前端demo 交互设计输出物 表达交互设计内容 是产品原型设计过程中的阶段性成果、过渡型交付 通过可视化产出使各方对设计范围和内容有形象化的、统一的认知 “输出物是用以表述观点和描述设计方案，本身不是设计的目的。” 交互输出物（Prototype）： 什么时候提交输出物？ 在向视觉设计或前端开发提交需求时，应附带上传完整的输出物文档，并在变更时保持附件更新 为什么要标准化 帮助交互设计师明确方案需要提供的内容及范围，减少遗漏 减少沟通和衔接成本、提高工作效率 标准化是为了： 交互输出物的类型规格 Axure RP文档（推荐） 采用Axure RP交付输出物，便于项目的版本持续更新、存档以及团队协作 适用于：新项目或复杂项目；有多人参与设计的项目 PNG或PSD等图片格式（推荐） 如果需求是建立于现有的产品之上，也可根据现有视觉规范直接提供视觉输出物，请参考慧慧的视觉输出物标准化文档 适用于：已有明确视觉规范的现有产品和功能页面，或小需求处理 文本描述 如果需求涉及修改比较小，如修改或增加模块，并无新增视觉样式，则可以直接提交设计描述即可。 适用于：文本描述或口头表述已经可以描述清楚的需求 输出物标准化做什么和不做什么 做什么： 明确交互输出物应涵盖的内容 示例说明交互输出物应描述的关键信息和重要逻辑 整理视觉设计和前端开发对交互输出物的需求 不做什么： 本文档只提供交互输出物的建议内容和标注方式范例，并不强制统一，设计师可针对项目的实际情况选择性参考 交互输出物的设计原则 简单、高效、突出重点 简单： 提交的Demo应简洁明了，便于阅读和理解 高效： 避免繁复的界面设计，关注界面的状态和逻辑 突出重点： 有的放矢，对于设计重点要表述清晰和完整 输出物可能涵盖的内容 1、版本记录及说明：(可选) 2、页面名称：按照实际页面标题命名 3、流程页面/状态/系统异常：无结果、少结果、多结果等 4、操作反馈及校验：系统反馈信息、错误校验，系统异常处理等 5、流程图：(可选) 如何进行标注（1） 1、标注位置就近原则 建议不要将标注填写在Axure RP的page note或者specification 将标注写在页面需要说明的位置，有助于视觉或前端直观查看重要的说明信息，也便于发布为图片格式进行分发时，信息不会丢失 2、关键信息和重要逻辑才需进行标注 首先，输出物并不能取代面对面的沟通； 其次，交付物标准化的主要目的是“帮助交互设计师明确页面设计需求，减少遗漏，帮助视觉、前端明确细节、提高工作效率”，过多说明和标注不利于工作效率 因此，交付物中应只对重要、关键，并且Demo无法直观浏览的界面或状态进行说明，在交付和跟进过程中，仍应和视觉及前端就Demo进行充分的沟通。 如何进行标注（2） 3、如非必要，无需使用动态面板和脚本 什么时候需要制作动作脚本？ 输出物需要向其他人演示实际交互逻辑，或静态页面无法表述交互过程时 其他情况下应避免使用动态面板和脚本，原因： 1、交互设计师应更关注设计要解决的问题，而不是在Demo中的效果 2、添加的动作效果，在视觉或前端查看Demo时，可能会忽略隐藏的面板和逻辑 如何进行标注（3） 4、灵活的标注方式 每位交互设计师在具体的Demo标注中可以采取自己适合的方式填写描述和说明 基本原则是： 标注信息的位置建议在Demo主体之外； 在一个Demo中标注应该采用一致的样式外观，视觉样式明显区别于控件元素 如何进行标注（4） 1、气泡标注 常见标注示例 2、框线标注 3、箭头指向标注 多人参与交互设计过程 设计分期进行 以及其他有版本追溯需求的情况 什么时候需要版本记录？ 基于页面的流程图能够帮助设计师和前端快速了解开发需求，及页面直接的逻辑关系 建议在大型项目中，或包含流程页面的需求中添加流程图，并在流程图中链接相应的页面 但在多数项目输出物中，流程图都是可选的 流程图是必要的吗？ 零结果、少结果及多结果 内容显示与隐藏，如不同等级会员的用户界面的差异 Tab控件 控件的禁用、激活以及修改，如在提交表单过程中，禁用提交按钮 增加、编辑、删除、查找 流程/页面/状态 最为常见的情况就是在一个数据展示页面，可能出现无结果的情况，需要针对实际情况来对无结果页面进行适当的说明和引导；如果可能出现大量数据的情况，还需要考虑是否使用翻页或其他兼容方式（滚动条或AJAX应需加载） 流程/页面/状态标注示例 零结果、少结果及多结果 如果Demo中存在隐藏状态的界面元