浙 江 金 融 职 业 学 院 教 案 首 页 周 次 : 1 日 期 : 9.8-9.11 课 时 序 : 1-4 课 题 第 一 章 UI 概 论 教 学 目 的 要 求 1) UI 大 背 景 2) UI 是 什 么?UID 是 什 么? 3) UI 设 计 师 是 做 什 么 的? 4) UI 中 国 的 现 状 如 何? 重 点 UI 的 概 念 UI 在 中 国 的 发 展 现 状 难 点 UI 的 设 计 师 职 业 分 工 教 学 过 程 设 计 及 时 间 分 配 一 组 织 教 学 (15 ) 由 UI 在 近 二 三 十 年 间 发 展 与 演 进 的 过 程 与 发 展 背 景 介 绍, 引 发 学 生 对 所 学 课 程 的 深 入 思 考 二 教 授 新 课 (65 ) 背 景 知 识 汇 总 : 1 UI 行 业 的 发 展 背 景 2 什 么 是 UI? 什 么 是 UID? 3 UI 设 计 师 是 做 什 么 的? 4 UI 中 国 的 现 状 如 何? 三 课 程 设 计 : 5 电 子 排 版 技 术 的 课 程 设 计 6 电 子 排 版 技 术 课 程 的 考 核 方 式 教 学 场 所 或 教 学 方 法 金 通 507-509 实 训 室 演 示 法 阐 述 法 设 问 法 使 用 教 具 计 算 机 + 电 子 教 室 作 业 课 后 记 授 课 教 师 : 周 晶
第 一 章 UI 概 述 单 元 设 计 : 课 题 名 称 :UI 综 述 教 学 任 务 :1 UI 是 什 么? 2 UI 设 计 师 是 做 什 么 的? 3 UI 在 中 国 的 现 状 如 何? 4 数 据 时 代 的 用 户 体 验 (APP 视 觉 设 计 艺 术 ) 教 学 方 式 : 讲 授 讨 论 案 例 分 析 教 学 要 求 ( 作 业 ): 图 标 收 集 与 分 析 教 学 时 间 :4 课 时 教 学 内 容 : 一 UI 的 概 念 第 一 节 UI 是 什 么 UI 即 User Interface( 用 户 界 面 ) 的 简 称 UI 设 计 则 是 指 对 软 件 的 人 机 交 互 操 作 逻 辑 界 面 美 观 的 整 体 设 计 好 的 UI 设 计 不 仅 是 让 软 件 变 得 有 个 性 有 品 味, 还 要 让 软 件 的 操 作 变 得 舒 适 简 单 自 由, 充 分 体 现 软 件 的 定 位 和 特 点 人 机 交 互 操 作 逻 辑 界 面 美 观 二 UI 的 行 业 背 景 :
用 户 界 面 设 计 行 业 与 职 业 定 位 UI 界 面 设 计 的 发 展 阶 段
1 UI 界 面 设 计 的 史 前 时 代
2 UI 界 面 设 计 的 其 他 方 面 软 件 设 计 可 分 为 两 个 部 分 : 编 码 设 计 与 UI 设 计 编 码 设 计 大 家 都 很 熟 悉, 但 是 UI 设 计 还 是 一 个 很 陌 生 的 词, 即 使 一 些 专 门 从 事 网 站 与 多 媒 体 设 计 的 人 也 不 完 全 理 解 UI 的 意 思 UI 的 本 意 是 用 户 界 面, 是 英 文 User 和 interface 的 缩 写 从 字 面 上 看 是 用 户 与 界 面 2 个 组 成 部 分, 但 实 际 上 还 包 括 用 户 与 界 面 之 间 的 交 互 关 系 在 飞 速 发 展 的 电 子 产 品 中, 界 面 设 计 工 作 一 点 点 的 被 重 视 起 来 做 界 面 设 计 的 美 工 也 随 之 被 称 之 为 UI 设 计 师 或 UI 工 程 师 其 实 软 件 界 面 设 计 就 像 工 业 产 品 中 的 工 业 造 型 设 计 一 样, 是 产 品 的 重 要 卖 点 一 个 电 子 产 品 拥 有 美 观 的 界 面 会 给 人 带 来 舒 适 的 视 觉 享 受, 拉 近 人 与 商 品 的 距 离, 为 商 家 创 造 卖 点 界 面 设 计 不 是 单 纯 的 美 术 绘 画, 他 需 要 定 位 使 用 者 使 用 环 境 使 用 方 式 并 且 为 最 终 用 户 而 设 计, 是 建 立 在 科 学 性 之 上 的 艺 术 设 计 检 验 一 个 界 面 的 标 准 既 不 是 某 个 项 目 开 发 组 领 导 的 意 见 也 不 是 项 目 成 员 投 票 的 结 果, 而 是 终 端 用 户 的 感 受 所 以 界 面 设 计 要 和 用 户 研 究 紧 密 结 合, 是 一 个 不 断 为 最 终 用 户 设 计 满 意 视 觉 效 果 的 过 程
三 UI 都 会 学 什 么? 1 针 对 不 同 系 统 的 图 标 设 计 和 界 面 设 计 ; 2 从 图 标 手 用 户 体 验 ; 3 图 标 的 特 点 和 分 类 ; 4 工 业 制 作 图 标 的 方 法 ; 5 界 面 的 交 互 设 计 与 制 作 ; 第 二 节 UI 设 计 师 是 做 什 么 的 在 中 国,UI 设 计 还 是 一 个 需 要 不 断 成 长 的 设 计 领 域, 但 eicodesign,tigocn, lkkui design, Robin design 等 国 内 知 名 设 计 机 构 已 经 进 入 了 探 索 UI 设 计 的 道 路 UI 设 计 从 工 作 内 容 上 来 说 分 为 3 个 方 向 它 主 要 是 由 UI 研 究 的 3 个 因 素 决 定 的, 其 分 别 是 研 究 工 具, 研 究 人 与 界 面 的 关 系, 研 究 人 研 究 界 面 GUI (Graphic UI designer) 图 形 设 计 师 国 内 目 前 大 部 分 UI 工 作 者 都 是 从 事 这 个 行 业 也 有 人 称 之 为 美 工, 但 实 际 上 不 是 单 纯 意 义 上 的 美 术 工 人, 而 是 软 件 产 品 的 产 品 外 形 设 计 师 这 些 设 计 师 大 多 是 美 术 院 校 毕 业 的, 其 中 大 部 分 是 有 美 术 设 计 教 育 背 景, 例 如 工 业 外 形 设 计, 装 潢 设 计, 信 息 多 媒 体 设 计 等 研 究 人 与 界 面 的 关 系 ID (interaction designer) 交 互 设 计 师 在 图 形 界 面 产 生 之 前, 长 期 以 来 UI 设 计 师 就 是 指 交 互 设 计 师 交 互 设 计 师 的 工 作 内 容 就 是 设 计 软 件 的 操 作 流 程, 树 状 结 构, 软 件 的 结 构 与 操 作 规 范 (spec) 等 一 个 软 件 产 品 在 编 码 之 前 需 要 作 的 就 是 交 互 设 计, 并 且 确 立 交 互 模 型, 交 互 规 范 交 互 设 计 师 一 般 都 是 软 件 工 程 师 背 景 居 多
研 究 人 UE (User experience engineer) 用 户 测 试 / 研 究 工 程 师 任 何 的 产 品 为 了 保 证 质 量 都 需 要 测 试, 软 件 的 编 码 需 要 测 试, 自 然 UI 设 计 也 需 要 被 测 试 这 个 测 试 和 编 码 没 有 任 何 关 系, 主 要 是 测 试 交 互 设 计 的 合 理 性 以 及 图 形 设 计 的 美 观 性 测 试 方 法 一 般 都 是 采 用 焦 点 小 组, 用 目 标 用 户 问 卷 的 形 式 来 衡 量 UI 设 计 的 合 理 性 这 个 职 位 很 重 要, 如 果 没 有 这 个 职 位,UI 设 计 的 好 坏 只 能 凭 借 设 计 师 的 经 验 或 者 领 导 的 审 美 来 评 判, 这 样 就 会 给 企 业 带 来 严 重 的 风 险 性 用 户 研 究 工 程 师 一 般 是 心 理 学 人 文 学 背 景 比 较 合 适 综 上 所 述 UI 设 计 师 就 是 : 软 件 图 形 设 计 师 交 互 设 计 师 和 用 户 研 究 工 程 师 其 中 交 互 设 计 师 : UI 的 本 义 是 用 户 界 面, 是 英 文 User 和 interface 的 缩 写 UI 设 计 师 则 指 从 事 对 软 件 的 人 机 交 互 操 作 逻 辑 界 面 美 观 的 整 体 设 计 工 作 的 人 工 作 内 容 : 负 责 软 件 界 面 的 美 术 设 计 创 意 工 作 和 制 作 工 作 ; 根 据 各 种 相 关 软 件 的 用 户 群, 提 出 构 思 新 颖 有 高 度 吸 引 力 的 创 意 设 计 ; 对 页 面 进 行 优 化, 使 用 户 操 作 更 趋 于 人 性 化 ; 维 护 现 有 的 应 用 产 品 ; 收 集 和 分 析 用 户 对 于 GUI 的 需 求 第 三 节 UI 设 计 在 中 国 的 现 状 目 前 在 国 内 UI 还 是 一 个 相 对 陌 生 的 词, 即 便 是 洛 可 可 设 计 也 在 UI 设 计 的 道 路 上 不 断 探 索 客 户 及 用 户 的 需 求 我 们 经 常 看 到 一 些 招 聘 广 告 写 着 : 招 聘 界 面 美 工 界 面 美 术 设 计 师 等 等 这 表 明 在 国 内 对 UI 的 理 解 还 停 留 在 美 术 设 计 方 面, 认 为 UI 的 工 作 只 是 描 边 画 线, 缺 乏 对 用 户 交 互 的 重 要 性 的 理 解 ; 另 一 方 面 在 软 件 开 发 过 程 中 还 存 在 重 技 术 而 不 重 应 用 的 现 象 许 多 商 家 认 为 软 件 产 品 的 核 心 是 技 术, 而 UI 仅 仅 是 次 要 的 辅 助, 这 点 在 人 员 的 比 例 与 待 遇 上 可 以 表 现 出 来 但
这 不 是 UI 设 计 真 正 的 价 值 体 现, 只 是 UI 设 计 发 展 的 一 个 必 经 过 程 我 们 以 物 质 产 品 手 机 行 业 为 例, 当 手 机 刚 刚 进 入 市 场 的 时 候 不 但 价 格 贵 的 惊 人, 而 且 除 了 通 话 以 外 没 有 什 么 其 他 功 能 由 于 当 时 的 主 导 是 技 术, 所 以 大 家 都 把 精 力 放 在 信 号 待 机 时 间 寿 命 等 方 面, 对 于 产 品 的 造 型, 使 用 的 合 理 性 很 少 关 心 事 过 境 迁, 如 今 技 术 已 经 完 全 的 达 到 用 户 的 需 求, 于 是 商 家 为 了 创 造 卖 点, 提 高 争 力, 非 常 重 视 产 品 的 外 观 设 计, 除 此 之 外 还 频 频 推 出 短 信, 彩 屏, 和 铉, 彩 信, 摄 像 头 等 等 这 样 一 来 产 品 的 美 观 个 性 易 用 易 学 人 性 化 等 等 都 成 了 产 品 的 卖 点 软 件 产 品 与 物 质 产 品 的 发 展 是 相 同 的 过 去 由 于 计 算 机 硬 件 的 限 制, 编 码 设 计 成 为 软 件 开 发 的 代 名 词, 美 观 亲 和 的 图 形 化 界 面 与 合 理 易 用 的 交 互 方 式 都 没 有 得 到 充 分 的 重 视, 实 际 上 这 个 时 期 的 软 件 叫 作 软 件 程 序, 而 不 是 软 件 产 品 现 今 随 着 计 算 机 硬 件 的 飞 速 发 展, 过 去 的 软 件 程 序 已 经 不 能 适 应 用 户 的 要 求 软 件 产 品 在 激 烈 的 市 场 竞 争 中, 仅 仅 有 强 大 的 功 能 是 远 远 不 够 的, 不 足 以 战 胜 强 劲 的 对 手 幸 运 的 是 在 国 内 一 些 高 瞻 远 瞩 的 民 族 企 业 已 经 开 始 意 识 到 UI 给 软 件 产 品 带 来 的 巨 大 卖 点 了, 例 如 金 山 公 司 的 影 霸 词 霸 毒 霸 网 标, 由 于 重 视 UI 的 开 发 与 地 位, 才 使 得 金 山 产 品 在 同 类 软 件 产 品 中 首 屈 一 指 联 想 软 件 的 UI 部 门 积 极 开 展 用 户 研 究 与 使 用 性 测 试, 将 易 用 与 美 观 相 结 合, 推 出 的 双 模 式 电 脑 幸 福 系 列 等 成 功 UI 范 例, 为 联 想 赢 得 全 球 消 费 PC 第 三 的 称 号 等 等 等 等. 实 践 证 明, 各 商 家 只 要 在 产 品 美 观 和 易 用 设 计 方 面 很 小 投 入, 将 会 有 很 大 产 出 其 投 入 产 出 比, 要 比 在 功 能 领 先 性 开 发 上 的 投 入 大 得 多 我 们 不 得 不 承 认 现 阶 段 中 国 在 很 多 领 域 都 与 西 方 发 达 国 家 有 相 当 大 的 差 距, 如 何 赶 上 并 超 过 他 们 是 我 们 这 代 人 肩 负 的 历 史 使 命 软 件 产 品 领 域 不 象 物 质 产 品 那 样 存 在 工 艺 材 料 上 的 限 制, 软 件 产 品 核 心 问 题 就 是 人 提 高 软 件 UI 设 计 师 个 人 能 力 减 小 人 员 上 的 差 距 是 中 国 UI 发 展 首 要 关 键 的 问 题 目 前 国 内 各 院 校 还 没 有 设 立 相 对 健 全 的 UI 设 计 专 业, 所 以 提 高 UI 设 计 师 能 力 关 键 在 于 提 供 一 个 良 好 的 学 习 与 交 流 的 资 源 环 境 国 内 已 经 有 很 多 交 流 设 计 网 站, 介 绍 工 业 设 计 平 面 设 计 服 装 设 计 绘 画 艺 术 多 媒 体 flash 等, 但 是 UI 设 计 一 直 没 有 受 到 应 有 的 关 注, 仅 仅 被 放 在 数 码 设 计 或 者 平 面 网 页 设 计 的 一 个 栏 目 里, 这 仅 有 的 资 源 对 培 养 优 秀 的 设 计 师 是 不 够 的, 必 须 有 一 个 信 息 快 捷 资 源 丰 富 设 计 水 平 一 流 专 业 权 威 的 UI 设 计 学 习 与 交 流 的 地 方 才 能 适 应 日 益 发 展
的 UI 设 计 师 们 的 需 求 课 后 作 业 : 请 自 行 收 集 十 款 风 格 迥 异 的 图 标, 并 对 其 进 行 分 类, 书 写 500 字 的 分 析, 内 容 包 括 以 下 方 面 : 1 收 集 的 原 因, 喜 欢 或 不 喜 欢 的 方 面 ; 2 分 析 其 制 作 思 路 及 可 能 用 到 的 工 具 ; 3 分 析 其 设 计 风 格 和 特 点 ; 4 根 据 自 身 体 验 和 理 解, 评 测 其 可 能 的 用 户 体 验 效 果 ;