网页设计必备指南：工作流程和相关知识

网页设计必备指南：工作流程和相关知识

网页设计是一门复杂的艺术和科学，需要各种专业人才的互相配合，才能完成一个网站项目。本文将深入探讨网站设计的重要知识，为您揭开这个领域必须了解的重要面向。

一、网页设计是什么？

网页设计，又称为Web Design、网站设计、Website design、Web User Interface（网页使用者介面）等，其核心在于构建网站的图形界面。尽管如今我们习惯使用手机APP来获取信息，但桌面型电脑的网站浏览历史比手机更悠久。

在1990年代晚期至2000年代初期，电脑显示器和屏幕技术还在发展阶段，因当时硬件和显示技术的限制，屏幕分辨率仅为800×600像素（相比之下，iPhone 8的分辨率是750x1334px）。网络速度也相当缓慢，网络经常断线，那时的网站性能和使用体验都不理想。

现今的网站设计已经经历了巨大的变革：强调用户体验、注重页面动态效果、以及加入自媒体等元素，使得桌面型电脑的网站体验不亚于软件和手机APP。随着个人电脑的普及，网站仍然是人机互动中不可或缺的重要平台。

身为UI设计师，我们必须深入了解网页设计工作流程和相关知识，才能称得上是一门专业。

本文将深入探讨网站设计的重要知识，为您揭开这个领域必须了解的重要面向。

二、网页设计工作流程

在网站建置设计前，需进行用户研究、需求分析、市场调查、以及进行竞品调查等工作，网页设计并非一蹴而就，而是由多个环节组成，常见设计流程如下：

1. 原型图阶段（Prototype & Wireframe）
2. 视觉稿（Visual Mockup）
3. 网页设计规范（Design Guidelines）
4. 切图（Slicing）
5. 前端程式码（Frontend Development）
6. 响应式设计（Responsive Web Design）
7. 网站速度与效能优化（Performance Optimization）
8. 用户体验（UX）与可用性测试（Usability Testing）
9. SEO 与技术优化（SEO & Technical Optimization）
10. 无障碍网页设计（Web Accessibility, WCAG）
11. 网站验收审核（Quality Assurance）

在每一个阶段中，设计师的参与和了解都是非常重要的。设计师不应只专注於视觉稿，因为在前后期的工作中同样需要设计师的参与。而成功的网页设计不仅需要美观的视觉效果，还要有完善的工作流程与测试机制。无论初创新公司还是大型企业，都应重视 Wireframe、视觉稿、设计规范与前端开发等关键步骤，并同时考量响应式设计、效能优化、SEO 及无障碍设计，才能打造出优质的网站体验。

1. 原型图阶段(Prototype 和 Wireframe)

在原型图阶段，设计师需要与客户、项目经理进行深入的需求沟通。这一过程中值得注意的是，这不仅只是客户、项目经理向设计师沟通需求的过程，而是双方需要在各自擅长的领域进行有效的沟通。在视觉方面的呈现中，设计师可能拥有更好的美感及工作方式，因此在进行实际设计之前，与客户、项目经理达成共识非常重要。设计师和客户、项目经理都需要充分理解彼此的期望，以实现最佳的设计结果。

"Prototype" 和 "Wireframe" 在网站设计和应用程式开发中是两个不同的概念，它们在设计阶段扮演不同的角色。

1.1 Wireframe（线框图）

推荐工具：https://www.figma.com/

定义：Wireframe 是一种简单的视觉工具，用来展示网页或APP的基本结构和布局，通常只有基本的框架、区块和元素，不包含细节和设计风格。

功能：主要用于简单地传达版面配置、结构和互动元素的位置，以便团队成员之间更容易讨论和理解设计。

1.2 Prototype（原型）

推荐工具：https://www.figma.com/

定义：Prototype 是更进一步的设计阶段，展示了网页或应用程式的功能、互动和流程。相较于 Wireframe，Prototype 通常包含更多详细的互动元素，例如按钮的行为、页面之间的转换，以及基本的功能DEMO。

