怎样快速设计出一个极简风格网站

《怎样快速设计出一个极简风格网站》由会员分享，可在线阅读，更多相关《怎样快速设计出一个极简风格网站（17页珍藏版）》请在金锄头文库上搜索。

1、怎样快速设计出一个极简风格网站【网页设计教程】作者: 一网学 最后更新时间：2015-07-28 11:38:59编 者 按 ： 如 何 快 速 做 出 一 个 极 简 风 格 网 站 ？ 国 外 某 个 网 站 统 计 分 析 了 112 个明 显 带 有 极 简 风 格 的 网 站 后 ， 发 布 了 这 篇 超 级 干 货 。 全 程 都 是 以 数 据 来 说 话 ，从 占 比 最 大 的 设 计 要 素 开 始 说 起 ， 有 案 例 有 分 析 ， 把 极 简 风 格 的 设 计 彻 底 发挥 到 了 术 的 地 步 。最 小 化 设 计 的 目 标 是 移 除 界 面 当 中 不

2、 必 要 的 元 素 或 内 容 ， 减 少 干 扰 ， 使 界 面 最大 程 度 的 支 持 用 户 的 任 务 流 程 。要 将 界 面 以 恰 当 的 方 式 简 化 到 只 保 留 必 要 元 素 的 程 度 ， 设 计 师 需 要 对 一 系 列 与最 小 化 策 略 高 度 相 关 的 设 计 模 式 有 所 了 解 。 界 面 设 计 ， 就 像 人 类 的 语 言 一 样 ，最 终 是 由 人 们 的 使 用 方 式 所 定 义 的 。 如 今 ， 虽 然 “最 小 化 ”和 “极 简 ”的 概念 时 常 被 人 们 抛 出 ， 但 我 们 还 是 无 法 精 确 的 、 量

3、化 的 去 定 义 具 体 是 哪 些 功 能 特性 构 成 了 最 小 化 界 面 。 为 了 更 加 清 晰 的 对 概 念 进 行 解 构 ， 我 们 对 112 个 带 有明 显 最 小 化 风 格 的 网 站 进 行 了 分 析 。需 要 记 住 的 是 ， 设 计 风 格 的 流 行 不 代 表 它 适 用 于 任 何 类 型 的 产 品 及 其 目 标 用 户 ，更 不 意 味 着 它 能 推 动 提 润 或 其 他 业 务 目 标 的 提 升 。 在 这 次 研 究 当 中 ， 我 们 的分 析 对 象 是 那 些 明 显 采 用 了 最 小 化 设 计 策 略 的 界 面 ，

4、 而 非 因 为 最 小 化 设 计 风 格而 实 现 商 业 目 标 的 产 品 。 后 文 中 也 会 讲 到 ， 虽 然 最 小 化 设 计 策 略 当 中 的 一 些 要素 对 业 务 本 身 是 有 推 动 作 用 的 ， 但 同 时 也 有 很 多 会 起 到 反 作 用 。最小化设计的典型组成要素对 于 我 们 所 研 究 的 112 个 最 小 化 风 格 的 网 站 ， 如 果 某 个 特 征 出 现 在 超 过 75%的 样 本 当 中 ， 我 们 就 将 其 定 义 为 最 小 化 界 面 设 计 的 基 本 组 成 要 素 。扁平化的材质使 用 在 96%的 样 本 界

5、 面 当 中 (很 多 样 本 的 运 用 方 式 并 不 得 当 )。过 去 几 年 间 ， 界 面 设 计 领 域 当 中 最 为 巨 大 的 变 化 当 属 拟 物 化 风 格 向 不 带 有 任 何实 物 隐 喻 的 数 字 化 表 现 形 式 的 转 变 。 扁 平 化 风 格 通 常 不 使 用 任 何 高 光 、 阴 影 、渐 变 和 材 质 来 使 界 面 元 素 带 有 三 维 质 感 效 果 。有 些 设 计 师 相 信 扁 平 化 风 格 正 是 最 小 化 界 面 设 计 理 念 的 直 接 体 现 ： 移 除 了 各种 不 必 要 的 、 装 饰 性 的 视 觉 效

