设计师遇到前端工程师

做为互联网产品设计师，在和前端开发人员沟通时有没有想过这样的疑问：

——圆角阴影实现起来真的有那么难吗？

——载入更多的东西用户能够获得更多的信息，可是页面慢了该如何取舍呢？ 

面对这些问题，除了要从新考虑本身的设计，有没有想过是什么缘由致使出现这样沟通误差，有没有解决的办法呢？设计师须要了解哪些知识才能和前端开发人员来更好的合做呢？

 

首先得从这二者之间都有哪些不一样提及。我认为最主要缘由在于设计师和前端开发在部门中不一样的职责划分。一般状况下，产品设计师的产出物可能是线框图（wireframe),视觉设计稿（mockup）等，前端负责编写HTML,CSS等代码（demo），有时还会根据须要编写程序代码（如 JSP/ASP/PHP/Rails),光看这些分工，就知道不一样的角色对产品的理解和着重点是大相径庭的。

 

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

 

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

 

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

• 制定文件命名标准
• 设定文件统一路径
• 保存原始创做文件（例如PSD、Fla源文件）
• 最终完成文件（通过产品经理承认的文件）
• 视觉模式库和与其对应的代码模式库

固然，前端都很忙的，跟他们沟通也须要技巧和一些基础认识，我总结了如下几点须要谨记：

1. 网站的页面是动态的。photoshop呈现的是静态的东西，而网站页面是动态的展示内容、布局和交互。设计师过多关注用户体验层面，很难对全部的细节作到面面俱到。而前端（包括开发）须要照顾到全部的功能点涉及到的页面，所以在前期要考虑的尽可能周全，别让别人帮咱们收拾烂摊子。
2. 关注新技术。网页设计缺乏技术支持永远只是艺术。设计师必须常常关注新的技术和交互方式，这样才能在设计的时候提供多种解决方案，才能权衡利弊找到最优化的方案。
3. 界面元素的标准化和统一。前端关注代码的可重用性，设计师关注新创意。所以在设计前期就要考虑哪些元素和交互方式既能够知足用户体验又可以被重复使用，以此来提升效率。
4. 团队合做很重要。设计师很容易沉浸在本身的小世界里不能自拔，这是咱们常常犯的通病。“沟通”是团队合做的关键，一切皆在沟通。
5. 相信本身。前端一般出于不一样的缘由对一些交互方式可行性作出判断，好比代码复杂程度，技术可实现性等等。好的设计师须要有一些超前意识和冒险精神，当他们受 新技术的激发，认为它可以大大提高用户体验的时候，就须要把它看成挑战来实现。在对技术的深刻了解后去说服前端一块儿努力实现。