设计师如何跟开发打好关系?

本文讲的是设计师如何跟开发打好关系?,


Design Systems Ops: 规模化地装运(设计)。

伟大的产品离不开开发和设计的良好沟通。无论你是谁,归根结底,我们都是在创造软件产品。有了设计系统之后,沟通将变得更加简单。

但是谁将建立起设计和开发之间的沟通桥梁呢?

我把这些推动者称为 Design Systems Ops.

Design Systems Ops 是设计团队的一部分,他需要足够了解设计,并且要了解他们试图概念化什么。同时,Design Systems Ops 需要理解工程师的需求和定义方法,这将有助于设计系统的装运和规模化。在某些程度上,一个 Design Systems Ops 是两个世界的翻译。

大多数公司存在的问题

在大多数组织流程结构中,从概念到用户的过程是相当脱节的,以致于产品最终完成时和设计师的初衷很不一致。

从概念到用户的一种典型流程是:越靠近用户阶段,还原度越低。

信号(概念)受到干扰(低效率)而逐渐变弱,产品在一个非常低的还原度中结束。这种失败对公司创造高质量产品的能力有着巨大影响,并且造成巨大商业机会的浪费。

设计系统能干什么

风格指南、模式库、设计系统等都有助于围绕一种通用的设计语言去规范化实践和设计模式。而语言障碍恰恰是大多数低效率的诱因。

从颜色命名、对象、惯例、组件等开始,到记录最好的最细枝末节的体验,比如动画定时或表单元素的圆角度值。

一个好的设计系统能让设计决策更快。(比如“ call to action 应该是什么颜色”)。从而设计师可以在同样长的时间里,将更多的时间放在(优化)用户流程和对多种概念的探索上。

一个好的设计系统也是帮助开发团队在开发阶段找到获取设计的唯一来源。这对一致性很有好处,因为所有的 call-to-action 都将表现一致。

设计系统能在这个过程中减少做无用功:还原度一路上将保持大致稳定。

一些设计系统也用代码来传达设计模式。这些设计系统从概念开始阶段,到原型阶段,直到实现阶段都能证明其价值。当公司遵循这种方式,这种方式对于生产效率和还原度都是很有帮助的。

一个设计系统不是一个项目,它是一个产品,服务型产品 — Nathan Curtis

然而,一些设计系统并没有获得它们应有的赞许,却沦为设计模式的光荣榜,而这些模式离真正的产品代码非常遥远。这是因为对于几个设计师和工程师的部分投资 是不足够的:一个设计系统不是简单一个项目,它是一个产品(或就像 Nathan Curtis说的: “一个设计系统不是一个项目,它是一个产品,服务性产品。”)。为了让设计系统在交付流程的不同阶段都显现出对应的价值,它需要适当规划,用户研究和方法(和很多热爱)。那些创造出最优设计系统的团队,都将设计系统的目标定位为_有生命力的设计系统_。

引入 Design Systems Ops

有生命力的设计系统和其他设计系统之间存在的差距是巨大的。这主要是因为开发团队和设计团队缺乏良好的沟通。最终,产品将用代码的格式呈现,在这过程中影响效率的任何事情都应该被检查。通过引入一个 Design Systems Ops 的角色(灵感来自DevOps 运动),能够改善这些低效:

通过在设计和开发间引入一位中间者,进一步减少低效,增加软件交付的还原度。

来自于设计系统两边的许多问题:

  • 我从哪里可以找到标记、颜色面板、数值、图标、模式、断点?
  • 在制作原型时、在产品中、或者在 Web 视图中我应该如何加载 CSS?
  • 加载字体图标的最佳方式是什么?
  • 它们对性能有什么影响?
  • 我应该在哪里发现文件错误,又应该在哪里寻找其他人解决自身问题的办法(问题追踪,知识基础)?
  • 我该如何为设计系统做贡献(修复 bug 、增加一个图标)?
  • 我是一个参与者,我该怎样在多种环境中测试我的代码而不至于出错呢?
  • 我是一个开发者,对于设计系统我该知道些什么?
  • 我是一个设计师,我该怎样迭代浏览器中的现有模式?
  • 从 v1.0 到 v2.0 的升级路径是什么?
  • 0.5.0 版本的文档在哪里?

