如何设计出更加精美的网站之网页设计的几个阶段流程介绍

什么是网页设计

网页设计也被称为Web Design、网站设计、Website design、WUI等。它的本质就是网站的图形界面设计。

虽然现在我们常使用移动端上的APP来获取资讯，但是显然基于个人电脑平台的网站上网方式陪伴我们的历史要比手机久很多：从1987年钱天白教授向德国发出第一封电子邮件到2000年搜狐、新浪、网易在美国纳斯达克挂牌上市，再到现在网站遍地，中国的网站高速发展了近30年。

在二十多年前，那时的电脑屏幕还非常小，分辨率只有800x600像素，网速也很慢，经常掉线或者加载失败。那时的网站性能和体验都不好，而现在网站设计相比过去已经发生了巨大的变化：注重用户体验、注重页面动效、富媒体等设计让如今的网站体验并不差。加上个人电脑的普及，网站仍然是人机交互中非常重要的平台之一。

工作流程

产品经理在画原型图之前，一般都需要进行用户研究、撰写产品需求文档、市场文档、竞品调研等工作。

而原型图阶段、视觉稿阶段、视觉规范阶段、设计规范阶段、切图阶段、前端代码阶段、项目走查阶段等网站项目流程都与设计师密切相关，每个阶段都需要设计师参与了解。

原型图阶段

构建网站原型图（工具：Axure RP ）

原型图阶段中设计师需要和产品经理沟通需求，这时要注意，并不是产品经理向设计师下发需求，而是需要相互就自己擅长的方面进行沟通。视觉方面具体呈现也许设计师会有更好的方式，这时需要在设计之前与产品经理达成一致。

视觉稿阶段

这时我们除了收集很多素材之外，也可以设计一个“情绪板”。简单来说情绪板就是将一些与主题相关的资料和素材拼凑在一起，以更好地指引设计主题和大体感觉。

另外，很多网站的头部通常需要主视觉来吸引眼球，这时可能会使用到需求方提供的明星照片、主题素材、LOGO、主视觉PSD等，用素材和需求方提供的资料进行混合并拼出让人感觉震撼的头部视觉就是我们的目标。

主视觉下的信息排布更强调合理性，这时也需要和产品经理沟通从后台调取的图片尺寸、标题字段长度等，然后根据这些要求完成页面信息部分的设计。总之，设计过程中需要我们不断思考和沟通才可以完成一个比较棒的视觉稿。

设计规范

视觉规范（工具：sketch）

当视觉稿通过后，接下来就需要去写设计规范。其实每一个可迭代的产品都需要设计师来总结设计规范，设计规范就是所有页面中共性的东西，比如说字体的大小、图片的尺寸、按钮的样式等运用规范，这些共性也是用户访问网站时会理解成固定概念的凭证。

设计规范主要意图是约束设计师注意在用户有限的记忆力中减少思考的成本。同时，设计规范也可以保证同一个项目的不同设计师都能输出一样风格的设计。

最后，设计规范对于设计师个人来说也是对项目影响的一个佐证，可以证明你的思考和你在项目中的地位。设计规范就是把主要页面的元素固定成统一元素即可。具体来说一个产品的设计规范应该有：字体规范、图标规范、主体色规范、图表规范、图片规范等不同分类。

切图

从sketch切图包中截取的图（插件：sketch measure）

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

但如果设计师是用sketch画的设计图，则需要设计师切图，此时就需要用sketch的插件统一切图，记得检查所有的切图。

前端代码

前端工程师代码编译（工具：Notepad +）

前端工程师会用代码重构我们设计的页面，把图纸变为静态页面。然后和后端工程师对接调取数据接口，一个网站就活了起来。

工程师们为了方便了解网站是不是达到了我们要求的数据，也会进行埋点。埋点就是在页面代码里插入一些统计代码，方便我们之后确定哪些页面访问量高，哪些没有达到预期。在此后其实还会有软件测试工程师介入来发现编译完的网站是否存在一些漏洞等，这里省略。

项目走查

将实现后的截图和设计稿进行比对（工具：Photoshop）

网页设计完成后还需要设计师进行项目走查，来确定网页还原度是否有问题。如果发现有和设计稿出入很大的，就需要要求前端工程师进行调整。这个步骤非常重要，因为网站的成品才是我们最终的输出，不要认为设计稿很漂亮而实现后的页面就不需要我们负责了。