明白了这些，你不仅仅能成长为优秀的 UI 工程师

不久之前，我做了一次公司内部的分享，但时间有限，很多东西没能展开。这篇文章算是文字版，当然，不仅如此，还会增加一些新的东西，下面正文。

话题由来

首先，技术是没有界限的，一个网站，一个人可以完成，分成三个人也可以，分成五个人也可以，比如：交互设计、视觉设计、UI开发、前端开发、后台开发。所以，就会出现不同团队的技术分工不同。 有多种分工会怎样呢？各自在自己的领域挖得更深、做得更精，但问题在于，对于另外一个本来也应该了解或者掌握的相邻领域知之甚少，这是精细分工的弊端。

再者，最近两年，网站开发中最火的莫过于前端开发，因为移动互联网的大热，因为各种工具和框架、库的层出不穷，因为node.js对后端领域的入侵，仿佛一下子javascript变得无比的迷人和强大。但同时，不论是行业会议还是博客文章，都很少看到有人在谈论CSS方面的东西，当然，还是有少数人在坚持做的，后面会推荐给大家。

所以，在很多人不知UI开发为何物，以及很多人对CSS和页面开发的认识有失妥当的情况下，就有了这个话题，谈的更多不是代码，而是环境、方向以及方法论。

结构大体如下：

1、 认识UI开发

2、 重新强调web标准

3、 CSS设计模式的思考

4、 工具，让开发更敏捷

5、 怎样成为一名优秀的UI开发

始于开发，但不止于开发。

认识UI开发

UI开发，之前叫网页重构，现在仍有不少人在这么叫，大家看到了知道是什么就好。简单来说，职责就是还原视觉设计稿，使用HTML和CSS把视觉稿做成网页。它的概念，可能跟你印象中的代码重构相冲突，那么来看看为什么叫网页重构。

“首先，腾讯的这个网页重构岗位起名的原因就是大家说的因为《网站重构》一书。最早是叫网站策划与制作。工作内容包含产品交互稿，网页（HTML和CSS）本身，javascript，flash。重构的工作定位也很好理解，设计理念还原。所以在腾讯重构是在设计通道的，而前端是开发通道的。术业有转攻，划分开两个岗位是为了明确这一专多长的“一专”而已。"

——Twinsen Liang（梁璟彪）

“『重构』并不只是写CSS和HTML，而是规划网页的实现方式。历史背景上，从表格布局的思维转换到样式布局的思维，是一个推翻重来的过程。是对旧有工作流程、分工的一种打破，是一种进化。是连接感性设计师和理性程序员的桥梁，是支持站点更美、更友好、更健壮的基石之一。”

——ghostzhang（张癸鑫）

“借用了软件开发中的著名书籍《Refactoring》的中文翻译《重构》来影射当时国内网站需要用类似的方式来改变网站底层的本质。现在来看，对网站进行重构更将是一个持续不断的过程，范围也超脱了单纯的css，还包括javascript、ajax、flash等等所有前端技术和非技术的集合体。”

——王宗义 《网站重构》译者之一

由以上三位行业前辈的话，不难看出UI开发是做什么的。但随着时代和技术的变迁，需要掌握的知识和注意事项也在发生变化。

设备： 以前主要是PC，很多时候只需要写一个固定的布局就好，但现在我们可能需要做出在PC、笔记本、平板电脑、各种安卓/iphone都能正常展示的网页。技术方案总是要与时俱进的，就出现了em、rem、flex、百分比、媒体查询、vh/vw、calc等等。

浏览器： 这是目前为止网页存在的唯一环境，以前，最大的麻烦是低版本IE的各种奇怪bug。现在，移动互联网的兴起，让我们从IE的坑里跳了出来，却发现掉到了另外一个更大的坑。浏览器种类更多，还有各种版本的手机系统，还有微信，很多时候，这些问题需要我们做更多的兼容甚至切换方案。

