必威体育精装版互联网交互设计方法.pptVIP

自然语言法 使用自然的语言来表达页面信息。 面对面的传达信息-书面表达-界面语言 * chfght 页面表达原则 1. 更少的信息量更好。 2. 结构化更易于理解。 3. 信息的表达应该清楚、明确、直接。 4. 操作可识别。 5. 操作前，结果可预知。 6. 操作时，操作有反馈。 7. 操作后，操作可撤销。 8. 让用户知道身处何地。 9. 避免内容看上去象广告。 10. 不提供多余的功能。 11. 相同的功能，在不同的页面中应保持一致性。 12. 措辞统一。 自然语言法 * chfght 常用的页面表达方式 1. 从左到右，从上到下。 2. 大字更突出。 3. 图形更吸引人。 4. 动画会被误认为是广告。 5. 内容逻辑：并列关系；从属关系。 6. 多项并列的信息： 7. 不同的排序方式VS筛选内容 自然语言法 * chfght 具体操作 第一步. 概括待表达的信息 第二步. 将概括好的信息排序 第三步. 使用界面语言翻译 自然语言法 * chfght 实例：中信银行卡活动 自然语言法 * chfght 自然语言法 * chfght 实例：中信银行卡活动 第一步. 概括信息 您选择了回邮方式办卡，概括解释这个办卡方式。 接下来您应该 下载申请表 回邮办卡的全过程是这样的... 一系列注意事项。 自然语言法 * chfght 实例：中信银行卡活动 第二步. 排序 1. 您选择了回邮方式办卡， 概括解释这个办卡方式。 2. 接下来您应该 下载申请表 3. 回邮办卡的全过程是这样的... 4. 一系列注意事项。 自然语言法 * chfght 实例：中信银行卡活动 第三步. 翻译为界面语言 自然语言法 * chfght 自然语言法 * chfght 实例：中信银行卡活动 另外一种表达： 1. 您选择了回邮方式办卡，概括解释这个办卡方式。 2. 第一步. 下载、填写申请表并回邮给中信 3. 第二步…………………….. 4. 第四步…………………….. 自然语言法 * chfght 练习：QQ空间黄钻催费页面 自然语言法 * chfght 结构图法 抛开页面细节只考虑信息的组织形式。 * chfght 信息构架的原则 1. 一个页面一个主要内容。 2. 个人信息 与 公共信息。 3. 网页基本内容有两种：列表 和 文档 4. 更少的信息更好 5. 一个用户自己生成内容的页面，有两个状态：浏览状态编辑状态。 6. 信息树应该尽量窄而浅，并且尽量保持平衡。 7. 与现实生活经验相符 页面在网站中需要有 一个 固定 的位置。 同等级的内容应表现成并列的样子。 …… 结构图法 * chfght 信息构架的常见模型 列表+详情页+列表聚合页 Wizard模式。第一步-第二步-第三步… 主页+若干个“临时”页面。 例如：google accounts 结构图法 * chfght 具体操作 第一步. 总结归纳全部待表达的信息。 第二步. 画树状图。 第三步. 画页面草图，演示。 (其中包含：页面标题、导航、重要的链接和按钮。) 结构图法 * chfght 实例：黄钻等级 结构图法 * chfght 实例：黄钻等级 结构图法 * chfght 实例：黄钻等级 结构图法 * chfght 实例：黄钻等级 第一步. 概括信息 用户个人的的黄钻等级信息 等级介绍 3. 黄钻功能特权介绍 4. 黄钻贵族可免费领取的道具 5. 黄钻活动 结构图法 * chfght 实例：黄钻等级 第二步. 画树状图 结构图法 * chfght 实例：黄钻等级 第二步. 画树状图 结构图法 * chfght 实例：黄钻等级 第二步. 画树状图 结构图法 * chfght 实例：黄钻等级 第三步. 草图，演示 结构图法 * chfght 练习：QQ空间日志 结构图法 * chfght 练习：QQ空间日志 新的需求： 添加私密记事本 添加QQ心情 原有的日志需保留 结构图法 * chfght 任务走查法 优化现有产品的方法。成本低，见效快。对产品整体上影响小。 以用户任务为线索，以可用性准则为依据。 * chfght 可用性准则 页面表达原则+信息构架原则+视觉表现规范 任务走查法 * chfght 视觉表现规范 滚动条看上去应该象滚动条 表单的对齐方式 重要的内容显示在第一屏 导航应出现在第一屏上半部分 尽量避免使用装饰性的图标 避免内容看上去象广告 光标样式 Tab需要有三种状态而不是两种 红色表示警示，绿色表示ok，黄色表示提示 灰色通常表示“暂不可用”（disabled） 任务走查法 * chfght *