五分钟教你快速了解网页设计的要求

网页设计的概念

网页设计（web design，又称为Web UI design，WUI design，WUI），是根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化），进行网站功能策划，然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。

网页设计一般分为三种大类：功能型网页设计（服务网站&B/S软件用户端）、形象型网页设计（品牌形象站）、信息型网页设计（门户站）。设计网页的目的不同，应选择不同的网页策划与设计方案。

网页设计的工作目标，是通过使用更合理的颜色、字体、图片、样式进行页面设计美化，在功能限定的情况下，尽可能给予用户完美的视觉体验。高级的网页设计甚至会考虑到通过声光、交互等来实现更好的视听感受。

网页设计主要以Adobe产品为主，常见的工具包括FW、PS、FL、DW、CDR、AI等，其中DW是代码工具，其他是图形图像和FL动画工具。还有最近几年Adobe新出的EdgeReflow、EdgeCode、Muse。

网页尺寸

制作网页时，我们通常选用的分辨率是72像素/英寸，使用的画布尺寸1920px*1080px。但是并不代表我们可以在整个画布上作图。

网页的布局主要有两种，左右型布局和居中型布局。布局的不一致，使得可设计的空间也不相同。

左右布局

左右布局，灵活性强， UI的限制小,左边通栏为导航栏，宽度没有具体的限制，可根据实际情况调整；右侧为内容版块范围，是网站内容的展示区域。

居中布局

居中布局，中间的部分为有效的显示局域，用于网站内容的展示；换句话说，两边均为留白，没有实际用途，只是为了适配而存在。

网页字体

字体设计的总原则是：可辨识性和易读性，并且不能使用一些有版权的字体。网页的文字设计是系统默认的字体：宋体、黑体，英文则建议使用arial无衬线字体
常用的字号大小有以下几种：
12px是应用于网页的最小字体，适用于非突出性的日期，版权等注释性内容。
14px 则适用于非突出性的普通正文内容。
16px、18px或者20px 适用于突出性的标题内容。
网页设计也可能需要其他大小字号，要根据具体情况而定。

字体间距

相邻两个文字的间距，其实不需要太过介意，除了特殊的需求之外，都可以使用默认数值的间距。
行间距，推荐以字体大小的1.5—2倍作为参考；段间距，推荐以字体大小的2—2.5倍作为参考。即，当选用14px的字体时，行间距：21—28px；段间距：28px—35px。

字体颜色

主文字颜色，建议使用公司品牌的VI颜色，可提高公司网站与公司VI之间的关联，增加可辨识性和记忆性。正文字体颜色，保险起见，选用易读性的深灰色，建议选用#333333到#666666之间的颜色。辅助性的，注释类的文字，则可以选用#999999之类的比较浅的颜色。如果，你对颜色驾驭能力比较强，你也可以选用偏公司VI颜色的深色，作为正文字体颜色或者辅助性文字颜色。例如公司的品牌色是蓝色，那么，正文字体就可以选用偏蓝的深色。这样处理之后，文字就带有了环境色，网站整体色调将更加和谐。

首屏设计

做网页设计时，你还要特别注意网页的首屏内容，在构图和内容呈现上，首屏模块的设计至关重要。用户打开一个网站，首先展现在眼前的就是网站的第一屏内容，如果首屏设计的比较精彩，能够第一眼吸引住客户。
另外，是关于图片尺寸的问题。需要全屏显示的图片，宽度尺寸一般来说设计为1920px。但是值得注意的是，图片内容的有效范围不能超过网页内容的有效范围，即控制在1200px以内。避免遇到小屏幕设备时，内容显示不全，而造成信息的遗漏的情况。

响应式布局设计

响应式设计指的是不同设备、屏幕、分辨率、操作方式（鼠标、键盘、触摸），保证信息在不同环境下表现一致，保证可交互可操作。
由于页面的宽度发生了变化，进而信息展现也改变了就是响应式设计。直到最后在手机屏幕上的显示图片信息变成了一列。
对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：桌面优先（从桌面端开始向下设计）；移动优先（从移动端向上设计）；无论基于哪种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化（当页面宽度发生变化的尺寸范围就是临界点的概念。所以做响应式设计时我们需要知道每一个尺寸的宽度范围在多少时我们就可以制定出相对应清晰的一个临界点，制定了临界点之后就知道，当屏幕的宽度范围位于哪一个点的时候，我们的页面信息该如何展示。）

我们通过JS获取设备的屏幕宽度，来改变网页的布局，这一过程我们可以称之为布局响应屏幕。

常见的主要有如下几种方式：

1、布局不变，即页面中整体模块布局不发生变化

2、布局改变，即页面中的整体模块布局发生变化

很多时候，单一方式的布局响应无法满足理想效果，需要结合多种组合方式，但原则上尽可能时保持简单轻巧，而且同一临界点内（发生布局改变的临界点称之为临界点）保持统一逻辑。否则页面实现得太过复杂，也会影响整体体验和页面性能。

联系我们

浙江网盛生意宝股份有限公司股票代码:002095

联系人：王烨

电话：024-83959235

传真：024-83953630

E-mail: wy@netsun.com

地址：沈阳市和平区青年大街322号昌鑫大厦F座12B