重 访 弹 性 设 计

今 天 是 iOS 8 正 式 发 布 的 日 子 。 两 天 后 ，iPhone 6 和 6 Plus 将 开 始 发 售 。 我 想 起 了 李 小 龙 的 名 言 ：「 你 必 须 无 形 无 状 ， 像 水 一 样 。 把 水 倒 入 杯 中 ， 水 就 成 为 杯 子 ； 倒 入 瓶 中 ， 它 就 成 为 瓶 子 ； 倒 入 茶 壶 里 ， 它 就 变 成 茶 壶 。」 对 于 设 计 软 件 产 品 或 数 字 内 容 的 设 计 师 而 言 ， 这 就 是 「 内 容 」 未 来 的 境 况 。 从 现 在 开 始 ， 无 论 设 计 的 是 移 动 软 件 还 是 网 页 ， 你 都 要 让 它 像 水 一 样 。 从 后 天 开 始 ， 将 有 四 种 屏 幕 尺 寸 的 iPhone 被 世 界 不 同 地 区 的 用 户 使 用 ， 再 把 iPad、 主 流 Android 设 备 和 Windows Phone 设 备 算 上 ， 结 论 已 经 很 明 显 了 ： 绝 大 多 数 设 计 师 不 会 有 足 够 的 时 间 和 资 源 为 每 一 种 屏 幕 尺 寸 进 行 微 调 ， 在 这 种 情 况 下 ， 更 好 或 者 说 唯 一 可 行 的 做 法 是 让 自 己 的 设 计 保 持 足 够 的 弹 性 。 移 动 软 件 的 UI 设 计 师 可 能 想 哭 ， 但 网 页 设 计 师 会 想 笑 。 弹 性 设 计 （Responsive Design） 一 词 由 伊 森 · 马 考 特 （Ethan Marcotte） 在 2010 年 提 出 ， 如 今 已 成 为 网 页 设 计 师 的 共 识 。 正 如 网 页 设 计 师 不 知 道 用 户 会 用 多 大 的 显 示 器 和 浏 览 器 窗 口 观 看 自 己 的 网 页 一 样 ， 从 现 在 开 始 ， 无 论 你 设 计 的 是 企 业 官 方 app、 新 媒 体 app、 电 商 网 站 的 app、 还 是 美 术 馆 的 app， 都 不 能 再 假 定 用 户 在 用 单 一 尺 寸 的 屏 幕 了 ； 你 成 了 一 个 不 知 道 画 布 尺 寸 的 视 觉 创 作 者 。 让 内 容 变 得 像 李 小 龙 所 说 的 水 并 不 容 易 。 难 度 并 不 在 于 技 术 ， 而 在 于 设 计 规 则 的 设 定 。 对 于 装 载 内 容 的 「 容 器 」—— 也 就 是 软 件 的 UI—— 苹 果 很 早 就 给 出 了 解 决 方 案 ， 让 开 发 者 可 以 方 便 地 在 不 同 尺 寸 、 不 同 朝 向 的 屏 幕 上 高 效 地 获 得 上 佳 效 果 。 但 内 容 本 身 则 是 另 一 回 事 。 以 视 觉 作 品 为 例 ， 假 如 你 要 请 人 画 一 幅 插 图 ， 他 一 定 会 问 你 「 尺 寸 是 多 少 」。 插 画 师 必 须 在 上 、 下 、 左 、 右 都 有 固 定 边 界 的 固 定 空 间 里 才 能 工 作 —— 画 布 不 能 忽 大 忽 小 。 插 画 不 可 能 像 软 件 UI 一 样 「 自 适 应 」， 在 绝 大 多 数 情 况 下 ， 插 画 师 也 不 可 能 为 不 同 尺 寸 的 画 布 绘 制 多 个 版 本 。 我 为 iPhone 6 Plus 的 1920x1080 屏 幕 画 的 全 屏 插 画 在 iPhone 6, iPhone 5S 以 及 iPhone 4S 上 会 是 什 么 样 ？ 边 缘 被 裁 掉 ？ 显 然 不 能 接 受 。 等 比 缩 小 ？ 屏 幕 四 周 会 有 黑 边 。 我 们 在 从 3.5 寸 iPhone 过 渡 到 4 寸 iPhone 时 已 经 经 历 过 这 样 的 窘 况 ， 如 果 说 设 计 师 曾 经 有 过 3.5 寸 iPhone 被 抛 弃 后 ，iPhone 屏 幕 尺 寸 固 定 在 4 寸 / 1136x640 的 期 待 ， 那 么 iPhone 6 的 发 布 会 显 然 让 这 成 了 泡 影 。 文 字 的 情 况 看 起 来 会 好 一 些 。 只 要 你 用 的 是 卷 轴 式 设 计 ， 针 对 不 同 的 屏 幕 尺 寸 进 行 自 适 应 不 会 是 太 大 的 问 题 。 你 也 可 以 根 据 不 同 的 屏 幕 尺 寸 指 定 不 同 的 标 准 字 号 ， 让 文 字 获 得 更 好 的 可 读 性 。 但 表 格 和 多 栏 排 版 等 格 式 在 屏 幕 尺 寸 未 知 的 前 提 下 ， 仍 然 需 要 创 新 式 的 设 计 方 案 。 这 并 不 容 易 ， 因 此 也 充 满 机 会 。 任 何 媒 介 都 有 限 制 。 字 体 设 计 师 马 修 · 卡 特 （Matthew Carter） 为 AT&T 设 计 Bell Centennial 这 款 字 体 时 ， 考 虑 到 油 墨 会 在 纸 上 漫 开 这 一 特 点 ， 特 地 在 部 分 字 母 的 转 角 空 隙 处 留 下 了 额 外 的 空 间 ， 等 待 油 墨 去 填 满 。 同 样 的 技 巧 在 数 字 字 体 时 代 显 然 并 无 必 要 ， 但 发 光 的 屏 幕 又 为 字 体 设 计 提 出 了 新 的 挑 战 。iPhone 6 和 6 Plus 发 布 后 ， 移 动 设 备 的 屏 幕 尺 寸 彻 底 碎 片 化 已 成 定 局 。 作 为 数 字 内 容 的 设 计 者 ， 唯 有 适 应 这 一 现 实 ， 思 考 如 何 让 内 容 的 形 态 保 持 弹 性 、 适 应 各 种 容 器 的 同 时 ， 通 过 前 所 未 见 的 新 技 巧 为 其 赋 予 相 对 稳 定 的 性 格 和 气 质 。 一 旦 成 功 ， 你 可 能 就 是 新 范 式 的 制 定 者 。