互 联 网 产 品 (Web/ 移 动 Web/APP) 视 觉 设 计 风 格 篇 1.1 风 格 溯 源 风 格 一 词 其 实 是 可 以 用 于 形 容 任 何 物 或 事 的 超 级 流 行 用 语 人 们 很 早 就 开 始 关 注 风 格 一 词, 它 源 于 希 腊 文, 本 义 表

第 1 章 第 1 章 第 1 章 关 于 网 站 视 觉 风 格 视 觉 是 物 体 的 影 像 刺 激 视 网 膜 后 所 产 生 的 一 种 感 觉, 是 最 基 本 和 最 重 要 的 生 理 现 象, 是 人 类 辅 助 生 存 的 感 官 功 能, 也 是 人 类 进 行 交 流 的 重 要 手 段 网 站 视 觉 风 格 对 用 户 建 立 网 站 的 初 步 印 象 具 有 重 要 的 作 用 1

互 联 网 产 品 (Web/ 移 动 Web/APP) 视 觉 设 计 风 格 篇 1.1 风 格 溯 源 风 格 一 词 其 实 是 可 以 用 于 形 容 任 何 物 或 事 的 超 级 流 行 用 语 人 们 很 早 就 开 始 关 注 风 格 一 词, 它 源 于 希 腊 文, 本 义 表 示 一 个 长 度 大 于 宽 度 的 固 定 的 直 线 体 在 罗 马 作 家 特 伦 斯 和 西 塞 罗 的 著 作 中, 将 这 个 词 演 变 为 书 体 文 体 之 意, 表 示 以 文 字 表 达 思 想 的 某 种 特 定 方 式 古 希 腊 哲 学 家 亚 里 士 多 德 认 为, 风 格 是 思 维 的 修 饰 或 句 法 模 式 汉 语 的 风 格 一 词 在 东 晋 葛 洪 的 抱 朴 子 里 就 已 出 现, 指 人 的 风 度 品 格 在 南 朝 梁 代 刘 勰 的 文 心 雕 龙 中, 风 格 指 文 章 的 风 范 格 局, 并 提 出 了 作 者 的 才 气 学 习 是 构 成 作 品 风 格 主 观 方 面 的 因 素 在 唐 代 的 关 于 绘 画 史 论 的 著 作 中, 风 格 被 用 作 绘 画 艺 术 的 品 评 用 语 汉 语 大 词 典 中 对 风 格 一 词 的 解 析 包 括 如 下 几 点 : (1) 风 度 品 格 ; (2) 气 魄 ; (3) 风 采 风 韵 ; (4) 指 作 家 和 艺 术 作 品 在 创 作 过 程 中 所 表 现 出 来 的 格 调 特 色 ; (5) 泛 指 事 物 的 特 色 设 计 词 典 中 这 样 解 释 : 风 格 是 艺 术 作 品 或 工 业 产 品 的 审 美 价 值 的 个 性 表 现 审 美 价 值 作 为 客 体 满 足 主 体 审 美 需 要 的 尺 度 关 系, 构 成 不 同 时 代 不 同 民 族 不 同 流 派 不 同 审 美 客 体 类 型 的 风 格 区 别 风 格 由 两 个 方 面 组 成 : 一 方 面 是 作 品 的 社 会 主 体 题, 它 体 现 了 作 者 的 审 美 理 想 ; 另 一 方 面 是 作 品 的 形 式 语 言, 由 构 成 作 品 的 形 式 因 素 及 其 结 构 方 式 形 成 风 格 往 往 还 意 味 着 某 种 审 美 价 值 取 向 对 传 统 审 美 趣 味 定 势 的 背 离 [1] 可 见, 风 格 一 词 可 以 用 来 形 容 任 意 的 事 物, 也 包 括 人 的 外 貌 行 为 等 在 现 今 的 日 常 生 活 中, 人 们 听 到 的 风 格 一 词 更 多 地 被 应 用 于 艺 术 领 域, 从 审 美 角 度 诠 释 着 纯 艺 术 或 应 用 艺 术 1.2 何 谓 网 站 的 视 觉 风 格 我 国 著 名 的 文 艺 理 论 家 美 学 家 艺 术 教 育 家 王 朝 闻 先 生 在 他 的 著 作 美 学 概 论 中 提 出 : 艺 术 风 格 作 为 一 种 表 现 形 态, 有 如 人 的 风 度 一 样, 它 是 从 艺 术 作 品 的 整 体 上 所 呈 现 出 来 的 代 表 性 特 点, 是 由 独 特 的 内 容 与 形 式 相 统 一 艺 术 家 的 主 观 方 面 的 特 点 和 题 材 的 客 观 特 征 相 统 一 所 造 成 的 一 种 难 于 说 明 却 不 难 感 觉 的 独 特 面 貌 [2] 概 括 地 说, 网 站 的 视 觉 风 格 是 指 站 点 的 整 体 形 象 给 浏 览 者 的 综 合 感 受 也 就 是 说, 网 站 的 视 觉 风 格 是 由 网 页 上 的 视 觉 元 素 体 现 出 来 的 视 觉 是 人 的 基 本 与 重 要 的 生 理 与 心 理 现 象, 是 人 类 辅 助 生 存 的 感 官 功 能, 也 是 人 类 进 行 交 流 的 重 要 手 段 作 为 生 理 现 象, 是 人 的 视 觉 器 官 眼 睛 的 作 用 的 体 现, 形 成 视 觉 感 觉 ; 作 为 心 理 现 象, 是 由 于 视 觉 具 有 知 觉 思 维 记 忆 情 感 等 作 用, 形 成 视 觉 认 知 视 觉 思 维 学 说 主 张 感 觉 与 知 觉 的 同 时 作 用, 认 为 视 觉 也 是 一 种 特 殊 的 思 维 方 式, 具 有 选 择 与 判 断 整 合 与 组 织 的 能 力 因 此, 视 觉 包 括 认 识 和 解 释 两 个 方 面, 不 能 简 单 地 将 视 觉 与 眼 睛 及 功 能 相 等 同 网 站 视 觉 传 达 的 实 质 是 借 助 视 觉 语 言 的 信 息 传 达, 借 助 含 有 不 同 信 息 量 的 空 间 形 态 光 色 肌 理 及 相 互 间 的 组 织 关 系, 采 用 最 佳 的 视 觉 程 序 把 信 息 快 速 准 确 地 传 达 出 去, 并 使 受 众 能 够 通 过 自 己 的 视 觉 经 验 和 心 理 联 想 认 识 和 理 解 视 觉 语 言, 将 2

