设计师遇到前端工程师

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

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

——载入更多的东西用户可以得到更多的信息,但是页面慢了该如何取舍呢?

面对这些问题,除了要重新考虑自己的设计,有没有想过是什么原因导致出现这样沟通偏差,有没有解决的办法呢?设计师需要了解哪些知识才能和前端开发人员来更好的合作呢?

首先得从这两者之间都有哪些不同说起。我认为最主要原因在于设计师和前端开发在部门中不同的职责划分。通常情况下,产品设计师的产出物多是线框图(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. 相信自己。前端通常出于不同的原因对一些交互方式可行性做出判断,比如代码复杂程度,技术可实现性等等。好的设计师需要有一些超前意识和冒险精神,当他们受 新技术的激发,认为它能够大大提升用户体验的时候,就需要把它当作挑战来实现。在对技术的深入了解后去说服前端一起努力实现。
时间: 2024-09-28 16:18:06

设计师遇到前端工程师的相关文章

前端工程师的价值体现在哪里?

这是一个很老的话题"前端工程师的价值体现在哪里?".有人说:"前端工程师之于网站的价值犹如化妆师之于明星的价值."一位好的Web前端开发工程师在知识体系上既要有广度,又要有深度.当然,Web前端工程师并不是设计师,每天接触最多的是代码,代码,还是代码.对此,你是如何给自己定位的?你的价值是否能够得到很好的体现?如今,旧话重提无非是想与开发者们共同探讨下前端工程师的价值所在,希望对你有所感悟. 一起来看下业内资深大牛对前端工程师是如何评价的: 张克军 - 豆瓣前端工程

前端工程师需要明白的「像素」

场景: 人物:前端实习生「阿树」与 切图工程师「玉凤」 事件:设计师出设计稿,前端实现页面 玉凤:树,设计稿发给你啦,差那么点像素,就叼死你┏(  ̄へ ̄)=? 阿树:~(>_<)~毛问题噶啦~ 阿树:哇靠,为啥你给的设计稿是640px宽 ,iPhone 5不是320px宽吗??? 玉凤:A pixel is not a pixel is not a pixel, you know ? 阿树:(#‵′),I know Google... 为什么会出现以上的情况,难道他们当中一位出错了,摆了这样的

带你认识Web前端工程师

这是一个很老的话题“前端工程师的价值体现在哪里?”. 有人说:“前端工程师之于网站的价值犹如化妆师之于明星的价值.”一位好的 Web 前端开发工程师在知识体系上既要有广度,又要有深度.当然,Web 前端工程师并不是设计师,每天接触最多的是代码,代码,还是代码.对此,你是如何给自己定位的?你的价值是否能够得到很好的体现?如今,旧话重提无非是想 与开发者们共同探讨下前端工程师的价值所在,希望对你有所感悟. 前端工程师的价值体现在哪里? 一起来看下业内资深大牛对前端工程师是如何评价的: 张克军 豆瓣前

前端工程师如何和设计师沟通

摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 文章版权属于群内发过言的任何一位同学,我只是做了简单的梳理或整理. 一般设计师给前端的只有psd,没有其它多余的东西,连基础的文档都懒得给.前端期望中的设计能给予的除了psd之外,还有设计上游岗位传递下来的东西.比如:产品原型,需求文档,交互文档等等. 一般在真正的代码开发进行之前,前端期望中设计给的东西有: 1. 1份jpg文件: 里边有各个psd的动作分解图,包括页面逻辑,或交互分解.设计师放成这样的目的在于在做设计时

如何成为一名优秀的Web前端工程师?

何为:前端工程师? 前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业.Web前端开发技术主要包括三个要素:HTML.CSS和JavaScript!它要求前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的基础知识,而且要学会运用各种工具进行辅助开发以及理论层面的知识,包括代码的可维护性.组件的易用性.分层语义模板和浏览器分级支持等.随着近两三年来RIA(Rich Internet Applications的缩写,中文含义为:丰富的因特网应用程

前端工程师

这个标题很大,因为我也不知道我到底想要写些什么. 我们小组想要做一个网站,前面说过了,在项目进行的过程中我们小组六个人分工,分为了前端和后端.在软件工程专业学习这么久,其实感觉自己学的大部分都是理论的东西,被局限在小黑框里,如果没在部门里接触过前端后端的概念,我想我应该到现在才知道什么是前段什么是后端,并且没有具体概念.选择软件工程也不代表以后会从事相关工作,至少我身边只有很少一部分以后想要从事相关行业. 在网上找了关于前端工程师,很多资料都显示,前端工程师的待遇远远不如后端,下面引用在“知乎”

前端工程师必须收藏的 CSS 资源大全

我想很多程序员应该记得 GitHub 上有一个 Awesome:XXX 系列的资源整理.awesome-css 是 sotayamashita 发起维护的 CSS 资源列表,内容包括:CSS预处理器.框架.CSS结构.代码风格指南.命名习惯.播客.演讲视频.大网站的 CSS 开发经验等等. Awesome 系列虽然挺全,但基本只对收录的资源做了极为简要的介绍,如果有更详细的中文介绍,对相应开发者的帮助会更大.这也是我们发起这个开源项目的初衷. 预处理器 更快地编译 CSS GCSS:一个用GO语

我的职业是前端工程师

作为 GitHub 知名的 md 程序员,我很高兴宣布,已经在 GitHub 上 Release 第七本电子书. 在我来深圳之前的项目里,我们是一个全功能团队,我从实习生开始了职业生涯.在这一个团队里,每个人都是一个全栈工程师,即要编写前端的 JavaScript 代码,又要会后台使用 Java 或者 Scala 来对 API 进行编程. 而最近在深圳的一年工作里,我是一个前端+ 移动应用开发(混合应用方向)工程师 .2017 年年初的时候,看完村上的<我的职业是小说家>,便有了这个系列的文章

如何称为一个优秀的前端工程师?

最近在实验室很受打击,导师给的任务没有很好的完成,我能感受到导师的失望,同时对自己也失去了自信心.自信心是非常重要的一件事情.所以我需要思考我到底在不就的将来想从事什么工作.最近也是在一直不断地摸索中. 这几天想学前端,我也知道像我这样浮躁是做不成事情的,我尽量能够让自己稳定下来.希望好好学习前端吧. 首先我认为需要明白前端是什么,我认为的前端,是与人交互的接口.这是我当前的理解.在计算机中功能模块的解耦在有些地方能简化开发,使得产品容易维护等优点.所以现在讲究前端后端的分离.在前端中,HTML