《互动媒体设计讲义讲解》由会员分享，可在线阅读，更多相关《互动媒体设计讲义讲解（37页珍藏版）》请在金锄头文库上搜索。
1、思考 目录 q 互动媒体设计 q 界面设计原则 q 界面交互设计 q 视觉呈现设计 q 使用性测试 互动？谁和谁互动？通过什么互动？如何互动？ 交互媒体设计：用户界面设计（界面之间的关系和流程） 、交互方式和视觉形式 步骤：结构设计、交互设计、视觉设计 互动媒体设计 交互界面的发展 人机交互界面的发展过程 命令行 图形用户界面GUI（Graphical User Interface） WIMP(Windows,Icon,Menu,Pointing device 苹果公司全鼠标下拉式菜单操作) NUI（Net User Interface）:远程访问和执行，更加大众化 CSCW(computer
2、 supported cooperative work计算机协同工作) 同步、分布式同步、异步、分布式异步 多用户界面 多通道人机界面（Multi Mode Interface） VIR（Virtual Information Room） 交互界面的技术 人机交互界面技术背景 标准 JPEG静态图像压缩标准， MPEG动态图像压缩标准，DVD规格，W3C 多通道交互技术（追踪、统计分析、识别） 触摸 、眼动跟踪、姿势识别、语音识别、表情识别、手写识别、 虚拟现实（特点：直接性、非精确性、双向性、自然性） 交互设备 交互输入输出设备 输入 键盘 鼠标 跟踪球 操纵杆 触摸屏 光笔 数字化输入板
3、浮动鼠标（6度电磁探测器） 手持操纵器 力矩球（空间球） 数据手套 输出 阴极射线管显示器 液晶显示器 头盔显示器 目录 q 互动媒体设计 q 界面设计原则 q 界面交互设计 q 视觉呈现设计 q 使用性测试 设计原则 人 1. 查找时：以自我为中心 2. 浏览时：扫描的阅读方式 3. 操作时：依习惯做事 4. 点击时：不确定性 设计原则 界面设计原则 1. 可控性：用户处于控制地位，掌握所有操作的主动性 2. 一致性: 提供稳定的感觉使界面变得熟悉和可预知（用 户习惯） 3. 互动性:给于用户反馈,引导用户参与 （系统反应时间 15s,3s） 4. 可学习性：让用户逐渐成长，成为高手 5.
4、简易性:将呈现的信息减到极限，突出重点 6. 差异性:不同用户需求是不同的 7. 视觉上的美与舒适 设计原则 用户处于控制地位 用户开始操作 可信性 可预期性 稳定而快速的响应 灵活性 设计原则 一致性 产品结构的一致 和业界习惯的一致 操作行为一致 命令的名称统一 视觉呈现一致 窗口方式一致 与生活保持一致 设计改动 设计原则 互动性 反馈性 参与性 直接性 更新性 召唤感 亲和力 设计原则 可学习性 鲜明性 引导性 空间有效性 逻辑性 恢复性 帮助性 设计原则 简易性 操作少 简洁 快捷方式 文案简单正确 使用留白 直观 简易不同于简陋 设计原则 差异性 不同熟练程度用户 不同年龄用户 不
5、同地区用户 不同专业背景的用户 残障用户 可兼容性：浏览器 屏幕尺寸 色彩 动态性 设计原则 视觉上的美和舒适 清晰 舒适 独特 产品开发 案例：WinXP 1. 用户处于控制地位：自定义背景，多种预览选择 2. 一致性: 统一界面方式和按钮方式 3. 互动性:状态表示，按钮质感处理 4. 视觉上的美和舒适 :鲜亮色彩、立体感、图标 5. 简易:将呈现的信息减到极限：人性的账户管理，直观批 预览 6. 差异性:不同用户需求是不同的：不同分辨率，多语言 目录 q 互动媒体设计 q 界面设计原则 q 界面交互设计 q 视觉呈现设计 q 使用性测试 交互设计 交互设计 1. 用户需求搜集：调查问卷
6、焦点小组(程度) 用户提案 2. 用户分级 用户任务分解 3. 交互设计和描述: 结构图 流程图 页面图 交互设计 导航与定位系统 栏目/菜单导航 关键页面的导航 分类目录和列表 搜索框的导航 相关内容 窗口方式 其他导航方式 我在哪里？ 我去过哪里？ 我可以去哪里? 交互设计 菜单 菜单组织 1.单一菜单 2.多重菜单：相关联的内容在同一界面窗口中横向并置（文件 打印 属性 ） 3.树状菜单栏：极限4-8个选项，3-4层 菜单式样（文字/图标） 1.全屏菜单 2下拉菜单栏 3 弹出菜单 4工具栏 5版块菜单 设计原则 一致 分层 分组 排序 快捷键 反馈当前状态 帮助 交互设计 界面窗口 基
7、本构成 标题区 菜单区 快捷图标区 工具区 工作区/信息区 控制区 移动区 大小区 滚动区 窗口方式 1.滚动式 2单一式 3 分裂式 4瓦片式 5重叠式 6弹出式 交互设计 典型互动界面:数据输入 设计原则 简约：用户输入最少 明确 习惯：一致性 兴奋 可学习性：用户输入灵活性 反馈 错误监测和修正 输入方式 1.问答式 2菜单选择 3 填表输入 4直接操作 5光学识别 6声音 表格设计原则 一致 分组和留白 指导性文字 光标移动方便 反馈 帮助 对齐 交互设计 典型互动界面:输入界面 类型 1.问答式对话：系统启动、自然语言、用户回答 2.链接、图标和按钮 3.菜单：用户多选一、界面位置固
8、定 4.数据输入界面：用户输入数据内容 5.命令语言界面：用户按照文法，输入命令给系统 唯一性、一致性、平等性、经济性、允许修改 5.查询界面：用户输入查询条件，系统输出结果 6.自然语言界面：模糊性、学习性 交互设计 典型互动 搜索 列表和最终页 注册和登陆 用户反馈和留言 个性定制 成功、失败、提示 简约 明确 习惯 兴奋 交互设计 帮助系统 人出错原因 感知误导 记忆误导 响应时间过快或过慢 设计原则 完整性 一致性 连续性 简易性 可维护性 帮助系统类型（线上/线下） 1.用户手册 2培训 3 演示 4问答（faq,邮箱，电话，问答平 台等） 交互设计 手机界面 常用导航方式 拖动 菜
9、单 列表 现在在哪儿 以前去过哪儿 将来应该/能够去哪儿 怎么去 怎么回 目录 q 互动媒体设计 q 界面设计原则 q 界面交互设计 q 视觉呈现设计 q 使用性测试 视觉设计 视觉设计 主调:统一 对比 视觉中心 形象 色彩 肌理 版式：比例 分栏 版面率 跳跃率 边角 造型元素：线 面 字体 动态排版 文件格式 界面规范 视觉设计 链接 链接的组织 文字链接 图片或图标链接 按钮链接 视觉设计 图标 优势/劣势 快速识别 美观 便于记忆 国际化 / 最初不易掌握和理解 设计原则 整体 隐喻 简单（不多于20种，造型简单，轮廓清晰而不生硬 ）尺寸 国际化（不要使用人脸/手，非通用字母） 美观
10、（立体感，质感） 图标类型 1.程序 2数据 3 命令 4控制 5开关 6状态显示 目录 q 互动媒体设计 q 界面设计原则 q 界面交互设计 q 视觉呈现设计 q 使用性测试 产品测试 界面评估 评估方法 自己的评估 专家评估 VIP用户评估 可用性测试 理论评估 可用性测试 5-8个典型用户 5-8个典型情境下的典型任务 关注：失败率 失误率 速度 评分标准 1 课题设计的定位20% 2 交互设计的完整和流畅30% 3 最终呈现效果40% 4 使用性测试的完整和正确10% 题目：动画管理与播放器 设计与实现 n参考QQ音乐播放器，实现如下功能： n动画电影的播放、搜索、推荐 n动画电影分类：多种分类方法 n字幕同步播放 n注意：封面设计要求采用场景式 要求： n提交文件： n每组同学提交一个以学号姓名为名字的 文件夹，内含三种格式的文件： ndir, exe,doc n分别为原始文件、发布文件和文档，其 中文档： n要求完整记录设计过程，实现步骤，测试过 程，不低于2万字（截图除外） 评分标准 1 课题设计的定位和文档的完整性20% 对动画的分类完整性、合理性，易整理性要求 2 交互设计的完整和流畅30% 给用户熟悉、易用的、动态的交互效果 3 最终呈现效果40% 场景式交互界面的美感和合理性 4 使用性测试的完整和正确10%