第1章 其表达的物质信息和精神信息良好地接受下来 从而获得最佳视觉效果 [1] 从本质上说 网站的视觉风格 作为一种表现形态 是从网站的视觉要素及其组织形式所呈现出来的代表性特点 是网站内容与视觉形式 相统一的结果 是网站的功能需求和用户需求被设计者诠释后而体现出的一种独特面貌 网站的视觉风格就像现代设计发展中的各种流派一样 具有暂时性和流行性的特点 有的风格在流 行几年后会成为经典 有的则会慢慢从人们的视野中消失 网站视觉风格具有混搭的特点 如现在流行的 扁平化设计风格 往往又是极简设计风格 单页网站又经常会包含视差滚动或滚动侦测设计 有的网站会 有几种风格的混搭 Chilicongraphic 是一个从事网页设计 前端开发 企业形象 在线营销和创新设计的独立设计工作室 工作室网站通过饶有趣味的图形创意准确地表现了工作室从事的业务类型和流程 网站属于单页形式 并 采用了扁平化设计风格 导航方式则使用了现在流行的滚动侦测方式 同时还使用了视差滚动 可以说包 括了目前最流行 最典型的设计风格 作为设计公司的网站将当下最流行的设计趋势体现在其官方网站中 可以让客户了解到公司具备实现当下最具潮流设计的技术实力 有利于赢得客户的信任和好感 http://chilicongraphic.com/ 3

互联网产品 Web/ 移动 Web/APP) 视觉设计 风格篇 并不是说网站的设计都要把最酷炫 最流行的元素都加上 而是要根据网站的定位和需求决定最终 的设计要素 一味堆砌的结果可能会导致不伦不类 或者影响网页的加载速度 最终影响用户体验的效果 从事视频托管服务的 Wistia 公司的官方网站也是采用的扁平设计风格 并且十分简洁 网站首页 的布局和色彩设计张弛有度 首屏的图形和文案点明了公司的核心业务 视频的使用更容易使用户理解 其内容 http://wistia.com/ 4

第1章 而 团队介绍 二级页面中的图片使用鼠标事件生动有趣 充满活力 http://wistia.com/about/yearbook 5

互联网产品 Web/ 移动 Web/APP) 视觉设计 风格篇 视觉风格的形成需要突出核心 利用某一种元素 将典型特征做到极致 美观 就会产生很强的视 觉表现力 就可以强化网站的视觉风格 并创造更具特色的品牌氛围 知名的网页设计类博客网站 Web Design Wall 成立于 2007 年 8 月, 由多伦多的网页设计师和插画 家尼克拉建立 以谈论设计思想 趋势和教程为主要内容 由于其高品质的内容和美观的设计风格而被许 多杂志和画廊所推崇 该博客采用了用户习惯的信息布局方式 页面头部和尾部的手绘插图 使博客获得 了独特而优美的视觉印象 http://webdesignerwall.com/ 每一种风格样式都不一定绝对完美 会有各自的优缺点 在设计时除了要符合网站的定位 还要求 设计师有敏锐的洞察力和懂得如何取舍 6

第 2 章 第 1 章 第 2 章 网 站 视 觉 风 格 的 建 立 网 站 视 觉 风 格 的 确 立 不 是 凭 空 而 来 的, 而 是 以 网 站 的 定 位 为 依 据 的, 来 自 于 网 站 的 内 容 功 能 以 及 目 标 用 户 的 需 求 网 站 视 觉 风 格 的 建 立 要 能 体 现 出 功 能 性 可 视 性 统 一 性 艺 术 性 的 原 则 7