网络环境： 网站开发人员很在乎的一点就是性能，它直接决定了用户体验，从UI开发角度，就是文件加载和执行，更少的文件请求，更小的文件大小，更高性能的属性和方法。移动设备的网络环境是不稳定和不确定的，可能2G，可能3G，可能4G，可能wifi，可能没信号。所以，让性能更优是重要且必要的。

具体来说，UI开发可以分成两大块：

视觉体验： 布局、文本。布局的范畴是，左右还是上下，宽高，背景，边框等。文本的范畴是，字体种类、大小、颜色、粗细等，font属性里应有尽有，后来又加进来一个font-face的技能包。还有图片，图片大小的控制，格式的选择，以及要不要使用图片，CSS3的强大，除了表现在布局，还表现在视觉，比如，圆角、阴影、渐变、滤镜、遮罩等等。

交互体验： 你可能会说交互不是js的事吗？其实不然，js只是响应行为，行为有什么样的表现，依然属于UI范畴，比如：鼠标悬停、点击态，移动端的触摸态，点击区域，层级，容器大小、位置变化的过渡，颜色变化的过渡，动画等等。

开个小灶：

突破思维界限——广义的盒

上面说过，我们会面临着一些自适应和性能的挑战，那么，就需要有应对方法。常规的盒模型只有margin、padding、border、content。

在实际的应用中，只看到这些是不够的，因为网页设计的创意越来越花哨，元素的排列不总是那么规规矩矩，横平竖直，形状也不规则，视觉效果可以非常丰富，拿到视觉稿之后，就要对它进行解构，有了CSS3的强大武器之后，我们能分得很细，一般的圆角、背景渐变/裁切、阴影、缩放等都能用CSS3来实现，一些装饰性的元素，可以用伪元素实现，如此分析规划一番之后，就能够知道，怎样用最少的图片、最少的容器，做出更合理也更健壮的页面。

当然，要做到以上这些，需要这三点： 够广的知识面、对技术细节更精确的把控、将视觉元素和技术实现之间相联系的能力 。

这里可以推荐一本书给大家，是由CSS魔法翻译的《CSS揭秘》，里面展示了一些CSS的高级使用技巧，能帮助大家拓宽思维，找到更多乐趣和解决方案。

重新强调web标准

web标准，是个老生常谈的话题，给多数人的印象就是一堆堆的英文，足以将任何人送入梦乡。不过也有同行朋友花了很大心血翻译了一部分层叠样式表2级修订版1（CSS 2.1）规范可以给大家作为参考，但也不能太依赖它，就我本人所看，有些地方翻译得也是不准确的，说到底，技术这个东西，还是理论加上实践，百炼方可成钢~

我们说web标准，是在说什么？其实就是对网页开发者的一些建议，在使用技术的过程中，更科学，更合理的建议。遵守了它们之后，更专业，更不容易出错，能将语言的原生属性和功能发挥到极致。

好处大致有如下四点：

1、更好的兼容，让网页在不同浏览器和设备当中正常浏览

2、结构表现分离，更易维护，更灵活

3、改善无障碍性，使网站在触摸或者键盘操作时可用，易用

4、利于SEO，比如关键字的书写，标题的使用等

由于浏览器比较大程度的容错性，加上人为的忽视，并不是所有人都会去遵从标准来选择标签和属性，人们对于JS、CSS、HTML的关注度和在意程度似乎是逐级递减的，即使在UI工程师当中，也普遍“重CSS轻HTML”，这显然是不妥的，故而，不仅需要重新强调web标准，更需要大家坚持去践行web标准。

CSS设计模式的思考

可以先从一个事故讲起，刚入行的时候，经历过一次不大不小的事故，因为刚开始做，很不熟，做一个简单的首页也要两天左右，当时的情况是，刚好完成一个页面，突然右下角看到有报错，说由于系统原因文件已损坏，一下就慌了神，喊主管过来看看怎么回事，他马上帮我把文件另存起来，可是最后发现还是没用，文件还是空的，也就是说，当天我的工作基本白做了，极其沮丧，但是没办法，重做，那时我每次拿到一个视觉稿，都是上来就做，边写代码，边切图，边刷新看效果，但是这次事故打乱了原本的节奏，切图和写HTML都省了，就是对着一个凌乱的页面直接写CSS，我可不想再花两天时间，必须有所规划和调整。

