互动媒体设计讲义

1、思考目录q 互动媒体设计互动媒体设计 q 界面设计原则界面设计原则q 界面交互设计界面交互设计q 视觉呈现设计视觉呈现设计q 使用性测试使用性测试互动？谁和谁互动？通过什么互动？如何互动？互动？谁和谁互动？通过什么互动？如何互动？交互媒体设计：用户界面设计（界面之间的关系和流交互媒体设计：用户界面设计（界面之间的关系和流程）程） 、交互方式和视觉形式、交互方式和视觉形式步骤：结构设计、交互设计、视觉设计步骤：结构设计、交互设计、视觉设计互动媒体设计交互界面的发展交互界面的发展 人机交互界面的发展过程 命令行 图形用户界面GUI（Graphical User Interface） WIMPWIM

2、P(Windows,Icon,Menu,Pointing device 苹果公司全鼠标下拉式菜单操作) NUINUI（Net User Interface）:远程访问和执行，更加大众化 CSCWCSCW(computer supported cooperative work计算机协同工作) 同步、分布式同步、异步、分布式异步 多用户界面 多通道人机界面（Multi Mode Interface） VIRVIR（Virtual Information Room） 交互界面的技术交互界面的技术 人机交互界面技术背景 标准 JPEG静态图像压缩标准， MPEG动态图像压缩标准，DVD规格，W3C 多

3、通道交互技术（追踪、统计分析、识别） 触摸 、眼动跟踪、姿势识别、语音识别、表情识别、手写识别、 虚拟现实（特点：直接性、非精确性、双向性、自然性）交互设备交互设备 交互输入输出设备输入键盘 鼠标 跟踪球 操纵杆 触摸屏 光笔 数字化输入板浮动鼠标（6度电磁探测器） 手持操纵器 力矩球（空间球） 数据手套输出阴极射线管显示器 液晶显示器 头盔显示器目录q 互动媒体设计互动媒体设计 q 界面设计原则界面设计原则q 界面交互设计界面交互设计q 视觉呈现设计视觉呈现设计q 使用性测试使用性测试设计原则设计原则 人1. 查找时：以自我为中心 2. 浏览时：扫描的阅读方式 3.3. 操作时：依习惯做事操

4、作时：依习惯做事4.4. 点击时：不确定性点击时：不确定性 设计原则设计原则 界面设计原则1. 可控性：用户处于控制地位，掌握所有操作的主动性用户处于控制地位，掌握所有操作的主动性 2.2. 一致性一致性: : 提供稳定的感觉使界面变得熟悉和可预知（用提供稳定的感觉使界面变得熟悉和可预知（用户习惯）户习惯） 3.3. 互动性互动性: :给于用户反馈给于用户反馈, ,引导用户参与引导用户参与 （系统反应时间15s,3s）4.4. 可学习性：让用户逐渐成长，成为高手可学习性：让用户逐渐成长，成为高手 5.5. 简易性简易性: :将呈现的信息减到极限，突出重点将呈现的信息减到极限，突出重点 6.6.

5、 差异性差异性: :不同用户需求是不同的不同用户需求是不同的7.7. 视觉上的美与舒适视觉上的美与舒适 设计原则设计原则 用户处于控制地位用户处于控制地位用户开始操作可信性可预期性稳定而快速的响应灵活性 设计原则设计原则 一致性一致性产品结构的一致和业界习惯的一致操作行为一致命令的名称统一视觉呈现一致窗口方式一致与生活保持一致设计改动设计原则设计原则互动性互动性反馈性参与性直接性更新性召唤感亲和力 设计原则设计原则 可学习性可学习性 鲜明性引导性空间有效性逻辑性恢复性帮助性 设计原则设计原则 简易性简易性操作少简洁快捷方式文案简单正确使用留白直观简易不同于简陋设计原则设计原则 差异性差异性不同

6、熟练程度用户不同年龄用户不同地区用户不同专业背景的用户残障用户可兼容性：浏览器 屏幕尺寸 色彩动态性设计原则设计原则视觉上的美和舒适视觉上的美和舒适清晰舒适独特 产品开发产品开发案例：案例：WinXP1.1. 用户处于控制地位：自定义背景，多种预览选择用户处于控制地位：自定义背景，多种预览选择2.2. 一致性一致性: : 统一界面方式和按钮方式统一界面方式和按钮方式 3.3. 互动性互动性: :状态表示，按钮质感处理状态表示，按钮质感处理4.4. 视觉上的美和舒适视觉上的美和舒适 :鲜亮色彩、立体感、图标5.5. 简易简易: :将呈现的信息减到极限：人性的账户管理，直观批将呈现的信息减到极限：