互 联 网 产 品 (Web/ 移 动 Web/APP) 视 觉 设 计 风 格 篇 2.1 依 据 网 站 视 觉 风 格 的 形 成 有 着 多 方 面 的 原 因 首 先, 网 站 建 立 的 根 本 目 的 或 是 实 现 一 种 业 务, 或 是 成 为 一 种 媒 体, 而 其 最 终 目 的 是 通 过 为 用 户 提 供 优 质 的 服 务 来 获 得 经 济 效 益 是 做 业 务, 还 是 做 媒 体, 这 取 决 于 网 站 的 定 位 网 站 的 定 位 是 网 站 视 觉 设 计 的 最 根 本 依 据, 而 且 决 定 网 站 能 否 生 存 的 关 键 因 素 依 然 是 网 站 的 内 容, 没 有 内 容 的 网 站 也 就 失 去 了 存 在 的 意 义 因 此 网 站 视 觉 风 格 的 确 立 不 是 凭 空 而 来, 而 是 以 网 站 的 定 位 为 依 据 的, 来 自 于 网 站 的 内 容 功 能 及 目 标 用 户 的 需 求 其 次, 网 站 视 觉 风 格 的 建 立 也 离 不 开 设 计 师 的 个 体 因 素, 离 不 开 在 创 意 和 表 现 方 面 的 个 性 体 现 因 此, 网 站 的 视 觉 风 格 的 产 生 是 网 站 的 定 位 与 作 为 创 作 主 体 的 设 计 者 的 主 观 性 的 统 一 网 站 的 定 位 是 网 页 设 计 的 最 根 本 依 据, 是 网 站 设 计 开 发 的 基 石, 网 站 的 内 容 策 划 信 息 架 构 交 互 设 计 视 觉 设 计 等 环 节 的 顺 利 实 施 都 依 赖 于 网 站 准 确 的 定 位, 准 确 地 锁 定 并 最 终 满 足 定 位 也 是 网 站 视 觉 设 计 的 目 标 这 很 像 竞 技 体 育 中 的 射 击 项 目, 目 标 就 是 靶 心, 弹 孔 越 接 近 靶 心 越 能 获 胜 ; 网 页 设 计 中 的 定 位 就 是 像 靶 心, 设 计 越 能 体 现 定 位 就 越 能 保 证 网 页 设 计 的 成 功 二 者 的 不 同 之 处 在 于 射 击 的 靶 子 是 人 为 给 定 的, 很 容 易 找 到, 而 网 站 设 计 中 的 这 个 靶 心 则 更 抽 象 复 杂, 必 须 经 过 严 谨 的 调 研 和 缜 密 的 分 析 才 能 获 得 网 站 视 觉 设 计 是 对 网 站 定 位 与 用 户 需 求 的 一 种 明 确 的 体 现, 最 终 是 在 表 现 层 面 上 被 展 示 出 来 2.1.1 网 站 目 标 分 析 网 站 目 标 不 同, 网 站 的 设 计 甚 至 建 设 流 程 都 有 所 不 同, 当 然 网 站 视 觉 风 格 也 会 随 之 不 同 比 如 新 闻 类 网 站 为 了 保 证 其 信 息 的 易 读 性, 整 体 设 计 风 格 会 趋 向 简 洁, 结 构 严 谨, 页 面 造 型 元 素 多 为 直 线 形 态 ; 而 电 子 商 务 网 站, 要 实 现 浏 览 者 从 选 择 商 品 到 购 买 商 品 的 过 程, 因 此 产 品 的 搜 索 展 示 方 式 购 买 等 功 能 的 设 计 尤 为 重 要, 图 形 设 计 重 在 提 升 网 站 的 交 互 体 验 和 信 任 体 验 网 站 目 标 经 常 会 被 定 义 为 一 种 虚 无 缥 缈 的 理 想, 如 给 客 户 提 供 最 大 的 价 值 促 进 公 司 产 品 销 售 传 播 公 司 品 牌 形 象 等 诸 如 此 类 的 话, 而 这 些 空 泛 的 描 述 却 无 法 给 网 站 建 设 者 真 正 的 指 导 对 建 站 者 具 有 真 正 有 指 导 作 用 的 网 站 目 标, 应 该 非 常 明 确 而 单 纯, 应 该 是 特 定 的 用 户 行 为 在 网 站 建 设 的 前 期 准 备 阶 段, 就 应 该 想 清 楚 到 底 想 让 用 户 在 网 站 上 做 些 什 么, 得 到 什 么? 这 才 是 网 站 目 标 当 然, 目 标 的 确 立 需 要 根 据 建 站 者 的 主 观 意 愿, 更 需 要 严 谨 的 市 场 调 研 与 分 析, 才 能 保 证 目 标 的 科 学 性 和 准 确 性 市 场 分 析 是 对 市 场 规 模 位 置 性 质 特 点 市 场 容 量 及 吸 引 范 围 等 调 查 资 料 所 进 行 的 经 济 分 析 市 场 调 查 的 方 法 必 须 严 格 认 真 客 观 科 学, 要 做 到 严 谨 精 细, 否 则 可 能 影 响 调 查 的 客 观 性 和 准 确 性, 得 出 与 事 实 不 符 的 结 果 市 场 调 查 主 要 包 括 以 下 几 方 面 内 容 : (1) 建 站 者 自 身 条 件 分 析, 如 公 司 概 况 市 场 优 势, 可 以 利 用 网 站 提 升 哪 些 竞 争 力, 建 设 网 站 的 能 力 ( 费 用 技 术 人 力 等 ); (2) 相 关 行 业 的 市 场 是 怎 样 的, 有 什 么 样 的 特 点, 以 及 在 互 联 网 上 开 展 业 务 的 可 能 性 和 前 景 ; (3) 网 站 主 要 竞 争 者 分 析, 了 解 竞 争 对 手 上 网 情 况 及 其 网 站 的 功 能 盈 利 模 式 用 户 黏 度 发 展 经 营 状 况 等, 汲 取 他 们 的 长 处, 并 找 出 自 己 的 优 势 ; 8