毕竟已经写过一遍，对每个部分都还有大致的印象，于是，就从头部，banner，产品列表，侧边栏，底部，这么一路写下来，因为思路清晰，有所规划，这次复盘只用了一个多小时就完成了，写完之后，对着自己写出的代码，有一种说不出的满足，也是从那一次开始，我的编码思想慢慢发生了改变，这或许是命运的安排~

回归正题， 什么是 模式，就是一套应对问题的方案，从实践得来，从解决问题得来 。所以，很多新手在面对设计模式的时候，会一头雾水，不知所以然，为什么要那么做？ 没有碰到过的问题，自然就不知道为什么要解决它 。

那么，设计模式能解决什么问题？——CSS本身语法简单、限制少、编程能力弱。

代码是死的，人是活的，无序的东西，我们可以开动脑筋让它变得有序。比如：

1、怎样避免样式冲突

2、怎样避免代码混乱难维护

3、内容和表现分离

4、怎样能让代码易拓展、易移植

大致先列这四点，如果这四点处理不好，就别怪坑多，那都是自己给自己挖的~你可能会问我怎么避免，我只能说，有些坑必踩不可，有些坎必然要过。

你应该见过这几种设计模式，并且可能已经在项目中使用：

OOCSS ——结构和皮肤分离，容器和内容分离

SMACSS ——Base（基础）、Layout（布局）、Module（模块）、State（状态）、Theme（主题）

Meta CSS ——预先定义好的、粒度小，样式和结构、内容无关

第一种，是为了把表现和内容分离，比如， 一个新闻列表，一个产品列表，看起来都是列表，但既不能命名为new-list，也不能命名为product-list，因为它们是不能相互适用的。所以，重点就在于，把UI表现和具体内容分开来，相互不影响，哪里需要就可以放到哪里，可以合作完成很多事情，其他特有的部分，可以通过增加扩展类来实现，但也要注意不宜泛滥，如果添加了过多的类，就要重新分析一下规划的是否合理。

第二种，关注点在于整站的规划，这就要求有更长远的眼光， 基础 和 布局 样式可能是在网站的很多地方都用到，单独提取出来， 模块 是为了保持清晰和独立性， 状态 这一点就需要对需求的使用场景有较为完整的了解，一个按钮不只是一个按钮，可能是几种状态，暂时的一个图标，可能是将来的一堆图标。

第三种，是把一些大家都常用或者是你自己通过评估，某个项目里有很多地方会用的规则提取出来，比如：同一种颜色的字体，同一种间距，同一类布局等等，是一些粒度比较细的东西。

设计模式不止上面这三种，只是拿出来给大家举例子。我们常会听到一句话，借鉴思想，怎样借鉴思想？任何一种框架，都是某种思想的一个具体实现，是一个样例，就像以上三者，也各有自己的优势和短板。 当我们知道它们用什么方法解决了什么问题，就可以不拘泥于任何一种，融会贯通，皆可为我所用，正所谓“无招胜有招” 。

工具，让开发更敏捷

日常工作中，很多朋友会受困于一些烦恼，其中一个就是效率低下。在我看来， 编程从来都应该是一件充满乐趣和创意的事情 ，如果每天都在疲于做很多重复的、纯体力的事情，就太浪费了。故而，我们可以在工作的各个环节去进行改进。

对于UI开发，可以从以下几方面去着手：

图片处理 ：切图、压缩、格式转换

代码编辑器 ：快捷键、代码模板、插件

代码处理器 ：格式化、排序、压缩、预处理器等

自动化构建工具 ：grunt、gulp、webpack、fis等

简单来说就是， 快速切图，更快的写出优雅的代码，自动化处理写完代码之后的所有事情。

