互联网成就了我们今天的生活，同时也加快了我们的生活。在设计领域，UI设计已经不单单的是一个岗位，它更像是一个行业，让设计师们更专注于一个方向，从而促进设计的精进。记得2013年刚刚毕业的时候，找工作无非就平面设计、UI设计、网页设计、美工这几个岗位，如今又分支出了交互设计、用户体验设计、GUI设计、视觉设计，更有新兴的AE动效设计、C4D设计等。

如此众多的设计方向，让很多设计师特别是刚刚步入社会的设计师很难抉择，而这个选择对于设计师来说，选对了那么前途坦荡荡，选错了那就不用说了。对错每个人都有自己的标准，我作为一个网页设计师来概述一下网页相关知识，避免设计同行走错方向。

网页设计师主要针对于PC端进行设计，也不排除触屏设备。随着互联网技术的发展，网页也要适配Pad、phone等设备，所以对网页设计师的要求也越来越高。基于自己的经验，我从网页尺寸、页面构成、设计规范三个方面进行基础知识阐述，如有错误，欢迎指正。

一、网页尺寸

说到网页尺寸，就必须先了解三个计量单位：英寸（Inch）、像素（Pixel）、分辨率（Resolution）

1、英寸（Inch）

英寸是我们常用的长度单位。英国是工业革命发源地，英寸在工业领域被广泛使用，很多图纸，铭牌上使用英寸作为长度单位。显示设备特别是电视机使用英寸来表示大小。手机屏幕也继承了这个计量单位。在显示设备中，例如描述iPhone4S的屏幕是3.5寸，表示屏幕斜对角线的长度。电脑市面上17寸、19寸、21寸、22寸最为常见。

2、像素（Pixel）

最常见的是当我们放大一张图像时，发现图像是由一个个小点组成的，这些小点就是像素点。像素是图像的基本采样单位。像素不是一个确定的物理量，因为像素点的物理大小是不确定的。像素也不是一个具体的点或者小方块（尽管可以用点和小方块来呈现），而是一个抽象概念。

3、分辨率（Resolution）

分辨率是屏幕像素的数量。一般用屏宽像素数乘以屏高像素数表示。描述iPhone6屏幕分辨率是750×1334就是由750列、1334行的像素点组成的。每个点发出不同颜色的光，构成我们所看到的画面。在PC时代，分辨率越高，意味着屏幕越大，因为PC具有固定的PPI。在智能手机的屏幕就不是如此了，因为手机的像素密度是不一样的。

了解了三个单位后，还需要了解两个概念。

我们在看手机屏幕的时候，发现有的低端手机屏幕有很强的颗粒感，能看到明显的一颗颗像素点。而有的高端手机屏幕显示非常顺滑，凑近屏幕看，也几乎看不到屏幕的像素点。造成这种显示差别的原因由网点密度与像素密度决定。

1、网点密度DPI

在纸质媒介时代，我们常用网点密度(Dot Per Inch)来描述印刷品的打印精度。DPI常用于“设备参数”描述（比如扫描仪、打印机），例如，我设置了打印分辨率为96DPI，那么机器在打印过程中，每英寸（inch）的长度，打印了96个点（dot），打印机在每英寸内打印的墨点越多，图片看起来越精细。

2、像素密度PPI

像素密度(Pixel Per Inch)常用于“屏幕显示”的描述，用来表示每英寸像素点数量。在Photoshop中设定某图的分辨率为72PPI，那么，当图片对应到现实尺度中，屏幕将以每英寸72个像素（pixel）的方式来显示。PPI数值高的显示屏幕，画面看起来也更加细腻。

当DPI的概念用在手机屏幕上时，表示手机屏幕上每英寸可以显示的像素点的数量。这时用PPI来描述这个屏幕。屏幕生产工艺越高，每平方英寸就能容纳更多的像素。例如iPhone 3GS的屏幕像素是320×480，iPhone 4s的屏幕像素是640×960。两款手机屏幕的物理尺寸都是3.5英寸，但像素密度（PPI）不一样。iPhone 4s的Retina屏幕把2×2个像素当1个像素使用。在同样的物理面积内填充了更多的像素，所以显示效果更加精细。

【逻辑分辨率与像素倍率】