第 2 章 (4) 网 站 目 标 用 户 的 确 定 明 确 网 站 主 要 面 向 的 访 问 群 体, 对 将 来 网 站 的 建 设 有 着 重 要 的 意 义 通 过 主 要 目 标 市 场 潜 在 目 标 市 场, 以 及 其 他 可 能 受 益 于 企 业 产 品 或 服 务 的 人 群 进 行 分 析, 即 可 对 网 站 的 目 标 受 众 有 一 个 基 本 的 定 位 2.1.2 用 户 需 求 分 析 用 户 是 网 站 的 根 本, 只 有 拥 有 更 多 稳 定 的 用 户 群, 网 站 才 能 更 好 地 发 展 但 这 并 不 意 味 着 要 盲 目 地 让 所 有 上 网 用 户 都 成 为 自 己 的 用 户, 这 样 的 网 站 往 往 会 演 变 成 有 广 度, 但 没 深 度 的 局 面, 同 样 无 法 吸 引 浏 览 者 有 时 网 站 运 行 后 的 效 果 并 不 理 想, 原 因 就 是 对 用 户 的 需 求 理 解 有 偏 差, 缺 少 用 户 检 验 的 结 果 如 果 设 计 时 只 将 企 业 的 市 场 营 销 和 商 业 目 标 放 在 首 位, 而 忽 视 用 户 和 潜 在 用 户 的 真 正 需 求, 结 果 只 能 是 用 户 的 流 失 进 行 用 户 研 究 的 首 要 步 骤 是 定 义 网 站 的 用 户 群, 一 种 通 用 的 方 法 是 根 据 网 站 类 型 和 内 容 进 行 划 分 比 如 游 戏 类 网 站 的 目 标 用 户 是 游 戏 玩 家, 音 乐 类 网 站 的 目 标 用 户 是 音 乐 爱 好 者 ; 对 于 综 合 性 网 站 或 者 电 子 商 务 网 站, 更 倾 向 于 针 对 某 一 项 产 品 划 分 用 户 群 还 有 一 种 开 展 用 户 研 究 的 方 法 是, 先 为 目 标 用 户 做 初 步 的 定 义, 这 个 定 义 是 针 对 主 要 用 户 群 的 描 述, 它 可 以 帮 助 开 发 人 员 将 精 力 集 中 在 研 究 正 确 的 角 色 统 计 用 户 资 料 和 其 他 会 影 响 用 户 体 验 的 元 素 上 [3] 不 同 的 用 户 之 间 存 在 着 很 大 的 差 异 性, 这 就 需 要 对 用 户 进 行 细 分, 创 建 细 分 用 户 是 一 种 用 于 发 现 用 户 最 终 需 求 的 手 段 也 就 是 将 用 户 分 成 更 细 小 的 群 组, 是 根 据 用 户 属 性 划 分 的 集 合, 每 个 集 合 有 着 共 同 的 关 键 特 征 在 研 究 了 这 些 细 分 用 户 的 资 料 信 息 后, 也 许 还 会 进 行 合 并 或 拆 分 用 户 群 的 工 作 众 多 的 用 户 群, 就 会 产 生 众 多 不 同 的 用 户 需 求, 这 些 需 求 很 有 可 能 是 互 相 矛 盾 的, 这 时 首 先 应 该 确 定 对 网 站 发 展 有 着 关 键 作 用 的 核 心 用 户 群, 因 为 核 心 用 户 群 的 需 求 对 网 站 未 来 的 发 展 至 关 重 要 通 过 对 用 户 更 进 一 步 的 研 究, 如 用 户 访 谈 实 地 拜 访 问 卷 调 查 焦 点 小 组 卡 片 分 类 可 用 性 测 试 等 方 式, 统 一 整 理 后 提 炼 出 核 心 用 户 的 典 型 特 征, 然 后 根 据 抽 象 化 的 特 征 总 结 出 需 要 的 设 计 风 格, 根 据 确 定 的 风 格 进 行 创 意 设 计 当 然 也 有 其 他 的 用 户 研 究 方 式 : 比 如 告 诉 用 户 自 己 要 做 什 么, 想 要 向 用 户 了 解 什 么, 让 用 户 自 己 画 出 他 们 想 要 的 感 觉, 之 后 整 理 分 析 这 些 用 户 的 画, 确 定 设 计 风 格 和 感 觉, 然 后 进 行 创 意 设 计 [4] 2.1.3 网 站 类 型 和 规 模 网 站 目 标 和 用 户 的 不 同, 会 造 成 网 站 的 类 型 和 规 模 的 不 同, 同 时 也 影 响 了 网 站 视 觉 风 格 的 形 成 综 合 门 户 行 业 门 户 新 闻 资 讯 等 信 息 服 务 类 网 站, 为 了 保 证 信 息 传 递 的 快 捷 性 和 有 效 性, 网 站 视 觉 风 格 趋 向 简 洁 ; 企 业 形 象 类 网 站 是 企 业 为 了 塑 造 企 业 形 象, 宣 传 企 业 文 化, 推 介 企 业 业 务 及 产 品 而 制 作 的 网 站, 这 种 网 站 的 设 计 注 重 企 业 文 化 的 体 现 及 品 牌 形 象 的 一 致 性 ; 电 子 商 务 网 站 以 进 行 产 品 销 售 为 目 的, 设 计 的 核 心 是 提 供 清 晰 的 产 品 展 示, 可 信 赖 的 评 价 系 统, 优 良 的 视 觉 引 导, 以 促 进 用 户 实 现 购 买 ; 互 动 广 告 类 网 站, 要 充 分 展 示 产 品 或 服 务, 网 页 冲 击 力 强, 互 动 效 果 突 出 9

互 联 网 产 品 (Web/ 移 动 Web/APP) 视 觉 设 计 风 格 篇 英 国 卫 报 于 1821 年 首 次 印 刷, 至 今 已 有 上 百 年 的 历 史 卫 报 在 1994 1995 年 开 始 发 展 在 线 出 版, 今 年 更 是 大 力 发 展 其 数 字 业 务 卫 报 在 线 网 站 的 设 计 风 格 属 于 典 型 杂 志 风 格 网 站 背 景 采 用 了 惯 用 的 白 色 ; 布 局 使 用 了 严 谨 的 网 格 排 版, 实 线 用 于 分 栏, 虚 线 用 于 区 分 内 容, 形 成 了 清 晰 的 区 块 ; 图 文 组 合 的 编 排 强 调 秩 序 感 整 个 网 站 的 内 容 虽 多, 但 非 常 易 于 阅 读 http://www.theguardian.com/uk 10

