设计师如何与开发者合作（一）：什么是为开发而设计？

@王希玺 ：这篇译文来自Invision团队免费提供的系列课程，教设计师如何与开发者合作，今天先来看第一节。

为开发而设计是什么意思？

快点回答我，你的职业叫什么？

大声说出来...1...2...3...来吧！

如果“设计师“几个字出现在了你的回答中，那么你有一份很特殊的工作。设计师通过融合艺术、科学、数学、心理学和其他的学科来为世界创造产品。

当你想到设计时有许多令人惊叹的东西。

对于每一个设计尝试解决的问题，总会存在限制与约束。伟大的设计能够在不失去有效性的情况下驾驭束缚。

这就是这门课程要讲到的内容——更好地理解和操控涉及到设计之中的束缚。特别是涉及到响应式Web的产品。

快速理解专业词汇

当涉及到Web端的设计和开发过程中，有许多可以互换的描述性词汇。为了防止混淆，我将使用以下词汇：

-当我谈论“”设计"时，我是指可视化计划或者一个产品的mockup。这些可以包括输出的源文件，样式指南，原型或者任何相关文档。

-“产品”可以是网页，app，登录页，管理界面，或者任何其他使用html/css作为核心的东西。这些可以包括javascript和任何服务器语言。不管产品是如何分布，我们假定它需要在多个不同设备和不同尺寸的屏幕上工作。

-“开发”着实施代码来将设计转化为产品。

好，那么为开发而设计是什么意思呢？

为开发而设计是找到可能减少开发成本同时也能提供优秀用户体验的解决方案。

Web应用并不是一步到位的项目。他们需要升级，进化和改变——有时这时非常快的。在做决定的时候，设计师必须考虑设计是如何构建的。一个看起来会让用户进行，但却很难开发的设计并不是一个好的设计。它不过是存在潜在问题的漂亮界面而已。

你的设计可能看起来不错，但用来创造它的代码可能一片混论。图片来自Uwe Kils

为开发而设计意味着要作为一个团队来行动，而不是仅仅完成某一过程中的一个步骤。

这种的目标是创造一个设计和开发过程都很棒的产品。设计可以提升开发者的输入，通过设计师的帮助，代码也可以表现得更好。一起工作并且相互理解能够及大地帮助达成目标和克服困难。

设计时认真地考虑开发的事情，相当于全方位地理解最终目的，并且更好地做出艰难的决定。

当你能够从树中窥见森林时，你能够更好地找到目的地的方位。而在这里，你的目的地就是一个优秀的产品。

为开发而设计不是什么

这门课不是你屈从于开发的批评和反馈的借口，我们也不时在说开发的工作更重要。就像没有代码，产品不能存在一样，没有设计，产品就不会进入用户的生活。

设计与用户体验决定了产品能否吸引和留下用户。没有优秀的设计，最好的网页和APP也只能期望成功。

事实是设计往往最先开始。所以知道什么样的工具和技术将会用于执行你的设计，会有很大的影响。

期望开发人员知道如何使用ps来修饰图片并没有什么用。因为到他们开发的时候，他们往往会直接把最终的图片添加到页面。

相反的，如果你知道如何缩小图片尺寸并提升品质，这可以帮助提升产品质量。你可以考虑在做你自己的工作时帮助他们完成这些工作。但是这在别的方面不能起到作用。

你是架构师。如果你知道开发者最终如何建构你的应用，这对所有人都有好处。

本课程只在帮助您与开发人员更好地合作完成设计。没有说明的是你的首要工作是为用户记性设计。你知道这一点，你也擅长这一点，你不需要从我这里再听到它。这门课的目标是帮助你拥有更全面的视角，从而让你所做的每一个设计的决定都可以去提升产品。

当你要做任何设计决策时，检查这些简单的原则：

当这个设计对用户有明显的好处时，使用它。如果它绝对能提供一个更好的用户体验，那么就不要被开发人员说服取消它。

举例：如果您网站上的错误信息需要用不同的颜色、特定的字样显示，并且需要与表单元素放在一起使用以免被忽视，而不是简单地在页面顶部显示通知消失，那么，让这个设计实现。在最开始所做的多与工作是多余的，为了产品的成功。

问问你自己如何帮助实现这个设计。使用任何可能的资源和事实来解释你的立场。但不要应为开发的困难就让用户受罪。

研究是否有一种方法可以创建类似的效果，且同时兼顾了用户体验与代码库。很多时候，你想完成的设计可以通过类似的但是相对更容易实现的方式来解决。寻求开发人员的帮助。他们那逻辑性强的大脑可能会想出比相对你原先计划而言，对用户和代码实现都更有帮助的办法。

举个例子：就上面提到的有关错误消息的标记，也许可以将错误的消息分类，给每一类错误消息不同的代码颜色作为替代方案。而不是对每一个输入都提供自定义消息和颜色。可能这里会有3类信息，每一类有自己的颜色。这就允许在开发者更好地组织和再利用代码的同时，设计对用户而言仍然是清晰地。

选择项目的设计元素时，尽可能使用代码可以重用，一致和简洁的样式。你的警告信息颜色是否可以选用公司品牌黄而不是经典黄呢？这两者都向用户传达了警报的性质，但是使用其他元素中已存在的颜色可以降低代码的复杂性，并使得代码更加清晰。

接下来是什么内容？

整个课程我们会讨论高层级的知识、技巧和在为开发而设计时需要避免的陷阱，这些包括：

-在开始设计之前需要询问开发人员的问题

-设计过程中询问开发人员的问题

-如何在设计中设置“规则”,从而保证一致性、开发友好与用户友好

-如何负责响应式设计

-你为什么要使用web font

-为什么应该避免食用自定义形状，需要什么来替换他们

-关于将运用到你的网页的框架和技术，你有哪些知识需要了解。

你很快就会掌握我多年来形成和内化的知识。下一章中我们将告诉你你需要询问开发人员的问题，希望你感到些许兴奋！

See you then!

小结：

为开发而设计的关键是考虑设计要如何去构建，从而提高最终产出的产品质量

这意味着你需要跟开发者以团队的方式去工作，从而找到解决设计问题的最好方案。

当面对一个设计决定是，让以下过程在你的脑海中运行一遍：

1.这是绝对能为用户带来好处的吗？如果是，实现它。

2.是否有一种方法可以创建类似的效果，同时也能兼顾用户体验与代码库？

3.当没有给用户带来明显好处是，选择可以让代码库更加可重复利用、一致、简洁的设计。询问开发者你如何可以做到这一点。

「交互设计实战好文」

1. 细节设计：《案例实战！聊聊交互细节设计的四个小技巧》
2. 按钮设计：《交互案例实战！三个按钮背后由小见大的交互思考》
3. 活动设计：《网易实战！从一次活动设计聊聊交互设计师的3个阶段》

【优设网 原创文章 投稿邮箱：yuan@uisdc.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量180万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com