起航学习网

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Web教程网是一个专注于技术资讯的综合性门户网站。是Web爱好者学习交流的网站,这里提供大量实用的技术文档及相关资源下载，是网页设计、网络编程人员及其爱好者必备网站。

文章出自：http://qh.itpxw.cn/peixun/web/202185699.html

文章标题：Web前端开发人员和美工人员如何有效沟通

免责声明：本站文章均由入驻起航学习网的会员所发或者网络转载，所述观点仅代表作者本人，不代表起航学习网立场。如有侵权或者其他问题，请联系举报，必删。侵权投诉