纯干货：优秀UE网页设计师养成记（含电商、游戏、移动端、H5）

我先前撰写了一篇探讨平面设计师能力增强的文章《卓越平面设计师的修炼之道》，引起了广泛关注，收到了众多朋友的私信，他们纷纷询问其他设计领域从业者的自主学习经验，因此今天我们便来分享关于杰出“用户界面网页设计师”（简称“网页设计师”）的成长感悟。

用户体验的含义是什么，英文表述为User Experience，有时也称作UX，其缩写形式为UE。网页设计属于用户体验设计的一个分支，不过需要指出的是，各家企业在网页设计师的岗位设定与工作范围上存在差异，部分大型企业会将网页设计师归于用户体验设计团队，但也有一些网页设计师会被分配到游戏开发部门，而中小型电商公司里的网页设计师通常专门负责电商页面的设计，包括电脑版、手机版和平板版的页面，这类设计师往往还要兼顾移动端的其他设计任务，比如微信公众号内容的更新、企业宣传H5的制作，有时甚至需要处理一些平面宣传品的设计工作。

这个情况是由国内市场演变造成的，因此我建议大家阅读这篇文章的同时，也要参考我撰写的其他领域的设计师成长指南，这样您所掌握的知识框架会更加全面，此外，文中有些内容是我从网络上搜集并整理的，另一些则是基于个人实践和认知，如果觉得不妥请多包涵，感谢您的关注！！

我认为网页设计源自平面设计，而平面设计是所有设计的基础，网页设计是将平面设计的基本技巧应用于网络环境，这种设计是动态的，具有互动特性，能够建立联系。打个比方，如果说平面设计如同“叶问”，那么网页设计和UI设计则更像是“李小龙”。叶问堪称武术泰斗，是开创一派的先驱，而李小龙则是武术领域的革新者，他成功将武术元素融入电影艺术界。平面设计注重图形组合与视觉法则，网页设计尤其是用户界面设计，则更强调依据数据来进行创作，这两类设计领域存在显著差异。用户软件的视觉呈现，UI设计主要关乎界面的形态，以及其视觉上的吸引力。详细内容会在之后推出，敬请留意我的订阅平台：种梦。

站酷平台上，网页设计涵盖了多种类型，包括公司网站、公共平台与社交网络、网络商店、特定主题或活动页面、游戏与休闲界面、个人站点或文章发表平台、手机网页、横幅广告和宣传图以及其他各类网页设计。

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

品牌站点、公司门户、游戏或娱乐平台、个人主页或网络日志：这些以呈现为主要用途

网络销售平台涵盖常规交易和专项推广，是品牌方与销售渠道的融合，旨在达成率提升，促进收益转化

移动设备、H5版本：这些是在手机系统上完成的设计，特别强调互动性和趣味性

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

这种属于早期的网页设计类型，非常强调个人电脑的使用体验，侧重于台式机的操作感受

在学习正式开展之前，先对当前网页设计的现状稍作探讨。品牌网站和企业官网这类仅用于展示、宣传的站点，热度已经明显下降，这类纯展示性质的平台工程，正逐渐被微信公众平台所替代，也有部分具有一定访问量的品牌会自行构建品牌商城，从而不再使用纯粹用于宣传展示的官网。在网页设计的众多分支里，电子商务、网络游戏和H5项目都取得了显著成就。其中电子商务和网络游戏尤为突出，由于众多商家日益关注品牌形象建设，加之游戏产业的不断繁荣，这两个领域的设计师收入水平也持续提升。

一、 一切从基础开始

1、 流程

先要明白网页设计在整体工作中的环节和项目的步骤。其实，网页设计并没有固定的操作规范，由于官网制作、网络商店制作、游戏页面制作、手机应用制作等不同类型的项目都有各自的特点。所以，接下来要介绍的是普遍适用的步骤，大家先有个基本认识，然后结合具体项目的特点，把这个步骤具体化。

客户方提交项目/设计要求，策划团队据此制定计划，接着绘制初步模型，设计人员及前端工程师等对模型实施技术分析，平面设计者创作视觉设计稿，程序员编写程序代码，最后将成果交给前端开发人员执行，至此项目宣告结束。

