欢迎来到第 2 单元：网页设计！
未来的网页设计师们，你们好！这一章非常令人兴奋，因为它不再局限于了解 HTML 标签是什么，而是专注于如何有效地使用它们来构建出色的用户体验。我们将学习那些区分“让人困惑的网站”与“优秀的网站”的关键原则。
别担心你不是艺术家！ 网页设计更多的是逻辑与规划，而非绘画。在本单元结束时，你将学会如何规划一个专业、易于导航且满足用户需求的网站。
让我们开始吧！
第 2.1 单元：定义目标与目标受众
关键的第一步：为什么要构建这个网站？
在写下一行代码之前，你必须明确两点：网站的目标（Purpose）和目标受众（Target Audience）。
1. 网站的目标
目标决定了你所做的每一个设计选择。问问自己：
- 目标是提供信息吗（如新闻网站）？
- 目标是销售产品吗（电子商务）？
- 目标是提供娱乐吗（游戏或流媒体）？
- 目标是收集信息吗（调查或注册）？
示例： 如果目标是销售，那么“立即购买”按钮必须醒目且易于找到。如果目标是提供信息，那么文本必须清晰易读。
2. 确定目标受众
目标受众是指将使用你网站的特定人群。了解他们是做出设计决策（如字号、语言正式程度和配色方案）的关键。
我们根据以下特征来分析受众：
- 年龄段： 年轻受众通常偏好动态、视觉丰富的网站；年长受众可能需要更大的字号和高对比度。
- 技术能力： 他们是新手还是专家？这会影响你导航设计的复杂度。
- 访问方式： 他们主要使用台式机、平板电脑还是手机？（这影响了响应式设计的需求。）
快速回顾：受众核对
如果你的受众是 6-8 岁的儿童，你会使用鲜艳的颜色、简单的语言，或许还有卡通图案。如果你的受众是企业高管，你会使用企业风格、柔和的色彩、详细的图表以及专业的语言。
核心要点： 在着手“如何做”之前，先明确“为谁做”和“为什么做”。
第 2.2 单元：规划网站结构与导航
内容结构化：网站地图（Site Map）
网站需要结构，就像建筑物需要蓝图一样。这种结构通常由网站地图来呈现。
网站地图是一个直观或层级化的图表，展示了网站上的所有页面以及它们是如何相互链接的。它能确保你不会遗漏任何页面，并有助于规划导航路径。
层级类比：文件柜
把你的网站想象成一个文件柜：
- 柜体（主页）
- 主抽屉（主要类别，例如：产品、关于我们、联系方式）
- 抽屉里的文件夹（子页面，例如：在“产品”下有“衬衫”、“裤子”、“鞋子”）
大多数网站遵循浅层级结构（深度为 2-3 次点击），以确保用户能快速找到信息。
设计高效的导航
好的导航意味着用户不需要思考下一步该去哪里。
导航的关键原则：
- 一致性： 导航栏/菜单在每一页上都应出现在完全相同的位置。
- 清晰性： 链接名称应该一目了然（例如：使用“常见问题解答”而不是“你可能想知道的事”）。
- 简洁性： 选项太多会让用户感到不知所措。保持在 5-7 个主要链接以内。
- 返回主页： 公司 Logo 通常位于左上角，应始终链接回主页。
你知道吗？ 一种名为面包屑导航（Breadcrumbs）的功能可以帮助用户了解他们在网站层级中的当前位置（例如：主页 > 产品 > 鞋子 > 跑步鞋）。它们就像标记路径的指示牌一样。
核心要点： 使用网站地图来规划一个清晰、浅层的结构，并确保整个网站的导航保持一致且直观。
第 2.3 单元：核心视觉设计原则
布局与视觉层级
你如何安排屏幕上的元素将极大地影响可读性和用户焦点。
1. 使用网格系统
网页通常使用不可见的网格系统（列和行）进行设计。这提供了结构和平衡感。与网格对齐的内容看起来更专业、更有条理。
2. F 形浏览模式（阅读习惯）
西方文化背景下的用户通常倾向于以“F”形状扫描网页：
- 他们先横向阅读顶部（F 的顶部横线）。
- 他们沿着左侧向下扫描（F 的垂直主干）。
- 他们再次向右略微阅读（F 的中间横线）。
设计提示： 将最重要的信息、导航和行动呼吁（Call-to-action）放置在 F 形路径上。
色彩与对比度
色彩会影响情绪、可读性和品牌标识。
- 配色方案： 根据你的目标受众和企业标识，使用有限的调色板（通常为 2-3 种主色）。（例如：蓝色暗示信任/金融；绿色暗示自然/健康。）
- 对比度： 前景色（文字）与背景色之间的差异。高对比度对于可读性至关重要（例如：白色背景上的黑色文字）。避免低对比度的组合（例如：白色背景上的浅蓝色文字）。
应避免的常见错误： 使用过多种鲜艳、冲突的颜色。这在视觉上会让人困惑，看起来也不专业。
排版（字体）
排版是关于选择和排列字体，使文字既可读又具吸引力。
- 衬线字体（Serif）： 有装饰性的小笔画（如 Times New Roman）。它们通常用于印刷材料或大段正式文本，因为衬线有助于引导视线。
- 无衬线字体（Sans-Serif）： 没有笔画（如 Arial 或 Verdana）。它们通常是屏幕阅读的首选，因为在较小尺寸下它们更简洁、清晰。
设计提示： 整个网站最多只使用 2-3 种不同的字体。正文请使用清晰的无衬线字体。
核心要点： 策略性地利用色彩和布局来引导用户的视线，并确保高对比度以实现最佳可读性。
第 2.4 单元：一致性与企业标识
一致性的力量
一致性意味着看起来相同的元素应该具有相同的功能，且整体的视觉感受必须统一。
一致性至关重要，因为：
- 它使网站看起来更专业、更值得信赖。
- 它降低了用户的学习曲线（一旦他们知道某一部分如何运作，他们就知道其余部分如何运作）。
- 它强化了品牌形象。
“三个 C”助记法：
为了保证好的设计，请确保：
Colour（色彩方案必须统一）
Components（组件/按钮和菜单外观与功能必须统一）
Content（内容/语调和正式程度必须统一）
企业标识（品牌化）
你的网站通常是一个组织的公共门面。它必须与公司的企业标识（Corporate Identity）（品牌）完美契合。
企业标识元素包括：
- 特定的 Logo（在所有页面上保持一致）。
- 预定义的 调色板（通常由特定的数字代码定义）。
- 核准的 语调（正式、亲切、技术型等）。
如果一家银行拥有严肃、值得信赖的企业形象，他们的网站就应该使用沉稳的颜色和清晰、正式的语言，而不是鲜艳的卡通图形。
核心要点： 一致性建立信任。每一个设计元素都必须强化组织的品牌形象。
第 2.5 单元：可访问性考量
为所有人设计
好的网页设计应具有包容性。可访问性（Accessibility）意味着确保残障人士（视觉、听觉、认知或行动障碍）能够有效地使用网站。
这通常是法律要求，更是伦理责任。
设计选择如何影响可访问性：
- 图像文本替代（Alt Text）： 所有功能性和信息性的图像都必须包含 Alt Text。这段文字会由屏幕阅读器为视觉障碍用户朗读出来。
- 高对比度： 如前所述，高对比度的文字/背景颜色组合对于视力低下或色盲用户至关重要。
- 键盘导航： 无法使用鼠标的用户（由于行动障碍）必须能够仅使用 Tab 键来导航和与网站互动。确保所有的链接和按钮都是可选中的。
- 清晰的语言： 尽可能使用简单的语言，避免技术术语，这有助于认知困难的用户。
你知道吗？ 许多国家都有法律（如英国的《平等法》）规定公共网站必须达到一定的可访问性标准。为可访问性而设计不是“可选项”！
核心要点： 在进行设计选择（如色彩和图片）时，始终考虑到可访问性，重点关注对比度和提供替代性文字描述。
章末总结：快速回顾
你现在已经掌握了设计高效网页的核心原则。请记住，伟大的设计是“隐形”的——用户可以在没有困惑和困难的情况下达成他们的目标。
- 规划： 从定义目标和分析目标受众开始。
- 结构： 使用网站地图以浅层、逻辑化的层级组织页面。
- 易用性： 确保导航一致且清晰（使用简短、描述性的标签）。
- 视觉： 使用有限、高对比度的颜色，并在正文中使用易读的无衬线字体。
- 品牌： 在布局、色彩和语调上保持一致性，以强化企业标识。
- 可访问性： 为高对比度而设计，并为图片包含Alt Text。
在你开始构建自己的项目时，请记住这些原则！