物理分辨率是硬件所支持的分辨率，逻辑分辨率是软件可以达到的分辨率。逻辑分辨率乘以一个倍率得到物理分辨率，这个倍率叫做像素倍率。例如，苹果Retina屏定义了2倍率（iPhone 6plus为3倍）以iPhone4S为例，逻辑分辨率为320×480倍率为@2x，得到物理分辨率640×960。在iOS系统的资源图片中，同一张图通常有两个尺寸,文件名有的带@2x、@3x字样，有的不带。其中不带的用在普通屏上，带@2x、@3x的分别用在2倍率和3倍率的Retina屏幕上。

了解了以上知识，相信大家更好地理解网页设计通用计量单位：分辨率。电脑屏幕的尺寸是14寸还是15寸是不会变的，电脑是多大就是多大，变化的是电脑设置的分辨率，如果相同尺寸的屏幕，分辨率越大画面就越精细。

【视网膜屏幕】

手机屏幕距离你的眼睛10-12英寸l(约25-30厘米)时,它的分辨率只要达到300PPI（每英寸300个像素点）以上，你的眼睛已经无法分辨出像素点了，这样的屏幕被称为“视网膜屏幕”。由于其具备超高的像素密度,因此屏幕显示异常清晰、锐利。一般电脑显示屏幕的分辨率为72PPI。

根据百度最新统计数据可以看出，越来越多的页面尺寸再向移动端靠拢，这个也是移动时代的大趋势。但但就纯PC端网页来看，960像素时代已经结束，更多的站点已经采用了更大的分辨率，从数据统计结果我们可以得知，网页版心宽度控制在1000~1200px范围内是正常的。

根据百度最新统计数据可以看出，全国各浏览器所占市场份额比重，chorme浏览器所占份额最高，IE浏览器内核版本终，IE8 以上使用率较高，IE6、7所占比重越来越小，所以在做产品页面兼容性的时候，除了兼容性较好的chrome、firefox外，最低要考虑兼容IE8浏览器内核。

接下来就要进入重要干货环节了，请看仔细哦~

有效可视区域

什么叫浏览器的有效可视区域呢，在我理解就是显示内容的地方，比如打开一个网页后，刨除浏览器的工具栏和侧边栏等，真正显示内容的地方，如图：

从大数据统计可以看出，当下比较流行的屏幕分辨率有1024×768,1366×768,1280×800,1280×1024，1440×900，1600×900，1920×1080等。设计网页前考虑好设备支持的分辨率是十分重要的。接下来用图片说明网页设计版心的概念。

正常页面高度不确定，根据内容多少向下滚动，但有一种特殊情况：一屏网页，所有内容均在一屏范围内展示，这就要考虑很多电脑的竖向分辨率了，登录页常用一屏展示方法。一屏网页中，中国人民大学（http://www.ruc.edu.cn/）运用的就很好,而北京理工大学（http://www.bit.edu.cn/）应该也是想使用一屏展示，但没有考虑到各屏幕分辨率因素，所以没有做出一屏的效果。

因为越来越多的移动设备加入到互联网中来，从而出现了为移动设备提供更好的体验的技术，用技术来使网页适应从小到大（现在到超大）的不同分辨率的屏幕，其原理相似，都是通过检测设备从而根据不同的设备采用不同css样式，css样式采用百分比而不是固定宽度。因而就出现了最近几年流行的响应式网页及自适应网页。

综合来说根据网站功能复杂度，预算和资源等，选择要使用的技术，从客户端的展现，到 JS，到服务器的优化等等。从产品经理及设计角度来说，只需要做到能够适应自己屏幕宽度的尺寸就可以。

二、网页构成

网站/网页基本上都由前端和后台组成，由于我们所设计的页面最终都将用编码的形式呈现给用户，所以按照HTML代码分类，网站页面概括来说由三部分分组成：header、bodyer、footer。

一个网页页面中重要的几个组成元素通常包含以下四个：

标志：

网站的标志一指LOGO，其次就是标题，其作用是使用户看见就能联想到产品，是VI的重要组成部分。通常标志应安排在醒目的位置，使用较大的字体，在版面中作点或线的编排。为了保证标题的显示效果，大部分设计者都将其设置为图形格式。

导航：

导航是构成网页的重要元素之一，是网站频道入口的集合区域，相当于网站的菜单，方便浏览者轻松找到网站中的各个页面，可以让浏览者在短时间内了解网页中的内容。根据功能不同，通常由两种常见形式：网站导航及栏目导航。

导航的重要性越来越被关注，甚至有些站长针对于某一个行业做了专门的导航网站，例如360导航、114啦等。

图像：

