网页设计师与前端对接(网页设计师与前端对接方法)

　　如果平面设计是“叶问”，那么网页设计、UI设计就是“李小龙”。

　　那么今天我们就谈谈优秀“UE网页设计师”（以下简称“网页设计师”）的养成心得吧。

　　UE的意思是用户体验，英文叫User Experience，缩写为UE，或者UX。而网页设计是UED（用户体验设计）里面的一个类别。

　　但是要说明一下的是，不同公司对于网页设计师的定位与职能略有不同，有些大公司会在UED部门设有网页设计师，但是有些网页设计师会安排在游戏开发部，而一些中小型的电商公司，网页设计师一般是指设计电商页面（PC端、手机端、平板端都要做）的设计师，他们一般还需要兼顾一些移动端的设计，例如微信公众号更新、企业H5宣传设计等，甚至一些平面的宣传物料有时候也可能需要处理一下。

　　文章中有部分资料是我从网上收集后加以编辑的，有部分则是个人经验和个人理解，不喜勿喷，谢谢支持！

　　我曾经说过，平面设计是一切设计的基础，因此在我看来，网页设计是平面设计的衍生，是将平面设计的基础技能用于网络上，是即时的、是有交互性的、是会产生联系的。

　　打个比方，如果平面设计是“叶问”，那么网页设计、UI设计就是“李小龙”。 叶问是武术宗师，是开宗立派的人，而李小龙是武术的变革者，他将武术广泛应用在影视娱乐行业中。平面设计讲求是平面构成平面原理，而网页设计、特别是UI更多的是讲求数据驱动设计，两者有明显的分别。

　　（注：UI，即用户界面，User Interface的简称。泛指用户软件的操作界面，UI设计主要指界面的样式，美观程度。）

　　在我们熟悉的站酷中，网页设计被分类为：企业官网、门户/社交、电商、专题/活动、游戏/娱乐、个人网站/博客、移动端网页、Banner/广告图、其他网页等设计类别。

　　我主要把网页设计分成以下五大类别：

　　1、品牌网站、企业官网、游戏/娱乐、个人网站/博客：这是以“展示”作为主要功能的

　　2、电商网站：包括日常的销售以及活动促销，是品牌与卖货的结合，以实现转化率流量变现为目的

　　3、移动端、H5：这是基于手机平台进行的设计，特别注重交互性与娱乐性

　　4、企业系统后台：这是功能性为主的一类

　　5、社区和其他：这种是早期的网页设计形态，特别注重PC端的交互性

　　在正式开始学习之前，我就目前网页设计的发展情况，简单的分析一下：

　　品牌网站、企业官网（纯展示、宣传用途）已经由热变冷，这种纯展示类的门面工程，逐步被微信公众平台所取代（也有部分有一定流量的品牌会选择做自己的品牌商城，而放弃纯宣传展示的官网）。而在网页设计的细分类别中，电商、游戏、H5类目还有不错的表现。特别是电商与游戏，电商设计随着越来越多的商家对于品牌的重视，还有游戏业的持续发达，电商与游戏类别的设计师待遇也是水涨船高。

　　一、一切从基础开始

　　1、流程

　　首先，你需要了解网页设计在项目中所处的位置、以及项目的流程。严格来说，网页设计没有统一的流程标准，因为官网设计、电商设计、游戏专题设计、移动端设计等各种设计项目都存在一定的差异。因此，我现在要说的是一般通用的流程，大家可以先了解一下，再根据各自负责的项目特点，将这个流程细化。

　　需求方提出项目/设计需求——策划人员根据需求做出方案——做出原型图——设计师、前端开发等人对该原型图进行技术评估——网页设计师设计平面效果图——编辑代码制作网页——交付给前端实现——完成。

　　2、规范

　　【 网页尺寸 】在国内一般情况下，网页宽度为1920像素，高度根据实际需求而定，当然如果为了适应更多的4K、8K显示器用户可以把宽度设置得更加宽。要注意一点的是，无论页面宽度有多宽，网页主视觉的最佳可视范围宽度一般设置为1000-1200像素，虽然设置较为保守，但是这样可以保证大部分用户在较为舒适的情况下浏览网页。

　　【 栅格系统 】

　　简单来说，网页的栅格系统是以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。它是从平面栅格系统中发展而来。对于网页设计（PC端）来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。另外补充一点，在移动端的布局中，栅格系统同样适用，只不过移动端需要按不同的系统区分，市场上主要以iOS与安卓系统为主。

　　【 主流浏览器 】为了使用户有更佳的交互体验，网页设计师需要与前端工程师在多个主流浏览器中测试最终的页面效果。目前国内最常用的浏览器有以下几个：

　　Google Chrome：由Google公司开发的网页浏览器。

　　IE：英文全称InternetExplorer，是微软公司推出的一款网页浏览器。

　　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等，因为偶数值比奇数值字体，在网页上显示得更加清晰，而且奇数值字体的文本段落无法对齐。

　　【 版式 】版式是所有设计中最基础的部分之一，关于排版，我有一个“方块理论”想跟大家分享的。大家想象一下，试着把作品最外面的平面想象成为一个最大的方块，然后主视觉和辅助图形分别由多个大大小小的方块组成，最后组合成为一幅作品。我把这个方法论称为“方块理论”。