6、果 ， 使 界 面 最 大 程 度 的 支 持 内 容 本 身 的 呈 现 。虽 然 这 两 种 概 念 具 有 很 强 的 相 关 性 ， 但 它 们 并 不 等 同 于 彼 此 。 我 们 通 常 所 说 的扁 平 化 设 计 泛 指 一 种 界 面 元 素 的 视 觉 风 格 ， 而 最 小 化 设 计 则 涉 及 到 内 容 和 功 能层 面 。 一 个 采 用 了 扁 平 化 视 觉 风 格 的 界 面 未 必 是 最 小 化 的 ：正 如 我 们 在 曾 经 一 篇 文 章 当 中 所 讲 ， 扁 平 化 界 面 时 常 难 以 让 用 户 一 目 了 然 的 了解 哪 些 元 素

7、 是 可 点 击 的 。 我 们 相 信 ， 相 比 于 盲 目 的 扁 平 化 处 理 方 式 ， 一 种 介 于扁 平 化 和 拟 物 化 之 间 的 折 衷 风 格 会 更 为 实 用 以 扁 平 化 为 基 础 ， 同 时 在 交互 元 素 上 使 用 更 具 实 物 隐 喻 性 的 样 式 ， 使 用 户 可 以 快 速 识 别 可 点 击 元 素 。总 体 上 讲 ， 扁 平 化 风 格 非 常 容 易 被 误 用 ， 而 且 很 可 能 对 产 品 体 验 造 成 负 面 影 响 。如 今 扁 平 化 极 度 流 行 的 设 计 趋 势 使 其 几 乎 成 为 最 小 化 设 计

8、 的 代 名 词 ， 这 并 不 是一 个 好 现 象 。少量配色或单色方案使 用 在 95%的 样 本 界 面 当 中 。在 多 数 的 最 小 化 风 格 界 面 中 ， 极 简 的 配 色 方 案 都 是 策 略 性 的 被 用 来 在 不 增 加额 外 元 素 的 情 况 下 创 建 视 觉 吸 引 。 界 面 当 中 的 视 觉 干 扰 较 少 ， 色 彩 更 容 易 被 注意 到 ， 对 内 容 和 功 能 的 影 响 力 更 强 。极 简 的 配 色 方 案 可 以 说 是 针 对 2000 年 前 后 混 乱 聒 噪 的 网 页 设 计 风 格 的 回 敬 。极 度 克 制 的

9、 配 色 方 案 最 大 程 度 的 避 免 了 界 面 本 身 对 内 容 的 干 扰 ， 不 过 在 内 容 图片 的 使 用 方 面 ， 色 彩 通 常 会 更 艳 丽 。 我 们 在 进 行 评 估 时 ， 考 量 的 元 素 包 括 背景 色 、 logo、 导 航 菜 单 、 图 标 和 字 色 ， 而 不 包 括 内 容 图 片 。很 多 极 简 主 义 的 界 面 设 计 师 会 采 用 单 色 方 案 ， 最 多 再 为 界 面 中 的 重 要 元 素 另 取一 种 颜 色 。 所 谓 重 要 元 素 ， 通 常 是 指 比 较 重 要 的 交 互 元 素 。在 我 们 的

10、样 本 当 中 ， 49%使 用 了 单 色 方 案 ， 46%使 用 了 两 到 三 种 色 彩 。 使 用 着单 色 方 案 的 那 些 界 面 ， 绝 大 多 数 是 黑 白 及 各 种 灰 度 的 搭 配 。相 比 于 十 多 年 前 的 混 乱 ， 如 今 极 简 的 配 色 策 略 可 以 说 是 一 种 进 步 ， 但 在 使 用时 仍 有 一 些 重 要 的 问 题 需 要 考 虑 ：o 确保你的配色方案具有足够的对比度，使内容具有最基本的可读性，另外要考虑到色弱和色盲用户。o 关键色的使用要有明确的目的，例如突显重要信息或交互元素，并注意维持全局的统一性，用途保持一致。功能与

11、界面元素的约束使 用 在 87%的 样 本 界 面 当 中 。准 备 尝 试 最 小 化 策 略 的 设 计 师 必 须 对 界 面 当 中 的 每 一 个 元 素 进 行 分 析 ， 然 后 移除 那 些 对 核 心 功 能 或 信 息 没 有 直 接 支 持 作 用 的 元 素 。 所 谓 “元 素 ”， 包 括 (但不 限 于 )：o 导航菜单项o 链接o 图片o 图形元素o 分隔线o 标题文案o 材质纹理，包括高光、阴影、渐变等效果o 颜色o 字体o 图标实 际 上 ， 我 们 很 难 对 界 面 当 中 是 否 还 包 含 “不 必 要 ”的 元 素 进 行 准 确 的 评 估 ，除

