互联网交互设计方法
- 3. ？
- 4. 交互设计是什么？ 交互设计是一个设计工作。 交互设计是一门技术。 交互设计在目前阶段的主要使命是提高产物可用性。 通过对界面和操作行为的设计提高产物可用性。
- 5. 互联网产物的特点 变化快。 质量低。 功能操作与信息传达并重。 高速创新从而带来的无标准。
- 7. 互联网产物交互设计方法： 方法一 . 自然语言法 方法二 . 结构图法 方法三 . 任务走查法
- 8. 交互设计工作分为两部分： 信息构架 交互细节 其实不是这样… 交互设计工作分为两部分： 信息构架 交互细节
- 9. 互联网产物交互设计方法： 方法一 . 自然语言法 方法二 . 结构图法 方法三 . 任务走查法
- 10. 自然语言法 使用自然的语言来表达页面信息。 面对面的传达信息 -> 书面表达 -> 界面语言
- 11. 页面表达原则 1. 更少的信息量更好。 2. 结构化更易于理解。 3. 信息的表达应该清楚、明确、直接。 4. 操作可识别。 5. 操作前，结果可预知。 6. 操作时，操作有反馈。 7. 操作后，操作可撤销。 8. 让用户知道身处何地。 9. 避免内容看上去象广告。 10. 不提供多余的功能。 11. 相同的功能，在不同的页面中应保持一致性。 12. 措辞统一。 自然语言法
- 12. 常用的页面表达方式 1. 从左到右，从上到下。 2. 大字更突出。 3. 图形更吸引人。 4. 动画会被误认为是广告。 5. 内容逻辑：并列关系；从属关系。 6. 多项并列的信息： 7. 不同的排序方式 VS 筛选内容 自然语言法
- 13. 具体操作 第一步 . 概括待表达的信息 第二步 . 将概括好的信息排序 第三步 . 使用界面语言翻译 自然语言法
- 14. 实例：中信银行卡活动 自然语言法
- 15. 自然语言法
- 16. 实例：中信银行卡活动 第一步 . 概括信息 您选择了回邮方式办卡，概括解释这个办卡方式。 接下来您应该 下载申请表 回邮办卡的全过程是这样的 ... 一系列注意事项。 自然语言法
- 17. 实例：中信银行卡活动 第二步 . 排序 1. 您选择了回邮方式办卡， 概括解释这个办卡方式。 2. 接下来您应该 下载申请表 3. 回邮办卡的全过程是这样的 ... 4. 一系列注意事项。 自然语言法
- 18. 实例：中信银行卡活动 第三步 . 翻译为界面语言 自然语言法
- 19. 自然语言法
- 20. 实例：中信银行卡活动 另外一种表达： 1. 您选择了回邮方式办卡，概括解释这个办卡方式。 2. 第一步 . 下载、填写申请表并回邮给中信 3. 第二步…………………… .. 4. 第四步…………………… .. 自然语言法
- 21. 练习： QQ 空间黄钻催费页面 自然语言法
- 23. 信息构架的原则 1. 一个页面一个主要内容。 2. 个人信息 与 公共信息。 3. 网页基本内容有两种：列表 和 文档 4. 更少的信息更好 5. 一个用户自己生成内容的页面，有两个状态：浏览状态 & 编辑状态。 6. 信息树应该尽量窄而浅，并且尽量保持平衡。 7. 与现实生活经验相符 页面在网站中需要有 一个 固定 的位置。 同等级的内容应表现成并列的样子。 …… 结构图法
- 24. 信息构架的常见模型 列表 + 详情页 + 列表聚合页 Wizard 模式。第一步 -> 第二步 -> 第三步… 主页 + 若干个“临时”页面。 例如： google accounts 结构图法
- 25. 具体操作 第一步 . 总结归纳全部待表达的信息。 第二步 . 画树状图。 第三步 . 画页面草图，演示。 ( 其中包含：页面标题、导航、重要的链接和按钮。 ) 结构图法
- 26. 实例：黄钻等级 结构图法
- 27. 实例：黄钻等级 结构图法
- 28. 实例：黄钻等级 结构图法
- 29. 实例：黄钻等级 第一步 . 概括信息 用户个人的的黄钻等级信息 等级介绍 3. 黄钻功能特权介绍 4. 黄钻贵族可免费领取的道具 5. 黄钻活动 结构图法
- 30. 实例：黄钻等级 第二步 . 画树状图 结构图法
- 31. 实例：黄钻等级 第二步 . 画树状图 结构图法
- 32. 实例：黄钻等级 第二步 . 画树状图 结构图法
- 33. 实例：黄钻等级 第三步 . 草图，演示 结构图法
- 34. 练习： QQ 空间日志 结构图法
- 35. 练习： QQ 空间日志 新的需求： 添加私密记事本 添加 QQ 心情 原有的日志需保留 结构图法
- 37. 可用性准则 页面表达原则 + 信息构架原则 + 视觉表现规范 任务走查法
- 38. 视觉表现规范 滚动条看上去应该象滚动条 表单的对齐方式 重要的内容显示在第一屏 导航应出现在第一屏上半部分 尽量避免使用装饰性的图标 避免内容看上去象广告 光标样式 Tab 需要有三种状态而不是两种 红色表示警示，绿色表示 ok ，黄色表示提示 灰色通常表示“暂不可用”（ disabled ） 任务走查法
- 39. 具体操作 第一步 . 分析并总结所有任务 第二步 . 根据任务进行走查 评估中需要注意： 1. 不影响任务的问题不记录 2. 被记录的缺陷是有根据的 , 而不是根据自己的感觉。 任务走查法
- 40. 实例： QQ 秀快速换装 任务走查法
- 41. 实例： QQ 秀快速换装 第一步 . 任务分析 换一套新形象 换表情 换心情 随便逛逛 换一个自己以前的形象 任务走查法
- 42. 实例： QQ 秀快速换装 第二步 . 走查 任务走查法 修改建议 页面表达原则：信息的表达应该清楚、明确、直接。 依据 这句说明仍旧没能说明“这里是什么功能”。如果能通过这句话说明：“在这里添加文字内容，显露您的心情”，说明的效果会更好。至于“让好友都知道！”这几个字几乎是没有用的，没有传达任何信息量。 描述 副标题表意不明确 问题 1
- 43. 实例： QQ 秀快速换装 第二步 . 走查 任务走查法 修改建议 页面表达原则：信息的表达应该清楚、明确、直接。 依据 “ 请输入心情秀文字”其实是第二层要表达的信息，第一层应该是：“这里还没有输入文字”。没有第一句，直接是第二句，需要用户花些时间来推断，推断出，这里显示“请输入心情秀文字”是因为自己没有写文字进去。 描述 “ 请输入心情秀”表意不明确 问题 2
- 44. 实例： QQ 秀快速换装 第二步 . 走查 任务走查法 修改建议 视觉表现规范：光标样式 依据 拖动预览图中的心情秀时，光标为 应该使用十字箭头。 描述 拖动预览中的心情秀时的光标使用错误 问题 3
- 45. 实例： QQ 秀快速换装 第二步 . 走查 任务走查法 修改建议 页面表达原则：措辞统一 依据 “ 心情秀预览”暗示出，“心情秀”是指外框 + 文字内容。 “ 换心情秀”功能只是换框，这意味着“心情秀”是指外框。 措辞上的含混使得同一个概念出现两种不同的定义，不易于理解。最直接的反应是：“既然心情秀是指外框 + 文字内容，那么当我点击 下一个 后，其中的文字内容是不是也会变化？” 描述 “ 心情秀”概念不清 问题 4
- 46. 实例： QQ 秀快速换装 第二步 . 走查 任务走查法 修改建议 页面表达原则：操作结果不可预知 依据 “ 上一个”“下一个”的操作不方便。无预览图，无法确定当前选项在全部“框”的列表中所处位置。 描述 换心情秀外框操作不便 问题 5
- 47. 实例： QQ 秀快速换装 第二步 . 走查 任务走查法 修改建议 灰色通常表示“暂不可用”（ disabled ） 依据 预览按钮视觉样式比较象 disabled 描述 “ 预览”按钮视觉效果不佳 问题 6
- 48. 实例： QQ 秀快速换装 第二步 . 走查 任务走查法 修改建议 页面表达原则：信息的表达应该清楚、明确、直接。 依据 “ 脱掉”按钮在框的有下角，很多时候看不到，并且文字超小。 描述 “ 脱掉”按钮不易找到 问题 7
- 49. 练习： QQ 秀 照相馆 任务走查法
- 50. 练习： QQ 空间 心情 任务走查法
- 51. 最后最后的总结 交互设计的主要任务是： 表达 。 通过清晰、准确、简洁的表达进而实现人机交互。
- 52. 最后最后的总结 “ 互联网产物的交互设计应该怎么做？” “ 互联网产物应该如何去表达 ?”
- 53. Let’s talk Let’s talk Let’s talk Let’s talk Let’s talk Let’s talk
- 54. 谢谢 ~~ 臭鱼 2008.10