欢迎来到第 10 章：网页设计！
在单元 2 的前半部分，你已经学会了如何编写让网站运作的程序代码（HTML、CSS 和 JavaScript）。但在写下第一行代码之前，专业的开发人员必须先进行设计。试想这就像盖房子一样：你总不会连蓝图都没有就开始砌砖吧！在本章中，我们将探讨如何规划一个网站，使其外观精美、易于使用，并且让所有人都能无障碍存取。
10.1 设计原则
网站设计是一个分阶段进行的过程。我们会从粗略的草图开始，逐步演进到精致的互动版本。
10.1.1 设计工作流程
在设计过程中，你需要掌握四个关键工具：
1. 线框图 (Wireframes)： 这是页面布局的简单草图。它们不使用颜色或图片，只展示标志 (Logo)、导航栏和文字等元素的位置。
比喻：线框图就像身体的骨架。
2. 设计稿 (Mock-ups)： 这是最终页面外观的“静态”（不可点击）图像。在这阶段，你会加入颜色、字型和实际图片。
比喻：设计稿就像完工房屋的照片。
3. 网页设计风格指南 (Style Guide)： 一份列出网站“规则”的文件，包括确切的色彩代码、字型大小和按钮样式，以确保整个网站的外观风格一致。
4. 原型制作 (Prototyping)： 设计的互动版本。它背后可能没有完整的数据库，但按钮是可以“运作”的，让你能够测试网站的操作流程。
比喻：原型就像你可以实际走进去参观的示范屋。
10.1.2 网页排版 (Typography)
选择正确的字型对于阅读体验至关重要。
- 网页安全字型 (Web-safe fonts)： 这些是几乎每台电脑都预先安装的字型（例如 Arial 或 Times New Roman）。因为每个人都有这些字型，所以它们总能正确加载。
- 嵌入式网页字型 (Embedding web fonts)： 这是将特定的字型文件（例如 Google Fonts）“附加”到你的网站代码中。这让你即使在使用者电脑没有这些字型的情况下，也能使用独特且有创意的字型。
10.1.3 布局与设计原则
为了让网页看起来专业，请遵循以下四个原则：
视觉层级 (Visual Hierarchy)： 编排元素，让最重要的信息优先突显。你可以透过将标题字体加大、加粗，或使用与内文不同的颜色来达成。
视觉动线 (Flow)： 视线在页面上移动的路径。在许多文化中，我们习惯以“F”或“Z”型模式阅读。设计师会将最重要的项目放在这些动线上。
色彩理论 (Colour Theory)： 使用搭配得宜的颜色。例如，在“立即购买”按钮使用“暖色调”（红/橙）来营造兴奋感，或为银行网站使用“冷色调”（蓝/绿）来建立信任感。
平衡与对比 (Balance and Contrast)： 平衡确保页面不会看起来“头重脚轻”（例如把所有图片都塞在左边）。对比让元素更醒目——例如白底黑字比白底浅灰字更容易阅读！
快速复习：
- 线框图 (Wireframe) = 骨架（结构）
- 设计稿 (Mock-up) = 皮肤（视觉）
- 原型 (Prototype) = 动作（互动性）
重点总结： 好的设计始于规划（线框图），并遵循一致的规范（风格指南），以使网站易于阅读且视觉架构清晰。
10.2 无障碍设计原则
无障碍 (Accessibility) 意味着确保所有人都能使用你的网站，包括视力、听力或肢体有障碍的人士。
10.2.1 WCAG（网页内容无障碍指引）
WCAG 是一套设计师必须遵循的国际标准。常见例子包括：
- 为图片提供替代文字 (Alt Text)，以便屏幕阅读器能向失明使用者描述图片内容。
- 确保足够的色彩对比度，方便视力不佳的使用者。
- 确保网站可以完全使用键盘操作（针对无法使用鼠标的使用者）。
你知道吗？ 为无障碍而设计通常对每个人都有帮助！例如，影片的字幕能帮助处于嘈杂环境的人，而不仅仅是听力受损者。
重点总结： 遵循 WCAG 能确保你的网站具有包容性，并供不同能力的使用者顺畅操作。
10.3 可用性原则
可用性 (Usability) 指的是网站使用起来有多简单、多“直觉”。如果使用者在几秒钟内找不到“搜索”列，那么该网站的可用性就很差。
10.3.1 直觉式导航系统
导航栏是网站的“地图”。常见类型包括：
- 水平滚动菜单： 常见于手机应用程序，用于滑动浏览类别。
- 垂直菜单： 大型电子商务网站常见的侧边栏菜单。
- 下拉式菜单： 当鼠标悬停在主链接上时显示的子菜单。
- 面包屑导航 (Breadcrumb navigation)： 页面顶端的一串链接路径（例如：首页 > 电子产品 > 手提电脑）。它能告诉使用者目前所处的准确位置。
- 按钮群组： 将一组按钮放在一起，提供清晰的选择（例如：“是”、“否”、“再想想”）。
10.3.2 针对不同装置与浏览器
无论使用者是在 24 英寸屏幕还是 5 英寸智能手机上浏览，你的网站都必须完美运作。这称为跨浏览器兼容性 (Cross-browser compatibility)。
我们如何确保网站正常运作？
1. 功能与可用性测试： 邀请真实使用者试用网站，观察他们在哪里遇到困难。
2. 代码验证 (Code Validation)： 使用工具检查你的 HTML/CSS 代码是否符合官方规则。如果代码“写坏了”，不同的浏览器可能会呈现出不同的显示结果。
3. 浏览器开发者工具 (DevTools)： 大多数浏览器（如 Chrome 或 Firefox）都内置“开发者工具”（通常按 F12 开启）。这些工具让你能够立即查看网站在不同屏幕尺寸下的呈现效果。
要避免的常见错误： 千万不要只在一个浏览器上测试你的网站！如果你没有检查兼容性，一个在 Chrome 看起来完美的网站，在 Safari 或 Firefox 上可能会出现“崩溃”的情况。
重点总结： 高可用性的网站拥有清晰的导航（如面包屑），并经过多种装置和浏览器的测试，确保它在任何情况下都不会“故障”。
第 10 章最终总结
网页设计是形式（外观）与功能（运作方式）之间的平衡。透过使用线框图和设计稿，遵循阶层感和对比度等设计原则，并遵守无障碍 (WCAG) 和可用性标准，你就能建立一个专业、具包容性且易于导航的数字产品。