当设计师遇上前端开发

作为互联网产品设计师，在和前端开发人员沟通时你是否常常会听到这样的声音：

—— “大姐，给点专业精神好不好，这个表格是自适应的，你这样设计页面不好扩展啊…”

——“用ajax不是不行，不过你要事前给我说嘛，你不说我怎么知道呢，你说了我就知道了嘛…”

面对这些回答，除了欲哭无泪，你有没有想过是什么原因导致出现这样沟通偏差，有没有解决的办法呢？设计师需要了解哪些知识才能和前端开发人员来更好的合作呢？

首先得从这两者之间都有哪些不同说起。我认为最主要原因在于设计师和前端开发在部门中不同的职责划分。通常情况下，产品设计师的产出物多是线框图（wireframe),视觉设计稿（mockup）等，前端负责编写HTML,CSS等代码（demo），有时还会根据需要编写程序代码（如 JSP/ASP/PHP/Rails),光看这些分工，就知道不同的角色对产品的理解和着重点是截然不同的。

按照正常的项目流程，设计团队通常需要先设计出界面mockup或demo（HTML/CSS),接着开发人员才开始正式编写代码。然而多数情况下为了保证项目进度，需要开发人员和设计师在项目前期就介入进来，不同的是，开发人员多是审核通过项目计划书（PRD）和原型评审，她们更关注于技术可实现性；而设计师更倾向理解产品经理的项目需求以及通过什么样方式来解决需求从而达到提升用户体验的目的，她们更关注创意的可行性。

更令人纠结的是前端开发对“界面元素”和“交互动作”的理解和设计师有很大不同。统一的界面元素对网站的前端架构也会很有好处，他们更关注代码的可重用性。 一方面是CSS：前端开发要实现设计师（或者自己引以为自豪）的界面设计，如果新页面的设计和原先页面中相同功能元素的设计有出入，哪怕是一点出入，都有可能带来很多重复的工作，将CSS文件变得越来越臃肿。另一方面是JavaScript：对于很多应用型网站，会有很多需要JavaScript的页面交互元素。这些交互元素的视觉或者行为设计与之前的有出入，也会让前端工程师为了既保证代码的健壮性来方便后端工程师的开发，又为了实现一些设计上的差别而对现有代码修修补补忙得不可开交，最可怕的是最终淹没于bug的海洋…而交互设计师的侧重点并不在程序的编码实现，而注重于用户如何最好地与系统交互操作，在设计中重点需要考虑的是界面元素的易用性：比如他们会考虑到并非每个用户都是计算机的熟练用户，面对隐藏的层和特殊设计的菜单可能会抓瞎，用户不见得能明白双击左键能自动滚屏或者怎样能让自动滚屏停下来，直接看最下面的结果？总之，设计师（完美主义者更甚）会不断完善产品，来满足更好的用户体验。

那么设计师怎样来解决这些问题呢？我觉得最重要的就是“沟通”，这是最根本的解决办法。在原型设计前期就要针对自己想法的询问前端开发在技术上的可行性，在界面设计过程中会有很多精确到像素级的标准，同样要和他们沟通了解代码的实现方式，不然很有可能做无用功。在提交界面设计之后，交互设计师也要主动出击，不定时的去关注demo的实现效果（mockup和demo多多少少存在不一致，在后期需要跟进；另外涉及到复杂的交互方式前端很可能会忘记或者搞混，也需要不断的去核查）。另外建立标准的文档管理和设计规范也很重要，好在我们开始建立设计规范和标准(淘斯基和TPL 模式库）的文档管理方法，包括：

• 制定文件命名标准

• 设定文件统一路径

• 保存原始创作文件（例如PSD、Fla源文件）

• 最终完成文件（经过产品经理认可的文件）

• 视觉模式库和与其对应的代码模式库

当然，前端都很忙的，经常去“骚扰”他们会被鄙视的。跟他们沟通也需要技巧和一些基础认识，我总结了以下几点需要谨记：

1. 网站的页面是动态的。photoshop呈现的是静态的东西，而网站页面是动态的展现内容、布局和交互。设计师过多关注用户体验层面，很难对所有的细节做到面面俱到。而前端（包括开发）需要照顾到所有的功能点涉及到的页面，因此在前期要考虑的尽量周全，别让别人帮我们收拾烂摊子。

2. 关注新技术。网页设计缺少技术支持永远只是艺术。设计师必须经常关注新的技术和交互方式，这样才能在设计的时候提供多种解决方案，才能权衡利弊找到最优化的方案。

3. 界面元素的标准化和统一。前端关注代码的可重用性，设计师关注新创意。因此在设计前期就要考虑哪些元素和交互方式既可以满足用户体验又能够被重复使用，以此来提高效率。

4. 团队合作很重要。设计师很容易沉浸在自己的小世界里不能自拔，这是我们经常犯的通病。“沟通”是团队合作的关键，一切皆在沟通。

5. 相信自己。前端通常出于不同的原因对一些交互方式可行性做出判断，比如代码复杂程度，技术可实现性等等。好的设计师需要有一些超前意识和冒险精神，当他们受 新技术的激发，认为它能够大大提升用户体验的时候，就需要把它当作挑战来实现。在对技术的深入了解后去说服前端一起努力实现。

好了，这些血和泪的经验是我工作一段时间慢慢总结的，如果你有更多的方法，希望能一起分享。