第 2 章 耐 克 旗 下 乔 丹 品 牌 运 动 鞋 官 网 首 页 使 用 简 洁 的 布 局 方 式 和 大 尺 寸 高 清 图 片, 向 用 户 展 示 了 乔 丹 鞋 的 设 计 和 工 艺 细 节 极 简 主 义 的 设 计 风 格 体 现 了 科 技 感 和 现 代 感 ; 精 致 细 腻 的 大 特 写 图 片 展 示 出 优 良 的 设 计 和 精 湛 的 工 艺 http://www.nike.com/us/en_us/c/jordan 11

互 联 网 产 品 (Web/ 移 动 Web/APP) 视 觉 设 计 风 格 篇 Alter Ego 是 一 个 专 门 从 事 品 牌 广 告 交 互 印 刷 图 形 多 媒 体 和 运 动 设 计 的 视 觉 设 计 机 构, 它 们 的 宗 旨 是 通 过 艺 术 科 学 与 文 化 相 结 合 产 生 有 效 的 视 觉 解 决 方 案 Alter Ego 网 站 的 设 计 极 富 设 计 感 和 形 式 美 感 网 站 采 用 的 是 单 页 网 站 结 构, 并 结 合 了 当 下 多 种 潮 流 设 计 元 素 网 站 的 第 一 屏 使 用 超 大 背 景 图 片, 展 示 了 部 分 设 计 成 品 ; 第 二 屏 的 设 计 简 单 至 极 : 白 色 背 景, 深 灰 色 超 大 号 无 饰 线 字 体, 形 成 了 强 烈 的 视 觉 冲 击 ; 接 下 来 几 屏 为 案 例 展 示, 简 单 的 网 格 布 局 非 常 直 接, 一 目 了 然 ; 再 往 下 是 对 公 司 的 介 绍, 扁 平 风 格 的 图 形, 配 以 统 一 的 灰 色 无 饰 线 字 体 文 字 通 过 字 号 和 灰 度 的 变 化, 在 极 长 的 页 面 下 产 生 富 有 韵 律 的 美 感 ; 随 后 是 公 司 的 客 户, 视 觉 策 略 是 将 所 有 客 户 的 Logo 进 行 去 彩 色 的 处 理, 极 具 统 一 感 ; 最 后 是 公 司 的 联 系 方 式, 使 用 表 现 公 司 环 境 的 图 片, 与 前 一 部 分 内 容 进 行 自 然 地 分 割 http://alterego.ae/ 12

第 2 章 2014 年 1 月 25 日 是 Mac 诞 生 30 周 年, 为 了 纪 念 这 一 特 殊 的 日 子, 苹 果 公 司 推 出 了 一 系 列 活 动, 其 中 也 包 括 纪 念 活 动 网 站 的 上 线 用 户 可 以 看 到 一 批 超 级 果 粉 讲 述 Mac 电 脑 对 自 己 的 影 响, 也 可 以 看 到 历 代 经 典 Mac 产 品 的 介 绍 ; 同 时 还 有 一 个 调 查 页 面, 用 户 可 以 参 与 调 查, 也 可 以 看 到 随 时 间 的 推 移, 用 户 使 用 Mac 的 变 化 趋 势 网 站 结 构 清 晰, 色 彩 以 有 层 级 变 化 的 灰 色 为 主 调, 并 配 以 高 质 量 的 人 像 摄 影 图 片 时 间 线 导 航 以 图 像 作 为 视 觉 引 导, 并 用 1Pixel 的 直 线 分 隔, 线 与 面 的 对 比 十 分 清 晰 http://www.apple.com/30-years/ 13

互 联 网 产 品 (Web/ 移 动 Web/APP) 视 觉 设 计 风 格 篇 少 年 派 的 奇 幻 漂 流 是 李 安 执 导 的 3D 电 影, 电 影 情 节 紧 凑, 高 潮 迭 起, 讲 述 了 一 位 寻 找 灵 感 的 作 家 倾 听 印 度 少 年 派 的 海 上 奇 遇, 唯 美 的 画 面 令 人 赞 叹 除 了 官 方 网 站, 制 作 方 还 推 出 了 一 个 关 于 电 影 幕 后 制 作 的 活 动 网 站, 网 站 是 利 用 Html5 技 术 制 作, 来 解 构 电 影 幕 后 制 作 故 事 的 单 页 网 站 Html5 的 展 示 技 术 非 常 适 合 来 解 剖 一 件 产 品, 通 过 滚 动 叠 加 效 果, 同 时 利 用 摄 影 插 图 视 频 元 素, 让 浏 览 者 很 直 观 地 了 解 到 幕 后 特 效 是 如 何 完 成 的, 既 能 节 约 成 本, 又 能 达 到 效 果 http://journey.lifeofpimovie.com/#!/ 从 网 站 规 模 的 角 度 看, 做 网 站 并 不 是 盲 目 贪 图 内 容 的 大 而 全, 要 根 据 现 阶 段 能 力 或 企 业 的 规 模 大 小, 确 定 欲 建 立 的 是 小 型 中 型, 还 是 大 型 的 网 站 ; 抑 或 是 先 建 立 小 规 模 网 站, 然 后 逐 步 发 展 这 也 关 系 到 网 站 的 后 期 维 护 及 考 虑 网 站 的 发 展 方 向 大 型 网 站 信 息 量 大, 为 了 保 证 其 信 息 的 易 读 性, 整 体 设 计 风 格 都 趋 向 简 洁, 结 构 严 谨, 多 严 格 按 照 网 格 布 局, 如 门 户 网 站 咨 询 网 站 及 大 型 电 子 商 务 网 站 以 电 商 网 站 为 例 : 14

