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

什么是网页设计

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

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

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

工作流程

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

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

原型图阶段

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

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

视觉稿阶段

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

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

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

设计规范

视觉规范（工具：sketch）

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

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

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

切图

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

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

来源声明：本文章系云天下编辑原创或采编整理，如需转载请注明来自云天下。以上内容部分(包含图片、文字)来源于网络，如有侵权，请及时与本站联系（13862691598）。