一、前言

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

二、我们日常生活中，更多接触的是偏移动端的设计，这是为什么呢？web端和移动端的区别是什么？

（1）因为在我们日常生活中，手持设备更加方便，移动端设备的用户比重相对网页端用户多很多，所以移动端的设计是强功能导向的设计，包含实用功能的内容。而网页端更偏向于品牌介绍，引导用户进入移动端。

（2）移动端的功能众多，无法全部复制到网页端；如果要将移动端的功能复制到网页端，成本会很高，同时很多需要授权的功能，在网页端是无法拿到数据的（例如：麦克风、相册等），都是需要移动端扫码获取权限，所以网页端就无从推进。

三、常见网页的分类；

1：网页类型分为TO B和TO C；

TO C网页包含了：门户网站（网易、腾讯网等）、企业网站（苹果、联想等）、产品网站、电商网站（淘宝、京东等）、专题页面、视频网站和移动端H5；

TO B网站包含了：网站后台、ERP系统（企业管理系统）、Saas（服务公司定制系统）和企业OA（办公自动化系统）；

网页类型

2：TO B和TO C网页类型各具有什么特点？

TO C的网页的功能目的：建立品牌形象、介绍宣传；C端的网页更加强调视觉的主次性，因为功能模块多，所以会将视觉焦点引导到主要的功能上；

TO B的网页的功能目的：数据分析，对网站前台信息进行管理；B端的网页更强调交互的易用性，来提升用户的使用效率。

四、网页的布局和网页规范；（以企业官网为例）

1：企业官网的功能目的？

企业官网主要是用来流量分发、建立信任和增加认知；

2：企业官网的基础结构是什么样的？

企业官网一般包含：导航条、banner、特性介绍、专业案例和footer等版块。

导航条尺寸：50-100px；banner尺寸：350-600px；特性介绍的作用是让用户建立信任，专业案例用来增加用户的认知，footer版块主要用来放置版权声明、联系方式、友情链接备案号等次要信息。

3：网页的布局需要注意什么？

网页设计时，可以在sketch中设置栅格，用来简化布局和间距；一般栅格的总款和列数12-24之间；具体情况在工作中灵活运用。

网页设计在sketch中怎么调出栅格

五、网页的网页规范；（以企业官网为例）

1：网页中的网页尺寸和安全视距；

主流的设计软件中暗示了主流的尺寸；网页常见的主流的设计尺寸：1366x768px、1920x1080px和1440x1024px；工作中具体使用哪个尺寸设计，需要根据用户群体来确定。

网页设计主流尺寸

一般网页设计中，需要有主视觉安全区域，主视觉安全区域宽度：1200px，网页旁边的导航以及悬浮弹窗在1440px以内；

适配视觉设计

需要注意的是，在进行网页设计的时候，屏幕的高度要减掉浏览器的高度：180px;

屏幕高度要减去浏览器高度180px

2：网页层级；

（1）网页的布局层级，从上到下，由强到弱；

（2）网页的文字层级，根据移动端的一维分析法来拆分；

网页的布局层级

（3）网页中的常见字体？

windows系统常用：微软雅黑、宋体、Arial； MAC电脑常用：苹方、宋体和Jelvetical；根据网页的风格可以增加特殊的字体包。网页中字体层级≥2，最小的字号：12px。文字的间距一般为字体的1.5-2倍。

（4）网页排版布局应该注意的地方？

通过颜色、间距对比展现出网页相同版块的亲密性；亲密性可以对不同模块引导数据流向，降低理解的成本。

（5）网页中的常用图片比例？

网页中常用的图片比例：16：9、1：1和3：4；图片可以压缩，减少服务器的资源耗费，常用的图片压缩网站（Tinypng)。

3：网页的配色以及状态提示；

（1）网页端的配色风格；

网页中的配色相对移动端比较克制；配色风格需要根据情绪色彩和业务属性去设定；

比如：蓝色代表安全、科技和可靠，一般用于工具类大数据平台；橙黄色代表热情、活力和快乐，一般多用于购物平台（如：淘宝）；

（2）网页中的配色方法；

a:一堆色值：记忆成本难、沟通成本高；

b:一个色值，通过改变不透明度，提高效率；

配色技巧

（3）网页中的状态提示；

红色一般表示提交失败、绿色表示成功；这个结合了生活中的红绿灯原理，红灯停（不予通过）、绿灯行（可通过），黄色可以起到警示作用。

状态提示