第 2 章 在 首 页 设 计 上, 国 内 外 电 商 网 站 的 首 页 设 计 具 有 明 显 差 异 国 外 的 大 型 电 商 网 站 的 信 息 量 明 显 要 比 国 内 电 商 网 站 小 很 多, 页 面 空 间 设 计 具 有 较 好 的 舒 适 度 国 外 大 型 电 商 网 站 首 页 而 国 内 大 型 电 商 网 站 首 页 展 示 的 产 品 数 量 通 常 很 多, 页 面 密 度 较 大, 显 得 过 于 拥 挤 在 导 航 设 计 上, 国 内 外 电 商 网 站 的 导 航 模 式 基 本 一 致 国 内 电 商 网 站 首 页 15

互 联 网 产 品 (Web/ 移 动 Web/APP) 视 觉 设 计 风 格 篇 小 型 网 站 因 为 信 息 量 小, 在 设 计 上 的 变 数 更 多, 空 间 处 理 上 也 更 显 灵 活, 可 以 根 据 网 站 售 卖 产 品 的 气 质, 塑 造 更 具 特 点 的 网 站 形 象 Shopsanctuaryt T Shop 是 一 个 售 卖 茶 叶 的 小 型 电 商 网 站 网 站 在 图 片 文 字 色 彩 空 间 布 局 等 视 觉 要 素 的 细 节 处 理 方 面 非 常 到 位 和 讲 究, 营 造 出 一 种 静 谧 的 环 境 氛 围, 给 人 的 感 觉 是 气 质 优 雅, 茶 香 满 溢 http://www.shopsanctuaryt.com/ 2.2 视 觉 风 格 的 要 素 网 站 整 体 形 象 的 体 现 来 自 于 网 页 上 视 觉 元 素 的 特 征 体 现, 以 及 各 网 页 之 间 的 结 构 组 织 关 系 及 其 对 浏 览 者 心 理 产 生 的 影 响 网 页 上 的 视 觉 信 息 有 很 多, 如 标 志 文 字 图 片 动 态 效 果 等, 但 最 基 本 的 视 觉 传 达 构 成 要 素 是 文 字 图 形 和 色 彩 设 计 者 对 这 些 基 本 构 成 要 素 进 行 合 理 布 局 和 有 效 的 空 间 处 理, 有 利 于 提 高 设 计 质 量, 增 加 设 计 的 使 用 功 能 它 既 体 现 在 可 视 的 有 形 的 各 造 型 元 素 在 页 面 的 面 积 大 小 及 位 置 上, 即 对 实 的 空 间 构 成 要 素 的 相 互 关 系 的 安 排 上, 也 体 现 在 对 虚 的 空 间 的 经 营 上 合 理 的 布 局 加 上 明 确 的 视 觉 效 果, 可 以 形 成 网 站 自 身 所 特 有 的 视 觉 风 格 2.2.1 文 字 文 字 是 人 类 记 录 生 活 的 重 要 工 具, 也 是 人 类 进 行 思 想 和 情 感 交 流 的 重 要 手 段 文 字 是 信 息 传 达 中 最 普 遍 使 用 的 视 觉 元 素, 在 信 息 传 达 时 能 够 做 到 清 晰 准 确, 适 合 表 达 抽 象 的 逻 辑 关 系, 具 有 很 强 的 信 息 传 达 的 明 16

第 2 章 确 性 和 准 确 性 文 字 对 于 网 站 的 信 息 传 递 的 作 用 可 以 说 是 巨 大 的, 无 可 替 代 的 尤 其 对 于 信 息 服 务 型 的 网 站 来 说, 文 字 是 实 现 网 站 功 能 的 最 重 要 手 段 网 页 上 的 文 字 种 类 很 多, 功 能 也 各 有 不 同 引 导 页 上 的 文 字 及 其 形 态 可 以 使 浏 览 者 形 成 对 网 站 的 初 步 印 象, 了 解 到 网 站 的 基 本 信 息 ; 首 页 上 的 各 种 标 题 性 文 字 可 以 使 浏 览 者 明 确 网 站 的 内 容 结 构, 并 具 有 导 航 的 作 用 ; 内 容 页 面 上 的 文 字 则 会 使 浏 览 者 最 终 获 得 详 细 的 信 息 网 页 上 的 文 字 的 传 播 介 质 是 屏 幕 屏 幕 文 字 的 显 示 和 传 统 纸 质 媒 介 的 显 示 有 着 很 大 的 差 异 首 先, 屏 幕 文 字 显 示 的 最 小 单 位 是 像 素, 不 适 宜 笔 画 过 于 细 小 的 文 字 显 示 ; 其 次, 屏 幕 通 过 其 自 身 发 光 的 原 理 来 实 现 用 户 阅 读, 屏 幕 的 亮 度 与 光 的 漫 发 射 作 用, 以 及 屏 幕 的 反 光 现 象, 都 会 影 响 屏 幕 上 文 字 的 识 别 性 荷 兰 设 计 师 韦 姆 克 鲁 威 尔 (Wim Crouwel) 早 在 1967 年 就 设 计 了 一 款 针 对 电 子 屏 幕 阅 读 的 字 体 左 扎 奈 利 库 (Zuzana Licko) 在 1985 年 开 始 设 计 适 应 早 期 电 脑 系 统 特 征 的 字 体, 旨 在 适 应 电 脑 屏 幕 的 显 示 与 打 印 输 出 谷 歌 用 了 两 年 的 时 间, 开 发 出 最 适 合 在 手 机 上 阅 读 的 字 体 Droid, 这 款 字 体 是 由 谷 歌 和 数 位 字 型 公 司 Ascender 共 同 合 作 才 完 成 的 相 对 于 英 文 字 体, 中 文 屏 幕 字 体 的 设 计 还 有 待 更 深 入 的 研 究 目 前 较 为 典 型 的 几 款 中 文 屏 幕 字 体 包 括 方 正 兰 亭 黑 微 软 雅 黑 苹 果 丽 黑 信 黑 体 微 软 雅 黑 是 微 软 公 司 针 对 屏 幕 显 示, 委 托 方 正 电 子 设 计 制 作 的, 可 以 视 作 其 为 保 证 屏 幕 显 示 时 更 加 清 晰 可 辨 而 做 的 改 良 苹 果 丽 黑 是 苹 果 公 司 从 Mac OSX 雪 豹 操 作 系 统 开 始 使 用 的 全 新 中 文 字 体, 字 体 字 形 整 体 与 现 有 的 汉 仪 黑 体 系 列 并 无 太 大 出 入, 但 在 结 构 上 更 饱 满, 细 节 更 好 信 黑 体 是 专 门 针 对 电 子 屏 幕 而 设 计 的 中 文 字 体, 即 为 汉 字 美 学 而 设 计, 文 字 线 条 笔 画 简 洁 有 力, 着 重 结 构 和 形 态, 拥 有 完 善 的 粗 细 变 化, 以 及 与 拉 丁 字 母 符 号 的 配 合, 整 体 视 觉 呈 现 出 非 常 适 合 阅 读 的 协 调 风 格 四 款 字 体 在 相 同 字 号 字 距 下 的 比 较 文 字 对 网 站 的 气 质 风 格 有 很 大 的 影 响, 具 体 体 现 在 文 字 的 字 体 字 号 字 距 行 距, 以 及 跳 跃 率 编 排 方 式 等 传 统 而 规 整 的 字 体, 偏 小 的 字 号, 整 齐 低 跳 跃 率 的 编 排, 会 给 人 平 静 稳 重 的 感 觉, 营 造 一 种 安 静 的 气 质 相 反, 使 用 字 形 活 跃 的 字 体, 不 规 则 的 排 版, 高 跳 跃 率 的 组 织, 会 使 网 站 形 成 活 跃 的 氛 围 17