我学习了一些像 Bootstrap 和 Material Design Lite 这样的开源项目。在《卫报》, 我开始构建起设计和开发的桥梁,里面提到主要采用 Sass 。在金融时报为 Origami 项目工作时也帮助我发现规模化设计的新思路。 我今天工作的地方, Salesforce,有一个团队的工程师作为 Design Systems Ops,热衷于将更快更好的代码交付给用户。

在回顾我过往如何规模化设计的经验之后,这些都是 Design System Ops 可以做的工作:

  • 本地开发环境(源映射,无刷新重载,速度)
  • 托管(放置设计展示和文档)
  • 代码演示(比如 CodePen、JS Bin)
  • 技术文档(安装、问题诊断)
  • 前端自动化测试(可访问性、集成)
  • 跨浏览器自动化测试
  • 视觉回归测试
  • 代码风格检查 (我之前写的)

前面这一系列是以前端为中心的,但是这里有些更接近后端的:

  • 构建系统
  • 资源储存和分布(CDN、压缩)
  • 性能测试(资源大小、服务器加载、CDN 响应时间等等)
  • 版本流程(比如 git、SemVer)
  • 发布流程 (比如 持续开发持续集成
  • Testing/Staging阶段环境
  • 展现测试和性能结果(比如 仪表板、邮件)

或者,更靠近市场营销这边的事情(开发宣传):

  • 构建示例
  • 帮助开发者实现这套设计系统
  • 给开发社区布道这套设计系统

就像前面提到的,在这些方面有坚实的解决方案能很大地帮助设计团队提高交付质量,并提高工作的速度和信心。这是为什么我相信在设计团队中有个好的参谋将增加项目成功的可能性。

总结

随着越来越多的公司构建属于自己的设计系统,他们也开始显示出增加技术人员去支持设计的工作和工具的兴趣。因为它只是这个角色的开始,有些问题也让我夜不能寐。

  • Design Systems Ops 能在其他方面做些什么?
  • 什么工具能帮助小型团队在成本有限的情况下遵循这个路线呢?
  • 除了开发速度,还有那些方面应该是Design Systems Ops应该评判的?

我非常乐意听听你的看法,如果你也在旧金山,来喝杯咖啡聊一聊。

Design Systems Ops 并没有我凭空产生的想法,要理解我想法的由来,你可以阅读Ian Feather's awesome presentation about Front End Ops.

同样, 听 Design Details 播客,全世界许多优秀的设计师都在那里分享他们创造设计系统和风格指南的经验。





原文发布时间为:2016年05月11日


本文来自合作伙伴掘金,了解相关信息可以关注掘金网站。

时间: 2024-09-12 10:01:03

设计师如何跟开发打好关系?的相关文章

产品管理与软件开发存在什么关系

产品管理与软件开发的关系 假如说成功的产品是真实用户需求与现阶段可行性方案的结合,那么产品经理与开发团队之间关系的重要性,大家也就可以想象了. 产品经理负责定义产品方案;作为开发团队,哪些产品设计是可行的他们是最了解,他们负责产品的开发与实现.作为产品经理,你会知道只有与开发团队合作的融洽,才有机会开发出合格的产品,否则你会经历一段漫长难挨的日子. 形成合作关系的关键是双方承认彼此平等--任何一方不从属于另一方.产品经理负责定义正确的产品,开发团队负责正确地开发产品,双方相互依赖.你要求开发团队

视觉设计:视觉设计师遇上开发工程师

我是一个初入互联网的视觉设计师,和以往做设计感受最大的不同就是:一个设计的最终定稿会受到多方面的挑战,有来自产品经理的,来自开发的,来自测试的-等等.那如何在其他团队成员的面前不卑不亢,游刃有余地应对呢?下面这篇文章给了我很大的启发,特别分享给大家.  产品经理.开发工程师和市场策划专员等产品利益关系人认为--视觉设计师在整个团队中没有突出的地位.难道这个论断是正确的吗?我们还能用哪些实例来向这些利益关系人证明视觉视觉设计的重要性呢? 尽管,视觉设计师在他的职业生涯中或者是在某个产品开发进程中会

国际商业美术设计师阿里云开发首页

<--------阿里地图开发代码-将代码嵌入到论坛.博客.网站中:------>'<---------------------------转发链接地址给好友--------------------------------->http://f.amap.com/8m2n_04F33pS

腾讯QQ设计师谈如何构建一个更轻巧的开发流程

网页制作Webjx文章简介:腾讯设计师谈敏捷开发. 腾讯一直推广敏捷开发,也在强调敏捷开发,但你会发现,即便如此,还是会陷入以下情景 又丑又长的讨论会 好像人手永远不够 不切实际的想法 悬而不决的功能点 无穷尽的偏好设置 越来越多纠缠不清的细节 项目依然延期 我们如何构建一个更轻巧的开发流程,让我们更快更好的交付结果?作为一个设计师,如何成为敏捷的一分子?以下是一些心得方法,希望和大家分享 1 界面先行 作为设计师,最简单能让大家明白你的想法就是先把它画出来,不要用晦涩的语言和结构图,毕竟不是所

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

作为互联网产品设计师,在和前端开发人员沟通时你是否常常会听到这样的声音: -- "大姐,给点专业精神好不好,这个表格是自适应的,你这样设计页面不好扩展啊-"--"用ajax不是不行,不过你要事前给我说嘛,你不说我怎么知道呢,你说了我就知道了嘛-" 面对这些回答,除了欲哭无泪,你有没有想过是什么原因导致出现这样沟通偏差,有没有解决的办法呢?设计师需要了解哪些知识才能和前端开发人员来更好的合作呢?  首先得从这两者之间都有哪些不同说起.我认为最主要原因在于设计师和前端开

客户关系管理系统(CRM)的开发过程中使用到的开发工具总结

开发<客户关系管理系统(CRM)>软件过程,也就是一个标准的Winform程序的开发过程,我们可以通 过这个典型的软件开发过程来了解目前的开发思路.开发理念,以及一些必要的高效率手段.本篇随笔 主要介绍我在开发这个CRM客户关系管理系统过程中,所用到的一些开发工具,力求从开发工具的层面使 大家对这个系统的形成过程有一个大致的了解. 在文章的开篇,我们先来聊几句.一直以来,我都知道,广州这个城市,在图书馆建设方面都做的很 好,提供了很多公众的借阅服务,几年前也曾经在区一个小的图书馆里借阅过书籍,

从设计师的角度浅谈网站开发

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 公司开发了一套新的系统,但界面看上去并不是太友好,这个方面就成了我的工作,面对N个界面设计,N个杂碎页面的整理,还合着很多策划和用户体验的东西,确实头疼了,还好的是已经完成了,简单的总结下吧. 珠海网站开发中设计师的工作流程 1.准备阶段:查看并熟悉统相关的文档,对系统的工作流,面对对象,用户体验等有个大致的把握和了解,不至于设计时钻牛角尖,

在设计师的角度讲系统开发

中介交易 SEO诊断 淘宝客 云主机 技术大厅 公司开发某系统已经有一段时间了,功能已经得到一些客户的肯定,但界面不好看一直是个大问题,所以前两三周专门做这方面的改善.面对着N个界面的设计,N++个杂.碎.乱的页面整理,着实是件头疼的事情.还好这一切已经完成,为那两三周的忙碌总结几点吧. 先简单概述一下系统界面美化的工作流程 1.准备阶段:熟悉,看系统相关的文档,对系统有个大概把握,不至于设计时钻牛角尖;估量,大概总结需要改善细化的页面问题;估时,计划工作时间;定人,明确参与修改的人员,设计师和

HTML+CSS体验设计师:前端技术和框架与工具

文章描述:HTML+CSS体验设计师:前端技术和框架与工具. 我一直笃信不知道HTML和CSS的体验设计师是连砖头和钢筋都没有摸过的建筑师,因此在以往的十几个项目里虽然总是进行策略层的设计,但也不忘记锻炼自己HTML和CSS能力,只有手够脏才能成为一位好的设计师. 最近的讨论里,我们总在纠结于设计师和开发人员无法相处的话题,其实答案很简单──当你没有我的生活体验,你如何让我理解你.在开发人员那个充满逻辑.过程.抽象.定义的世界里,到底哪个部分是曾涉足,决定了你是不是一个足够理解开发人员的设计师.