在这个系列中，我们来谈谈设计者在创新性项目中与开发者打交道时，如何从每每不自觉陷入的迷离困境中摆脱出来。

我很早就已有写这个系列的打算。作为一个既做过设计又做过开发的过来人，我与多数专业的开发者和设计者一样几乎每天都要感到郁闷。既然我已经决着力于成为更好的开发者，并且曾经教过很多用户体验和网站开发的课程，我认为我有责任去涉及工作领域中开发者和设计者都会面对的屏障。

在接下来的文章中，我将对开发者和设计者作出引导，籍此希望他们以后能够更加高效的合作。

UI（用户界面）/UX（用户体验）的设计者和开发者之间是强烈的，又爱又恨的关系。

— π (@pi_alize) October 21, 2016

开发者和设计者之间的关系是紧密绑定在一起的，如果一方不顾及到另一方，最终的产品肯定达不到预期的效果。

内容提要

这个系列的最初部份，我打算阐述一下设计者和开发者所会遇到的问题以及如何突破这些障碍：到底是用代码来设计，还是搞清楚把 UX 从设计应用到真实环境需要用到什么代码。

系列的第二个部分将会让设计者对前端开发有一个基础的理解，因为是这部分，而不是网站后端，呈现了所有的设计美学。而这我认为是在现实转换中丢失的最大元素之一。我们会简单介绍一下 DOM 是什么， HTML 和 CSS 可以做什么，什么时候用 JavaScript 合适，并且大致说明一下为什么 SEO 和 HTML 语义须成为设计工作流的一部分。 

系列的最后一部分我们将会说一下后端开发。我不会来教您如何编程，然而会介绍开发者所需具备的理念和方法，以此不仅仅是重现您的设计还需实现其中所涉及的逻辑关系。我会以一个最终的观点以及一些有用的资源来作为结束，以此帮助您和您的团队更加紧密的合作。

给开发者的提示

这个系列是专为有很强设计背景的个体量身打造的。在此阐述的所有概念，不管是多么的基础也不会展开来详解——这对于深刻理解计算机编程人来说完全足够了。

是用代码来设计，还是根据设计来编码

我在很多网站上都能看到有关设计流程的争论。项目团队应该是做完设计后才来开始一点一点的编码呢，还是一开始就是设计与功能开发同时进行。其实两者各有利弊，下面我们展开来解析。

功能是设计的一部分

多数人可能不会如此想，然而当我们做一个博客提要或是 Twitter 插件时，设计在阐述此类代码应该如何工作时会占有很大的比重。举个普通的场景：是让 Twitter 插件在页面刷新时获取新的 tweet 内容，还是无需刷新而是用 Ajax 来异步获取。 AJAX是更加整洁精密的解决办法而且最后还能从洁净的 UI 和平滑的淡出特效中受益。但设计者可能会完全忽略这些，他们很可能完全不知道此种技能的存在，甚至不知道有编程实现的可能性。这就是当开发复杂的网站或 UX 时，设计者与开发者探讨需求功能具有根本的重要性。

不止是美观

网站会以多种不同的格式、方位、环境甚至不同的感知（如屏幕阅读或语音辅助）所访问。作为一个设计人员，您应该在这些变数下确保高质、稳定的用户体验，甚至能让用户定制所需。许多设计者对这些根本不予考虑，所以不能做到稳定连贯的用户体验。

同样的，这也是设计者和开发者应该通力合作的原因。我甚至认为开发者应该是设计者的延伸，设计者反之亦然。双方只有共同努力才达到最高用户体验的极致。

“当设计者和开发者共同发力时，便是见证奇迹的时刻” – John Botica

设计应该是可转译的

当我说“设计可转译”并不是指翻译成不同的语言(虽然某些情况下 翻译转变网站书写习惯 成从右到左会极大的影响您从左到右的设计)，我是指设计应该足够的明析且结构合理，以使其能够很容易的从静态设计转换成动态实现。这需要设计者的经验以及了解浏览器是如何渲染元素和表单的。

“我们（设计者与开发者）应当将各自的工艺解析给对方以此产生创新与结构层次。” – Airrick Dunfield

这个世界需要设计者冲击布局与美观的极限，并且需要开发者有足够勇气突破 web 引擎的束缚。然而两者需要开始进行更加紧密的合作。