网页设计师入行所需必备知识指引

网页设计入门前的必备知识，由多年设计经验凝练而成。着重阐述平面与网页设计的差异及共性，从字体、像素、版式、色彩、学习途径等方面深入剖析相关知识点。

大家对网页设计的了解究竟有多少？是否清楚网页和平面的差别？那么，学习网页设计应从何处着手？需要掌握哪些软件？怎样才能迅速成为一名网页设计师？部分网页设计新手存在诸多疑惑，在此，我们来聊聊网页设计与平面设计的不同之处，以及想要迈入网页设计领域需要掌握的软件和技巧。

屏幕显示的视觉传达动态 传统纸类的视觉传达设计

设计技术的呈现形式 设计工艺的呈现形式

这两种同为视觉传达的设计，其差异在于

网页和平面印刷所采用的色彩模式截然不同。平面设计的后期实现依赖印刷，故而采用 CMYK 色彩模式；而网页设计依据屏幕显像方式运用 RGB 格式。一些平面设计师习惯了 CMYK 模式，但用其制作 banner 或网页时，色差会很大。不管是 CMYK 模式还是 RGB 模式，都是为设计服务，只要依照设计需求遵循色彩模式标准即可，这也属于网页设计入门的基础常识。

在平面设计中，会涉及诸多印刷品设计，例如展架、喷绘布、宣传手册、LOGO 设计、DM 单、折页、臂贴、地贴、角旗、车贴、海报等等。通常会根据设计需求设定像素，不同尺寸的平面设计配置不同的分辨率。

例一：

设计一块 10 米长、5 米宽的喷绘布，需依据自身电脑硬件来考虑设置分辨率，一般会选择 30 像素、45 像素、50 像素，若电脑硬件条件优越，尝试 72 像素也未尝不可（但如此大的喷绘布，很少使用这么高的像素）

当然，设计时设置分辨率并非绝对，需视具体情况而定，但需牢记：画面越大，分辨率值相对越低；画面越小，分辨率值相对越高。

伴随互联网的进步，网页设计和 UI 设计愈发热门。首先是 PC/移动端，涵盖了专题设计、栏目设计、门户设计、电商设计、详情页设计、banner 广告设计、H5 设计、APP 设计，其中无论哪种设计，设置 72 像素即可。这是因为最初的图形设计在 mac 电脑上开展，mac 自身显示器分辨率为 72，PS 中也将图像 DPI 设为 72，利于设计。此后，72 像素显示器分辨率逐渐成为默认的行业标准，并沿用至今。

在平面设计中，诸如海报、展架、画册等都有统一的尺寸规范，而网页设计的尺寸则会随着不同时期的流行趋势而变化。在可视区域内，早期的网页从 680 像素、800 像素、960 像素、980 像素、1000 像素、1200 像素，应用于门户网站、专题设计。历经互联网的发展，网页设计尺寸有所不同，电商网站为更好地展示图片产品内容，设计时可视范围设置为 1200、1090、1230 等甚至更大尺寸，追求设计扁平化、全屏设计、大背景图设计成为主流方式，响应式网站在网页设计中也颇受欢迎，通栏整洁设计，为用户提供更优的体验，在各终端演示观看都能呈现出色效果，还有滚动式、滚动视觉差形式等多种方式，同样展现出最终效果，设计形式依据时期趋势追求大图、大视频、大背景的设计手法，让浏览者获得更好的视觉享受。

就版式布局而言，平面设计与网页设计有诸多可通用的表达手法，如左右布局、上下布局、中心布局、对称布局等最为常规的设计版式，排版丰富多样，最终呈现效果依据个人感觉进行设计。但关键的一点是，网页设计一定要模块化，即便排版不规则，也要做到有据可循。

不管是平面设计，还是网页设计，在字体运用方面需注意以下几点：

文字的适配性，要根据标题主题进行选择，注意字体样式。

可辨识度，在进行文字设计应用时，要注重文字的可辨识度，务必让浏览者在不失美观的前提下，更清晰地阅读主题。

文字的美观度，运用字体时，要保证字体具有一定的美观度，整体效果也会随之提升。

文字的个性化通常应用于头图或一些大标题，会有文字图形的变化，虽然有所变化，但一定要在保持可辨识度的基础上进行文字图形的修改，文字不仅是图形装饰，也是一种文字图形的表达方式。

在网页内容正文中，一般文字的选择范围较小，为避免输出成品对服务器造成压力，正文文字通常不建议用图片展示，基本是手动输入，基于 HTML 的特性，字体依据用户操作系统的默认字体而定。

平面设计通常通过纸质进行宣传，这种方式宣传范围有限，具有局限性且成本较高。相比之下，网页的信息传递能力极强，互联网科技的发展使人们能从网络平台获取更多信息，并且大家对网页的视觉享受也有了要求，起初大家重视网页的视觉效果，近年来则更注重用户体验。从较为写实、厚重的页面到如今简约、大气、扁平化，更便于操作，带来更好的视觉享受。在考虑用户体验的基础上，还要注重用户交互功能的实现，网页界面不仅能融入绚丽的 HTML5 动态交互效果，还能插入视频，这是平面设计无法展现的。

从事设计专业的人员，大多具备绘画基础，例如手绘、素描、水粉、速写等，这些能够帮助设计师提升色彩能力、审美能力、造型能力。将所学运用到设计中，同时学习平面构成、色彩构成、立体构成等理论和一些技法，都对设计有益。

在具备这些能力的前提下，就是软件操作技能。在网页设计中，需要精通的软件有：Photoshop 、Illustrator 等，这两款软件必须掌握。由于用户体验需求的变化，设计技术也不断升级，FLASH 在网页设计中的地位已不再重要。

此外，还有更多技术应用于网页设计，如 3D 技术、AE 技术、C4D 技术、插画技法等，能更好地满足当下的视觉需求，让网页视觉更具冲击力和交互性。

熟练掌握软件操作后，进行 UI 图标、网页设计、H5 设计的练习，多观察、多临摹。从临摹过程中汲取经验，如排版、留白、版式、字体、颜色、字号等的运用。

另外，若时间允许，还可学习 Dreamweaver 软件，或者学习 HTML 来丰富知识储备。

学习 Dreamweaver 软件的功能和操作方法，接着学习 HTML，了解一些基础标签，比如 、 标签等。至少要清楚这些标签的作用，然后了解 DIv+CSS 样式表，例如类选择器、ID 选择器、相对定位、绝对定位、边框、内边、外边等，为网页增添版式样式。若有精力，还可学习 javas cript，以实现更出色的网页交互性。学习要有路径，循序渐进，通过系统学习，相信您定能成为优秀的设计师。