1、什么是网页设计？

网页设计也被称为网页设计、网站设计、Websitedesign、WUI等。其本质是网站的图形界面设计。虽然我们现在经常使用移动应用程序获取信息，但显然基于个人电脑平台网站互联网陪伴我们的历史比手机长得多：从1987年钱天白教授发送第一封电子邮件到2000年搜狐、新浪、网易在纳斯达克上市，现在网站无处不在；中国网站已经快速发展了近30年。小学开始去网吧「上网冲浪」当时电脑屏幕很小，分辨率只有800×600像素(相比之下，iPhone8的分辨率是750x134px)，网速也很慢，经常掉线或加载失败。当时网站的性能和体验都不好，但现在网站设计和过去发生了很大的变化:关注用户体验、页面动态效果、富媒体等设计，让今天的网站体验并不比软件和手机APP差。随着个人电脑的普及，网站仍然是人机交互中非常重要的平台之一。所以作为UI设计师，我们必须掌握网站设计的规范，了解网站运行的原理，才能更好地控制这个平台。今天就给大家讲讲网站必须知道的那些事情。

二、工作流程

首先，让我们来看看网站设计的工作流程。除了之前介绍的用户研究、撰写产品需求文档、市场文档、做竞争产品研究等工作外，与设计师密切相关的网站项目流程可分为原型图阶段、视觉稿阶段、设计规范阶段、切割阶段、前端代码阶段、项目检查阶段六个阶段。每个阶段都需要设计师的参与和理解。不要只关心视觉手稿的这个阶段。我们也需要关注很多前期和后期的工作。好吧，让我们一个接一个地了解他们。

1.原型图阶段

在原型图阶段，设计师需要与产品经理沟通。此时，需要注意的是，不是产品经理向设计师发出需求，而是他们需要就自己擅长的方面进行沟通。在视觉方面，设计师可能有更好的方法，在设计之前需要与产品经理达成协议。

2.视觉稿阶段

视觉手稿阶段是根据原型图确定的内容和一般布局完成网站的界面设计。在设计网站时，我们需要一些图像和灵感材料。比如在做世界杯专题的时候，除了收集很多材料，我们还可以设计一个「情绪板」（MoodBoard）。简单来说，情感板就是拼贴一些与主题相关的材料和材料，这样可以更好的引导我们整个需求的设计主题和一般感受。此外，很多网站的头部通常需要主视觉来吸引人们的注意力。此时，可以使用需求方提供的明星照片、主题材料、LOGO、主视觉PSD等。，所以我们的目标是将材料与这些需求方提供的材料混合，拼出令人震惊的头部视觉。主视觉下的信息布局更加合理。此时，我们还需要与产品经理沟通从后台获取的图片尺寸和标题字段长度，然后根据这些要求完成页面信息部分的设计。总之，在设计过程中，我们需要不断地思考和沟通，才能完成一个更好的视觉稿。

3.设计规范

当视觉稿通过时，许多设计师可能不会主动制定设计规范。事实上，每个迭代产品都需要设计师来总结设计规范。设计规范是所有页面中常见的东西，如字体大小、图片大小、按钮风格等。这些共性也是用户访问网站时理解固定概念的凭证。例如，如果使用两种完全不同的风格，相同的共享功能会让用户感到困惑。所以设计规范主要是为了限制设计师自己，降低用户有限记忆中的思维成本。同时，设计规范也可以保证同一项目的不同设计师能够输出相同风格的设计。最后，设计规范也是设计师个人对项目影响的证明，可以证明你的思维和你在项目中的地位。所以我认为设计师应该主动做设计规范和项目总结。如何做设计规范？其实设计规范就是把主页的元素固定成统一的元素。具体来说，产品的设计规范应包括：字体规范、主色调规范、图表规范、图片规范等不同的分类。

网页设计师通常不需要为前端工程师切割图纸。因为前端工程师通常需要掌握PS软件技能。如果我们需要在特殊情况下切割图纸，我们可以使用Cutterman、Zeplin等切图插件中的Web选项是前端切出网站使用的图片。

5.前端代码

前端工程师将使用代码重建我们设计的页面，并将图纸转换为静态页面。然后与后端工程师连接，以获取数据接口，一个网站就会生存下来。为了方便了解网站是否符合我们要求的数据，工程师还将埋葬点。埋葬点是在页面代码中插入一些统计代码，以便我们确定哪些页面访问量很高，哪些页面没有达到预期。事实上，测试工程师会介入，以找出编译网站是否有一些漏洞。

6.项目走查

网页设计完成后，设计师还需要检查项目，以确定网页还原程度是否有问题。如果发现与设计草案有很大差异，则需要前端工程师进行调整。这一步非常重要，因为网站的成品是我们的最终输出，不要认为设计草案非常漂亮，我们不需要对页面负责。