有一个经典说法：一图胜千言。人脑对视觉影像的处理速度比文字快60000倍。

一个网站中，图片往往比文字更能吸引用户，浏览网页时，用户看到文字后经历这样的过程：阅读浏览、将文字内容化、情景化。经过这几个处理阶段，用户才能搞清楚这段文字想要描述或表达什么。而可视化的信息（照片、图片）可以让人在3秒内迅速理解，不需要"翻译"阶段。视觉影像在短时间内的重大影响力，决定了图像是视觉传达的一个重要手段。

文字：

网页中的文字也是需要编排设计的，总体原则一要提高文字的辨识性，二要优化页面的易读性美观性。文字属性很多，包括字体、字号、颜色、行间距等等，除此之外边距、段落排版等文字相关属性也需要注意使用。根据文字在页面中用途不同，要分别使用不同属性值。例如：一级标题、二级标题、三级标题……

三、网页规范

各行各业都有规范，无规矩不成方圆，在产品设计行业中针对产品产品设计来说大致可以分为视觉规范及交互规范。规范不是行业标准，而是按私有标准来的，规范规定下线，不限制上线。

网页规范的目的

主要用于规范开发产品中对于web页面的设计工作，明确在设计中所要遵循的准则和方法，web页面中各个元素的规格要求，确保所实现的web页面在风格、结构和功能上的统一，提升商业软件的外在品质。

网页规范必要性

当在一个teamwork的时候，规范能让大家达成共识，从而提高工作效率，降低开发成本；其次在版本迭代中有统一的规范能让产品保持较高的统一性；除此之外在更换产品团队人员后，还能很好的交接产品相关工作。

视觉规范通常包含几个部分：

设计规范时要注意的几个原则：

1、系统状态可见

通过恰当且适时的反馈，使用户随时能够了解系统当前的状态。例如：面包屑导航

2、设计不脱离现实

务必使用用户熟悉的语言，避免使用系统术语；例如：提示清理cookie

3、一致性

设计语言、状态显示以及操作方式务必保持一致，防止用户疑惑。例如：查询、搜索、检索

4、预防错误

通过设计预防用户操作失误，比优秀的出错文案要好得多。例如：使用红色警示删除/清空操作

5、识别而非记忆

通过可见的设计，减少用户记忆负担。帮助信息应该易获取，让用户能看见而不是记住。例如：数据可视化

6、灵活高效

设计一些高级操作方式，以便专家用户快速实现目标，且不干扰初级用户使用。例如：允许自定义常用功能

7、美观简洁

界面上不显示无关和无用的信息，相关的信息在视觉上显示在一起。例如：相关推荐质量

8、错误提示

解决出错提示务必使用平实的语言，精确描述错误，并提供解决办法。例如：404页面

9、帮助文档

提供帮助文档是有必要的，帮助信息需易搜索，且以用户的目标为中心，列出解决问题步骤，且避免冗长。

案例分析

【用语规范】

谨慎使用「确定」、「下一步」等万金油文案，例如：互联网产品里随处可见的「确定」按钮是产品经理最偷懒的表现之一，这些按钮的名字完全可以根据不同的场景进行扩展的。我写完一篇文章，那个提交的按钮如果是「发布」或者「预览」会不会更清楚些？我修改了我的个人资料，那个确定按钮如果是「更新资料」会不会更清晰一点？

【先说结论，再作解释】

在短信通知上，尽量把突出的信息放在前面。比如一个短信验证码的内容，要保证验证码在系统消息栏直接展示出来，用户的操作场景是点击了「获取验证码」按钮之后，在那个界面等待输入呢，抬眼看到系统消息栏有内容了，记下来验证码，直接就在输入框输入了，这样的效率才是最高的。

【按钮】

按钮由文字和/或图标组成。按钮文字必须预示点击后的内容，且符合使用者的预期。

按钮的文案应该把该操作说清楚，且不啰嗦。包含语意的按钮，例如「确认提交」比「确定」要好

三个页面规范案例

EduSoho设计规范：http://www.zcool.com.cn/work/ZMTUxNjAwMjA=.html

站酷web端设计规范：http://www.zcool.com.cn/work/ZMTg1MTc4MjA=.html

知乎web端设计规范：http://www.zcool.com.cn/work/ZMTgzMzIxNTY=.html

基础对于每个人来说都不一样，个人理解的网页基础就这些，如内容有误，欢迎随时指正，网页设计相关内容，后期陆续更新，敬请期待…