当然，现在可供使用的工具多种多样，构建工具可以做的，浏览器插件也可以，在线工具也可以，编辑器插件还可以，而且有些工具的学习成本是不低的，每个人都有自己习惯用的工具，所以，你可能又会犯选择困难症了。

其实大可不必，所有工具需要做的都是类似的事情，差异在于处理方式和细节，所以，不必纠结，有兴趣可以多尝试，不想用新的也可以继续用原先自己最拿手的。

如果你还不知道到哪里找工具，可以来这儿看看醉牛前端嗯，我做的，虽简单，但实用~

怎样成为一名优秀的UI工程师？

最近几天，有一篇文章，叫《既然写CSS很容易，那为什么大家还是把CSS写的那么烂呢？》，个人认为里面的干货并不多，但它再次引发了一些前端人的思考，大家都觉得它容易，为什么容易写得烂？

我曾在知乎上回答过一个类似的问题——“写CSS，怎么知道自己的代码很烂？”，答案简单罗列如下：

1、当你的单个CSS文件很大，代码很乱的时候

2、当你不得不为增加新的内容而随便塞了一个新的元素，并随意给它命了个名的时候

3、当你使用了很多不必要的规则的时候，比如position：absolute；display：block；

4、当你忽略了继承，在反复定义font-size、color等可继承属性的时候

5、当你忽略了复用模块的规划，在重复写一个相似度达到80%的两块内容的时候

6、当你习惯于用一些性能很差的属性和很脆弱的结构的时候

暂列这6点，不展开说了，有疑惑，有需要，咱再聊。那么怎么成为一名优秀的UI工程师呢？可以从以下三点来说：

工匠精神

关键词：还原、探索、积累、跟进

还原 ：多体现在细节，比如：阴影、对齐、行距，中英文字符等，很多时候，用户，包括我们开发者本人，都难以看出这些细微差别，但往往逃不过细心设计师的法眼，而且的确会对整体的视觉效果有影响，这就需要我们对自己提出更严格的要求，也更能体现专业度。

探索 ：平时我们都在不停的忙碌，做需求，做项目，好不容易完成了，稍微休息一下，接着做下一个，长此反复，就没时间去探索和尝试新的技术和工具，进而没有空间去改进自己的工作流程和技术方案，就会让自己的职业技能储备处于停滞不前的状态，所以，保持热情，坚持探索很重要。

积累 ：我们在项目中难免会碰到各种问题，同时，也会不经意间碰到某种很好的解决方案，可能是一种思路，可能是一个代码段，这个时候就需要及时的积累起来，否则，每次遇到都像是第一次遇到一样，这都是成本。

跟进 ：新事物跟进，在很多新的技术或者属性、方法出现之后，大家的节奏都是先欣喜后无奈，因为可能尚未发布正式版本或者浏览器尚未支持，然后就直接放弃去尝试和研究。温总理曾说过这样一句话“没有程序的民主，就没有实质的民主”，如果套用到这里来，可以改成“ 没有新的尝试，就不会有新的可行性方案 ”。很多时候，面对一个需求，我们会习惯性的面露难色，然后说“这个做不了”，其实有些不是实现不了，只是需要稍微多花些心思，或者是我们认知的局限，不知道有方法可以轻松实现，除了关乎项目的质量，还关系到技术选型， 当手里的武器多了，可选范围才广，才能舒舒服服的去选择最优解 。

更多可能性

关键词：创造性、可行性

创造性 ：我们已经见过不少人用CSS3的技术做出各种以前不敢想象是CSS能做出来的东西，比如这两个18个你可能不相信是用CSS制作出来的东西、one-div，所以，新方法的出现，能给我们提供更多可能性，当然，你可能会说，这些都是一些奇技淫巧，在真实项目中并不实用，其实他们的存在，除了让我们感受到技术的趣味性，主要是给了我们启发，帮我们打开一扇门，至于能创造出的是什么，就看我们自己了。