　　【 色彩 】以品牌为导向，数据为驱动。

　　【 标注与切图 】标注切图，是指将设计稿切成便于制作成页面的图片，并完成HTML+CSS布局的静态页面，有利于交互，形成良好的视觉感。通俗来讲，把一张设计图利用到切片工具，把自己所需的切成一张张小图，然后用DIV+CSS完成静态页面书写，完成CSS布局。

　　3、细节

　　【 交互常识 】我们经常说细节决定成败，在讲求交互的网页设计中，我们作为设计师应该注意以下几点交互常识：

　　简化操作：能一步完成的交互就不要分两步。

　　用户习惯：大部分用户都有固化思维，我们作为设计师应该尊重数据，尊重用户选择。

　　减少干扰：减少界面元素的不确定因素，方便用户快速找到自己想要的。

　　快速响应：加快用户读取的响应速度，能够避免从远程取数据的，就尽量避免。

　　界面友好：除了根据需求提供视觉解决方案以外，在设计的过程中适当地加入一些小细节使交互界面更加友好是设计师的职责所在。

　　【 图标 】

　　图标与品牌标志一样，在设计时都需要做适当的减法，应该尽量用简约的线条去表达其含义，应该尽量避免出现线条结构过于复杂的设计，而且整体的图标都需要保持风格一致，例如图标的线条粗细、边角弧度、图标高度宽度比例、风格等等。

　　【 图片 】

　　图片统一性：

　　1）图片色调色温需统一，例如一个婴儿产品的首页，整体需要搭配暖色调的图片，这样看上去整体才比较统一舒服。

　　2）图片比例需统一，例如一个卖货的产品详情页，在同一屏的栏目中（页面）所出现的产品或者人物，比例就需要有一个统一的大小比例，这样看上去才比较统一舒服。

　　图片细节处理：

　　1）图片精度不够（这里所说的精度不是说DPI分辨率需要300哦，那是做高精度印刷输出时才需要的，而在电脑及手机上的图片DPI分辨率为72即可，另外输出图片时需适当压缩一下图片的大小）、杂色太多可以使用PS内置的CR滤镜处理。

　　2）图片尺寸建议统一为偶数值，方便前端技术人员开发。

　　3）图片边缘避免与白色背景融合，可以在边缘位置加色。

　　4）为了配合标题字体，图片可以局部调亮或调暗。

　　【 动效 】

　　无论是现在经常看到的企业/品牌H5宣传页面、移动端启动页，还是曾经红极一时的首页动画，都需要用到动效效果。会做点动效会给我们加分不少，尤其是做一些加载动画，这是我们经常会遇到的需求。

　　做动效时，我们需要注意以下几点：

　　1）不论你的动画有多好看、多吸引眼球，如果成本太高或者过于复杂都是无法落地的，所以我们要遵循简单实用的原则来进行设计，千万不要过度设计。

　　2）任何交互动作所导致的状态都需要考虑正常状态与异常状态。拿加载动画来说，我们需要考虑加载成功的反馈与加载失败的反馈，并将之注明在输出规范中。

　　3）动效使用的工具：可以PS做一些动态表情，用AE做一些加载动画，页面之间的交互动效可以使用Flinto、Principle等。

　　【 个性 】

　　每一个设计师都需要在作品中加入个人原创的东西，形成自己的一套设计系统和独特风格，才能使自己在竞争中立于不败之地。

　　二、网页设计师的“高手之路”

　　对网页设计的工作有了具体的了解，并且实战过一段时间之后，我们就应该朝着“高手之路”进军了。你会发现“高手之路”更多的是沟通与思考。

　　1、培养整体大局观

　　1）提升高效沟通的能力

　　高手级别的网页设计师，需要花相当一部分时间用于与项目负责人、策划人员、前端开发人员进行沟通，甚至有可能直接跟客户沟通。这时候，你需要加强沟通的技巧，以实现高效的沟通。

　　2）加强时间管理的能力

　　除了沟通技巧之外，高效地管理时间也是网页设计师需要提升的能力。你需要把网页设计过程中的时间安排提前规划好，并严格按照进度来执行，以免延误Deadline。

　　3）加强项目管理的能力

　　要知道，网页设计师不仅仅是埋头画图PS，你也需要了解整个项目从启动到规划、到执行、到结束的全过程，而且还需要在项目过程中管理好你的团队，把控好设计质量，这样才更有利于网页设计工作的开展，因此你需要加强自己的项目管理能力。

　　2、视觉、技术、执行

　　1）视觉——数据驱动下的设计——F布局

　　特别是电商设计，由于电商网页的设计是以“转化率”为目的的，因此在设计的时候需要根据数据分析的结果进行设计，而不单纯是为了视觉上的“好看”。

　　电商设计是传统平面设计和网页设计的结合体，就好比以前我们看到的超市海报，你可以看到这些折扣促销信息，但是你要买东西还是需要去店铺里。而电商设计的任务就是，直接在网上把这些商品展示在网页上、手机上，你直接点击可以购买了，这个购买的过程就涉及到了人和设备之间的互动交流。

