交互设计输出物标准.ppt

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