那些开发者需要了解的设计基本原则

jopen 9年前

人们常说设计师们需要学习开发知识，但是开发者们需要学习设计原则吗？在 #Pragma Conference 2015 上的这次演讲，Christopher Downer（Sketch fame 公司）讲到了关于开发者需要知道的一些基础的设计原则。任何人都可以成为一个设计师，而且当开发者开始从这个角色的角度思考问题的时候，整个组织都会受益。

See the discussion on Hacker News .

Transcription below provided by Realm: a replacement for SQLite & Core Data that makes building iOS apps a joy. Check out the docs!

About the Speaker: Christopher Downer

Christopher 为设计师们开发工具，最著名的就是 Bohemian Coding’s Sketch. 之前他工作在 Realmac, 设计了清新的 to-do list 应用，然后他就成为了一名自由职业者。他为各种设计和开发的杂志撰文，并且在各种会议上演讲。他以自己在设计上面的专长而被业界所知。

@cjdowner

</div>

介绍(0:00)

我的名字是 Christopher Downer，我是一名设计师。我从事 Mac 和 IOS 应用开发已经有六年时间了。过去的两年半时间里，我一直在 Sketch 工作，这些你们可能已经知道了。如果你们不知道，Sketch 是一个Mac的向量设计工具。它是一个设计图标、人机交互、网站、线框和任何在屏幕上显示的东西的工具。如果这个和你工作的内容很相关，麻烦你自己一探究竟。

设计师需要写代码吗？(1:38)

作为一个设计师，我一直以来能看到一些文章、博客和推文告诉我说：作为一个设计师，我需要知道如何去编写代码，我需要知道如何去开发应用。我读到过许多这样的文章，而且它们说的没错。设计师需要深入了解设计流程，需要对整个工作都有所了解。了解如何开发是一件好事情，因为这可以帮助设计师和开发者们一起和谐地工作。然而，我需要告诉你们一个秘密：我不会写代码。

我很想学习如何编写代码，我尝试过好多次。我采用了好多方法。在大学里我就尝试过学习编程，和一个开发者结对看书和学习在线课程。我试着学过很多语言。开始的时候是 javaScript，然后是 Python，想着 Python 会容易点，还试着学过 Objectiv-C。最近我在学习 Swift。

当深入学习的时候，我发现开发者是非常聪明的人。而我却不尽然。我知道函数是什么，我也能把握循环的概念，但是我不知道编译是什么。我不会放弃，我会一直努力。

开发者需要懂设计吗？(3:28)

“开发者需要懂设计吗？”这却是个不太常问及的问题。这是我今天演讲的目的。我不是说开发者需要自己设计所有的东西，然后不需要设计师了，这太疯狂了。然而，虽然开发者不需要处理像素，但是他们的决定总会影响着设计。

有件很奇怪的事，我大概从开发者身上学到的设计知识比我从设计师身上学到的还要多。他们教会了我一些我从来不曾考虑的问题，比如易用性、国际化，符合颜色配置文件，为多个屏幕设计，占位，处理错误，安全，第一次运行，边界情况等等。在我不思考这些问题前，我觉得我根本就不是在设计。大部分时候我只是在让像素看起来漂亮些而已。

我发现我身边的开发者都会对视觉和交互设计感兴趣。这很棒。然而，许多开发者却十分害怕设计。他们不知道如何设计，也不知道如何开始。我希望我能揭开设计的神秘面纱，谈些设计的基本原则，分享些设计的心得，然后让你能够更像设计师一样思考。希望你们以后能少依赖你的设计师一些。

什么是设计？(5:37)

我准备以最基本的问题做为开始，“什么是设计？”，这是个开起来很明显的问题。但是我想区分一下“设计”、“UI 设计”和“UX 设计”。

简单地说，UI 是视觉设计，UX 是交互设计，那么两者中间的是什么呢？是设计吗？许多人认为 UI 和 UX 是完全不同的事情，但是在我看来，它们是和谐地存在一起的。我从不会不考虑易用性和交互，只考虑视觉效果。虽然 UI 作为专业词汇是指的视觉设计，但是它也会被误用作是说整个设计的过程。