7、人性的账户管理，直观批预览预览6.6. 差异性差异性: :不同用户需求是不同的：不同分辨率，多语言不同用户需求是不同的：不同分辨率，多语言目录q 互动媒体设计互动媒体设计 q 界面设计原则界面设计原则q 界面交互设计界面交互设计q 视觉呈现设计视觉呈现设计q 使用性测试使用性测试交互设计交互设计交互设计交互设计 1. 用户需求搜集：调查问卷用户需求搜集：调查问卷 焦点小组焦点小组(程度程度) 用户提案用户提案2. 用户分级用户分级 用户任务分解用户任务分解3. 交互设计和描述交互设计和描述: 结构图结构图 流程图流程图 页面图页面图 交互设计交互设计导航与定位系统导航与定位系统 栏目栏目/菜单

8、导航菜单导航关键页面的导航关键页面的导航分类目录和列表分类目录和列表搜索框的导航搜索框的导航相关内容相关内容窗口方式窗口方式其他导航方式其他导航方式我在哪里？我在哪里？我去过哪里？我去过哪里？我可以去哪里我可以去哪里?交互设计交互设计 菜单菜单菜单组织1. 单一菜单 2.多重菜单：相关联的内容在同一界面窗口中横向并置多重菜单：相关联的内容在同一界面窗口中横向并置（文件（文件 打印打印 属性）属性） 3.树状菜单栏：极限树状菜单栏：极限4-8个选项，个选项，3-4层层菜单式样（文字/图标）1.全屏菜单全屏菜单 2下拉菜单栏下拉菜单栏 3 弹出菜单弹出菜单 4工具栏工具栏 5版块菜单版块菜单设计原

9、则一致 分层 分组 排序 快捷键 反馈当前状态 帮助交互设计交互设计界面窗口界面窗口基本构成标题区 菜单区 快捷图标区 工具区 工作区/信息区控制区 移动区 大小区 滚动区 窗口方式1.滚动式滚动式 2单一式单一式 3 分裂式分裂式 4瓦片式瓦片式 5重叠式重叠式 6弹出式弹出式 交互设计交互设计典型互动界面典型互动界面:数据输入数据输入设计原则原则简约：用户输入最少 明确 习惯：一致性 兴奋 可学习性：用户输入灵活性 反馈 错误监测和修正输入方式1.问答式问答式 2菜单选择菜单选择 3 填表输入填表输入 4直接操作直接操作 5光学识别光学识别 6声音声音表格设计原则一致 分组和留白 指导性文

10、字 光标移动方便 反馈 帮助 对齐交互设计交互设计典型互动界面典型互动界面:输入界面输入界面类型1. 问答式对话：系统启动、自然语言、用户回答2. 链接、图标和按钮3.菜单：用户多选一、界面位置固定菜单：用户多选一、界面位置固定 4.数据输入界面：用户输入数据内容数据输入界面：用户输入数据内容5.命令语言界面：用户按照文法，输入命令给系统命令语言界面：用户按照文法，输入命令给系统 唯一性、一致性、平等性、经济性、允许修改5.查询界面：用户输入查询条件，系统输出结果查询界面：用户输入查询条件，系统输出结果6.自然语言界面：模糊性、学习性自然语言界面：模糊性、学习性交互设计交互设计典型互动典型互动

11、搜索搜索列表和最终页列表和最终页注册和登陆注册和登陆用户反馈和留言用户反馈和留言个性定制个性定制成功、失败、提示成功、失败、提示简约简约明确明确习惯习惯兴奋兴奋交互设计交互设计帮助系统帮助系统人出错原因感知误导 记忆误导 响应时间过快或过慢设计原则完整性 一致性 连续性 简易性 可维护性帮助系统类型（线上/线下）1.1. 用户手册用户手册 2 2培训培训 3 3 演示演示 4 4问答（问答（faq,faq,邮箱，电话，问答邮箱，电话，问答平台等）平台等）交互设计交互设计手机界面手机界面常用导航方式拖动 菜单 列表现在在哪儿现在在哪儿 以前去过哪儿以前去过哪儿 将来应该将来应该/能够去哪儿能够去

12、哪儿 怎么去怎么去 怎么回怎么回 目录q 互动媒体设计互动媒体设计 q 界面设计原则界面设计原则q 界面交互设计界面交互设计q 视觉呈现设计视觉呈现设计q 使用性测试使用性测试视觉设计视觉设计视觉设计视觉设计主调主调: :统一统一 对比对比 视觉中心视觉中心 形象形象 色彩色彩 肌理肌理版式：比例版式：比例 分栏分栏 版面率版面率 跳跃率跳跃率 边角边角造型元素：线造型元素：线 面面 字体字体动态排版动态排版 文件格式文件格式 界面规范界面规范视觉设计视觉设计链接链接 链接的组织链接的组织文字链接文字链接图片或图标链接图片或图标链接按钮链接按钮链接视觉设计视觉设计图标图标优势/劣势快速识别 美

13、观 便于记忆 国际化 / 最初不易掌握和理解设计原则整体 隐喻 简单（不多于20种，造型简单，轮廓清晰而不生硬 ）尺寸 国际化（不要使用人脸/手，非通用字母） 美观（立体感，质感）图标类型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每组同学提交一个以学