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


猜你喜欢
- 本文总结了两种方法来导入opencv与numpy包,第一种是直接在Pycharm中导入两个包,第二种是在官网下载相关文件进行配置。本人比较推
- 很多时候,查看一个文件夹下的每个文件大小可以轻易的做到,因为文件后面就是文件尺寸,但是如果需要查看一个文件夹下面所有的文件夹对应的尺寸,就发
- 一、临时表实现分步处理1.概述当需要的结果需要经过多次处理后才能最终得到我们需要的结果时,就可以使用临时表,这里临时表就起到了一个中间处理的
- 从字面意思看了一下是因为slave_pending_jobs_size_max默认值为16777216(16MB),但是slave接收到的s
- create proc p_sword_getblcolumn ( @tblName varchar(200), @fromIndex in
- 数据字典是Oracle存放有关数据库信息的地方,其用途是用来描述数据的。比如一个表的创建者信息,创建时间信息,所属表空间信息,用户访问权限信
- 内容摘要:MySQL易学易用,附带丰富的技术文档,这两个因素使之被广泛应用。然而,随着MySQL发展加快,即使一个MySQL老手有时也会为该
- 本文研究的主要是pandas常用函数,具体介绍如下。1 import语句import pandas as pdimport numpy as
- 学了几天终于大概明白pytorch怎么用了这个是直接搬运的官方文档的代码之后会自己试着实现其他nlp的任务# Author: Robert
- SQL SERVER数据库用datetime类型的时候 如果插入NULL,没有问题 如果插入空串"",就会默认1900-
- 比如有文章表 Article(Id,Category,InsertDate),现在要用SQL找出每种类型中时间最新的前N个数据组成的集合,一
- Doing INTERSECT and MINUS in MySQL Doing an INTERSECT An INTERSECT is
- 本文以一个简单的实例讲述了python实现斐波那契数列数列递归函数的方法,代码精简易懂。分享给大家供大家参考之用。主要函数代码如下:def
- python自带了日志模块logging,可以用来记录程序运行过程中的日志信息。同时python还有logbook模块用来取代logging
- 之前一篇文章里提到了利用Cython来编译Python,这次来讲一下如何用Cython给Python写扩展库。两种语言混合编程,其中最重要的
- 目录前言分析数据总计重复次数占比where 和 having 的区别总结前言我当时正好出差在客户现场部署调试软件,有一天客户突然找到我这里,
- 先说结论1. oracle: oracle 默认没有排序规则2. mysql2.1 innoDB引擎: 默认查询按照id正序排序2.2 my
- 利用python 写一些网络服务的时候,当网络状况不好,或者资源占用过多,任务拥塞的情况下,总会抛出一些异常,当前任务就被终止了,可以很好的
- 本文实例讲述了mysql简单实现查询结果添加序列号的方法。分享给大家供大家参考,具体如下:第一种方法:select (@i:=@i+1) a
- 计模式的目的是让代码易维护、易扩展,不能为了模式而模式,因此一个简单的工具脚本是不需要用到任何模式的。简单工厂模式又叫静态工厂方法模式,工厂