什么不是设计？(7:00)

你知道了什么是设计，也许我们还看看什么不是设计。首先，设计不是个吓人的、神奇的过程。设计师们不是工作了五分钟就能给你一个完整的设计规范的。设计师们有许多的因素、问题需要考虑。设计也不是个和开发一起开始，然后在开发结束前草草了事的事情。事实上，设计与开发相辅相成。当然，开发者做的事情远远不止编写代码，这些事情每个项目都不同，设计也是一样。

你的设计师一开始会在纸上勾勒出雏形，然后在 Sketch 这样的应用里面把他们 Mock up 起来。他们把他们在纸上画的东西转到屏幕上，然后非常真实地 Mock up 它们。再之后，如现在很多设计师的做法一样，就会开始原型化。设计师会用 Framer 或者 Origami 这样的工具来把应用流程可视化起来，然后再设计出交互和动画。接下来，他们会在设计上不断地迭代，苛求它、审核它。每次他们都会让设计比上次更好，所以理想情况下，当项目来到真正实施和测试阶段的时候，所有的设计都应该完成了。然而据我们所知，现实不是如此。

一个常见的对设计师的误解是他们需要是艺术家。许多人认为如果一个人画一条直线都不成的话，是肯定不能开始设计什么东西的。没有人天生就是设计师，就像没人天生是艺术家一样。所有人都能做这件事情。熟能生巧。

最后，设计师不意味着某种品味。视觉设计上，品味能起作用。但是，交互设计就不会那么主观了。好的设计是有规则的，好的交互设计的规则更多。

开发者们有设计的问题(10:23)

你可能还没有被说服你需要知道更多的设计知识。作为一个开发者，你编写代码而且你写的也很棒。你也许有设计师帮你解决问题，但是如果你是个独立开发者或者在一个小公司里面，你可能就没有专职的设计师和你一起工作了。他们可能是一周几个小时的自由职业者，而且他们的时间往往都非常昂贵。不管你在哪里工作，设计师都不会是全职为你服务的。他们会工作在不同的项目上，开发者多而设计师相对少很多。

当你在开发的时候遇到一个设计问题，可是设计师却不在身边，你会怎么做？等他们回来？把问题收集起来等他们回来以后一起解决？大部分时候你不能这样做。最后的期限使时间十分紧张，以至于你不能等他们回来，你需要自己做个正确的决定。

作为一个开发者，你需要填补空白。有的时候这需要猜，但是那不是最好的选择。你肯定不想让你的工作是基于猜想的。当设计师回来后发现开发者在没有他们的情况下完成了设计，他们大都会不高兴；这也意味着要增加额外的工作量，因为需要返工。同时，开发者也会有更多的工作量，他们需要重新实现并且测试它们。作为一个设计师，你可能没有时间考虑一个应用的所有细节和边界情况。他们没有开发者那么熟悉应用本身，所以他们往往是在信息不充分的时候做出了决定。

你知道的信息越多，你能节省的时间就越多。当你知道的设计知识越多，你就不再会听到你的设计师说：“你能让动画再流畅点吗？”或者“把它左移两个像素。”

设计规则(13:26)

正如我所说，设计不是变魔术，也和个人品味无关。设计被许多的限制和考虑驱动着。苹果的 Human Interface Guidelines 是个很好的开始。你可以在 iBooks 里面读到它，这是个很不错的入门指导。它提及到了许多的基础知识和设计原则，我会不时地反复理解它们。然后，请注意它们的名字。它们是人机交互的“指导”，不是“人机交互规则”。这些原则十分重要，但不是你一定要遵循的规则。你在设计领域越来越有经验，你就会越来越容易地摆脱它的束缚。

一致性(14:35)

回到设计本身，没有什么银弹或者神奇的捷径。然而，一致性是个经久不衰的话题。你的应用看起来和 OS 的体验一样吗？你的应用的不同屏幕之间看起来一致吗？确保你的应用的一致性几乎就是你自己的规则。通过建立风格指导或者布局网格，你可以实现一致性。但是更为常见的是，你可以很简单地问自己，“这个颜色和我前一屏的颜色一样吗？”，“这两个元素有同样的留白吗？”，或者“这些输入框对齐了吗？”

