UI界面设计原则.pptx

交互设计的核心交互设计的核心一切以用户为中心的设计。UI设计原则设计原则UIUI设计的宗旨：设计的宗旨：1、减少用户的认知负担 2、保持界面的一致性3、满足不同目标用户的创意需求 4、用户界面友好性 5、图标功能的一致性 6、建立界面与用户的互动交流UIUI的主要应用领域：的主要应用领域：手机通讯移动产品、电脑操作平台、软件产品、PDA产品、数码产品、车载系统产品、智能家电产品、游戏产品、产品的在线推广等。UI设计原则空间记忆空间记忆 当 人 们 进 入 一 个 全 新 环 境 时,他 们 需 要 对 空 间 建 立 认 知 模型,要 有 个 空 间 记 忆 的 感 觉。同 样，当 新 用 户 打 开 一 个 全 新、陌 生 的 软 件 时，用 户 也 希望 有 个 类 似 站 点 地 图 的 东 西。但 如 果 想 让 用 户 更 加 自 如 的 使 用软 件，让 用 户 毫 无 顾 及 的 去 尝 试，不 怕 迷 路，我 们 必 须 为 用 户建 立 起 空 间 记 忆 模 式。它 犹 如 沙 漠 中 迷 途 者 手 中 的 指 南 针 与 行驶 在 荒 原 上 汽 车 装 的 G P S 一 样.当 人 们 使 用 东 西 或 文 档 时，他 们 经 常 通 过 回 忆 它 们 在 哪 里 来再 次 找 到 它 们，而 不 是 它 们 的 名 字。很 多 软 件 把 它 们 的 表 单 按 钮 确 定、取 消 等 放 在 预 定的 位 置 上，部 分 原 因 是 由 于 它 们 的 空 间 记 忆 依 赖 性。在 复 杂 的 应 用 系 统 中，工 具 条 上 的 工 具、层 级 结 构 中 的 对 象等，也 可 以 由 记 忆 它 们 的 相 对 位 置 找 到；因 此，我 们 应 该 小 心使 用 像 响 应 式 展 开 这 样 的 模 式。把 某 个 东 西 添 加 到 界 面 上 通 常 不 会 引 起 麻 烦，但 是 把 控 件重 新 排 列 会 打 乱 空 间 记 忆，从 而 难 以 找 到。空 间 记 忆 和 习 惯 之 间的 关 系 很 密 切。和 习 惯 一 样，空 间 记 忆 也 是 一 个 在 应 用 中 及 在 应用 间 保 持 一 致 性 会 带 来 好 处 的 理 由。人 们 会 期 望 在 类 似 的 地 方 找到 类 似 的 功 能 表 现。顺 便 说 一 句，网 站 导 航 菜 单 列 表 的 顶 部 和 底部 都 是 很 特 别 的 区 域，从 认 知 的 角 度 说，与 处 于 菜 单 中 间 的 项 目相 比，顶 部 和 底 部 的 项 目 会 获 得 用 户 更 多 的 注 意 力，记 忆 也 更 持久。如 果 他 们 发 生 改 变，对 用 户 的 重 新 建 立 空 间 记 忆 势 必 会 造 成影 响，请 慎 之。不 论 软 件 是 升 级 还 是 改 善。交 互 方 式 不 能 随 意 改 变，当 用 户不 论 软 件 是 升 级 还 是 改 善。交 互 方 式 不 能 随 意 改 变，当 用 户建 立 起 空 间 记 忆 对 公 司 软 件 产 品 的 长 期 发 展 是 很 有 必 要 的。建 立 起 空 间 记 忆 对 公 司 软 件 产 品 的 长 期 发 展 是 很 有 必 要 的。一、图形界面一、图形界面设计的基本原则设计的基本原则用户原则是图形界面设计最基本和最重要的设计原则。所谓用户原则，就是在软件界面设计中，要充分体现出“以人为本”、“用户友好”的基本要求，做到：易易懂、易学、易用懂、易学、易用。1.1 1.1 图形图形界面设计的界面设计的“黄金法则黄金法则”用户原则是大原则，人们在长期的图形界面设计过程中，总结出了图形界面设计中一些有用的法则，这些原则被称作软件界面设计的“黄金法则”。这些法则进一步丰富了用户原则，使用户原则变得实在、可操作。1 1、图形、图形界面的一致性原则界面的一致性原则一致性原则是“黄金法则”中最重要的原则，也是界面开发人员最容易忽略和违反的一个原则。一致性原则有利于减少用户的学习量和记忆量，用户可以把局部的经验和知识推广到其他应用场合。一致性原则要做到：一致性原则要做到：界面外观上的一致：具有相似的外观布局和信息显示格式。例如Office和Adobe软件。操作次序上的一致：例如不同命令操作后的显示效果一致。概念、语义、命令语法一致：例如同一功能的命令名称要一致，例如“复制”命令。不同软件开发商之间的界面设计要保持某种一致：例如Windows操作系统下的各种软件都具有一致性。DreamweaverDreamweaverDreamweaverDreamweaver界面界面界面界面FlashFlashFlashFlash界面界面界面界面After EffectsAfter EffectsAfter EffectsAfter Effects界面界面界面界面Premiere Premiere Premiere Premiere 界面界面界面界面2 2、图形、图形界面的简洁性原则界面的简洁性原则简洁简洁不仅是界面设计的美学原则，而且也是显示屏幕大小所要求的。复杂化是界面设计的一大误区！简洁性原则主要表现在：简洁性原则主要表现在：内容归类合理、内容排列整齐一致3 3、图形、图形界面的快捷方式原则界面的快捷方式原则用户希望能减少人机对话的次数以减轻操作的频率，快捷方式就是一个较好的办法。Windows常用的快捷方式有：删除、查找、插入、保存、打开、复制、粘贴、帮助、打印、关闭、剪切等。Windows操作操作系统下的应用程序基本都遵循一样的快捷方式原则。4 4、软件信息的反馈原则、软件信息的反馈原则软件界面对用户的每个操作都应当提供及时的信息反馈，尤其是简明的错误处理和帮助功能是软件界面的重要反馈信息。例如光盘刻录程序在工作的时候提示进度，结束的时候告诉任务完成、如果没有光盘提示插入光盘等反馈信息；手机信息发送成功失败提示等。5 5、软件界面的在线帮助原则、软件界面的在线帮助原则软件界面的友好性还体现在为用户提供有好的帮助界面，帮助用户学习和使用本软件。如下图：6 6、软件界面的操作可逆性原则、软件界面的操作可逆性原则操作的可逆性对用户来说，是一种有效的鼓励。如果用户知道操作是可逆的，即使发生错误也能恢复到原来的状态，用户就能大胆地对不熟悉的功能进行探索和学习。如下图：7 7、图形界面的最少记忆项目原则、图形界面的最少记忆项目原则好的图形界面应该尽量减少用户的记忆量，用户必须记住的任何信息应该是和当前操作有关的，而不是和计算机相关。为减少记忆量，应该通过菜单设计及联机帮助等形式帮助用户记忆，一般地说，用户的短期记忆不要超过7个项目。8 8、图形图形界面操作序列的完整性原则界面操作序列的完整性原则界面中每个操作序列都应该清楚地标明开始和结结束，其余的操作应插在中间。操作序列的结尾应该给用户完成的感觉，并指示下一个任务的开始。想象一下发送手机信息的整个操作过程。1.2 1.2 图形界面的配色原则（色彩构成）图形界面的配色原则（色彩构成）在黑白显示器的年代，人们是不用考虑色彩的配置的。今天，屏幕色彩的配置是屏幕显示设计的一个关键。恰当的色彩运用，不但能美化软件界面，而且还能够增加用户的兴趣，引导用户顺利完成操作。色彩构成是配色的基础，请同学们好好回顾一下，学会把色彩构成理论用到图形界面设计当中。例如，在电子地图上可以用不同的颜色区分不同的省、不同的国家；也可以用同一颜色的不同深法度来区分海洋的深度或地形的高度；在电脑游戏中可用颜色来表示游戏的进程。相反地，如果错误地使用颜色，会误导用户放弃操作，如有的打印程序用红色表示激光打印机预热就绪，可以打印，但有的用户却误解为机器出现危险而放弃操作。因此，屏幕色彩的配置直接关系到用户对软件操作的信赖程度。1 1、色调的一致性色调的一致性色调的一致性指的是在整个软件系统中要采用统一的色调，就是有个主色调。例如，用绿色表示运行正常，那么软件的色彩编码就要始终用绿色表示运行正常，如果色彩编码改变了，用户就会认为信息的意义变了。所以，在软件界面设计前，设计者应该把色彩编码标推方案写出来，以利于每一个设计者遵守。例如很多程序采用交通灯的色彩编码含义。2 2、保守地使用色彩、保守地使用色彩 大多数的界面设计者都赞成这一色彩配置原则。所谓保守地使用色彩，就是从大多数的用户考虑出发，根据不同的用户设计不同的色彩。界面设计时提倡采用一些柔和的、中性的颜色，以便于绝大多数用户能接受。因为有时急于使用色彩突出显示效果，反而适得其反。如有的软件界面使用大号字母，每个字母还使用不同的颜色显示，在远距离看来，屏幕耀眼夺目，可是它不利于阅读，而且会导致多屏显示。3 3、色彩选取尽可能符合人们的习惯用法、色彩选取尽可能符合人们的习惯用法对于一些专门软件，在配置颜色时，要充分考虑用户对颜色的喜爱。例如明亮的红色、绿色和黄色适用于为儿童设计的应用程序。一般来说红色表示错误，黄色表示警告，绿色表示运行正常等等。思考下面配色方案可能适合的群体和环境：4 4、把色彩作为功能分界的识别元素把色彩作为功能分界的识别元素不同的色彩可以帮助用户加快对各种数据的识别，明亮的色彩可以有效地突出或者吸引人们对重要区域的注意力。5 5、能让用户控制、能让用户控制配色方案配色方案通常图形界面都可以让用户自定义界面色彩配置，选择自己最喜欢的颜色。例如windows操作系统界面，浏览器，QQ界面等等。6 6、色彩搭配要便于阅读、色彩搭配要便于阅读要确保屏幕的可读性，就要注意色彩的搭配，有效的方法是遵循对比法则。在浅色背景上使用深色文字，在深色背景上使用浅色文字等等。动态对象的颜色应该比较鲜明，静态对象的颜色应该较暗淡。7 7、色彩数目应该有限、色彩数目应该有限建议把单个界面颜色限制为4种以内，整个软件系统系列颜色应限制在7种以内。二、二、UIUI设计的规范设计的规范法则法则三三三三.设计设计设计设计规则和规则和规则和规则和规范规范规范规范(界面界面界面界面)界 面 是 软 件 与 用 户 交 互 的 最 直 接 的 层，界 面 的 好 坏 决 定 用 户对 软 件 的 第 一 印 象。而 且 设 计 良 好 的 界 面 能 够 引 导 用 户 自 己 完 成 相应 的 操 作，起 到 向 导 的 作 用。同 时 界 面 如 同 人 的 面 孔，具 有 吸 引 用户 的 直 接 优 势。设 计 合 理 的 界 面 能 给 用 户 带 来 轻 松 愉 悦 的 感 受 和 成功 的 感 觉，相 反 由 于 界 面 设 计 的 失 败，让 用 户 有 挫 败 感，再 实 用 强大 的 功 能 都 可 能 在 用 户 的 畏 惧 与 放 弃 中 付 诸 东 流。目 前 界 面 的 设 计引 起 软 件 设 计 人 员 的 重 视 的 程 度 还 远 远 不 够，直 到 最 近 网 页 制 作 的兴 起，才 受 到 专 家 的 青 睐。而 且 设 计 良 好 的 界 面 由 于 需 要 具 有 艺 术美 的 天 赋 而 遭 拒 绝。目 前 流 行 的 界 面 风 格 有 三 种 方 式：多 窗 体、单 窗 体 以 及 资源 管 理 器 风 格，无 论 那 种 风 格，以 下 十 条 规 则 是 应 该 被 重 视 的。1.易 用 性：按 钮 名 称 应 该 易 懂，用 词 准 确，屏 弃 没 楞 两 可 的 字 眼，要 与 同 一 界 面 上 的 其 他 按 钮 易 于 区 分，能 望 文 知 意 最 好。理 想 的 情 况 是 用 户 不 用 查 阅 帮 助 就 能 知 道 该 界 面 的 功 能 并进 行 相 关 的 正 确 操 作。易 用 性 细 则：1)：完 成 相 同 或 相 近 功 能 的 按 钮 用 框 子 框 起 来，常 用 按 钮要 支 持 快 捷 方 式。2)：完 成 同 一 功 能 或 任 务 的 元 素 放 在 集 中 位 置，减 少 鼠 标移 动 的 距 离。3)：按 功 能 将 界 面 划 分 局 域 块，用 框 子 框 括 起 来,并 要 有功 能 说 明 或 标 题。4)：界 面 要 支 持 键 盘 自 动 浏 览 按 钮 功 能，即 按 T a b 键 的 自动 切 换 功 能。5)：界 面 上 首 先 应 输 入 的 和 重 要 信 息 的 控 件 在 T a b 顺 序 中应 当 靠 前,位 置 也 应 放 在 窗 口 上 较 醒 目 的 位 置。6)：同 一 界 面 上 的 控 件 数 最 好 不 要 超 过 1 0 个，多 于 1 0 个时 可 以 考 虑 使 用 分 页 界 面 显 示。7)：分 页 界 面 要 支 持 在 页 面 间 的 快 捷 切 换，常 用 组 合 快 捷键 C t r l+T a b8)：默 认 按 钮 要 支 持 E n t e r 及 选 操 作，即 按 E n t e r 后 自 动执 行 默 认 按 钮 对 应 操 作9)：可 写 控 件 检 测 到 非 法 输 入 后 应 给 出 说 明 并 能 自 动 获 得焦 点。1 0)：T a b 键 的 顺 序 与 控 件 排 列 顺 序 要 一 直，目 前 流 行 总体 从 上 到 下，同 时 行 间 从 左 到 右 的 方 式。1 1)：复 选 框 和 选 项 框 按 选 择 几 率 的 高 底 而 先 后 排 列。1 2)：复 选 框 和 选 项 框 要 有 默 认 选 项，并 支 持 T a b 选 择。1 3)：选 项 数 相 同 时 多 用 选 项 框 而 不 用 下 拉 列 表 框。1 4)：界 面 空 间 较 小 时 使 用 下 拉 框 而 不 用 选 项 框。1 5)：选 项 数 叫 少 时 使 用 选 项 框，相 反 使 用 下 拉 列 表 框。1 6)：专 业 性 强 的 软 件 要 使 用 相 关 的 专 业 术 语，通 用 性 界面 则 提 倡 使 用 通 用 性 词 眼。目 前 流 行 的 界 面 风 格 有 三 种 方 式：多 窗 体、单 窗 体 以 及 资源 管 理 器 风 格，无 论 那 种 风 格，以 下 十 条 规 则 是 应 该 被 重 视 的。2：规 范 性：通 常 界 面 设 计 都 按 W i n d o w s 界 面 的 规 范 来 设 计，即包 含“菜 单 条、工 具 栏、工 具 箱、状 态 栏、滚 动 条、右 键快 捷 菜 单”的 标 准 格 式，可 以 说：界 面 遵 循 规 范 化 的 程 度越 高，则 易 用 性 相 应 的 就 越 好。小 型 软 件 一 般 不 提 供 工 具箱。规 范 性 细 则：1)：常 用 菜 单 要 有 命 令 快 捷 方 式。2)：完 成 相 同 或 相 近 功 能 的 菜 单 用 横 线 隔 开 放 在 同 一 位 置。3)：菜 单 前 的 图 标 能 直 观 的 代 表 要 完 成 的 操 作。4)：菜 单 深 度 一 般 要 求 最 多 控 制 在 三 层 以 内。5)：工 具 栏 要 求 可 以 根 据 用 户 的 要 求 自 己 选 择 定 制。6)：相 同 或 相 近 功 能 的 工 具 栏 放 在 一 起。7)：工 具 栏 中 的 每 一 个 按 钮 要 有 及 时 提 示 信 息。8)：一 条 工 具 栏 的 长 度 最 长 不 能 超 出 屏 幕 宽 度。9)：工 具 栏 的 图 标 能 直 观 的 代 表 要 完 成 的 操 作。1 0)：系 统 常 用 的 工 具 栏 设 置 默 认 放 置 位 置。1 1)：工 具 栏 太 多 时 可 以 考 虑 使 用 工 具 箱。1 2)：工 具 箱 要 具 有 可 增 减 性，由 用 户 自 己 根 据 需 求 定 制。1 3)：工 具 箱 的 默 认 总 宽 度 不 要 超 过 屏 幕 宽 度 的 1/5。1 4)：状 态 条 要 能 显 示 用 户 切 实 需 要 的 信 息，常 用 的 有：目 前 的 操 作、系 统 状 态、用 户 位 置、用 户 信 息、提 示 信 息、错 误 信 息 等，如 果 某 一 操 作 需 要 的 时 间 较 长，还 应 该 显 示进 度 条 和 进 程 提 示。1 5)：滚 动 条 的 长 度 要 根 据 显 示 信 息 的 长 度 或 宽 度 能 及 时变 换，以 利 于 用 户 了 解 显 示 信 息 的位 置 和 百 分 比。1 6)：状 态 条 的 高 度 以 放 置 五 好 字 为 宜，滚 动 条 的 宽 度 比状 态 条 的 略 窄。1 7)：菜 单 和 工 具 条 要 有 清 楚 的 界 限;菜 单 要 求 凸 出 显 示，这 样 在 移 走 工 具 条 时 仍 有 立 体 感。1 8)：菜 单 和 状 态 条 中 通 常 使 用 5 号 字 体。工 具 条 一 般 比 菜单 要 宽，但 不 要 宽 的 太 多，否 则 看 起 来 很 不 协 调。1 9)：右 键 快 捷 菜 单 采 用 与 菜 单 相 同 的 准 则。3：帮 助 设 施：系 统 应 该 提 供 详 尽 而 可 靠 的 帮 助 文 档，在 用 户 使 用 产 生 迷惑 时 可 以 自 己 寻 求 解 决 方 法。帮 助 设 施 细 则：1)：帮 助 文 档 中 的 性 能 介 绍 与 说 明 要 与 系 统 性 能 配 套 一 致。2)：打 包 新 系 统 时，对 作 了 修 改 的 地 方 在 帮 助 文 档 中 要 做相 应 的 修 改。3)：操 作 时 要 提 供 及 时 调 用 系 统 帮 助 的 功 能。常 用 F 1。4)：在 界 面 上 调 用 帮 助 时 应 该 能 够 及 时 定 位 到 与 该 操 作 相对 的 帮 助 位 置。也 就 是 说 帮 助 要 有 即 时 针 对 性。5)：最 好 提 供 目 前 流 行 的 联 机 帮 助 格 式 或 H T M L 帮 助 格 式。6)：用 户 可 以 用 关 键 词 在 帮 助 索 引 中 搜 索 所 要 的 帮 助，当然 也 应 该 提 供 帮 助 主 题 词。7)：如 果 没 有 提 供 书 面 的 帮 助 文 档 的 话，最 好 有 打 印 帮 助的 功 能。8 )：在 帮 助 中 应 该 提 供 我 们 的 技 术 支 持 方 式，一 旦 用 户难 以 自 己 解 决 可 以 方 便 的 寻 求 新 的 帮 助 方 式。4：合 理 性：屏 幕 对 角 线 相 交 的 位 置 是 用 户 直 视 的 地 方，正 上 方 四 分 之一 处 为 易 吸 引 用 户 注 意 力 的 位 置，在 放 置 窗 体 时 要 注 意 利 用 这 两 个 位 置。合 理 性 细 则：1)：父 窗 体 或 主 窗 体 的 中 心 位 置 应 该 在 对 角 线 焦 点 附 近。2)：子 窗 体 位 置 应 该 在 主 窗 体 的 左 上 角 或 正 中3)：多 个 子 窗 体 弹 出 时 应 该 依 次 向 右 下 方 偏 移，以 显 示 窗体 出 标 题 为 宜。4)：重 要 的 命 令 按 钮 与 使 用 较 频 繁 的 按 钮 要 放 在 界 面 上 注目 的 位 置。5)：错 误 使 用 容 易 引 起 界 面 退 出 或 关 闭 的 按 钮 不 应 该 放 在易 点 位 置。横 排 开 头 或 最 后 与 竖 排 最 后 为 易 点 位 置。6)：与 正 在 进 行 的 操 作 无 关 的 按 钮 应 该 加 以 屏 蔽(W i n d o w s 中 用 灰 色 显 示，没 法 使 用 该 按 钮)。7)：对 可 能 造 成 数 据 无 法 恢 复 的 操 作 必 须 提 供 确 认 信 息,给 用 户 放 弃 选 择 的 机 会。8)：非 法 的 输 入 或 操 作 应 有 足 够 的 提 示 说 明。9)：对 运 行 过 程 中 出 现 问 题 而 引 起 错 误 的 地 方 要 有 提 示，让 用 户 明 白 错 误 出 处，避 免 形 成 无 限 期 的 等 待附一：附一：附一：附一：二十世纪代表性的人机界面装置二十世纪代表性的人机界面装置二十世纪代表性的人机界面装置二十世纪代表性的人机界面装置 1 1 1 1、扩音器、扩音器、扩音器、扩音器2 2 2 2、按键式电话、按键式电话、按键式电话、按键式电话3 3 3 3、方向盘、方向盘、方向盘、方向盘4 4 4 4、磁卡、磁卡、磁卡、磁卡5 5 5 5、交通灯、交通灯、交通灯、交通灯6 6 6 6、遥控器、遥控器、遥控器、遥控器7 7 7 7、阴极射线管（、阴极射线管（、阴极射线管（、阴极射线管（CRTCRTCRTCRT）8 8 8 8、液晶显示器（、液晶显示器（、液晶显示器（、液晶显示器（LCDLCDLCDLCD）9 9 9 9、鼠标、鼠标、鼠标、鼠标/图形界面图形界面图形界面图形界面10101010、条形码扫描器、条形码扫描器、条形码扫描器、条形码扫描器附二：附二：附二：附二：图形界面设计作品欣赏图形界面设计作品欣赏图形界面设计作品欣赏图形界面设计作品欣赏 实验一：临摹平板电脑操作界面实验一：临摹平板电脑操作界面