互联网产品的交互设计方法.ppt

实例：黄钻等级 第二步. 画树状图 结构图法 第三十一页，共五十五页。 实例：黄钻等级 第二步. 画树状图 结构图法 第三十二页，共五十五页。 实例：黄钻等级 第三步. 草图，演示 结构图法 第三十三页，共五十五页。 练习：QQ空间日志 结构图法 第三十四页，共五十五页。 练习：QQ空间日志 新的需求： 添加私密记事本 添加QQ心情 原有的日志需保留 结构图法 第三十五页，共五十五页。 任务走查法 优化现有产品的方法。成本低，见效快。对产品整体上影响小。 以用户任务为线索，以可用性准则为依据。 第三十六页，共五十五页。 可用性准则 页面表达原则+信息构架原则+视觉表现规范 任务走查法 第三十七页，共五十五页。 视觉表现规范 滚动条看上去应该象滚动条 表单的对齐方式 重要的内容显示在第一屏 导航应出现在第一屏上半部分 尽量避免使用装饰性的图标 避免内容看上去象广告 光标样式 Tab需要有三种状态而不是两种 红色表示警示，绿色表示ok，黄色表示提示 灰色通常表示“暂不可用”（disabled） 任务走查法 第三十八页，共五十五页。 具体操作 第一步. 分析并总结所有任务 第二步. 根据任务进行走查 评估中需要注意： 1. 不影响任务的问题不记录 2. 被记录的缺陷是有根据的,而不是根据自己的感觉。 任务走查法 第三十九页，共五十五页。 实例：QQ秀快速换装 任务走查法 第四十页，共五十五页。 实例：QQ秀快速换装 第一步. 任务分析 换一套新形象 换表情 换心情 随便逛逛 换一个自己以前的形象 任务走查法 第四十一页，共五十五页。 实例：QQ秀快速换装 第二步. 走查 问题1 副标题表意不明确 描述 这句说明仍旧没能说明“这里是什么功能”。如果能通过这句话说明：“在这里添加文字内容，显露您的心情”，说明的效果会更好。至于“让好友都知道！”这几个字几乎是没有用的，没有传达任何信息量。 依据 页面表达原则：信息的表达应该清楚、明确、直接。 修改建议 任务走查法 第四十二页，共五十五页。 实例：QQ秀快速换装 第二步. 走查 问题2 “请输入心情秀”表意不明确 描述 “请输入心情秀文字”其实是第二层要表达的信息，第一层应该是：“这里还没有输入文字”。没有第一句，直接是第二句，需要用户花些时间来推断，推断出，这里显示“请输入心情秀文字”是因为自己没有写文字进去。 依据 页面表达原则：信息的表达应该清楚、明确、直接。 修改建议 任务走查法 第四十三页，共五十五页。 实例：QQ秀快速换装 第二步. 走查 问题3 拖动预览中的心情秀时的光标使用错误 描述 拖动预览图中的心情秀时，光标为 应该使用十字箭头。 依据 视觉表现规范：光标样式 修改建议 任务走查法 第四十四页，共五十五页。 实例：QQ秀快速换装 第二步. 走查 问题4 “心情秀”概念不清 描述 “心情秀预览”暗示出，“心情秀”是指外框+文字内容。 “换心情秀”功能只是换框，这意味着“心情秀”是指外框。 措辞上的含混使得同一个概念出现两种不同的定义，不易于理解。最直接的反应是：“既然心情秀是指外框+文字内容，那么当我点击 下一个 后，其中的文字内容是不是也会变化？” 依据 页面表达原则：措辞统一 修改建议 任务走查法 第四十五页，共五十五页。 实例：QQ秀快速换装 第二步. 走查 问题5 换心情秀外框操作不便 描述 “上一个”“下一个”的操作不方便。无预览图，无法确定当前选项在全部“框”的列表中所处位置。 依据 页面表达原则：操作结果不可预知 修改建议 任务走查法 第四十六页，共五十五页。 实例：QQ秀快速换装 第二步. 走查 问题6 “预览”按钮视觉效果不佳 描述 预览按钮视觉样式比较象disabled 依据 灰色通常表示“暂不可用”（disabled） 修改建议 任务走查法 第四十七页，共五十五页。 实例：QQ秀快速换装 第二步. 走查 问题7 “脱掉”按钮不易找到 描述 “脱掉”按钮在框的有下角，很多时候看不到，并且文字超小。 依据 页面表达原则：信息的表达应该清楚、明确、直接。 修改建议 任务走查法 第四十八页，共五十五页。 练习：QQ秀 照相馆 任务走查法 第四十九页，共五十五页。 练习：QQ空间 心情 任务走查法 第五十页，共五十五页。 最后最后的总结 交互设计的主要任务是： 表达。 通过清晰、准确、简洁的表达进而实现人机交互。 第五十一页，共五十五页。 最后最后的总结 “互联网产品的交互设计应该怎么做？” “互联网产品应该如何去表达?” 第五十