2、规范

【 网页尺寸 】

在国内通常情况下，网页的横屏尺寸是1920个单位，纵屏的尺寸则依据具体用途来决定，当然，假如想要服务更多使用4K、8K显示器的用户，可以把网页的横屏尺寸设定得更宽一些，需要留意的是，不论网页的横屏尺寸有多宽，其核心视觉元素的最佳显示区间一般维持在1000到1200个单位，虽然这样的设定显得有些保守，不过能够确保大多数用户在较为安适的状态下查看网页。

【 栅格系统 】

网页的布局和信息排布遵循着规范的网格结构，这种系统源自于平面设计中的网格方法。在电脑网页的设计中，采用这种网格体系，能够使页面内容看起来更加整齐有序，也方便用户阅读。同时，对于前端工程师而言，使用这种体系能够让网页的构建更加灵活，同时也更加标准。此外再说明一下，在手机端的设计排布里，格子式布局依然有效，只是手机端要按不同的平台来划分，市面上基本上是苹果和安卓这两个系统占主导地位，有关“杰出界面设计师的修炼之路”kaiyun全站网页版登录，请留意我后面会发的自己写的文章，更多有意思的内容敬请关注我的公众号：种梦。

栅格系统相关信息请查阅此链接：http://www.baike.com/wiki/网页栅格系统，这里提供了补充资料。

【 主流浏览器 】

为了让用户获得更顺畅的互动感受，网页制作者必须和客户端开发者，在多种核心浏览器上，检验最终页面的呈现状况。现阶段在中国，应用最为广泛的浏览器主要包括如下几种：

谷歌Chrome，是一款网络浏览工具，它是由谷歌企业研制的，主要用来浏览网页内容。

微软公司开发的一款网络浏览工具，其全称是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设计中，后续的相关文章会谈及。

切割设计图kaiyun官方网站登录入口，是为了方便制作网页而分解成图片，并运用HTML和CSS构建静态页面，有助于互动，塑造出色的视觉效果。简单来说，借助切片功能，将设计图中的元素分解成单独的图片，再通过DIV加CSS的方式编写静态页面，实现样式安排。

3、细节

【 交互常识 】

我们常说细微之处关乎结果，在注重用户往来的网页制作中，设计者须留意以下操作要领。

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

用户习惯：多数人思维模式固定，我们身为设计者，需重视数据，重视个人偏好。

降低干扰程度：消除视觉元素中的模糊性，帮助使用者迅速定位目标内容。

迅速回应：提升用户获取信息的效率，若非必要，无需从远端获取数据。

操作便捷：不仅需要依据要求给出视觉呈现方式，而且要在构思阶段融入诸多精巧之处，以便让操作界面更为顺畅，这是创作者分内的工作。

【 图标 】

标志和品牌标识的制作，都要通过必要的删减来提升效果，尽量借助简单的轮廓来传递信息，要防止图形构造过于繁杂的情况，并且所有标志都必须维持统一的格调，比如线条的粗细程度、边角的圆滑度、图形的高度宽度比例以及整体的艺术风格等。

【 图片 】

1）图片统一性：

图片色彩氛围要一致，比如婴儿产品的主页，全部要使用偏暖的图片，这样才能显得整体协调，让人感觉更舒适。

图片尺寸要一致，比如一个售卖商品的页面，在同一个显示区域里，无论是商品图片还是人物肖像，它们的尺寸都应该保持相同，这样看起来才会比较协调美观。

2）图片细节处理：

图像清晰度不高，并非指DPI分辨率需达300，那仅在制作高精度印刷品时才相关，电脑和手机上图片DPI设置为72即可，另外输出图片时应当适度减小文件体积，图像噪声较重可以通过PS自带的CR滤镜进行修正。

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

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

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

【 动效 】

如今常见的公司或产品H5展示页面、手机应用的开屏界面，以及早先广受欢迎的主页动态效果，全都离不开动态设计。掌握动态设计能显著提升个人优势，特别是制作加载过程中的动态画面，这是我们时常需要应对的工作。

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

动画作品无论画面多么精美、多么引人注目，倘若造价高昂或过于繁复，就难以付诸实践，因此我们务必秉持精简适用的理念展开构思，切莫进行冗余的雕琢。

