UE的意思是用户体验，英文叫User Experience，缩写为UE,或者UX。而网页设计是UED（用户体验设计）里面的一个类别，但是要说明一下的是，不同公司对于网页设计师的定位与职能略有不同，有些大公司会在UED部门设有网页设计师，但是有些网页设计师会安排在游戏开发部，而一些中小型的电商公司，网页设计师一般是指设计电商页面（PC端、手机端、平板端都要做）的设计师，他们一般还需要兼顾一些移动端的设计，例如微信公众号更新、企业H5宣传设计等，甚至一些平面的宣传物料有时候也可能需要处理一下。
这是国内市场发展决定的，所以我建议大家在看这篇文章时，同时查看我写的其他方向的设计师养成记，这样你所获得的知识体系将会更加的完善。另外，文章中有部分资料是我从网上收集后加以编辑的，有部分则是个人经验和个人理解，不喜勿喷，谢谢支持！！
在我看来，网页设计是平面设计的衍生（我曾经说过平面设计是一切设计的基础），是将平面设计的基础技能用于网络上，是即时的、是有交互性的、是会产生联系的。打个比方，如果平面设计是“叶问”，那么网页设计、UI设计就是“李小龙”。叶问是武术宗师，是开宗立派的人，而李小龙是武术的变革者，他将武术广泛应用在影视娱乐行业中。平面设计讲求是平面构成平面原理，而网页设计、特别是UI更多的是讲求数据驱动设计，两者有明显的分别。（注：UI，用户界面，User Interface的简称。泛指用户软件的操作界面，UI设计主要指界面的样式，美观程度。关于“优秀UI设计师养成记”将在后续发布，敬请关注我的订阅号：种梦。）
在我们熟悉的站酷中，网页设计被分类为：企业官网、门户/社交、电商、专题/活动、游戏/娱乐、个人网站/博客、移动端网页、Banner/广告图、其他网页等设计类别。
我主要把网页设计分成以下五大类别：
1、品牌网站、企业官网、游戏/娱乐、个人网站/博客：这是以“展示”作为主要功能的
2、电商网站：包括日常的销售以及活动促销，是品牌与卖货的结合，以实现转化率流量变现为目的
3、移动端、H5：这是基于手机平台进行的设计，特别注重交互性与娱乐性
4、企业系统后台：这是功能性为主的一类
5、社区和其他：这种是早期的网页设计形态，特别注重PC端的交互性
在正式开始学习之前，我就目前网页设计的发展情况，简单的分析一下。品牌网站、企业官网（纯展示、宣传用途）已经由热变冷，这种纯展示类的门面工程，逐步被微信公众平台所取代（也有部分有一定流量的品牌会选择做自己的品牌商城，而放弃纯宣传展示的官网）。而在网页设计的细分类别中，电商、游戏、H5类目还有不错的表现。特别是电商与游戏，电商设计随着越来越多的商家对于品牌的重视，还有游戏业的持续发达，电商与游戏类别的设计师待遇也是水涨船高。
一、 一切从基础开始
1、 流程
首先，你需要了解网页设计在项目中所处的位置、以及项目的流程。严格来说，网页设计没有统一的流程标准，因为官网设计、电商设计、游戏专题设计、移动端设计等各种设计项目都存在一定的差异。因此，我现在要说的是一般通用的流程，大家可以先了解一下，再根据各自负责的项目特点，将这个流程细化。
需求方提出项目/设计需求——策划人员根据需求做出方案——做出原型图——设计师、前端开发等人对该原型图进行技术评估——网页设计师设计平面效果图——编辑代码制作网页——交付给前端实现——完成。
2、规范
【 网页尺寸 】
在国内一般情况下，网页宽度为1920像素，高度根据实际需求而定，当然如果为了适应更多的4K、8K显示器用户可以把宽度设置得更加宽，要注意一点的是，无论页面宽度有多宽，网页主视觉的最佳可视范围宽度一般设置为1000-1200像素，虽然设置较为保守，但是这样可以保证大部分用户在较为舒适的情况下浏览网页。
【栅格系统 】
简单来说，网页的栅格系统是以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。它是从平面栅格系统中发展而来。对于网页设计（PC端）来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。另外补充一点，在移动端的布局中，栅格系统同样适用，只不过移动端需要按不同的系统区分，市场上主要以iOS与安卓系统为主。（关于“优秀UI设计师养成记”，请查看我后续发布的原创文章，更多精彩内容请关注我的订阅号：种梦。）
关于栅格系统的补充资料请点击这里：http://www.baike.com/wiki/网页栅格系统
【主流浏览器 】
为了使用户有更佳的交互体验，网页设计师需要与前端工程师在多个主流浏览器中测试最终的页面效果。目前国内最常用的浏览器有以下几个：
Google Chrome：由Google公司开发的网页浏览器。
IE：英文全称Internet Explorer，是微软公司推出的一款网页浏览器。
Mozilla Firefox：中文俗称“火狐”（正式缩写为Fx或fx，非正式缩写为FF），是一个自由及开放源代码网页浏览器，使用Gecko排版引擎，支持多种操作系统，如Windows、Mac OS X及GNU/Linux等。
Safari：苹果计算机的操作系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。
Opera：挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。
【字体 】
作为设计师，其实我们并不需要使用太多的字体，更不要使用太过于标新立异的字体。在使用字体时，设计师需要有自己的一套系统规范，另外在网页上使用的字体，我建议使用偶数值例如10、12、14、18等，因为偶数值比奇数值字体，在网页上显示得更加清晰，而且奇数值字体的文本段落无法对齐。（更多关于字体的使用技巧，请查看我的原创文章《优秀平面设计师养成记》。）
【 版式 】
版式是所有设计中最基础的部分之一，关于排版，我有一个“方块理论”想跟大家分享的。大家想象一下，试着把作品最外面的平面想象成为一个最大的方块，然后主视觉和辅助图形分别由多个大大小小的方块组成，最后组合成为一幅作品。我把这个方法论称为“方块理论”。“方块理论”是我当时作为公司合伙人创造并应用到实战中的一个方法论， 关于“方块理论”的起源与具体的用法，我会在之后另外一篇原创文章中单独进行讲述。更多精彩内容请关注我的订阅号：种梦。
【色彩 】
以品牌为导向，数据为驱动。关于“色彩”的详细描述，我之前写过一篇相关的文章《纯干货：色彩入门宝典》，大家如果有兴趣可以去看看哦。
【标注与切图 】
标注，更多情况下会使用在UI设计中，后续的相关文章会谈及。
切图，是指将设计稿切成便于制作成页面的图片，并完成HTML+CSS布局的静态页面，有利于交互，形成良好的视觉感。通俗来讲，把一张设计图利用到切片工具，把自己所需的切成一张张小图，然后用DIV+CSS完成静态页面书写，完成CSS布局。（来源：百度百科）
3、细节
【交互常识 】
我们经常说细节决定成败，在讲求交互的网页设计中，我们作为设计师应该注意以下几点交互常识。
简化操作：能一步完成的交互就不要分两步。
用户习惯：大部分用户都有固化思维，我们作为设计师应该尊重数据，尊重用户选择。
减少干扰：减少界面元素的不确定因素，方便用户快速找到自己想要的。
快速响应：加快用户读取的响应速度，能够避免从远程取数据的，就尽量避免。
界面友好：除了根据需求提供视觉解决方案以外，在设计的过程中适当地加入一些小细节使交互界面更加友好是设计师的职责所在。
【图标 】
图标与品牌标志一样，在设计时都需要做适当的减法，应该尽量用简约的线条去表达其含义，应该尽量避免出现线条结构过于复杂的设计，而且整体的图标都需要保持风格一致，例如图标的线条粗细、边角弧度、图标高度宽度比例、风格等等。
【图片 】
1）图片统一性：
· 图片色调色温需统一，例如一个婴儿产品的首页，整体需要搭配暖色调的图片，这样看上去整体才比较统一舒服。
· 图片比例需统一，例如一个卖货的产品详情页，在同一屏的栏目中（页面）所出现的产品或者人物，比例就需要有一个统一的大小比例，这样看上去才比较统一舒服。
2）图片细节处理：
· 图片精度不够（这里所说的精度不是说DPI分辨率需要300哦，那是做高精度印刷输出时才需要的，而在电脑及手机上的图片DPI分辨率为72即可，另外输出图片时需适当压缩一下图片的大小），杂色太多可以使用PS内置的CR滤镜处理。
· 图片尺寸建议统一为偶数值，方便前端技术人员开发。
· 图片边缘避免与白色背景融合，可以在边缘位置加色。
· 为了配合标题字体，图片可以局部调亮或调暗。
【动效 】
无论是现在经常看到的企业/品牌H5宣传页面、移动端启动页，还是曾经红极一时的首页动画，都需要用到动效效果。会做点动效会给我们加分不少，尤其是做一些加载动画，这是我们经常会遇到的需求。
做动效时，我们需要注意以下几点：
1）不论你的动画有多好看、多吸引眼球，如果成本太高或者过于复杂都是无法落地的，所以我们要遵循简单实用的原则来进行设计，千万不要过度设计。
2）任何交互动作所导致的状态都需要考虑正常状态与异常状态。拿加载动画来说，我们需要考虑加载成功的反馈与加载失败的反馈，并将之注明在输出规范中。
3）动效使用的工具：可以PS做一些动态表情，用AE做一些加载动画，页面之间的交互动效可以使用Flinto、Principle等。
【个性 】
有看过我其他原创文章的朋友都应该发现，我在文章中不断强调，每一个设计师都需要在作品中加入个人原创的东西，形成自己的一套设计系统和独特风格，才能使自己在竞争中立于不败之地（在这里我就不再展开讲述了，具体的欢迎大家查看我其他相关的原创文章，更多精彩内容请关注我的订阅号：种梦。）