　　2）技术——设计之外的世界也要多了解

　　作为设计师，我们不能只关心纯视觉的知识，在国外特别是在美国的大公司，纯视觉设计师已经很少很少了，他们大多数都是身兼数职的，包括交互、数据分析整理、开发等。所以我们不应该只作为某一行业的专家，而应该以互联网专家为目标去不断学习，这样才能不断成长适应这个快速增长的社会。

　　3）执行——网页设计师的“执行”主要体现在功能实现上

　　必须说明的是，网页上的功能能否实现，不是需求方或者项目负责人说了算，也不是你一个人能定夺，而是需要跟前端开发人员进行沟通，了解能否实现，更需要了解实现该功能的成本和时间。

　　工作过程中经常会存在这种情况：某一技术功能是可以实现的，但是需要的时间或成本很有可能超出预算，这时候就需要多方人员协调沟通，到底是为这个功能增加成本、拖延工期，还是放弃这个功能？有效沟通是执行的基础。

　　3、提升你的软件技能

　　 PS——图片处理

　　Photoshop在平面设计和网页设计中的强大功能不需我多费唇舌了。

　　AI——图形处理

　　AdobeIllustrator，简称“AI”，是一款非常好的矢量图形处理工具，主要用于字体设计、图形设计，产品包装的设计、画册/书籍/杂志的排版、插画设计等。

　　C4D——三维特效、动画

　　C4D的特效、动画实现在网页设计中越来来重要。

　　AE、Principle——动效

　　AdobeAfter Effects简称“AE”，是Adobe公司推出的一款图形视频处理软件，简单来说就是一个动态版的PS，功能十分强大，但是操作比较复杂。

　　Principle是一款比较容易上手的交互设计软件。界面类似 Sketch，思路有点像用 Keynote 做动画，但它更加可视化一点，可惜的是目前它只支持Mac系统。

　　Origami、Axure——原型交互

　　虽然现在不少公司的项目团队会将交互原型的绘制交由项目策划人员来负责，但是网页设计师也需要了解常用的原型设计软件Origami、Axure等的使用方法。

　　三、其他补充

　　1、方向选择，就业情况

　　据调查显示，目前设计行业中，以移动UI设计师薪酬最高，网页设计师跟随其后。不容忽视的是由于电商行业的发展势头迅猛，电商设计师的就业形态也是很乐观。而且加上一直发展迅速的游戏行业，网页设计师前景还是比较乐观的。

　　2、推荐网站

　　作为设计师我们首先要了解设计的最新趋势，然后就是日新月异的技术发展，以下我所推荐的网站一定能帮助大家。建议设计师每天都要逛一逛哦。

　　FWA

　　一个世界著名的互动多媒体网站收录平台，于2000年5月建立，目的是展示世界上最优秀、最前沿的网络媒体艺术设计作品。

　　Behance

　　2006 年创立的著名设计社区，是展示和发现创意作品的领先在线平台，同时也是Adobe 系列的一部分。Behance 的管理团队每天都会从各种领域中的顶级组合探索出新作品。这些领域包括设计、时尚、插图、工业设计、建筑、摄影、美术、广告、排版、动画、声效等。

　　Dribbble

　　一个面向创作家、艺术工作者、设计师等创意类作品的人群，提供作品在线服务，供网友在线查看已经完成的作品或者正在创作的作品的交流网站。

　　Pinterest

　　采用的是瀑布流的形式展现图片内容，无需用户翻页，新的图片不断自动加载在页面底端，让用户不断的发现新的图片。

　　Medium

　　一个轻量级内容发行平台，允许单一用户或多人协作，将自己创作的内容以主题的形式结集为专辑（Collection），分享给用户进行消费和阅读。该网站好文不断，汇聚各行各业的设计大拿，如果关注了对了自己感兴趣的话题，以及优秀的设计师，自己的打怪升级进化之路会变得更加平稳。

　　3、推荐书籍

　　《About Face 4 交互设计精髓》是一本数字产品和系统的交互设计指南，全面系统地讲述了交互设计的过程、原理和方法，涉及的产品和系统有个人计算机上的个人和商务软件、Web 应用、手持设备、信息亭、数字医疗系统、数字工业系统等。运用此书的交互设计过程和方法，有助于了解使用者和产品之间的交互行为，进而更好地设计出更具吸引力和更具市场竞争力的产品。

　　后记

　　网页设计师的发展前景我还是很看好的，就像我上文所述，电商与游戏行业还是大热，所以设计师待遇这块还是不错的，较为优秀的设计师月薪过万也比较普遍。值得一提的是网页设计师属于复合型人才，一个优秀的网页设计师需要了解的认识面比较广，首先是平面基础、交互常识、PC端与移动端的设计规范、数据的分析与整理、前端以及相关的互联网技术知识等等。

　　就像我们上文的比喻，平面是“叶问”，而网页设计、UI设计就像“李小龙”，是一个“变革者”。所以我从文章开始就跟大家说了，建议大家把我所有不同方向的设计师养成记都看一遍，增强自己的知识体系。