任何交互行为引发的状态变化，都要区分常规情形和特殊情形。以进度显示为例，必须明确加载成功时的提示信息，以及加载失败时的提示信息，这些都要写入规范文档中。

制作动态表情可以利用PS，制作加载动画可以利用AE，页面间的交互效果可以借助Flinto、Principle等软件完成

【 个性 】

许多读者应该已经注意到，我在之前的创作中反复提及，设计师必须在作品中融入个人独创元素，构建专属的设计方法论和鲜明特色，这样才能在行业竞争中保持优势地位这种观点我就不再详细阐述了，具体内容欢迎大家查阅我的其他相关文章，更多有价值的信息请关注我的公众号：种梦

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

对网页设计的工作有了明确认识，并且经过实践锻炼，我们就可以开始追求“精通之路”了。你会意识到“精通之路”更侧重于交流和理解。

1、 培养整体大局观

1）提升高效沟通的能力

精通网页设计的人，要投入大量时间与项目负责人、策划人员、前端开发人员交流，有时还需直接同客户沟通。这种情况下，必须提升交流能力，才能确保沟通顺畅。我在文章《纯干货：设计师如何与“甲方”有效沟通》里，详细分享了交流的体会，感兴趣的朋友可以点击查看。

2）加强时间管理的能力

网页设计师在提升沟通能力的同时，也需要加强时间掌控的技巧，这是工作成功的关键要素。设计任务的时间节点必须预先设定，并且要依照既定计划稳步推进，防止错过最终期限。关于如何有效规划时间，我在专门撰写的文章《实用指南：设计从业者怎样合理安排时间》中提供了具体方法，对这方面感兴趣的人可以查阅该文。

3）加强项目管理的能力

明白，网页设计者并不仅仅是埋头进行图像处理，你还要掌握整个项目从开始到计划、再到实施、直至收尾的每一个环节，并且必须在项目期间有效领导你的团队，严格把控设计水准，这样才能更好地推动网页设计工作的进行，所以你需要着力提升自己的项目管理技能，欢迎关注我的订阅号：种梦。

2、 视觉、技术、执行

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

电商设计尤其注重转化率，这个目标决定了设计必须基于数据分析，而非单纯追求视觉美观，这一点与传统平面设计和网页设计有所不同。它融合了两者特点，类似过去超市里的海报，虽然能展示促销信息，但购物仍需亲临店铺完成。电商设计的职责在于，将商品陈列于网络平台，包括网页和移动设备，用户能够通过点击直接完成购买，此环节包含了人与设备之间的互动沟通。

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

设计师不应仅关注纯粹视觉领域，国外尤其是美国的大企业中，专攻视觉设计的人才已极为罕见kaiyun全站登录网页入口，他们多数同时承担多项职责，如交互设计、数据整理分析及开发工作，因此我们不应局限于某一领域的专长，而应将互联网专家作为发展方向，持续学习，方能不断进步，以适应快速发展的社会环境。

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

必须强调，网页上的功能能否完成，并非由需求方或项目负责人单方面决定，也非个人能够随意裁决，而是必须与前端开发人员协商，探明其可行性，同时更需掌握实现该功能所需付出的代价和耗费的时间。工作中时常会出现这样的情况：某个技术功能具备可行性，不过所需的时间或开销很可能超出预定的经费，这种状况下就必须召集相关人员展开磋商，商讨是应该为这个功能追加费用、延长项目周期，还是选择舍弃这个功能。顺畅交流是落实工作的前提，对于交流的体会，我在个人撰写的文章《纯干货：设计师怎样和“甲方”顺畅交流》里做了详尽说明，有意愿的读者不妨去查阅。

3、 提升你的软件技能

PS——图片处理

Photoshop在平面设计、网页设计等领域的作用非常显著，无需过多解释，想要自学提升PS技术，可以参考我的原创文章《纯干货：PS高手完全自学宝典》。

AI——图形处理

Adobe Illustrator，也就是AI，是一种很出色的矢量图形编辑软件，常用来设计文字、图案，制作产品包装，安排画册和杂志的版面，以及绘制插画等。想要自学提高AI技术，请留意后续我的文章《毫无保留：AI达人自学指南》，想看更多内容，可以关注我的公众号：种梦。

