互联网交互设计方法
2020-03-01 204浏览
- 1.互联网交互设计方法 臭鱼 2008.10
- 2.交互设计重要，但却不知要怎么做 。
- 3.？
- 4.交互设计是什么？ • 交互设计是一个设计工作。 • 交互设计是一门技术。 • 交互设计在目前阶段的主要使命是提高产品可用性。 • 通过对界面和操作行为的设计提高产品可用性。
- 5.互联网产品的特点 • 变化快。 • 质量低。 • 功能操作与信息传达并重。 • 高速创新从而带来的无标准。
- 6.那么， 互联网产品的交互设计应该怎么做 ？
- 7.互联网产品交互设计方法： 方法一 . 自然语语 言法 语 方法二 . 语构语语法 方法三 . 任语语 走语语 法
- 8.交互设计工作分为两部分： 交互设计工作分为两部分： 1.信息构架 1.信息构架 其实不是这样… 2.交互细节 2.交互细节
- 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 空间黄钻催费页面
- 22.结构图法 抛开页面细节只考虑信息的组织形式。
- 23.结构图法 信息构架的原则 1. 一个页面一个主要内容。 2. 个人信息 与 公共信息。 3. 网页基本内容有两种：列表 和 文档 4. 更少的信息更好 5. 一个用户自己生成内容的页面，有两个状态：浏览状态 & 编辑状态。 6. 信息树应该尽量窄而浅，并且尽量保持平衡。 7. 与现实生活经验相符 页面在网站中需要有 一个 固定 的位置。 同等级的内容应表现成并列的样子。 ……
- 24.结构图法 信息构架的常见模型 1. 列表 + 详情页 + 列表聚合页 2. Wizard 模式。第一步 -> 第二步 -> 第三步… 3. 主页 + 若干个“临时”页面。 例如： google accounts
- 25.结构图法 具体操作 第一步 . 总结归纳全部待表达的信息。 第二步 . 画树状图。 第三步 . 画页面草图，演示。 ( 其中包含：语语 面语语语 、语语 航、重要的 语 语 语 语 语语 接和按 语) 语 语语 。
- 26.结构图法 实例：黄钻等级
- 27.结构图法 实例：黄钻等级
- 28.结构图法 实例：黄钻等级
- 29.结构图法 实例：黄钻等级 第一步 . 概括信息 1. 用户个人的的黄钻等级信息 2. 等级介绍 3. 黄钻功能特权介绍 4. 黄钻贵族可免费领取的道具 5. 黄钻活动
- 30.结构图法 实例：黄钻等级 第二步 . 画树状图
- 31.结构图法 实例：黄钻等级 第二步 . 画树状图
- 32.结构图法 实例：黄钻等级 第二步 . 画树状图
- 33.结构图法 实例：黄钻等级 第三步 . 草图，演示
- 34.结构图法 练习： QQ 空间日志
- 35.结构图法 练习： QQ 空间日志 新的需求： • 添加私密记事本 • 添加 QQ 心情 • 原有的日志需保留
- 36.任务走查法 优化现有产品的方法。成本低，见效快。对产品整体上影响小。 以用户任务为线索，以可用性准则为依据。
- 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 秀快速换装 第二步 . 走查 问题 6 “ 预览 ”按钮视觉效果不佳 描述 预览按钮视觉样式比较象 disabled 依据 修改建议 灰色通常表示“暂不可用”（ disabled ）
- 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