为了构建一致性，你需要训练自己看得出一致性。拥有一双设计师的眼睛。一个常用的训练就是变得非常挑剔和细致，这点你在设计师中非常常见。他们关注细节，他们都有强迫症。再次强调，没有人天生就有这个能力，这是你长时间积累形成的。你突然发现在别的应用中，有一个图标没有和其他的图标对齐，或者有一点偏离中心。当你能看出这些事情的时候，你不可能装作没看见。这是个可怕的诅咒。但是，当你在设计你的产品的时候，这就是个无价的技能。

空白是你的朋友(16:39)

你可能会把它认为是“空格”或者“无用的空白”，但是为什么它们会重要呢？想象一下，如果 XCode 的 Storyboards 是一些没有设计感觉的开发者设计的话，它会有一个标准的接口，一个固定的 UX 并且无法定制。它非常有可能变成一团糟，因为元素之间非常近而且难以分辨。这该如何改进呢？

通过增加每个元素之间的空白距离，就会使选中更加容易些。它有空间呼吸。我会增加留白、对齐元素和增加线宽，然后它就会变得更加清晰。最终在屏幕上你能看到的内容少了，你可能觉得这不是个好事。你看到的越少，你就能更加专注。人们常常在同一个时间只能专注一件事情。你的内容可能会超过范围或者超出屏幕的边沿，但是移动它就能回到屏幕中心。

不要让限制来主宰你的设计(19:24)

当你作为一个开发者来设计的时候，你会很自然地想，“怎么样编码最容易，设计就怎么来。”这是完全能被理解的事情。回到我准备在 XCode 里面放置 UI 的时候，我不能实现我的设计，所以我修改了我的设计，让它变得尽量简单。另一方面，许多设计师根本不考虑这些限制，然后设计出一些根本无法实现的奇怪的东西。作为开发者来说，他们认为的做出合理设计的知识并不是所有人都知道。许多时候，他们也想设计出看起来很棒的产品。过去几年，我和一些设计师工作过，他们提出的一些想法我都觉得永远无法实现。

最著名的由开发者设计的全新体验就是 Loren Brichter 的 Pull-To-Refresh。我不需要解释 Pull-To-Refresh 是什么；你到处都能看到。如果一个应用里面有时间线或者有可更新的内容的话，就会有它，而且 iOS 的邮件客户端也使用了它。Loren 是神奇的独角兽人中的一员，它不仅仅是个优秀的开发者，也是个好的设计师。那时，他正在开发一个叫做 Tweety 的推ter 客户端。在老的推ter 客户端中，你需要使用上面角落的更新按钮来更新内容，你需要先滚到最顶端然后按下更新按钮。作为一个有设计感的开发者，Loren 看到这个行为和交互实在太烂了。他能理解 Pull-To-Refresh 怎么工作，然后他实现了它，发布了它，剩下的就是传奇了。

这就是个没有设计师，开发者独自想出来的交互设计。一个典型的设计师不会想到说你可以通过向下拖动或者向上拉拽来触发屏幕更新的。

避免使用系统颜色(22:10)

这点有些主观，但是我发现一个普遍现象是：开发者在设计中采用的色彩都不是十分好看。这是有原因的：他们使用了系统的 VGA 配色。如果一个开发者想在他的设计里面使用蓝色，他们会写“蓝色”，或者会用 RGB 颜色 0，0，255。这很快，很容易，但是很丑。和你一起工作的设计师一定会改变这个配色，如果你没有设计师一起工作，请考虑下自己花点时间调整这个配色。

VGA 蓝色不是你常见的蓝色。这是个非常不自然的颜色，只会出现在你的电脑屏幕上。如果你不幸使用了一台 Windows 电脑，它和你的电脑上出现的“死机蓝屏”的颜色是一样的颜色。

说到颜色，你有很多的选择。例如蓝色，你可以使用些不是那么刺眼的配色，也许能多加点绿色。更好的方法是，使用取色器滴管从照片或者图片中取出颜色。颜色的选取方案很多。如此简单和直接的方法能改进你设计的配色。