功能：用于模拟和测试用户与应用的实际互动，更全面地呈现最终产品的使用体验。通常在 Wireframe 完成后，进一步发展成 Prototype。

Wireframe 主要关注于结构和配置，而 Prototype 则进一步呈现了功能和互动，使团队能够更好地理解最终产品的工作方式。在项目的不同阶段，这两者都可能被使用，以确保设计和开发的顺利进行。

2. 视觉稿阶段

用来指在网页设计中，根据原型图确定的内容完成的界面设计，其主要目的是视觉上呈现最终网站的外观和风格。比如尤其在制作特定主题的网站时，设计师需要运用图像和灵感素材来模拟相关情境，这时候设计师可以用"Mood Board"（情绪板）的概念来设计网页。

2.1 Mood Board（情绪板）

推荐工具：https://www.canva.com/

是一种视觉工具，用来收集和展示特定主题、网页或设计风格相关的资料和素材，它的目的是在设计和创意过程中提供灵感，帮助确立网页的视觉风格和情感调性。

情绪板可以包含各种元素，如图片、颜色样本、文字、图表等，这些元素结合在一起，形成一张视觉呈现的大画面。帮助创作者和团队更好地了解网页的氛围、情感和风格，并且让设计在整体感觉上保持一致。

在设计领域中，情绪板常被用来启发创意，激发新点子，并作为设计过程中的参考点。它可以是手工制作的实体板，也可以是数字形式的电子板，视项目的需求和团队的偏好而有所不同。情绪板是一种简单而有效的工具，帮助确保设计在视觉上传达出预期的情感和风格。

2.2 网页设计的视觉模型 Visual Mockup for Web Design

推荐工具：Sketch

视觉稿用来呈现网页设计的视觉外观，突显了其在视觉效果呈现方面的功能。

三. 网页设计规范 Web Design Guidelines

推荐工具：https://getbootstrap.com/

完成视觉稿后，许多设计师可能忽视了制定设计规范的步骤。对于每个可迭代的网站项目，网页设计师的角色非常重要，网页设计师需要制定一套网页设计规范。这些设计规范有所有页面中共通的元素，例如字体大小的一致性、图片尺寸的统一、按钮样式等，这些共通元素在用户访问网站时构建了一种稳定的认知基础。举个例子，如果相同的分享功能采用了两种迥异的样式，可能会使用户感到混淆。所以设计规范的主要目的是约束设计师的创意，以减少用户在有限记忆力下的认知成本。但设计规范也让同一项目中的不同设计师都能产出相同风格的设计。设计师应该积极参与制定设计规范和进行项目总结。

四.切图(Slicing)

推荐工具：PHOTOSHOP

将设计师提供的网页设计文件（通常是图像或视觉稿）转换为前端开发所需的HTML、CSS、以及可能的图片文件。这个过程通常由前端工程师负责。切图的主要目的是将视觉设计转换为网站的实际元素和结构，使其可以在浏览器中正确呈现。包含切割图片、HTML和CSS，让网站在不同屏幕大小和设备上都能正确显示和运作。有时候，设计师可能不直接进行切图工作，而是将设计稿提供给前端工程师，由他们负责将设计转为互动网页。

五. 前端的程式码　Frontend Code

推荐工具：https://code.visualstudio.com/

就像网站的魔法师一样，前端工程师具备将设计师的视觉页面转化为互动网页的神奇能力。他们也需与后端的工程师之间展现出一种极致的合作，宛如一场默契的舞蹈，使整个网站能够展现的同时灵活地获取所需的资料。这可是启动整个网站活力的第一步。

为了方便评估网站是否达到我们对营销信息的要求，需要埋入GA4或FACEBOOK像素，这样就能轻松地追踪并分析哪些页面的访问量高，哪些没有达到预期。之后，我们会邀请所有人一同参与测试网站，仔细检查网站是否存在需要改进的细节问题。这一连串的步骤让网站不仅能够正常运作，还能够达到预期的效果。

