网页UI设计基础之线框图设计（栅格建立、基础布局、分屏、文字排版）

线框图介绍

概念

线框图（Wireframe或Wireframing）
网站线框图是网站框架的草图，是网站设计师根据网页设计标准将客户需求图形化的一种展现形式。
例如：

特点

作为一个视觉设计的起点，后期可以提高视觉设计的便利性，提高质量。
能灵活更换图片、文字等，节省试错时间。
可以快速调整布局，有一个整体预览的效果。
PSD文件可以直接用于后期的视觉设计阶段。
…
所以线框图的也应当作设计的一部分！

下面的线框图设计，将会以上方的线框图作为例子，进行讲解。

线框图设计

构建栅格（网格）系统

栅格 俗称网格或网格系统，就像是一个网络可以帮助我们定位，更精确设计，使设计更规范，同时能够给前端工程师提供很好的开发标准和规范。