第二章用户界面设计概述PPT课件

1 用户界面设计概述 2 上节回顾 基本概念人机交互人机交互系统人机交互方式 3 讨论 界面设计的内涵界面结构界面布局界面风格界面色彩 界面交互 4 内容概述 用户界面设计概念设计交互设计数据输入设计数据输出显示设计控制设计外观 视觉 设计用户 任务分析用户界面的软件开发过程用户界面的标准化 5 2 1 用户界面设计 用户界面是一个静态的名词 用户界面设计关心的是用户界面本身的组件 布局和风格 以保障能够有效支撑交互设计的需求 狭义上 用户界面设计是交互设计的重要组成部分 交互设计不只是用户界面设计 存在没有用户界面的交互设计广义上 用户界面设计包括概念设计 交互设计和外观设计 6 2 1 1用户界面设计的定义 确定交互设计 描述并传达交互行为的有效形式 称为 用户界面设计 UserInterfaceDesign 交互行为决定用户界面设计的约束条件界面上的组件是为交互行为服务的 可以对用户界面进行美化 抽象 甚至艺术化 但不能破坏交互行为 7 2 1 2用户界面设计的约束条件 交互方式界面空间的尺寸浏览器的不兼容性屏幕分辨率硬件级网络带宽等 8 2 1 3用户界面设计的内容 概念设计认知与抽象交互设计交互方式外观 视觉 设计组件外观 9 2 2 1交互 使用 从人类发出的主观行为 作用于客观对象的一种关系人为主导客观对象为辅助 交互 参与的双方对等 没有主从之分交互 是用户 服务使用者 与系统 服务提供者 之间的交换信息的过程 10 2 2 2交互设计 交互设计 InteractionDesign 一门关注交互 特别是用户体验的学科诞生于20世纪八十年代1984年 由IDEO的创始人之一比尔 莫格里奇首次提出 开始称为 软面 SoftFace 后来更名为交互设计 11 交互设计 交互设计是人工产品 环境和系统的行为 以及传达这种行为的外观元素的设计和定义 AlanCooper 交互设计首先规划和描述事物的行为的方式然后描述传达这种行为的最有效形式 12 交互设计 Cont 交互设计的内容 定义与 产品的行为和使用 密切相关的产品形式预测产品的使用如何影响产品与用户的关系 以及用户对产品的理解探索系统 人和环境 物质 文化和历史 之间的有效对话方式 13 交互设计 Cont 交互设计就是设计产品交互方式的过程具体地说 交互设计是关于如何创建新的 有效的用户体验的问题 交互设计目的是增强和扩展人们工作 通信及交互的方式 14 交互设计的定义 交互设计 是指设计师对产品及其使用者之间的互动机制进行分析 预测 定义 规划 描述和探索的过程 交互设计是设计和定义使用者如何使用产品并达到其完成某一任务的目标的过程 通过对界面和操作行为的设计以提高产品的可用性 15 交互设计的目的 交互设计目的通过对产品的界面和行为进行交互设计 在产品和用户之间建立有机关系 从而有效达到用户的目标 交互设计是一种关于 如何让产品易用 有效 从而令人愉悦 的技术 它致力于 了解用户目标及其期望了解用户的交互行为了解 人 本身的心理和行为特点了解各种有效的交互方式 并对其进行增强和扩展 16 交互设计的关键特征 以用户为中心让用户参与整个设计和评估的过程可用性标准的特殊性开始就明确可用性目标和用户体验目标迭代在迭代中改进设计 17 交互设计的4个基本活动 用户需求分析了解目标用户设计交互方案让用户参与方案设计构建设计的交互式版本给出设计的交互式版本可能只是个线框图 未必能够真正运行设计评估评估设计版本的可用性 用户能否接受 18 交互设计的工作流程 产品定位与市场分析由新产品研发部门以及市场确定需求设计师了解产品的市场定位 产品定义 客户群体 运营方式等用户研究与分析非常重要 团队配合完成设计师搜集相关资料 分析目标用户的使用特征 情感 习惯 心里 需求等 提出用户研究报告和可用性设计建议 架构设计确定界面交互与流程的设计制定交互方式 操作与跳转流程 结构 布局 信息和其他界面元素 19 交互设计的工作流程 Cont 原型设计阶段性标志对上述设计工作的实施 手绘 图形 FLASH 视频 原型的本质是一个DEMO 无需全部功能 但要体现出设计对象的基本特性界面设计结合经过反复讨论过的分析结果进行色调 风格 界面 窗口 图标 皮肤的表现是本环节的关键 界面输出设计师配合开发人员完成相关的界面整合完善工作多部门协作参与可用性的研究 用户体验回馈 测试回馈 以及可行性建议的完善 20 21 交互设计的基本方法 结构图法对产品信息架构的设计方法自然语言法对产品交互过程细节的设计方法任务走查法对整个产品的审查和优化方法 22 结构图法 抛开界面细节 只考虑信息的组织形式操作步骤明确描述全部内容 总结产品所需要表达的所有信息画出信息的树状结构图在纸上画出各界面的草图 草图包含的关键元素 页面标题 导航 重要的链接和按钮模拟演示界面的操作行为 23 自然语言法 设计界面交互细节的方法界面表达的要求清晰 明确 简洁 得体使用自然的语言表达界面的信息用面对面的交流来传达信息将面对面的传达转变为书面表达再用界面语言翻译书面表达 24 任务走查法 以用户任务为线索 以可用性准则为依据的主观评估操作步骤分析并总结所有用户任务根据用户任务进行可用性评估 25 可用性vs 交互设计 可用性 Usability 是交互设计的基本而重要的指标对可用程度的总体评价从用户角度衡量产品是否易学 好记 有效 高效 安全 少错的质量指标交互设计 InteractionDesign 的不仅要考虑可用性 还要考虑用户的期望和体验 可用性保证产品可用 基本功能完备且方便 用户体验提供给用户与众不同的或意想之外的感觉 26 2 3 1数据输入界面设计 数据输入界面耗费用户的大部分时间计算机系统中最易出错的部分数据输入界面设计的总目标简化用户的输入 尽可能采用自动输入降低输入出错率 尽可能给用户提供选择容忍用户的错误 提供必要的验证反馈 27 数据输入设计的方法 减轻用户记忆 尽可能采用列表选择设置默认值自动填入用户已输入过的内容使界面具有预见性和一致性用户控制数据输入顺序采用与系统环境 如Windows 风格一致的数据输入界面 28 数据输入设计的方法 续 防止用户出错需要确认的输入和删除明确的移动明确的取消已输入的数据假删除对致命错误 给出警告并退出对不可信的数据输入 给出提示信息 不必停止 29 数据输入设计的方法 续 提供反馈提示有效的输入格式或数值范围用户能够查看已输入的内容按用户速度输入和自动格式化用户能控制数据输入的速度能接受用户输入的空格 并进行自动格式化允许编辑用户输入后允许再编辑 且采用风格一致的编辑界面 30 2 3 2屏幕显示设计 屏幕显示设计要引导用户注意到最重要的信息布局 Layout 文字用语 Message 颜色 Color 31 屏幕布局 因功能不同而侧重点不同重点突出功能区 32 文字用语 设计标题正文提示信息控制命令 33 文字用语注意事项 用语简洁性避免使用专业术语尽量用肯定句 而不要用否定句用主动语态 而不用被动语态用礼貌而不过分的强调语句对不同的用户 用语结合心理学原则英文词语尽量避免缩写在按钮 功能键的标示中尽量使用描述操作的动词 34 文字用语注意事项 续 格式一屏幕的文字不要太多同行文字字型统一 可以给关键词粗体 变体等特殊处理英文词语尽量采用小写和易认的字体 标题除外 信息内容信息内容显示简洁清楚 尽量不左右滚屏内容较多时以空白分段或以小窗口分块重要字段可用粗体和闪烁吸引注意力和强化 35 颜色 一种有效的强化手段具有美学价值 36 颜色注意事项 一屏不超过4或5种 最多7种 可用不同层次及形状来配合颜色 增加变化焦点对象颜色鲜明 非焦点对象暗淡前景色鲜艳 背景色暗淡避免不兼容的颜色在一起 对比除外 用颜色表示某种信息或对象属性 要保证用户懂得这种表示 符合用户的文化背景 37 2 3 3控制设计 用户主导控制 提供防 呆 的操作方式控制界面设计的主要任务设计控制会话窗口 菜单 功能键 图标 命令语言和自然语言等界面组件 38 控制设计注意事项 清晰明确的动作指令必要的状态信息和反馈信息按照用户的步调和主导性设计交互一个功能对应一个命令 39 2 4用户分析 用户分类内向型 外向型 感知型 直觉型 程序员 非程序员 40 2 4 1用户特征 用户界面风格儿童老人界面内容的用词一本正经诙谐幽默界面的工作方式手机 PDA电脑地域 文化和语言 41 用户的两种阅读方式 42 2 4 2用户角色 界面设计的需求分析以用户为中心 具有很大的主观性从用户自身特征开始 划分用户群 引出用户角色的概念按照一定参考体系划分用户的类型 代表一定的用户特征 描述用户个体的集合 43 2 4 3用户行为模型 用户行为模型也称为 用户任务模型 人机交互的行为模型 4个阶段 确定目标 形成意图指定动作 执行动作领会系统状态 解释系统状态评价结果 44 用户行为模型示例 攒机 45 2 4 4用户vs 设计师 用户约束客观规律实际意义文化差异思维逻辑社会环境 设计师约束设计时间个性要求工作压力面向不同的用户自以为是典型用户 46 用户 设计师的交互模型 47 2 5用户界面的开发过程 开发用户界面友好的应用系统功能分析设计界面分析设计 48 用户界面的开发过程定义阶段可行性分析需求分析分析设计阶段界面设计用户验证构造阶段界面实现测试评价维护阶段 49 2 5 1需求阶段 用户行为用户生理 心理 经验 环境全过程用户体验 50 2 5 2分析设计阶段 商业目标 用户目标 设计目标 51 界面原型 文字图形纸上原型软件DEMO 52 2 5 3构造阶段 概念设计详细设计界面编码综合测试与评价 53 2 5 4维护阶段 改正性维护 诊断和改正系统 界面错误适应性维护 修改系统 界面以适应环境变化完善性维护 根据用户的要求改进或扩展系统 界面预防性维护 为将来的维护活动预先修改系统 界面 54 2 6