更进一步，文字和其他看起来像黑色的元素也不是（0，0，0）黑。它们是更深的深灰。这样做的理由是，这可以减轻黑色文字和白色背景之间强烈的对比感。反过来也是成立的：当文字是白色的而背景是黑色的时候，文字更可能是个亮灰，背景是深灰。

如何工作比看起来如何更重要(24:58)

一个有着特别好的体验和本地接口的应用，即使视觉上不突出也比一个交互很差，但是有着漂亮的定制和酷炫的动画的应用要好的多。美是很重要的，但是“所有的地方看起来都像股票应用”的体验是非常糟糕的，而且我也不会使用那样的应用。如果你打算这样做，请考虑一下所有的优缺点。首先，还有更好的方案吗？它们使用起来方便吗？直觉上这样做好吗？当人们一拿起来就能知道怎么用吗？

繁琐的工作(25:59)

实事求是地说，最好的方案往往是最无趣的方案。直接的设计每次都会击败聪明的设计。很多时候，你必须妥协一些视觉上的要求来增强易用性，但是最后，这都是值得的。在这些限制下，设计是非常有挑战性的。我常常会发现我自认为看起来十分漂亮的设计都会漏掉一些用户用例或者功能，然后我把这些都加入到我的设计里面。当设计变得更好用，功能越多的时候，我的设计看起来非常吓人，因为到处都是额外的选择菜单和按钮。我必须尽我所能使这些界面看起来好看些，保证所有的元素都是一致的和对齐的。

这是我作为一个设计师最喜欢的并且具有挑战性的部分，因为它推动着我不断前进。我必须得努力工作才可以尽量使我的设计看起漂亮而且好用。

忽视流行趋势(27:41)

看看 Dribbble 的首页，然后朝着相反的方向去设计。当下，大胆的动画和汉堡般的按钮是设计的两个大的方向。流行趋势是暂时的，而且它们会很快地退去。另一方面，坚实的基础设计原则会更持久些。它们持续的时间长，你的应用也不会三个月后看起来过时。所以基于基础的原则来设计吧。

质疑所有的事情(28:25)

对自己要求严格些，而且反复问自己：“这是一个好的设计吗？”。对别人的设计严格要求是件容易的事，但是对自己就很难了。你需要质疑自己添加的任何元素。需要增加它吗？它会给界面带来好处吗？你需要记住：宁缺毋滥。关于易用性，我总问我自己：“如果我设计了一个应用，然后给我的父母用，他们会用吗？” 我的父母肯定不是积极的用户；他们使用 IPhone，仅此而已。如果他们知道如何使用我的应用，那对我来说，这就意味着我的设计是好的是安全的。不然，如果你需要教会他们如何使用该应用，那就是坏的设计。你不可能教会所有下载你的应用的用户如何使用，所以你得重新审视你的应用。

你需要记住，你对你的应用是了解的，因为你已经是一个开发者或者设计师或者创客了。但是对于那些下载你的应用的广大普通使用者来说，情况是完全不一样的，他们对你的应用毫无所知的。

好的设计的秘密(29:58)

没有什么神奇的捷径和银弹，但是好的设计有一个秘密就是迭代。你做出了第一版，然后持续改进它，改进它，改进它，直到它完全变好为止。

作为一个开发者来说，这是个可以理解的难事，因为你的时间非常有限。当我还是个年轻的设计师的时候，我总以为我最好的点子就是最初的那个点子。当然我不是说，我有了最初的点子以后就扔在那什么也不再想了。我会一直把这个点子放在脑海里，想清楚所有的优点和缺点，想清楚它看起来怎么样，想清楚它会怎么工作。我没有和别人分享我的想法，即使是最小的最不重要的方面。而这实际上是可以激发别人思维的火花的地方。通过和别人分享观点，得到大家的反馈，然后回到自己的画板上，这一定会给你的设计带来改进的。迭代就是这个成功的秘诀，许多大公司和创业公司都会以这样的文化而出名。