六. 响应式设计（Responsive Web Design）

现代网站必须适应不同的装置（桌机、手机、平板），响应式设计（RWD）已成标准做法。

案例分析：BBC News 的响应式设计

BBC News 采用弹性网格布局（Flexbox、Grid）和 CSS 媒体查询（Media Queries）来确保网站能够自适应不同的屏幕尺寸，使阅读体验更加流畅。

七. 网站验收审核

网页设计完成后需进行网站验收审核，确认网页是否达到预期水准。如果发现与设计稿有明显不同，就需要与前端工程师合作进行调整。这个步骤非常重要，因为网站的最终成品才是我们的真正作品，我们不能仅仅因为设计稿看起来漂亮而忽视实际页面的品质。

八. 网站速度与效能优化（Performance Optimization）

网站效能优化（Website Performance Optimization，WPO）是指通过各种技术手段提升网站加载与渲染速度的过程，主要在优化用户体验，特别是针对网络速度较慢或移动设备的用户。而优化方式包括减少文件大小、最小化 HTTP 请求数量、运用浏览器/服务器缓存、优化图像，以及使用内容传递网络（CDN）等。网站效能优化不仅能提升访客的停留率、忠诚度与满意度，还能减少数据传输量并降低能源消耗，进而减少对环境的影响。随着时间推移，网站效能优化的范畴从最初专注于代码优化与硬件限制，逐步发展至多层缓存机制、轻量化前端元件设计，以及与服务器端元件的非同步通讯等更复杂的技术。网站效能影响 SEO 与用户体验，包括图片压缩（WebP）、CDN（内容传递网络）、Lazy Loading（延迟加载）等。

案例分析：Amazon 的网站速度优化

Amazon 通过减少 HTTP 请求、图片压缩、CDN 部署等方式，提高网站加载速度，降低跳出率并提升转化率。

九. 用户体验（UX）与可用性测试（Usability Testing）

好的网页设计需要重视信息架构（IA）、可读性与交互设计。

案例分析：Snappa 及 DashThis A/B 测试优化 UX

A/B 测试在优化注册流程方面被广泛应用。例如，Snappa通过减少注册表单中的必填字段，提高了 20% 的注册率和每月经常性收入（MRR）。此外，DashThis通过简化注册流程和提供引导，将超过 50% 的免费试用用户转化为付费用户。

十．SEO 与技术优化（SEO & Technical Optimization）

SEO 友善的网页设计影响搜索排名，包含结构化数据（Schema Markup）、网站地图（XML Sitemap）等。

案例分析：Wikipedia 的 SEO 策略

维基百科（Wikipedia）通过其结构化数据项目——维基数据（Wikidata），使内容更容易被搜索引擎索引，并显示于知识图谱（Knowledge Graph）中。Wikidata 是一个自由开放的知识库，旨在为维基媒体（Wikimedia）项目（如维基百科、维基导游、维基文库等）提供结构化数据的集中存储。通过将信息以结构化的方式存储在 Wikidata 中，维基百科的内容能够被搜索引擎更有效地解析和理解，从而在搜索结果中以知识图谱的形式呈现。这种结构化数据的应用，提升了信息检索的效率和准确性，为用户提供更丰富的搜索体验。

十一．无障碍网页设计（Web Accessibility, WCAG）

网站应适用于所有用户，包括视障者（屏幕阅读器）、听障者（字幕）、行动不便者（键盘导航）。

案例分析：Apple 官网的无障碍设计

Apple 一直以来非常重视无障碍设计，并在其开发者指南中提供了详细的无障碍功能设计指引，协助开发者创建对所有用户友好的应用程序和网站。Apple 在其产品和网站设计中积极采用无障碍设计原则，致力于为所有用户提供良好的体验。