你必须知道的网页设计基础知识

网页设计也被称为 Web Design、网站设计、Website design、WUI 等。它的本质就是网站的图形界面设计。虽然现在我们常使用移动端上的 APP 来获取资讯，但是显然基于个人电脑平台的网站上网方式陪伴我们的历史要比手机久很多。

现在网站设计注重用户体验、注重页面排版和规范。那么我们就必须掌握网站设计的规范以及了解一些网页设计的知识，才能更好地理解和把控网页设计。今天这篇文章，小编就和你介绍介绍网站必须懂得的那些事儿。

一．网页版式

在网页设计版式设计当中，主要有以下几种排版形式：重心型、中轴型、分割型、倾斜型、骨骼型、满版型、曲线型、对称型、三角形和自由型。小编一一来分析以下几种网页排版方式。

（1）重心型

重心型版式的网页容易让浏览者产生视觉焦点，界面效果强烈且突出。重心型又可以分以下三种形式：

A、直接以独立而轮廓分明的形象占据版面中心；

B、向心：视觉元素向版面中心聚拢的运动；

C、离心：犹如将石子投入水中，产生一圈圈向外扩散的弧线运动。（下图为例）

（2）中轴型

中轴型的网页设计，是将图形做水平或垂直方向的排列，文案以上下或左右配置。水平排列的版面会给人稳定、安静、和平与含蓄之感。垂直排列的版面给人强烈的动感。垂直排列的这种排版方式比较常出现。

（3）分割型

分割型主要可以分成上下分割和左右分割。相比较，左右分割型的网站会比较常见。（如下图）

A、上下分割

上下分割，顾名思义，就是把整个版面分为上下两个部分。可以在上半部或下半部配置图片，另一部分则配置文案。配置有图片的部分感性而有活力，而文案部分则理性而静止。上下部分配置的图片可以是一幅或多幅。

B、左右分割

左右分割，就把整个版面分割为左右两个部分，分别在左或右配置文案。当左右两部分形成强弱对比时，则造成视觉心理的不平衡。倘若将分割线虚化处理，或用文字进行左右重复或穿插，左右图文则变得自然和谐。

（4）倾斜型

倾斜型的网站比较少见，这样的网站偏个性化一些，多在一些设计公司或是运动品牌的网站中出现。版面的主体形象做倾斜设计，造成版面强烈的动感和不稳定因素，这种设计比较引人注目。

（5）骨骼型

骨骼型比较在传统网站当中比较常见，它是一种规范的界面分割方法。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向通栏、双栏、三栏和四栏等。一般以竖向分栏为多。

骨骼型的网站会给人以严谨、和谐、理性的美。每一个区块经过相互混合后的版式，既理性、条理，又活泼而具弹性。

（6）满版型

满版型的网站近几年也越来越多见，多用于游戏和旅游网站设计上，通常是版面以图象充满整版，主要以图象为诉求，视觉传达直观而强烈。文字的配置压置在上下、左右或中部的图象上。满版型给人以大方、舒展的感觉。

（7）对称型

对称的版式给人稳定、庄重理性的感觉。对称有对称和相对对称。一般多采用相对对称。以避免过于严谨。对称一般以左右对称居多。如下图的苹果产品页面，首屏就是使用这种对称的排版方式。

（8）三角型

在圆形、四方形、三角形等基本形态中，正三角形是具安全稳定因素的形态，而圆形和倒三角形则给人以动感和不稳定感。这种排版方式较为少见。

二．网页规范

（1）网页组成部分

最基本的网页主要由以下几个部分组成：

·网站标志（logo）

·网站导航

·网站主场景（banner）

·内容区（产品展示，功能介绍，操作步骤，用户评价，联系方式，其他）

·版权信息

（2）版心

版心是页面中主要内容所在的区域。重要的信息都需要展示在版心以内，由于不同的设备尺寸有所区别，特别是PC端和移动端，故其规范也不同。

PC端

·页面设计宽度: 1920px

·页面版心：1080px, 1200px (常用)，1500px

·版心：920px~1500px之间

移动端：

·页面设计宽度: 375px，320px

·两边间距：15-20px, 建议使用15px

版心很大程度上和设备的分辨率有关，下图为设备分辨率的市场占比：

（3）首屏

首屏即打开网页显示在你面前的第一屏，所以重要的信息如文案，产品，购买按钮等内容都需要放在首屏展示，首屏往往包含导航栏和banner，它们的规范如下：

·导航栏高度：50-100px (常用80px)

·banner高度：500-800px （建议控制在700px以内）

·首屏高度：1080px以内

首屏的高度一定程度上也会影响到用户能够观看的内容范围，由于不同设备的分辨率不同，用户在首屏看到的范围也不一样（如下图）：

·30%的用户看不到红色线以下（超出600px）的内容；

·50%的用户看不到蓝色线以下（超出720px）的内容；

·70%的用户看不到绿色线以下（超出800px）的内容.

（4）文字大小

目前市场上的设计在文字大小的规范上都比较统一，区别主要在于PC端和移动端的字体大小。

PC端

移动端

三：网页图标样式

图标作为网页设计的一部分，起到美化画面的作用。相信大家已经见识过各种各样的图标形式了，而这么多种类的图标归纳起来可以概括为以下5个类别（如下图）：

1. 面性； 2. 线性；3. 线面结合；4. 扁平化；5. 拟物化

而在风格上也可以归纳为6个类型：

1. 标准；2.容器；3. 渐变；4. 3D；5. 手绘；6. 阴影；

不同的图标类型都有着自己的专业名称，下面小编给大家介绍几个常见的图标风格：

（1）渐变

这个比较好理解，从颜色就可以看的出来，一般就是在颜色上有2种或多于2种的颜色形成的渐变效果。

（2）像素风

顾名思义，图标就是由像素格组成，有着独特的视觉效果。像素风一般在游戏界面上出现的比较多。

（3）断线风

断线风是在线性图标的基础上，对线条进行断点处理，形成断线的独特风格，使得图标更加丰富活泼。

（4）3D风格

3D立体风格的图标现在越来越受欢迎，在视觉效果上也更加吸引人。

（5）拟物

拟物的图标是通过形状，颜色，投影等，使图标接近真实事物的形态，这种类型的图标在APP和移动端的设计上较常使用。

（6）游戏风

如果你是游戏爱好者，这种类型的图标就不陌生了。游戏图标在形状，颜色，光影上的使用较为复杂。

图标也可以是有多少种风格的组合，比如下面这个图？根据上面的介绍，大家可以说出它都有什么风格组成的吗？仔细看看哦。

在网页设计版式设计当中，主要有以下几种排版形式：重心型、中轴型、分割型、倾斜型、骨骼型、满版型、曲线型、对称型、三角形和自由型。小编一一来分析以下几种网页排版方式。

不卖关子了，相信大家也能看出这些图标都有包含渐变，阴影，容器，微立体等风格。

以上就是3个网页设计基础知识的介绍，小伙伴们如果想要了解更多网页知识，记得点赞并关注公粽号哦。