互 联 网 产 品 (Web/ 移 动 Web/APP) 视 觉 设 计 风 格 篇 Zee and Bee 是 一 个 专 门 从 事 印 刷 品 定 制 服 务 的 设 计 公 司, 它 们 设 计 制 作 的 印 刷 品 具 有 独 特 艺 术 气 质 和 高 品 位 网 站 的 标 题 字 使 用 传 统 饰 线 体, 正 文 字 使 用 无 饰 线 体, 标 题 和 正 文 的 文 字 跳 跃 率 很 低, 文 字 的 色 彩 很 稳 重 http://zedandbee.com.au/ 日 本 创 意 皮 包 设 计 公 司 kabanhosoi 网 站 的 设 计 别 具 匠 心, 图 文 的 设 计 非 常 有 品 味 网 站 的 产 品 介 绍 页 面 布 局 大 气, 左 侧 的 产 品 图 片 呈 现 自 然 而 精 致, 右 侧 的 文 字 编 排 朴 素 而 又 有 层 次 感 http://kabanhosoi.com/ #product_19 18

第 2 章 Photomap 是 洛 杉 矶 设 计 师 Chris Wang 的 个 人 摄 影 作 品 集 网 站 网 站 的 设 计 简 洁, 浏 览 时 就 像 在 翻 看 一 本 杂 志 网 站 首 页 的 超 大 字 体 列 出 摄 影 作 品 的 拍 摄 地, 并 以 相 关 图 片 去 色 处 理 作 为 文 字 的 纹 理 进 行 填 充, 使 原 本 简 单 的 版 面 增 加 了 质 感 http://photomap.chris-wang.com/ Browser Awareness Day 呼 吁 用 户 建 立 有 趣 快 速 安 全 的 浏 览 器 网 站 是 使 用 插 图 风 格 的 单 页 网 站, 当 用 户 浏 览 网 页 时, 在 首 屏 会 看 到 使 用 有 趣 的 手 绘 文 字, 请 求 用 户 帮 助 建 立 有 趣 快 速 安 全 的 Web 继 续 向 下 滚 动 鼠 标, 每 个 部 分 都 配 有 可 爱 的 卡 通 人 物 和 装 饰 风 格 的 字 体 网 页 用 颇 具 创 造 力 的 文 字 设 计 和 可 爱 的 插 图, 吸 引 用 户 向 下 滚 动 鼠 标 和 阅 读 有 关 内 容 http://browserawarenessday.com/#home 19