好的设计发生在开发者和设计师的交界处。开发者越早介入设计越好。如果他们参与了设计讨论，他们就能够理解设计是怎么发生的。当设计师和开发者协同工作的时候，他们就会互相理解。他们会一起克服困难，理解他们需要解决什么样的问题。

任何人都可以成为设计师！(32:28)

从 iOS 7 开始，我就认为设计不是那么可怕了，特别是对开发者还有想成为设计师的人来说。你不需要 Photoshop Pro 来创建逼真、流畅的工具栏和绿色背景。你甚至不需要 Photoshop 来进入设计领域。

视觉越来越不重要了，人们现在认为应用的功能远远比界面重要。开发者可以锻炼自己的设计能力，因为他们有时间这么做。正如我们发现的一样，迭代是好的设计的关键。开发者在开始开发他们的游戏的时候就学些设计的知识，这会促使设计师们不断地提高他们的能力以免被开发者超过。这真的会促使他们一起创造出更好的产品。

设计师 vs. 开发者(33:47)

虽然我们常常开玩笑，开发者和设计师是两个星球的人，我们还是因为同样的愿景来到了这个产业中：那就是为这个世界上的人们创造出伟大的应用和产品。这是我们不可忘记的初心。

设计师需要引领而不是跟随着设计些东西。在设计决定中，听听开发者的意见。说明你做出这样的解决方案的原因和过程，而不是仅仅给他们一个规范和一些资源。如果你做可用性的测试，也请邀请你的开发人员。开发者们是非常聪明的，他们很快就能学习到什么是好的设计什么不是。如果你是引领者，开发者会在你不在的时候继续你的好设计，然后慢慢地会越来越好。

小结(35:05)

“开发者需要会设计吗？”当然需要每一天，他们都做出各种决定来打磨他们的设计。设计不是和开发并行的某个事情，而是贯穿整个项目始末的东西。

一致性特别重要。这意味着视觉的一致性和体验的一致性。在你的应用或者你的系列产品中还包括和你和操作系统的一致性。

不要为了编写代码容易而设计。如果有人没有按照我设计的来编码，我定会指出来的，而且我也设计过一些不那么容易实现的想法，并且惹怒了许多开发者。但是最后开发者们都是非常乐意付出额外的精力的，因为他们知道这样会让产品更棒。

设计时，直接优于聪明。这会使你的应用更容易使用些。让你的应用更加易用，忽略那些流行的趋势，这样你的应用才会存活时间更长。

严苛地要求自己。质问自己为什么要给你的设计添加东西，问问这样做好处是什么。通过自问，我们往往会触及到事物的本质。

设计师需要邀请开发者参与设计。越早在项目中这样做，你受益越大。开发者们会从设计决定中理解背后的原因，然后他们会学习到这些原则。不要只给开发者一个设计的初稿然后让他们去实现，这样的话，开发者并不知道设计背后的原因和进程。

最后的忠告： 干净的 UI 和干净的代码一样。 它是组织好的、一致的而且进无止境。

问 & 答(37:54)

问：我们知道在 Xcode 6 中，他们引入了新的向量格式的图片，这样你可以用在不同的屏幕大小的 iPhones 和 iPads。在实际工作中你使用它们吗，或者你更喜欢为特定的屏幕分辨率设计图片；比如1倍，2倍或者3倍 X？

Christopher: 保存 PDFs 的输出是个方法，当然，我想手工素描，这样文件的大小会小一点。你不需要那些所谓的1倍 X，2倍 X 等等。我认为 PDFs 和向量资源是非常好的东西，如果你在1倍 X，最小的 non-retina 屏幕上设计的话。如果在那看起来不错，那到当它扩展到其他的屏幕，比如双倍扩大的时候，你可以保证效果也会很好的。现在很多的设计师都在为2倍 X 设计，它是偶数的像素点，所以但他们的设计缩小一半的时候，我们会看到模糊的线。关于保存 PDFs，我当然要推荐它，确认你是在最小的分辨率1倍 X 上做的设计。然后当你扩大的时候，关于 iOS 2，3 的时候，没有什么问题的。