前端开发人员和产品设计师之间的沟通

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

—— “大姐,给点专业精神好不好,这个表格是自适应的,你这样设计页面不好扩展啊…”
——“用ajax不是不行,不过你要事前给我说嘛,你不说我怎么知道呢,你说了我就知道了嘛…”

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

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

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

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

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

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

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

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

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

时间: 2024-11-01 16:45:50

前端开发人员和产品设计师之间的沟通的相关文章

一位淘宝前端开发人员的心声:马云的加班论是谬论

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 这是某位淘宝前端开发人员一篇博客,转载过来,与各位分享: 最近心里有点烦,烦出高血压的话,就要到"无忧高血压http://www.wuyougaoxieya.cn"去找些降压的方法了.忙着一堆事情,终于能轻松点了,码码字,透透气. 不加班冲突 昨天因为不愿意加班,和一个项目经理Y发生了一些不愉快.Y的一部分理论是马云语录:

前端开发人员必备的14个常用开发手册

对于Web开发人员和设计师来说,熟记每一个多种常用语言或框架的语法是非常麻烦的事情,所以,每一种语言都会为方便用户查询语法而建立详尽的速查操作手册,使得用户可以随时找到可能忘记的某个语法的具体信息及使用方法,这里就是前端开发人员应该在日常工作中必备的14个常用语言或框架的开发手册. HTML HTML 5 手册 HTML 5 可视手册 (X)HTML 元素和属性 HTML 手册 HTML5 圆角手册 CSS CSS 2 可视手册 CSS 3 手册 CSS 手册(V2) CSS 手册 JavaSc

【转】前端开发人员需要了解的IE hasLayout

IE的haslayout是个很纠结的东西,但作为一名合格的前端开发人员来说,haslayout属性是必须掌握的. ------------------------------------------------------------------------------------------------------------------------------------------- 拥有layout概述 Internet Explorer 中有很多奇怪的渲染问题可以通过赋予其"layou

网站加速 美工和前端开发人员也很关键

一般而言,关于网站的加速,大部分人认为是后端开发者和系统管理的职责.这种观点不完全正确,因为一个高性能的网站,不仅取决于网站的后端,还依赖网站的前端,也就是说还依赖于美工和前端开发人员. 事实上,就目前的网络环境来看,我们在浏览正常的网站时,通常总耗费时间的10-20%用在了后端,剩下80-90%的时间被前端所消耗.所以,如果 你计划提升网站的速度,不妨在优化后端的同时,让美工和前端开发人员考虑以下几个方面.相信你可能会感叹,不大动刀戈也可以有效地提升网站的性能. 1. 尽可能减少 HTTP 请

前端开发人员必须熟悉的10个CSS3属性

导读:随着Css3和html5的风靡,越来越多的前端人员开始学习Css3,今天的文章就是来说说前端应该掌握10个Css3属性. 对于Css3的新属性,你又了解多少呢?虽然大多数的css3属性在很多流行的浏览器中不支持,但是我们鼓励在前端开发中要学会并且运行这些css3属性,因为这是未来的趋势. 关键是首先确定你是否对各个浏览器之间的细微的差别有所了解,你能肯定的说IE显示的90度的角就不圆滑嘛?这取决于你的决定.但是要永远记住,网站设计不必看到所有浏览器的不同. 1. Border-radius

前端开发人员必须了解的七大技能图谱(http://geek.csdn.net/news/detail/88239)

文章转自<http://geek.csdn.net/news/detail/88239>,感谢分享! 网上学习资源参差不齐.分散无系统,给爱学习.努力想提高的你是不是造成很多困扰呢? 与其他学习平台不同,CSDN知识库不是随机地.一股脑地向您推算大量文章,而是首先梳理各技术领域知识图谱,再以此为基础,收集.筛选出每个技术分支所涉及的各个技术点的解析类.动手实践类文章,内容更系统化.更有针对性.无论您正关注哪个技术领域,这里都可以找到你所需要的.(如果没找到您所需要的,欢迎向我们反馈,我们不会让

对前端开发人员有用的在线工具

在工作中借助一些非常好用的工具可以让你专注于更重要的事情,进而提高工作效率.本文收集了一些设计和开发相关的在线工具,分享给大家,希望对你有帮助. ProCSSor ProCSSor是一个很不错的CSS代码美化工具,它可以帮助你很轻松的把代码转换成很美观. jsFiddle JsFiddle有多种用途,其中一个用法就是可以在线编辑HTML, CSS 和JavaScript片段,而且代码可以分享,还可以嵌入到你的博客中等等. Frame Box Frame Box是一个非常好用的用于在线分享线框图(

开发人员喜欢怎样的产品经理

在实际工作当中,产品经理是经常需要和开发人员打交道的,而人际交往的前提是相互之间有一个良好的感观,甚或是已经建立起来的友情,这样沟通或交流起来会非常的顺畅.产品经理和开发人员之间,属于工作范畴的关系,一般来讲还分属于不同的部门,如果再加上所背负的考核KPI是不一样的话,两者之间很难说能够为了一个共同的目标而无间的配合.从正常情况来说,产品经理要从大局出发,所考虑的要更加全面,某个设计可能包含了后续运营以及数据收集的前瞻性东西在里面,而开发人员更多考虑的是如何去实现,实现的难易程度以及代码量的多少

开发人员、程序员与计算机科学家三者之间的区别

导读:原文作者Alan Skorkin写了一篇<The Difference Between A Developer, A Programmer And A Computer Scientist>,文中讲述如何区分程序员.开发人员和计算机科学家之间的区别,发表了个人见解.现将译文<开发人员.程序员与计算机科学家三者之间的区别>转载,以下是文章内容: 我经常使用这三个几乎可以互换的词,是的,甚至包括计算机科学家.毕竟,我们中的大多数人都拥有计算机科学学位,那这三者有什么不同呢?然而,