C4D——三维特效、动画

C4D制作出的视觉效果和动态元素在网页制作中愈发关键，想要自主学会增强C4D操作能力，可以参考我撰写的文章《从零开始掌握C4D的实用指南》。

AE、Principle——动效

Adobe After Effects被称为“AE”，由Adobe公司开发，属于图形视频处理软件，本质上就是动态化的Photoshop，它拥有非常强大的功能，不过使用起来比较难。

Principle 是一种操作简便的交互式设计工具。它的界面与 Sketch 类似，运用方式借鉴了 Keynote 制作动画的方法，并且更加直观。不过，遗憾的是，这款软件目前仅在 Mac 操作系统上运行。

Origami、Axure——原型交互

当前许多企业的项目小组常让方案规划者承担界面模型的设计工作，不过网页制作者仍需掌握诸如Origami、Axure这类常见的模型设计工具的应用技巧。

三、其他补充

1、 方向选择，就业情况

调查表明，当前设计领域里，移动界面设计人员的报酬最为丰厚，网页设计者的待遇紧随其后。值得注意的是，电子商务行业的迅猛增长，使得电商设计者的职业前景十分光明。再加上持续扩张的游戏产业，网页设计者的未来发展也相当可观。

2、 推荐网站

设计师应当首先掌握设计的最新动向，其次要关注飞速发展的技术进步，下面我推荐的这些网站可以为大家提供帮助。建议设计师们每天都去浏览一下。

FWA

https://thefwa.com

一个享誉全球的互动多媒体平台，于2000年5月成立，旨在呈现全球顶尖的网络媒体艺术设计佳作。

Behance

https://www.behance.net

创建于2006年的知名设计平台，担当着前沿的创意作品展示窗口，同时也是Adobe产品线中的成员之一。Behance的管理层每日都会从多元范畴中的顶尖组合发掘新作。这些范畴涵盖设计、时尚、插画、工业设计、建筑、摄影、美术、广告、排版、动画、音效等。

Dribbble

https://dribbble.com

一个专为创作者、艺术家、设计师等群体设立的网站，致力于提供作品展示平台，让网友能够在线欣赏已完成的创作，或是了解正在进行中的项目，以此促进交流互动。

Pinterest

https://www.pinterest.com

图片以瀑布式布局呈现内容，用户无需翻动页面，新的图片会持续自动出现在界面下方，促使人们不断发现新的图片。

Medium

https://medium.com

一个简便的内容传播渠道，支持个人或团队共同完成作品的整理，将创作物围绕特定方向汇编成系列，供他人浏览和欣赏。这个平台佳作频出，集合了不同领域的设计精英，若是对相关领域和出色设计师保持关注，个人能力的提升过程将更为顺畅。

3、推荐书籍

《About Face 4 交互设计精髓》是关于数字产品系统交互设计的参考手册，详细阐述了交互设计的流程、基本准则以及具体技巧，涵盖的领域包括个人电脑上的个人和商业软件、网络应用、便携式设备、信息查询终端、数字化医疗装置以及数字化工业装置等。借助这本书的交互设计流程和技巧，可以洞察用户与产品互动的方式，从而开发出更吸引人且更具市场竞争力的产品。

后记

我对网页设计者的未来充满信心，正如我之前提到的，电子商务与游戏产业持续火热，因此设计师的收入水平相当可观，出类拔萃的设计师每月赚取万元以上已是常态。网页设计从业者需要多种能力，并非单一专长，卓越的网页设计师见识广博，必须掌握平面设计基础，熟悉交互设计原理，了解PC端和移动端的设计准则，擅长数据分析和整理，精通前端技术及相关互联网知识，等等。以我们之前的比喻来说，平面设计好比“叶问”，而网页设计和UI设计则类似“李小龙”，是推动变革的力量。

我之前在文章开头就建议大家，要把所有不同类型的设计师成长记录都仔细阅读，以此扩充自己的知识领域。欢迎大家踊跃加入《种梦人参与每周一课》，通过每一次的学习训练，慢慢提高自己的设计能力。我们都是种梦人，我们都是设计者，一起努力！