交互设计输出物标准.ppt

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