当设计师遇上前端开发
作者:咏沙 来源:Taobao.com UED Team 发布时间:2009-05-04 14:05:00
作为互联网产品设计师,在和前端开发人员沟通时你是否常常会听到这样的声音:
—— “大姐,给点专业精神好不好,这个表格是自适应的,你这样设计页面不好扩展啊…”
——“用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源文件)
最终完成文件(经过产品经理认可的文件)
视觉模式库和与其对应的代码模式库
当然,前端都很忙的,经常去“骚扰”他们会被鄙视的。跟他们沟通也需要技巧和一些基础认识,我总结了以下几点需要谨记:
网站的页面是动态的。photoshop呈现的是静态的东西,而网站页面是动态的展现内容、布局和交互。设计师过多关注用户体验层面,很难对所有的细节做到面面俱到。而前端(包括开发)需要照顾到所有的功能点涉及到的页面,因此在前期要考虑的尽量周全,别让别人帮我们收拾烂摊子。
关注新技术。网页设计缺少技术支持永远只是艺术。设计师必须经常关注新的技术和交互方式,这样才能在设计的时候提供多种解决方案,才能权衡利弊找到最优化的方案。
界面元素的标准化和统一。前端关注代码的可重用性,设计师关注新创意。因此在设计前期就要考虑哪些元素和交互方式既可以满足用户体验又能够被重复使用,以此来提高效率。
团队合作很重要。设计师很容易沉浸在自己的小世界里不能自拔,这是我们经常犯的通病。“沟通”是团队合作的关键,一切皆在沟通。
相信自己。前端通常出于不同的原因对一些交互方式可行性做出判断,比如代码复杂程度,技术可实现性等等。好的设计师需要有一些超前意识和冒险精神,当他们受 新技术的激发,认为它能够大大提升用户体验的时候,就需要把它当作挑战来实现。在对技术的深入了解后去说服前端一起努力实现。
好了,这些血和泪的经验是我工作一段时间慢慢总结的,如果你有更多的方法,希望能一起分享。


猜你喜欢
- 写入:1:把gif图像文件读入内存(一个变量strTemp)。2:写入数据库。Dim binTmp() As
- 有很多应用项目, 刚起步的时候用MYSQL数据库基本上能实现各种功能需求,随着应用用户的增多,数据量的增加,MYSQL渐渐地出现不堪重负的情
- SQL Server服务器的配置选项属于那种人们了解较少且经常误用的选项。当一个技术支持人员要求你按照某种方式调整一个选项、而另一个技术支持
- 游标的使用提到游标这个词,人们想到的是在屏幕上一个闪动的方框,用以指示用户将要输入字符的位置。而在关系型数据库的SQL语言中,游标却有另外的
- Dim iSet conn=Server.CreateObject("ADODB.Connecti
- 本文主要介绍了一个获取SQL Server数据字典的经典SQL语句,大家可以根据各自的实际情况对这段语句进行相应的修改。SELECT sys
- 经常开发asp但对于细致的说法,真实不太清楚,这里简单的介绍下。一般情况下读取数据都是用rs.open sql,conn,1,1修改数据:r
- 什么是F型浏览?2006年4月,美国长期研究网站可用性的著名网站设计师杰柯柏·尼尔森(Jakob Nielsen)发表了一项《眼球轨迹的研究
- <!--#include file="config.asp" -->&nbs
- 过滤非法的SQL字符的函数代码:'*************************************************
- 相信大家对街边林林总总的房产中介并不陌生,那么我们先看看下面这张图片。图1从右侧这家店的橱窗里,我们能迅速分清哪些是租房信息哪些是售房信息。
- 研究网页编码很长时间了,因为最近要设计一个友情链接检测的VBS脚本,而与你链接的人的页面很可能是各种编码,以前采取的方法是:如果用GB231
- <% class menusPublic Title, ID, Image, TitleColor, Target, Backgrou
- 使用MySQL,安全问题不能不注意。以下是MySQL提示的23个注意事项:1、如果客户端和服务器端的连接需要跨越并通过不可信任的网络,那么就
- 在ASP编程中,身份认证可以说是常要用到的。但怎么样才能做到认证的安全呢?表单提交页面:sub.htm  
- <%If(Request.QueryString("Page")="") ThenPage=1
- 于是写测试程序。。。不行 下载最新的ODBC。。。还是不行 通过sql plus查询。。。咦?竟然也查不到。。。 于是,折腾。。。折腾。。。
- 我和朋友都建了一个电子商务网站,大量的访问,频繁地建立和中断数据库连接,导致Web 数据库应用程序降低了数据库服务器的性能。但最近,朋友使用
- 是建立一个数据集 前面应该先定义此数据集 dim rs as adodb.recordset 然后就可以用 set rs=server.Cr
- 1、MySQL常用命令create database name; 创建数据库use databasename; 选择数据库drop data