互 联 网 产 品 (Web/ 移 动 Web/APP) 视 觉 设 计 风 格 篇 2.2.2 图 形 图 形 是 现 代 社 会 人 与 人 进 行 交 流 与 沟 通 的 重 要 视 觉 形 式 传 统 的 图 形 概 念 是 指 由 绘 写 刻 印 等 手 段 产 生 的 图 画 记 号, 是 区 别 于 文 字 词 语 语 言 的 视 觉 形 式 现 代 设 计 中 图 形 的 含 义 更 为 广 泛, 是 所 有 能 够 利 用 来 产 生 视 觉 图 像 并 转 为 信 息 传 达 的 视 觉 符 号, 是 由 绘 写 刻 印 以 及 现 代 电 子 技 术 摄 影 及 处 理 等 手 段 产 生 的 能 传 达 信 息 的 图 像 记 号 图 形 与 文 字 相 比, 具 有 更 形 象 更 直 观 的 特 点, 具 有 更 强 的 吸 注 性 图 形 是 文 字 之 后 最 早 引 入 到 网 络 中 的 多 媒 体 组 成 元 素 与 文 字 相 比, 图 形 在 信 息 传 递 方 面 的 表 达 更 加 直 观 和 生 动, 更 易 吸 引 用 户 的 视 线, 能 够 更 好 的 帮 助 用 户 聚 焦 信 息, 并 引 导 用 户 行 为 对 于 同 一 条 新 闻 信 息 来 说, 图 片 对 用 户 的 吸 引 力 远 远 超 过 单 纯 的 文 字 ; 同 时, 图 形 具 有 很 强 的 视 觉 表 现 力, 可 以 强 化 网 站 的 视 觉 风 格, 可 以 创 造 更 加 具 有 企 业 特 色 的 品 牌 氛 围 图 形 的 运 用, 不 仅 丰 富 了 网 页 信 息 传 递 的 方 式, 为 文 字 信 息 提 供 补 充, 同 时 又 为 不 同 语 言 文 化 背 景 的 人 们 理 解 网 页 的 内 容 提 供 了 保 障 在 网 页 设 计 的 过 程 中, 精 彩 的 图 形 可 以 很 好 地 实 现 传 达 与 诱 导 的 目 的, 图 形 的 视 觉 效 果 最 能 直 观 地 传 达 设 计 策 略 和 网 页 的 主 题 在 网 页 中, 图 形 的 展 现 形 式 比 较 丰 富 从 呈 现 方 式 上 看, 可 以 分 为 静 态 图 形 和 动 态 图 形 动 态 图 形 是 指 具 有 动 态 效 果, 具 有 链 接 交 互 功 能 的 图 形, 静 态 图 形 则 是 不 具 备 动 态 图 形 功 能 的 图 形 从 技 术 呈 现 来 看, 网 站 中 图 形 有 位 图 和 矢 量 图 形 之 分 位 图 和 矢 量 图 形 的 技 术 实 现 手 段 的 不 同 也 对 图 形 的 风 格 有 着 一 定 的 影 响 从 运 用 方 式 看, 最 常 运 用 的 图 形 形 式 有 : 内 容 展 示 性 图 形, 如 新 闻 图 片 或 产 品 图 片 等 功 能 性 图 形, 如 LOGO 图 标 导 航 按 钮 广 告 等 装 饰 性 图 形, 如 网 页 背 景 等 可 以 说, 要 使 网 页 在 纯 文 本 的 基 础 上 变 得 更 加 吸 引 用 户, 最 为 高 效 的 方 式 就 是 合 理 地 使 用 图 片 随 着 读 图 时 代 的 到 来, 图 形 元 素 在 网 页 中 的 运 用 越 来 越 多, 其 中 一 种 流 行 的 设 计 风 格 就 是 以 图 代 文, 越 来 越 多 的 网 站 开 始 减 少 文 字 的 使 用 量, 而 使 用 更 有 视 觉 度 的 图 片 展 示 内 容 用 图 片 展 示 案 例 是 一 种 最 直 接 有 效 的 推 广 方 法 20

第 2 章 AXT 是 一 家 位 于 马 德 里 的 综 合 性 设 计 咨 询 公 司 公 司 致 力 于 品 牌 设 计 艺 术 指 导 印 刷 设 计 互 联 网 设 计 动 态 设 计, 与 诸 多 世 界 顶 级 公 司 和 品 牌 进 行 合 作, 并 完 成 了 不 少 成 功 案 例 网 站 的 层 级 结 构 和 内 容 组 织 都 很 简 单, 没 有 过 多 的 描 述 性 文 字, 而 是 以 图 片 的 方 式 展 示 公 司 的 设 计 项 目 每 一 个 案 例 的 展 示 图 片 的 设 计 都 相 当 精 美 案 例 的 浏 览 方 式 的 设 计 符 合 用 户 习 惯, 在 公 司 介 绍 页 面, 还 有 一 个 相 当 贴 心 的 设 计, 用 户 只 要 在 任 意 位 置 轻 点 一 下 鼠 标, 页 面 就 会 转 换 为 之 前 看 到 的 展 示 图 片, 而 无 须 用 户 将 鼠 标 移 到 页 面 顶 端 点 击 主 导 航 http://www.axt.es/#/works 21

互 联 网 产 品 (Web/ 移 动 Web/APP) 视 觉 设 计 风 格 篇 与 照 片 相 比, 矢 量 图 形 有 着 明 显 的 形 态 特 征 矢 量 图 形 最 大 的 特 征 就 是 清 晰 的 轮 廓, 通 常 由 不 同 形 状 的 几 何 图 形 构 成, 绘 制 时 先 画 轮 廓, 再 填 颜 色, 可 以 根 据 角 色 性 格 背 景 场 景 或 情 节 的 需 要 填 充 适 合 的 颜 色 矢 量 图 形 造 型 简 练, 很 容 易 塑 造 生 动 而 夸 张 的 图 形 矢 量 图 形 的 特 点 应 用 于 网 站 设 计 的 时 候, 会 增 加 网 站 的 趣 味 性 和 亲 和 力 随 着 扁 平 化 风 格 成 为 潮 流, 越 来 越 多 的 矢 量 图 形 风 格 的 元 素 出 现 在 网 站 设 计 中 SECL 公 司 从 事 网 站 设 计 与 开 发 网 络 营 销 品 牌 策 划 等 基 于 互 联 网 的 各 项 设 计 服 务 公 司 网 站 采 用 矢 量 风 格 的 插 图 和 图 标 丰 富 的 色 彩, 形 成 一 种 明 快 的 基 调, 给 人 一 种 积 极 向 上 的 态 度 http://seclgroup.com/ 应 用 在 网 站 设 计 中 的 图 形 风 格 非 常 多, 除 了 我 们 熟 知 的 扁 平 化 拟 物 化, 还 有 线 描 水 彩 版 画 等 各 种 绘 画 风 格, 利 用 计 算 机 3D 技 术 实 现 的 图 形 等 不 管 使 用 何 种 风 格 的 图 形, 都 应 该 是 为 更 好 地 实 现 网 站 的 目 的 和 功 能, 并 使 用 户 产 生 良 好 的 体 验 效 果, 从 而 形 成 一 种 美 好 的 印 象 22