网页设计 (英語 えいご :Web design )涵盖了 りょう 制作 せいさく 和 わ 维护网站的 てき 许多不同 ふどう 的 てき 技能 ぎのう 和学 わがく 科 か 。它包含 ほうがん 了 りょう 网页图形设计、界面 かいめん 设计 、编写标准化 か 的 てき 代 だい 码和专有软件 、用 よう 户体验设计 ,以及搜 さがせ 尋 ひろ 引擎最 さい 佳 けい 化 か 。通常 つうじょう 许多人 じん 以團隊 たい 協 きょう 作 さく 的 てき 方式 ほうしき 來 らい 工作 こうさく ,各自 かくじ 參與 さんよ 设计过程的 てき 不同 ふどう 方面 ほうめん ;但 ただし 有 ゆう 些设计师会 かい 参与 さんよ 到 いた 任 にん 一 いち 方面 ほうめん 。[1] 网页设计这个术语通 どおり 常用 じょうよう 来 らい 描述与 あずか 网站前 ぜん 端 はし (客 きゃく 户端)设计相 しょう 关的设计过程,包括 ほうかつ 编写标记语言。在 ざい 更 さら 广泛的 てき Web开发 领域,网页设计与 あずか 網 あみ 絡 からま 工程 こうてい 存在 そんざい 交集。网页设计师应该对網 あみ 絡 からま 可用性 かようせい 有 ゆう 一定 いってい 的 てき 认识。如果他 た 们的工作 こうさく 涉 わたる 及到编写标记语言,那 な 么他们也应该遵循網 あみ 頁 ぺーじ 親和力 しんわりょく 的 てき 最新 さいしん 指 ゆび 引。
商店 しょうてん 中 ちゅう 的 てき 網 もう 頁 ぺーじ 設計 せっけい 書籍 しょせき
虽然网页设计约在30年 ねん 前 まえ 才 ざい 面 めん 世 よ ,但 ただし 它与许多领域都 と 有 ゆう 聯 れん 繫,例 れい 如平面 へいめん 设计 。从技术角度 ど 上 じょう 来 らい 看 み ,网页设计已 やめ 经成为人们日常 にちじょう 生活 せいかつ 的 てき 重要 じゅうよう 组成部分 ぶぶん 。
1989年 ねん ,蒂姆·伯 はく 纳斯-李 り 在 ざい 歐 おう 洲 しゅう 核 かく 子 こ 研究 けんきゅう 組織 そしき 工作 こうさく 期 き 间提议创建 けん 一个全球超文本项目,后 きさき 来 き 被 ひ 称 しょう 为万 まん 维网 。在 ざい 1991年 ねん 至 いたり 1993年 ねん 期 き 间,万维网诞生了。可 か 以使用 しよう 简单的 てき 行 くだり 模 も 式 しき 浏览器 き 查看纯文本 ほん 页面[2] 。 1993年 ねん ,马克·安 やす 德森 とくのもり 和 わ 埃 ほこり 里 さと 克 かつ ·比 ひ 納 おさめ 创建了 りょう Mosaic浏览器 き 。当 とう 时有众多的 てき 浏览器 き ,但 ただし 它们大 だい 多数 たすう 都 と 是 ぜ 基 もと 于Unix并且侧重于纯文 ぶん 本 ほん ,对图形 がた 或 ある 声音 こわね 等 とう 图形设计元素 げんそ 没 ぼつ 有 ゆう 集成 しゅうせい 的 てき 方法 ほうほう 。而Mosaic浏览器 き 打破 だは 了 りょう 藩 はん 篱[3] 。
万 まん 维网联盟成立 せいりつ 于1994年 ねん 10月 がつ ,通 つう 过开发通用 つうよう 的 てき 协议促进互联网发展 てん 并确保 ほ 其互操作性 そうさせいわる ,来 らい 使 つかい 万维网发挥它最大的潜力[4] 。这阻碍 そがい 了 りょう 任 にん 何 なん 一家公司垄断一种浏览器或网页编程语言,对互联网后 きさき 来 らい 的 てき 发展产生了 りょう 深 ふか 远的影 かげ 响。W3C继续制定 せいてい 标准,现在JavaScript 和 かず 其他语言都 と 可 か 以看到 いた 这些标准。
1994年 ねん ,安德 あんとく 森 もり 成立 せいりつ 了 りょう 通信 つうしん 公司 こうし (Communications Corp.),后 きさき 来 き 被 ひ 称 しょう 为網 あみ 景 けい (Netscape Communications),并推出 で 了 りょう Netscape 0.9浏览器 き 。Netscape不 ふ 采 さい 用 よう 传统的 てき 标准,创建了 りょう 自己 じこ 的 てき HTML标签。例 れい 如,Netscape 1.1包含 ほうがん 了 りょう 更改 こうかい 背景 はいけい 颜色和 わ 网页上 じょう 的 てき 表 ひょう 格 かく 格式 かくしき 化 か 文 ぶん 本 ほん 的 てき 标签。1996年 ねん 至 いたり 1999年 ねん 期 き 间,随 ずい 着 ぎ 微 ほろ 软和 わ 網 あみ 景 けい 争 そう 夺浏览器的 てき 统治地位 ちい ,浏览器 き 战争 开始了 りょう 。在 ざい 此期间,该领域 いき 有 ゆう 许多新 しん 技 わざ 术产生 せい ,特 とく 别是层叠样式表 ひょう 、JavaScript 和 わ 動態 どうたい HTML 。总的来 らい 说,浏览器 き 竞争确实带来了 りょう 许多积极的 てき 创意,并帮助 じょ 网页设计快速 かいそく 发展[5] 。
1996年 ねん ,微 ほろ 软发布 ぬの 了 りょう 第 だい 一款具有竞争力的浏览器,该浏览器有 ゆう 自己 じこ 的 てき 功 こう 能 のう 和 わ 标签。它也是 ぜ 第 だい 一个支持样式表的浏览器,这在当 とう 时被认为是 ぜ 一种晦涩难懂的创作技术。[5] table 的 てき HTML标记 最初 さいしょ 是 ぜ 用 よう 来 らい 显示表 ひょう 格 かく 数 すう 据 すえ 的 てき 。然 しか 而,设计人 じん 员很快 かい 意 い 识到使用 しよう HTML table创建复杂的 てき 多 た 栏布局 きょく 的 てき 潜 せん 力 りょく ,否 いや 则这些布局 きょく 是 ぜ 不可能 ふかのう 的 てき 。在 ざい 这个时候,好 このみ 的 てき 设计和 わ 美学 びがく 似 に 乎优先 さき 于好的 てき 标记结构,很少注意 ちゅうい 语义和 わ 網 あみ 頁 ぺーじ 親和力 しんわりょく 。HTML网站的 てき 设计选项有限 ゆうげん ,对于早期 そうき 版本 はんぽん 的 てき HTML更 さら 是 ぜ 如此。为了创建复杂的 てき 设计,许多网页设计师不得 とく 不 ふ 使用 しよう 复杂的 てき 表 ひょう 格 かく 结构,甚至使用 しよう 空白 くうはく 的 てき spacer .GIF 图像来 らい 阻止 そし 空 そら 表 ひょう 格 かく 单元collapse。[6] CSS 于1996年 ねん 12月 がつ 由 ゆかり W3C 引入,以支持 しじ 演 えんじ 示 しめせ 和布 わかめ 局 きょく 。这使得 とく HTML 代 だい 码具有 ぐゆう 语义性 せい ,而不是 ぜ 语义和 わ 表示 ひょうじ 性 せい ,并改进了网页亲和力 りょく ,请参阅無 む 表 ひょう 格 かく 網 もう 頁 ぺーじ 設計 せっけい 。
1996年 ねん ,Flash (最初 さいしょ 被 ひ 称 しょう 为FutureSplash)问世。当 とう 时,Flash内容 ないよう 开发工具 こうぐ 相 しょう 对于现在来 ざいらい 说相对简单,它使用 よう 了 りょう 基本 きほん 的 てき 布 ぬの 局 きょく 和 わ 绘图工具 こうぐ 、ActionScript 的 てき 一个有限的前身和时间线,但 ただし 它使网页设计师能够超越 ちょうえつ HTML、GIF动画 和 わ JavaScript 。然 しか 而,由 ゆかり 于Flash需要 じゅよう 插件 ,许多Web开发人 じん 员因为担心 しん 缺乏 けつぼう 兼 けん 容 よう 性 せい 会 かい 限 げん 制 せい 他 た 们的市 し 场份额而避免使用 しよう 它。取 と 而代之 これ 的 てき 是 ぜ ,设计师们转而使用 しよう GIF动画(如果他 た 们没有 ゆう 完全 かんぜん 放 ひ 弃使用 しよう 动态图形 的 てき 话)和 かず JavaScript来 らい 处理widget 。但 ただし 是 ぜ Flash的 てき 优点使 し 它在特定 とくてい 的 てき 目 め 标市场中足 あし 够流行 りゅうこう ,最 さい 终大多数 たすう 浏览器 き 都 と 能 のう 使用 しよう 它,并且强大 きょうだい 到 いた 可 か 以用来 らい 开发整 せい 个网站。[6]
1998年 ねん ,Netscape在 ざい 開源 かいげん 授權下 しも 发布了 りょう Netscape Communicator代 だい 码,使 つかい 数 すう 千名开发人员能够参与改进软件。然 しか 而,他 た 们决定 てい 从头开始,这指导了开源浏览器 き 的 てき 开发,并很快 かい 扩展到 いた 一个完整的应用程序平台。[5] 網 あみ 頁 ぺーじ 標準 ひょうじゅん 計 けい 劃成立 せいりつ ,并通过创建 けん Acid1 、Acid2 和 わ Acid3 测试,促进了 りょう 浏览器 き 对HTML 和 わ CSS 标准的 てき 遵从。2000年 ねん 对微软来说是重要 じゅうよう 的 てき 一 いち 年 ねん 。Internet Explorer发布了 りょう Mac版本 はんぽん ;这是第 だい 一 いち 个完全 ぜん 支持 しじ HTML 4.01和 わ CSS 1的 てき 浏览器 き ,提 ひさげ 高 だか 了 りょう 浏览器 き 标准的 てき 门槛。它也是 ぜ 第 だい 一 いち 个完全 ぜん 支持 しじ PNG 图像格式 かくしき 的 てき 浏览器 き 。[5] 在 ざい 此期间,网景被 ひ 出 で 售给了 りょう AOL ,这被视为网景在 ざい 浏览器 き 大 だい 战中输给了 りょう 微 ほろ 软的一 いち 个标志 こころざし 。[5]
21世 せい 纪初以来 いらい ,网络越来 ごえく 越 こし 融 とおる 入 いれ 人 じん 们的生活 せいかつ 。因 よし 此互联网技 わざ 术也在 ざい 不断 ふだん 发展。人 ひと 们使用 しよう 和 わ 访问网站的 てき 方式 ほうしき 也发生 せい 了 りょう 重大 じゅうだい 变化,这也改 あらため 变了网站的 てき 设计方式 ほうしき 。
浏览器 き 大 だい 战 结束以来 いらい ,涌现了 りょう 许多新 しん 的 てき 浏览器 き 。其中许多都 と 是 ぜ 开源 的 てき ,这意味 いみ 着 ぎ 它们往往 おうおう 具有 ぐゆう 更 さら 快 かい 的 てき 开发速度 そくど ,并且更 さら 支持 しじ 新 しん 标准。许多人 じん 认为新 しん 的 てき 选择比 ひ 微 ほろ 软的Internet Explorer 更 さら 好 このみ 。
W3C 已 やめ 经发布 ぬの 了 りょう HTML(HTML5 )和 かず CSS(CSS3 )的 てき 新 しん 标准,以及新 しん 的 てき JavaScript API ,每 まい 一个都是新的但又各自独立的标准。虽然HTML5这个术语只 ただ 是 ぜ 用 よう 来 らい 指 ゆび 代 だい HTML的 てき 新 しん 版本 はんぽん 和 わ 一 いち 些JavaScript API的 てき 新 しん 版本 はんぽん ,但 ただし 是 ぜ 用 よう 来 らい 指 ゆび 代 だい 整 せい 套新标准(HTML5、CSS3和 わ JavaScript)的 てき 做法已 やめ 经变得 とく 很常见了。
网页设计者 しゃ 根 ね 据 すえ 他 た 们参与 さんよ 工 こう 序 じょ 的 てき 不同 ふどう ,选择各 かく 种各样不同 ふどう 的 てき 工具 こうぐ 。虽然这些工具 こうぐ 往往 おうおう 会 かい 随 ずい 着 ぎ 新 しん 标准、新 しん 软件的 てき 出 で 现而不断 ふだん 更新 こうしん ,但 ただし 它们背 せ 后 きさき 的 てき 原 げん 则是不 ふ 变的。网页设计者 しゃ 使用 しよう 矢 や 量 りょう 图形 编辑器 き 和 わ 点 てん 阵图形 がた 编辑器 き 来 らい 绘制“网页格式 かくしき 图”,也叫做“设计原型 げんけい ”。
创建网站的 てき 技 わざ 术包含 ほうがん 了 りょう 一 いち 些W3C标准,比 ひ 如HTML和 わ CSS。HTML和 わ CSS既 すんで 可 か 以手动编写 うつし ,也可以使用 しよう 可 か 视化 编辑器 き 来 らい 编辑。譬 たとえ 如,在 ざい 使用 しよう WordPress 内容 ないよう 管理 かんり 系 けい 统搭建 けん 网站、制作 せいさく 网页时,可 か 以运用 よう 页面编辑器 き 插件来 らい 快速 かいそく 制作 せいさく 页面,从而实现无编码制作 せいさく 网页;知名 ちめい 的 てき WordPress网页编辑器 き 有 ゆう Elementor、Beaver Builder等 とう 。
网页设计者 しゃ 还可能 かのう 使用 しよう 其他工具 こうぐ 来 らい 保 ほ 证他们的网站符合 ふごう 亲和力 りょく 指 ゆび 引[7] ,这些工具 こうぐ 包括 ほうかつ 标记验证器 き [8] 以及其他用 よう 于测试可用性 かようせい 和 わ 亲和力 りょく 的 てき 工具 こうぐ 。建立 こんりゅう 網 もう 站的技術 ぎじゅつ 包含 ほうがん 了 りょう 一 いち 些W3C標準 ひょうじゅん ,比 ひ 如 HTML和 わ CSS。HTML和 わ CSS既 すんで 可 か 以手動 しゅどう 編 へん 寫 うつし ,也可以使用 しよう 視覺 しかく 化 か 編輯 へんしゅう 器 き 來 らい 編輯 へんしゅう 。譬 たとえ 如,在 ざい 使用 しよう WordPress 內容管理 かんり 系統 けいとう 搭建網 もう 站、製作 せいさく 網 もう 頁 ぺーじ 時 じ ,可 か 以運用 うんよう 頁 ぺーじ 面 めん 編輯 へんしゅう 器 き 外 がい 掛 かけ 程 ほど 式 しき 來 らい 快速 かいそく 製作 せいさく 頁 ぺーじ 面 めん ,從 したがえ 而實現 じつげん 無 む 編 へん 碼製作 せいさく 網 もう 頁 ぺーじ ;知名 ちめい 的 てき WordPress 網 もう 頁 ぺーじ 編輯 へんしゅう 器 き 有 ゆう Elementor、Beaver Builder等 とう ;可 か 以運用 よう CSS 產 さん 生 せい 器 き 外 がい 掛 かけ 來 らい 協 きょう 助 じょ 視覺 しかく 化 か 的 てき 產出 さんしゅつ CSS程 ほど 式 しき 碼,知名 ちめい 的 てき CSS產 さん 生 せい 器 き 外 がい 掛 かけ 有 ゆう CSS Hero 與 あずか YellowPencil 等 とう 。[9] [10]
一 いち 个网站的市 し 场营销和沟通设计可 か 以确定 てい 什么样的产品适合目 め 标市场。目 め 标市场可能 かのう 是 ぜ 某 ぼう 一年龄段的人群或特定的文化链;因 いん 此设计师要 よう 理解 りかい 其受众的趋势。设计者 しゃ 也要理解 りかい 他 た 们正在 ざい 设计的 てき 网站的 てき 类型,这意味 いみ 着 ぎ ,例 れい 如,B2B 网站的 てき 设计考 こう 虑因素 もと 可能 かのう 与 あずか 针对消 しょう 费者的 てき 网站(如零 れい 售或 ある 娱乐网站)有 ゆう 很大的 てき 不同 ふどう 。可能 かのう 需要 じゅよう 仔 こ 细考虑,以确保 ほ 网站的 てき 美 び 观或整体 せいたい 设计不 ふ 会 かい 与 あずか 内容 ないよう 的 てき 清 きよし 晰度和 わ 准 じゅん 确性或 ある 网站导航 的 まと 便 びん 捷 とし 性 せい 相 しょう 冲突,[11] 特 とく 别是在 ざい B2B网站上 じょう 。设计师也可能 かのう 会 かい 考 こう 虑网站所有 しょゆう 者 しゃ 或 ある 商 しょう 业代表 だいひょう 的 てき 声誉 せいよ ,以确保 ほ 他 た 们被描绘得 どく 有利 ゆうり 。
用 よう 户对网站内容 ないよう 的 てき 理解 りかい 往往 おうおう 取 と 决于用 よう 户对网站工作 こうさく 原理 げんり 的 てき 理解 りかい 。这是用 よう 户体验设计的 てき 一 いち 部分 ぶぶん 。用 よう 户体验与网站的 てき 布 ぬの 局 きょく 、明 あきら 确的说明和 わ 标签有 ゆう 关。用 よう 户对如何 いか 在 ざい 网站上 じょう 进行交互 こうご 的 てき 理解 りかい 程度 ていど 也取决于网站的 てき 互動設計 せっけい 。如果用 よう 户意识到网站的 てき 有用 ゆうよう 性 せい ,他 た 们更有 ゆう 可能 かのう 继续使用 しよう 它。尽 つき 管 かん 熟 じゅく 练且精通 せいつう 网站使用 しよう 的 てき 用 よう 户可能会 のうかい 觉得,一个与众不同但不太直观或用 よう 户友好 ゆうこう 的 てき 网站界面 かいめん 比 ひ 较有用 よう 。但 ただし 是 ぜ ,经验较少的 てき 用 よう 户不太 ふと 可能 かのう 看 み 到 いた 一个不太直观的网站界面的优势或有用性。这推动了更 さら 加 か 普遍 ふへん 的 てき 用 よう 户体验和易 えき 于访问的趋势,无论用 よう 户技能 ぎのう 如何 いか ,都 と 能 のう 够容纳尽可能 かのう 多 た 的 てき 用 よう 户。[12] 许多用 よう 户体验设计和交互 こうご 式 しき 设计在 ざい 用 よう 户界面 めん 设计中 ちゅう 得 え 到 いた 了 りょう 考 こう 虑。
如果没 ぼつ 有高 ありだか 级编程 ほど 语言技能 ぎのう ,高 こう 级交互功能 のう 可能 かのう 需要 じゅよう 插件 。选择是 ぜ 否 ひ 使用 しよう 需要 じゅよう 插件的 てき 交互 こうご 性 せい 是 ぜ 用 よう 户体验设计中的 てき 一 いち 个关键决策 さく 。如果插件没 ぼつ 有 ゆう 在 ざい 大 だい 多数 たすう 浏览器 き 中 ちゅう 预先安 あん 装 そう ,用 よう 户可能 かのう 既 すんで 不知 ふち 道 どう 如何 いか 安 あん 装 そう ,也没有 ゆう 耐 たい 心 こころ 安 あん 装 そう 插件来 らい 访问内容 ないよう 。如果该功能 のう 需要 じゅよう 高 だか 级编程 ほど 语言技能 ぎのう ,那 な 么与功 こう 能 のう 将 はた 提 ひさげ 升 ます 用 よう 户体验的增强 ぞうきょう 量 りょう 相 しょう 比 ひ ,写 うつし 代 だい 码在时间或 ある 金 かね 钱上可能 かのう 成本 なりもと 太 ふとし 高 だか 。发布不可 ふか 靠 もたれ 的 てき 功 こう 能 のう 对于用 よう 户体验而言 ごと 可能 かのう 比 ひ 不 ふ 尝试更 さら 糟 かす 糕。这取决于目 め 标受众是否 ひ 需要 じゅよう 或 ある 值得冒 おかせ 险。
部分 ぶぶん 用 よう 户界面 めん 设计受到页面布 ぬの 局 きょく 质量的 てき 影 かげ 响。例 れい 如,设计师在设计页面布 ぬの 局 きょく 时可能 かのう 要 よう 考 こう 虑网站的页面布 ぬの 局 きょく 是 ぜ 否 ひ 应该在 ざい 不同 ふどう 的 てき 页面上 じょう 保持 ほじ 一致 いっち 。在 ざい 布 ぬの 局 きょく 设计中 ちゅう ,页面像 ぞう 素 もと 宽度对于对齐对象也是至 いたり 关重要 じゅうよう 的 てき 。最 さい 流行 りゅうこう 的 てき 固定 こてい 宽度网站通常 つうじょう 具有 ぐゆう 相 しょう 同 どう 的 てき 设置宽度,以匹配当 はいとう 前 ぜん 最 さい 流行 りゅうこう 的 てき 浏览器 き 窗 まど 口 こう ,在 ざい 当 とう 前 ぜん 最 さい 流行 りゅうこう 的 てき 屏 へい 幕 まく 分 ぶん 辨 べん 率 りつ ,当 とう 前 ぜん 最 さい 流行 りゅうこう 的 てき 显示器 き 尺寸 しゃくすん 。在 ざい 大 だい 屏 へい 幕 まく 上 じょう ,大 だい 多数 たすう 页面也是中心 ちゅうしん 对齐的 てき ,以保证美 び 观 。
流体 りゅうたい 布 ぬの 局 きょく (fluid layout )在 ざい 2000年 ねん 左右 さゆう 开始流行 りゅうこう 起 おこり 来 らい ,作 さく 为HTML表 ひょう 格 かく 布 ぬの 局 きょく 和 わ 网格布 ぬの 局 きょく 的 てき 替 がえ 代品 だいひん ,在 ざい 页面布 ぬの 局 きょく 设计原 げん 则和编码技 わざ 术方面 かたも 都 と 是 ぜ 如此,但 ただし 是 ぜ 采 さい 用 よう 起 おこり 来 らい 非常 ひじょう 缓慢。[note 1] 这是由 よし 于设计师无法控 ひかえ 制 せい 屏 へい 幕 まく 阅读设备和 かず 不同 ふどう 的 てき 窗 まど 口 こう 大小 だいしょう 。因 よし 此,一个设计可能会被分解成单元(侧边栏、内容 ないよう 块、嵌入 かんにゅう 式 しき 广告区域 くいき 、导航区域 くいき ),然 しか 后 きさき 发送到 いた 浏览器 き ,最 さい 好 このみ 的 てき 方式 ほうしき 是 ぜ 通 どおり 过浏览器适配到 いた 显示窗 まど 口中 くちじゅう 。由 よし 于浏览器能 のう 够识别读取器 き 屏 へい 幕 まく 的 てき 详细信 しん 息 いき (窗 まど 口 こう 大小 だいしょう ,相 そう 对于窗 まど 口 こう 的 てき 字体 じたい 大小 だいしょう 等 とう ),因 いん 此浏览器可 か 以对流体 りゅうたい 布 ぬの 局 きょく 进行用 よう 户特定 とくてい 的 てき 布 ぬの 局 きょく 调整,但 ただし 固定 こてい 宽度布 ぬの 局 きょく 就不行 ぎょう 。虽然这样的 てき 显示可能 かのう 经常改 あらため 变主要 よう 内容 ないよう 单元的 てき 相 しょう 对位置 いち ,但 ただし 是 ぜ 侧栏可 か 以在主体 しゅたい 文 ぶん 本 ほん 下方 かほう 而不是 ぜ 在 ざい 其侧面 めん 上移 かみうつし 位 い 。这种显示方式 ほうしき 比 ひ 起 おこり 不能 ふのう 适配设备窗 まど 口 こう 的 てき 写 うつし 死 し 的 てき 基 もと 于网格 かく 的 てき 布 ぬの 局 きょく 要 よう 更 さら 加 か 灵活。特 とく 别是,内容 ないよう 块的相 しょう 对位置 いち 可能 かのう 会 かい 发生变化,同 どう 时不影 かげ 响块内 ない 的 てき 内容 ないよう 。这也减少了 りょう 用 よう 户水平 すいへい 滚动页面的 てき 需要 じゅよう 。
响应式 しき 网页设计 是 ぜ 一 いち 种基于CSS3的 てき 新 しん 方法 ほうほう ,通 つう 过增强 ぞうきょう 使用 しよう CSS @media
规则,在 ざい 页面样式表 ひょう 中 ちゅう 提供 ていきょう 更 さら 深 ふか 层次的 てき 针对每 ごと 种设备的规范。2018年 ねん 3月 がつ ,谷 たに 歌 か 宣布 せんぷ 将 はた 推出移 うつり 动优先 さき 索引 さくいん 。[13] 使用 しよう 响应性 せい 设计的 てき 站点能 のう 够很好地 こうち 确保它们满足这种新 しん 方法 ほうほう 。
网页设计师可以选择将网站字体 じたい 的 てき 种类限 げん 制 せい 为仅有 ゆう 少数 しょうすう 具有 ぐゆう 相似 そうじ 风格的 てき 网站字体 じたい ,而不是 ぜ 使用 しよう 各 かく 种字体 じたい 或 ある 字体 じたい 样式 。大 だい 多数 たすう 浏览器 き 都 と 识别特定 とくてい 数量 すうりょう 的 てき 安全 あんぜん 字体 じたい ,设计者 しゃ 主要 しゅよう 使用 しよう 这些字体 じたい 来 らい 避免复杂性 せい 。
字体 じたい 下 か 载后来 らい 包含 ほうがん 在 ざい CSS3字体 じたい 模 も 块中,并已在 ざい Safari 3.1,Opera 10和 わ Mozilla Firefox 3.5中 ちゅう 实现。这之后 きさき 人 じん 们增加 ぞうか 了 りょう 对Web字体 じたい 排 はい 印 しるし 以及使用 しよう 字体 じたい 下 か 载的兴趣。
大 だい 多数 たすう 网站布 ぬの 局 きょく 都 と 包含 ほうがん 负空间以将文 まさふみ 本 ほん 分解 ぶんかい 为段落 だんらく ,并且还避免 めん 使用 しよう 居中 きょちゅう 对齐的 てき 文 ぶん 本 ほん 。[14]
使用 しよう 动态图形也可能 かのう 影 かげ 响到页面布 ぬの 局 きょく 和 わ 用 よう 户界面 めん 。是 ぜ 否 ひ 选择使用 しよう 动态图形可 か 能取 のとろ 决于网站的 てき 目 め 标市场。娱乐导向的 てき 网站预期或 ある 至 いたり 少 しょう 更 さら 容易 ようい 接受 せつじゅ 动态图形。然 しか 而,一个更严肃或正式的网站(如商业、社 しゃ 区 く 、政府 せいふ 网站),可能 かのう 就会觉得出 で 于娱乐或装 そう 饰目的 もくてき 的 てき 动画没 ぼつ 有 ゆう 必要 ひつよう ,还会分散 ぶんさん 人 じん 们的注意 ちゅうい 力 りょく 。这不是 ぜ 说比较严肃的内容 ないよう 不能 ふのう 用 よう 与 あずか 内容 ないよう 相 しょう 关的动画或 ある 视频演 えんじ 示 しめせ 来 らい 提 ひさげ 升 ます 。无论哪种情 じょう 况,动态图形设计 都 と 可 か 以使更 さら 有效 ゆうこう 的 てき 视觉效果 こうか 或 ある 分散 ぶんさん 注意 ちゅうい 力 りょく 的 てき 视觉效果 こうか 有 ゆう 所 しょ 不同 ふどう 。
不 ふ 由 よし 站点访问者 しゃ 发起的 てき 动态图形可能 かのう 产生可 か 访问性 せい 问题。万维网联盟的无障碍标准要求网站访问者能够禁用动画。[15]
网站设计者 しゃ 可能 かのう 认为符合 ふごう 标准是 ぜ 良好 りょうこう 做法。这通常 つうじょう 通 どおり 过描述 じゅつ 说明元素 げんそ 在 ざい 做什么来完成 かんせい 。不 ふ 符合 ふごう 标准可能 かのう 不 ふ 会 かい 使 し 网站无法使用 しよう 或 ある 容易 ようい 出 で 错,但 ただし 标准可能 かのう 与 あずか 页面的 てき 正 せい 确布局 きょく 有 ゆう 关,以便于阅读,并确保 ほ 编码元素 げんそ 适当关闭。这包括 ほうかつ 代 だい 码中的 てき 错误,更 さら 有 ゆう 条理 じょうり 的 てき 代 だい 码布局 きょく ,以及确保正 せい 确识别ID和 わ 类。编码不 ふ 佳 けい 的 てき 页面有 ゆう 时俗称 ぞくしょう tag soup 。只 ただ 有 ゆう 在 ざい 做出正 せい 确的DOCTYPE声明 せいめい 时才能 さいのう 通 どおり 过W3C进行验证 [8] ,该声明用 みょうよう 于突出 とっしゅつ 显示代 だい 码中的 てき 错误。该系统能识别错误和 わ 不 ふ 符合 ふごう 网页设计标准的 てき 地方 ちほう 。这些信 しん 息 いき 可 か 以帮助 すけ 用 よう 户改正 かいせい 错误。[16]
网站的 てき 生成 せいせい 方式 ほうしき 有 ゆう 两种:静 しず 态或动态。
静 せい 态网页多数 すう 为单一的超文本标记语言文件,每次 まいじ 请求该页面 めん 时,都会 とかい 返 かえし 回 かい 相 しょう 同 どう 的 てき 内容 ないよう 。在 ざい 网站设计期 き 间内容 ないよう 只 ただ 需创建 けん 一 いち 次 じ 。它通常 つうじょう 是 ぜ 手 しゅ 动编写 うつし 的 てき ,尽 つき 管 かん 有 ゆう 些站点 てん 使用 しよう 类似于动态网站的自 じ 动创建 けん 工具 こうぐ ,其结果 はて 将 はた 长期存 そん 储为完成 かんせい 的 てき 页面。这些自 じ 动创建 けん 的 てき 静 せい 态网站在2015年 ねん 左右 さゆう 变得更 さら 受欢迎 むかえ ,其中包括 ほうかつ Jekyll 和 わ Adobe Muse 等 とう 生成 せいせい 工具 こうぐ 。[17]
静 せい 态网站的好 こう 处在于它们更容易 ようい 托 たく 管 かん ,因 いん 为它们的服 ふく 务器只 ただ 需要 じゅよう 提供 ていきょう 静 せい 态内容 ないよう ,无需执行服 ふく 务器端 はし 脚本 きゃくほん 。这可以降 いこう 低 てい 网站维护的 てき 工作 こうさく 量 りょう ,并且由 よし 于静态网站不需要 じゅよう 数 かず 据 すえ 库 ,所以 ゆえん 可 か 以极大 だい 的 てき 避免暴露 ばくろ 系 けい 统安全 あんぜん 漏 も 洞 ほら 。[18] 他 た 们还可 か 以在低 てい 成本 なりもと 的 てき 服 ふく 务器硬 かた 件 けん 上 じょう 更 さら 快 かい 地 ち 加 か 载页面 めん 。随 ずい 着 ぎ 便宜 べんぎ 的 てき 网络托 たく 管 かん 扩展到 いた 提供 ていきょう 动态功 こう 能 のう ,这些优势变得不 ふ 那 な 么重要 よう 了 りょう ,虚 きょ 拟服务器可 か 以以低 てい 成本 なりもと 提供 ていきょう 短 たん 时间的 てき 高性能 こうせいのう 的 てき 服 ふく 务。
几乎所有 しょゆう 网站都 と 有 ゆう 一些静态内容,因 いん 为主要 しゅよう 的 てき 辅助性 せい 资源(如图像 和 わ 样式表 ひょう )通常 つうじょう 是 ぜ 静 せい 态的,即 そく 使 つかい 在 ざい 页面HTML代 だい 码几乎全是 ぜ 动态生成 せいせい 的 てき 网站上 じょう ,也不例外 れいがい 。现今不 ふ 少 しょう 网站也皆倾向把 わ 动态网页静 せい 态化,从而进行SEO 优化。
动态网页是 ぜ 服 ふく 务器通 どおり 过应用程 ほど 序 じょ 服 ふく 务器 处理服 ふく 务器端 はし 脚本 きゃくほん 生成 せいせい 的 てき 网页。它们通常 つうじょう 从一个或多个后端数据库中提取内容:一 いち 些通过跨关系数 すう 据 すえ 库 的 まと 数 すう 据 すえ 库查询,用 よう 于查询目录或汇总数字 すうじ 信 しん 息 いき ;另一些使用 しよう MongoDB 或 ある NoSQL 等 ひとし 面 めん 向 こう 文 ぶん 档的数 すう 据 すえ 库来 らい 存 そん 储更大 だい 的 てき 内容 ないよう 单元,例 れい 如博客 きゃく 文章 ぶんしょう 或 ある 维基文章 ぶんしょう 。
在 ざい 设计过程中 ちゅう ,动态页面通常 つうじょう 使用 しよう 静 せい 态页面 めん 进行模 も 拟或线框化 か 。开发动态网页所 しょ 需的技能 ぎのう 比 ひ 设计静 せい 态网页来得 どく 更 さら 多 おお ,因 いん 为其同 どう 时涉及服务端设计、数 かず 据 すえ 库设计和客 きゃく 户端设计。即 そく 使 つかい 是 ぜ 中等 ちゅうとう 规模的 てき 动态网站项目,也因此通常 つうじょう 需要 じゅよう 团队协作才能 さいのう 完成 かんせい 。
首 くび 次 じ 开发动态网页时通常 つうじょう 直接 ちょくせつ 用 よう Perl 、PHP 或 ある ASP 等 とう 语言。其中一 いち 些,特 とく 别是PHP和 わ ASP,使用 しよう “模 も 板 ばん ”方法 ほうほう ,其中服 ふく 务器端 はし 页面类似于完成 かんせい 的 てき 客 きゃく 户端页面的 てき 结构,数 すう 据 すえ 被 ひ 插入 そうにゅう 到 いた 由 ゆかり “标签”定 てい 义的位置 いち 。这是一 いち 种相比 ひ Perl 这样的 てき 纯过程语言 更 さら 快 かい 捷 とし 的 てき 开发方式 ほうしき 。
对于很多网站来 らい 说,“标签”方法 ほうほう 、“模 も 板 ばん ”方法 ほうほう 这两种实现大多数 たすう 已 やめ 经被例 れい 如内容 ないよう 管理 かんり 系 けい 统等 ひとし 高 こう 阶的、面 めん 向 こう 应用的 てき 工具 こうぐ 所 しょ 替 がえ 代 だい 。这些工具 こうぐ 建 けん 构在一些通用的代码之上,并假设网站提供 ていきょう 的 てき 内容 ないよう 遵循几种既 すんで 有 ゆう 的 てき 模型 もけい ,例 れい 如按时间顺序排 はい 序 じょ 的 てき 網 あみ 誌 し 、一个专题杂志或新闻网站、一 いち 个共 きょう 笔 网站或 ある 是 ぜ 一个用户论坛。这些工具 こうぐ 让网站的搭建变得更 さら 加 か 容易 ようい ,仅仅需要 じゅよう 纯粹的 てき 设计和 わ 内容 ないよう 组织,不 ふ 再 さい 需要 じゅよう 任 にん 何 なん 编程。
编辑网页内容 ないよう 本身 ほんみ (包括 ほうかつ 模 も 版 ばん 页面)既 すんで 可 か 以通过站点 てん 本身 ほんみ ,也可以使用 しよう 第 だい 三 さん 方 ぽう 软件完成 かんせい 。编辑所有 しょゆう 页面的 てき 功 こう 能 のう 仅提供 ていきょう 给特定 とくてい 类别的 てき 用 よう 户(例 れい 如,管理 かんり 员或注 ちゅう 册 さつ 用 よう 户)。在 ざい 某 ぼう 些情况下,允 まこと 许匿名 めい 用 よう 户编辑某些Web内容 ないよう ,这种情 じょう 况较少 しょう (例 れい 如,在 ざい 论坛上 じょう 添加 てんか 消息 しょうそく )。维基百科 ひゃっか 是 ぜ 一个可以匿名修改网页内容的网站的例子。
包括 ほうかつ Jakob Nielsen 和 かず Kyle Soucy在 ざい 内的 ないてき 可用性 かようせい 专家经常强 きょう 调主 しゅ 页 设计以确保 ほ 网站成功 せいこう ,并声称 しょう 首 くび 页是网站上 じょう 最 さい 重要 じゅうよう 的 てき 页面。[19] [21] [22] 不 ふ 过,2000年代 ねんだい 的 てき 从业者 しゃ 开始发现,越来 ごえく 越 えつ 多 た 的 てき 网站流量 りゅうりょう 绕过主 ぬし 页,通 つう 过搜索 そうさく 引擎、电子新 しん 闻稿和 わ RSS源 げん 直接 ちょくせつ 进入内部 ないぶ 内容 ないよう 页面。[23] 使 つかい 得 とく 许多从业者 しゃ 认为首 くび 页没有 ゆう 大 だい 多数 たすう 人 じん 认为的 てき 那 な 么重要 じゅうよう 。[24] [25] [26] [27] Jared Spool在 ざい 2007年 ねん 提出 ていしゅつ ,网站的 てき 首 くび 页实际上是 ぜ 网站最 さい 不 ふ 重要 じゅうよう 的 てき 页面。[28]
在 ざい 2012年 ねん 和 わ 2013年 ねん ,轮播(Carousel )已 やめ 经成为极受欢迎 むかえ 的 てき 设计元素 げんそ ,经常用 じょうよう 于在有限 ゆうげん 的 てき 空 そら 间展示 てんじ 特色 とくしょく 或 ある 最近 さいきん 的 てき 内容 ないよう 。[29] [30] 许多从业人 じん 员认为轮播是一种无效的设计元素,会 かい 损害网站的 てき 搜索 そうさく 引擎优化和 わ 可用性 かようせい 。[30] [31] [32]
建 けん 设网站涉及两个主要 よう 工作 こうさく :网页设计师和網 あみ 頁 ぺーじ 開發 かいはつ 者 しゃ ,他 た 们经常 つね 在 ざい 建 けん 站时紧密合作 がっさく 。[33] 网页设计师负责视觉方面 めん ,包括 ほうかつ 网页的 てき 布 ぬの 局 きょく 、着色 ちゃくしょく 和 わ 排 はい 版 ばん 。尽 つき 管 かん 所 しょ 需的具体 ぐたい 知 ち 识因具体 ぐたい 的 てき 网页和 わ 不同 ふどう 设计师的要求 ようきゅう 而异,网页设计人 じん 员都需要 じゅよう 具 ぐ 备HTML和 わ CSS等 とう 标记语言 的 てき 应用知 ち 识。特 とく 别是在 ざい 较小的 てき 组织中 ちゅう ,一个人需要同时掌握开发网站和必要的设计网页技能,而较大 だい 的 てき 组织则可能会 のうかい 专门指 ゆび 派 は 一个负责视觉方面的网页设计师。[34]
可能 かのう 参与 さんよ 建 けん 站的其他工作 こうさく 包括 ほうかつ :
图形设计师 为网站创建 けん 视觉效果 こうか ,例 れい 如Logo,布 ぬの 局 きょく 和 わ 按钮。
互联网营销专家 か 通 どおり 过在互联网上使用 しよう 营销和 わ 促销技 わざ 术、针对网站的 てき 受众定位 ていい 的 てき 战略解 りゃっかい 决方案 あん 来 らい 帮助维护网站。
搜索 そうさく 引擎优化 专家研究 けんきゅう 和 わ 推荐一定 いってい 的 てき 关键词,纳入特定 とくてい 的 てき 网站,使 つかい 网站更 さら 容易 ようい 访问,并在众多搜索 そうさく 引擎上 じょう 找到。
互联网文案 あん 人 じん 员撰写 うつし 网站中 ちゅう 的 てき 文章 ぶんしょう ,以吸引 きゅういん 网站的 てき 目 め 标受众[1] 。
用 よう 户体验设计 (UX设计)以用户为中心 ちゅうしん 考 こう 虑多种设计因素 もと ,包括 ほうかつ 信 しん 息 いき 架 か 构、用 よう 户测试、交互 こうご 设计等 とう 以用户为中心 ちゅうしん 的 てき 设计,有 ゆう 时也会 かい 参与 さんよ 视觉设计。
^ 1.0 1.1 Lester, Georgina. Different jobs and responsibilities of various people involved in creating a website . Arts Wales UK. [2012-03-17 ] . (原始 げんし 内容 ないよう 存 そん 档于2013-05-31).
^ Longer Biography . [2012-03-16 ] . (原始 げんし 内容 ないよう 存 そん 档于2018-03-03).
^ Mosaic Browser (PDF) . [2012-03-16 ] . (原始 げんし 内容 ないよう (PDF) 存 そん 档于2013-09-02).
^ Zwicky, E.D, Cooper, S and Chapman, D.B. Building Internet Firewalls . United States: O’Reily & Associates. 2000: 804 . ISBN 1-56592-871-7 .
^ 5.0 5.1 5.2 5.3 5.4 Niederst, Jennifer. Web Design In a Nutshell . United States of America: O'Reilly Media. 2006: 12–14. ISBN 0-596-00987-9 .
^ 6.0 6.1 Chapman, Cameron, The Evolution of Web Design , Six Revisions, [2018-12-02 ] , (原始 げんし 内容 ないよう 存 そん 档 于2013-10-30)
^ W3C. Web Accessibility Initiative (WAI) . [2018-12-02 ] . (原始 げんし 内容 ないよう 存 そん 档于2008-09-04).
^ 8.0 8.1 W3C Markup Validation Service . [2018-12-02 ] . (原始 げんし 内容 ないよう 存 そん 档于2011-02-22).
^ 不 ふ 懂程式 しき 也能寫 うつし CSS? . 2019-07-09 [2022-01-25 ] . (原始 げんし 内容 ないよう 存 そん 档于2022-01-25) (中 ちゅう 文 ぶん (繁 しげる 體 からだ )) .
^ YellowPencil:WordPress主題 しゅだい 的 てき 自 じ 訂 てい 不 ふ 會 かい 用 よう ,幫你寫 うつし CSS改 あらため 樣式 ようしき ! . 2021-06-25 [2022-01-25 ] . (原始 げんし 内容 ないよう 存 そん 档于2022-01-25) (中 ちゅう 文 ぶん (繁 しげる 體 からだ )) .
^ THORLACIUS, LISBETH. The Role of Aesthetics in Web Design . Nordicom Review. 2007, (28): 63–76 [2014-07-18 ] . (原始 げんし 内容 ないよう 存 そん 档 于2021-02-24).
^ Castañeda, J.A Francisco; Muñoz-Leiva, Teodoro Luque. Web Acceptance Model (WAM): Moderating effects of user experience. Information & Management. 2007, 44 : 384–396. doi:10.1016/j.im.2007.02.003 .
^ Rolling out mobile-first indexing . Official Google Webmaster Central Blog. [2018-06-09 ] . (原始 げんし 内容 ないよう 存 そん 档 于2021-04-29) (美国 びくに 英 えい 语) .
^ Stone, John. 20 Do’s and Don’ts of Effective Web Typography . 2009-11-16 [2012-03-19 ] . (原始 げんし 内容 ないよう 存 そん 档 于2015-06-23).
^ World Wide Web Consortium: Understanding Web Content Accessibility Guidelines 2.2.2: Pause, Stop, Hide . [2018-12-02 ] . (原始 げんし 内容 ないよう 存 そん 档 于2017-12-15).
^ W3C QA. My Web site is standard! And yours? . [2012-03-21 ] . (原始 げんし 内容 ないよう 存 そん 档于2017-12-31).
^ Christensen, Mathias Biilmann. Static Website Generators Reviewed: Jekyll, Middleman, Roots, Hugo . Smashing Magazine. 2015-11-16 [2016-10-26 ] . (原始 げんし 内容 ないよう 存 そん 档 于2020-12-05).
^ 静 せい 态网站是一 いち 种新的 てき 动态 . 王 おう 会 かい 的 てき 博 はく 客 きゃく . [2020-08-23 ] . (原始 げんし 内容 ないよう 存 そん 档 于2021-01-19).
^ Soucy, Kyle, Is Your Homepage Doing What It Should? , Usable Interface, [2018-12-02 ] , (原始 げんし 内容 ないよう 存 そん 档 于2012-06-08)
^ Nielsen, Jakob, The Ten Most Violated Homepage Design Guidelines , Nielsen Norman Group, 10 November 2003 [2018-12-02 ] , (原始 げんし 内容 ないよう 存 そん 档 于2013-10-05)
^ Knight, Kayla, Essential Tips for Designing an Effective Homepage , Six Revisions, 20 August 2009 [2018-12-02 ] , (原始 げんし 内容 ないよう 存 そん 档 于2013-08-21)
^ Spool, Jared, Is Home Page Design Relevant Anymore? , User Interface Engineering, 29 September 2005 [2018-12-02 ] , (原始 げんし 内容 ないよう 存 そん 档 于2013-09-16)
^ Chapman, Cameron, 10 Usability Tips Based on Research Studies , Six Revisions, 15 September 2010 [2018-12-02 ] , (原始 げんし 内容 ないよう 存 そん 档 于2013-09-02)
^ Gócza, Zoltán, Myth #17: The homepage is your most important page , [2018-12-02 ] , (原始 げんし 内容 ないよう 存 そん 档 于2013-06-02)
^ McGovern, Gerry, The decline of the homepage , 18 April 2010 [2018-12-02 ] , (原始 げんし 内容 ないよう 存 そん 档 于2013-05-24)
^ Porter, Joshua, Prioritizing Design Time: A Long Tail Approach , User Interface Engineering, 24 April 2006 [2018-12-02 ] , (原始 げんし 内容 ないよう 存 そん 档 于2013-05-14)
^ Spool, Jared, Usability Tools Podcast: Home Page Design , 6 August 2007 [2018-12-02 ] , (原始 げんし 内容 ないよう 存 そん 档 于2013-04-29)
^ Bates, Chris, Best practices in carousel design for effective web marketing , Smart Insights, 9 October 2012 [2018-12-02 ] , (原始 げんし 内容 ないよう 存 そん 档 于2013-04-03)
^ 30.0 30.1 Messner, Katie, Image Carousels: Getting Control of the Merry-Go-Round , Usability.gov, 22 April 2013 [2018-12-02 ] , (原始 げんし 内容 ないよう 存 そん 档 于2013-10-10)
^ Jones, Harrison, Homepage Sliders: Bad For SEO, Bad For Usability , 19 June 2013 [2018-12-02 ] , (原始 げんし 内容 ないよう 存 そん 档 于2013-11-22)
^ Laja, Peep, Don’t Use Automatic Image Sliders or Carousels, Ignore the Fad , ConversionXL, 27 September 2012 [2018-12-02 ] , (原始 げんし 内容 ないよう 存 そん 档 于2013-11-25)
^ Oleksy, Walter. Careers in Web Design . New York: The Rosen Publishing Group, Inc. 2001: 9–11 [2018-12-02 ] . ISBN 9780823931910 . (原始 げんし 内容 ないよう 存 そん 档 于2020-09-24).
^ Web Designer . [2012-03-19 ] . (原始 げんし 内容 ないよう 存 そん 档 于2020-09-25).
参考 さんこう 文献 ぶんけん 与 あずか 延伸 えんしん 阅读
编辑
Nielsen, Jakob; Tahir, Marie, Homepage Usability: 50 Websites Deconstructed, New Riders Publishing, October 2001, ISBN 978-0735711020