12、 非 直 接 向 设 计 师 本 人 询 问 ， 并 了 解 他 们 的 产 品 特 性 及 目 标 用 户 群 体 。 为 了 使这 一 特 征 更 易 考 量 ， 我 们 重 点 关 注 界 面 当 中 是 否 存 在 不 具 任 何 实 质 目 的 性 的视 觉 元 素 。 在 我 们 的 样 本 中 ， 有 87%的 界 面 明 显 移 除 了 所 有 的 不 必 要 元 素 。界 面 中 的 元 素 越 多 ， 用 户 头 脑 中 需 要 处 理 的 信 息 就 越 多 。 极 简 主 义 设 计 师 们 时常 念 叨 的 一 句 话 就 是 “持 续 减 法 ， 直 到 无 可 再

13、 减 ”， 意 思 就 是 除 非 缺 失 某 样东 西 会 导 致 问 题 的 出 现 ， 否 则 就 干 掉 它 。不 过 ， 设 计 师 们 往 往 容 易 过 分 追 求 简 约 、 现 代 、 最 小 化 的 视 觉 外 观 ， 致 使 有 实际 用 途 的 元 素 被 错 误 的 移 除 。 反 之 ， 严 格 坚 持 实 用 主 义 路 线 ， 将 在 一 定 程 度 上帮 助 你 更 准 确 的 识 别 出 界 面 中 的 干 扰 元 素 ， 打 造 出 更 高 效 的 交 互 流 程 。 最 根 本的 一 点 ， 确 保 不 要 将 用 户 完 成 核 心 任 务 所 真 正

14、 需 要 的 东 西 移 除 ， 否 则 这 样 的 简化 只 能 提 升 操 作 复 杂 度 。元 素 混 乱 、 信 息 过 载 的 界 面 固 然 难 以 理 解 ， 但 过 分 简 化 以 至 于 缺 失 必 要 信 息 的产 品 则 更 容 易 让 人 茫 然 无 措 。超大的留白比例使 用 在 84%的 样 本 界 面 当 中 。有 意 识 的 将 界 面 当 中 的 干 扰 元 素 移 除 ， 势 必 会 导 致 负 空 间 比 例 的 增 大 。留 白 (负 空 间 )曾 被 认 为 是 最 小 化 界 面 的 同 义 词 ， 很 多 设 计 师 将 留 白 作 为 一 种引

15、导 用 户 关 注 重 要 内 容 的 手 段 ， 帮 助 他 们 更 好 的 理 解 信 息 结 构 。留 白 并 非 空 无 一 物 ， 比 例 得 当 的 负 空 间 除 了 可 以 为 界 面 赋 予 呼 吸 感 以 外 ， 确实 还 能 起 到 有 效 的 引 导 作 用 。 在 考 虑 留 白 的 使 用 时 ， 要 关 注 以 下 几 方 面 的 问 题 ：o 增加或减少留白之后，界面信息层级的展现方式是否会受到影响？o 留白的使用是否会影响到界面上方信息的展示？虽然备受争议，但“折线以上”的原则在很多界面环境中依然适用，用户在进行交互行为之前最容易关注到的仍然是首屏区域当中的内

16、容，不要让留白对这里的重要信息产生破坏作用。o 留白的使用是否会影响到交互成本？用户是否需要付出更高的成本才能获取信息？o 留白的比例是否需要根据不同的浏览环境进行响应式的调整？夸张的字体运用使 用 在 75%的 样 本 界 面 当 中 。和 字 色 相 仿 ， 当 界 面 里 仅 有 为 数 不 多 的 元 素 时 ， 加 粗 加 大 的 字 体 也 能 成 为 沟 通重 要 信 息 的 手 段 。 恰 当 有 效 的 字 体 运 用 不 但 可 以 使 最 小 化 风 格 的 界 面 更 具 视 觉吸 引 力 ， 而 且 可 以 弥 补 其 他 类 型 元 素 的 匮 乏 所 导 致 的 视 觉 失 衡 问 题 。 字 号 、 粗细 、 字 形 风 格 等 等 的 变 化 搭 配 对 于 帮 助 用 户 在 最 小 化 界 面 中 理 解 信 息 层 次 也 起着 重 要 的 作 用 。 在 我 们 研 究 的 112 个 样 本 当 中 ， 75%的 界 面 通 过 夸 张 的 字 体 运用 方 式