可行性 ：除了玩儿技术“自嗨”，实际工作中，技术的施展空间还是要跟项目紧密结合的，产品经理和设计师的想法是天马行空的，很多时候，我们并不只是一个“听话做事”的执行者，要充分发挥我们的专业性和主动性，某个idea到底能不能做，能实现到什么程度，需要多少成本，如果在早期能够沟通好，就能避免到了开发过程中或者验收的时候才有这样那样的问题。

最佳实践

关键词：预见性、最佳实践

预见性 ：设计师给过来的视觉稿是静态的，内容是确定的，实际上线了之后，内容都是不确定的，所以，必须要有更多的考虑，才能尽可能的在前期避免掉一些不应该出现的问题，比如：文字溢出截断、文字折行、内容自适应、内容超出滚动等。

最佳实践 ：有很多介绍最佳实践的文章，基本都是一些技术方面的通用注意事项，我想说的是， 没有脱离项目的最佳实践，只有做了，踩了坑了，才会更加知道怎样做在特定场景下是最好的。 比如：为避免结构变动引起的样式继承冲突，尽量不要使用元素选择器。因为图标在网站的每个地方和其他元素的相对位置是不确定的，所以，只定义表现，不定义布局。通用组件的外框是确定的，内容是不定的，所以，只定义外围，不定义内容。等等，都是在实际项目中才能切身体会。

写在最后

有不少人问页面重构是做什么的，也有人问，腾讯为什么把JS和CSS分开，这样做的利弊是什么？其实在文章的开头已经简单的说了，有利有弊。但是就目前前端圈的发展来看，其实是弊大于利的，但职位是死的，人是活的，如果想要学习，想要自我突破，怎样都挡不住。我们可以借张克军我的前端工程师之路的一段来看一下前端大概的发展路径：

2002〜2005年，网页制作，从业者要求：手快、像素级还原、全面兼容

2005〜2009年，网站开发工程师，从业者要求：网页重构、性能、SEO、jQuery（及同类）

2009〜2013年，前端工程师，从业者要求：MV＊、AMD/CMD、SCSS（及同类）、Grunt（及同类）

2013〜2016年，前端工程师，从业者要求：全栈、ES5/6、CSS3、RWD（响应式开发）、混合开发（所有要求向前兼容，不包含特殊领域的特别要求）

从以上可以看出，不论是从市场需求还是技术领域，对前端工程师的要求都是越来越高，需要掌握更多实战技能，写出适应多终端的页面或者应用，更像是一个全能型选手。当然，大家也不用被吓到，千里之行始于足下，所有牛人都是从零开始一步步的走过来，不需要盲目的比较或者给自己徒增压力，只要你喜欢它，坚持学习和进步，定能有所成。

在如今这个让人眼花缭乱的前端世界里，不论你是新手还是半生不熟，都会对选择有所迷茫，语言的迷茫，框架、工具的迷茫，书本的迷茫，公司的迷茫，怎样不迷茫？唯有行动起来，走近它，熟悉它。职业打拼的过程，就是在不断探索、积累、提升自己对事物的认知的过程。

《生命中不能承受之轻》里有这么一句话，“人类一思考，上帝就发笑”。有人说是嘲笑，有人说是鼓励，我更愿意相信是鼓励， 当我们在做事的同时，能够通过自己过往的经验和思考，使得以后做同样事情的时候更加高效和聪明，这就是我们能够越来越优秀的理由 。

最后推荐几位在CSS方面颇有研究的大牛，大漠、林小志、CSS魔法、张鑫旭，我相信很多人已经熟识，高手肯定不止这四位，但是，这四位是近年来在CSS领域最为高产、最有建树，给大家带来最多帮助的行业前辈，可以重点关注下。另外，我个人有个微信公众号：“前端周末”，每个周末，风雨无阻推送前端好文。

终于把许诺大家的文章版给完成了，很长，要吐血了~希望能够对你们有所帮助。

心血之作，未经允许，谢绝转载，谢谢。

文／灵感_idea

关键字：UI设计, 设计师

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！