前端开发人员和美工人员如何有效沟通

各个公司对美工的定义和职责可能略有差异，本文提到的美工是兼具UI设计和切图实现静态页面两个职能的。

近两年，随着前端技术的飞速发展，尤其是很多UI展现框架的丰富性多样性，加上MVVM架构的浪潮，如何在这些新技术、新框架下仍然可以将美工提供的图片、布局、html静态页面、css样式利用最大化，减少前端开发的重复工作，同时使开发出来页面UI和交互也更接近美工设计的内容呢?

美工用html+css做好的完美布局，往往存在以下局限：

1、不太考虑浏览器兼容性的，更多还是对页面设计UI图片的HTML实现，只考虑展现效果，具备UI演示和简单的界面交互动作。

2、所有的展现不采用任何UI框架，不考虑前端人员会用什么样的框架，而是基于个人的喜好和经验去实现静态页面。和前端开发人员采用的UI展现框架或核心框架(这两类框架的差别请参考本公众号的文章：《论前端框架》)不一致。

3、切的图片大小及UI实现未考虑加载的性能。页面加载的资源过多，大图片较多等问题，不利于页面的加载效率。

4、不考虑后台的数据交互和加载。

5、对于MVVM框架而言，双向绑定、组件化的思路，对传统的静态页面的方式冲击较大，也不符合传统的HTML+CSS+JS的实现思维。

上述局限归根结底是因为：对于美工而言，用特定的工具实现展现效果才是他们的目的，至于你开发用什么，用户的浏览器各式各样等实际的情况，他们不会关心。

下面我们来看看前端开发人员如何在开发中如何尽量保留美工的工作成果：

1、页面风格。这个比较抽象，其实就是主色调的选择、颜色的搭配等美感方面的东西。开发人员在选择UI展现框架后，就可以根据美工提供的颜色进行定制化开发。

2、布局。页面的整体布局结构。比如上下、左右、border布局、导航条的位置等。页面整体布局是需要采用美工提供的布局实现的。如果开发人员选择的UI展现框架包含了类似布局，则可以参考美工的布局用展现框架重新实现。通常布局和应用框架的展现的结构有关联。因为现在大部分的页面实现不论前端还是后端都是模板化、可嵌套的，这个和布局的关联较大，也是在整个应用框架搭建之初需要考虑好的。页面布局的实现，也应当结合应用框架的结构一起考虑。

3、CSS样式。这个应当说是可以保留最多的内容了，除了在面对浏览器兼容性的问题需要进行适当调整，或通过js判断浏览器后改动样式外，大部分可以保留。如果UI展现框架已经提供了很大一部分样式，则美工的CSS样式仅提供借鉴，没必要直接沿用。

4、交互风格。个人认为，整个应用的交互方式也应当和UI风格一样保持统一。如果美工提交的素材中把交互风格也一并设计了，开发人员有必要保持一致，并且是应用全局一致，不至于给人错乱的感觉。

上述都是比较常规的做法，在MVVM这样全新的架构理念下，前端开发人员要怎么充分利用美工的成果呢?

1、充分发挥组件化思想。笔者了解的为数不多的几款MVVM框架(如：angularjs\knockout\react)，都有组件或模块的概念。充分利用组件化的思想，将美工设计的重复的内容，封装为一个又一个的组件。对于有微调的样式，可以作为组件的参数，实现组件的动态可配置的展现。

2、对VewModel的设计提供一定参考。Viewmodel作为MVVM架构的核心，其双向绑定等特性极大解放了前端开发人员对DOM的操作，如果将UI元素在viewmodel中和数据模型对应，数据模型如果和业务模型又能对应上的话，则更佳!这个和美工什么关系呢?就是你在考虑你的viewmodel要怎么设计时，尽量参考美工的界面实现方式，将其作为你的view模型，然后对应去设计你的viewmodel。

上面说了那么多，其实最重要的道理是：知己知彼，百战不殆!一旦你了解了美工的思维方式，就不会奇怪为什么他们给你这些在你看来和你的前端框架不太匹配的资源了，同时你还能游刃有余得利用这些资源。