如何为开发人员进行设计

即使他们可能从事相同的项目和产品，开发人员和设计师也经常在各自为政的情况下彼此分开工作。 开发人员通常认为设计是次要的，与产品的功能相比并不重要。

这种想法可能会损害开发人员与设计师的关系。 没有对设计的基本掌握可能会阻碍开发人员的职业生涯，或者仅仅因为他们没有设计师参与就阻止他们进行项目。

为什么开发人员应该学习设计

虽然设计和开发通常被认为是独立的学科，但也有人同时掌握了这两个学科。 即使某人只对成为设计师或开发人员感兴趣——而不是两者兼而有之——至少学习其他学科的基础知识也是很有价值的。

开发人员可能想要学习设计，或者至少培养设计知识的基本基础有几个原因。

首先，小团队可能没有专门的设计师。 此外，有些开发人员想要完全自己处理项目，他们无力聘请设计师（或者想把钱花在其他地方）。 学习设计自己的产品，至少在可以聘请设计师之前过得很好，这是一种宝贵的资源。

开发人员学习设计的另一个重要原因是他们可以更有效地与设计师合作。 对于设计师来说，为网站或应用程序交出完全设计的文件，他们希望在成品中达到像素完美，却发现他们的设计已经被开发人员编码而发生了重大变化，这令人难以置信的沮丧。

如果开发人员不了解设计的基础知识，他们可能会忽略使 UI 特别用户友好的小细节，并且无意中破坏了项目的用户体验。 当设计师发回大量更正时，它可能会使开发人员与设计师的关系紧张，更不用说减慢项目的完成速度。

为了改善跨学科团队之间的关系和团队合作，开发人员会帮自己一个忙，学会通过“设计师的眼睛”来看待设计，而不是纯粹从开发的角度看待设计——掌握这项技能将大大改善他们的项目。

打造设计思维

很多时候，学习设计的开发人员过于关注他们喜欢和想要效仿的设计美学，而不是支持这些设计的基本原则。 他们看到按钮的颜色和大小、特定字体或边框的使用方式等内容，却不了解这些选择背后的原因。

他们开始在墙壁上喷漆并装饰空间，而不了解他们正在装饰的空间的目的（或者甚至确保完成管道和电气工作之类的事情），可以这么说。

理解和尊重设计师做出决定背后的原则非常重要。 任何刚接触设计的人都需要牢牢掌握构成良好设计的原则和理论——例如格式塔原则和基本的视觉层次——然后才开始潜入并开始到处喷漆。

也就是说，对于新设计师来说，无论他们是否有开发背景，在理论上都陷入困境也是很常见的。 他们花了很多时间学习和思考他们从未真正应用所学知识的事情。

设计师和开发人员都倾向于完美主义者。 但是在设计完美之前推出（因为它们可能永远不会完美）对于这个过程很重要。 尤其是新设计师，需要克服他们的不安全感，把他们的工作放在那里，并从他们收到的反馈中学习。

真正学习设计的最好方法之一是尝试重新创建他人的设计。 区分哪些有效，哪些无效，并弄清楚为什么特定设计具有吸引力是新设计师或开发人员可以学习的最有价值的技能之一。 对现有设计进行独特的旋转在业内很常见（Dribbble 的“反弹”功能就是明证）。

在浏览器中设计

许多设计师拒绝直接在浏览器中进行设计，因为这通常意味着他们需要至少能够轻松编写基本的 HTML 和 CSS 代码。 这就是为什么它通常非常适合从事设计的开发人员的确切原因——他们已经习惯了编写代码。

有一些工具可以帮助在浏览器中进行设计，并且可以让设计人员和开发人员的生活更轻松。 简单的浏览器插件可用于从选择调色板到探索另一个站点的 CSS 和 HTML 代码的所有内容。

还有像 Figma 这样更复杂的工具，它们在浏览器中就像一个功能齐全的设计工具。 Figma 允许设计师进行协作，将资产发送给利益相关者（甚至让他们更改设计的内容和副本），并让开发人员可以实时访问实际设计。 对于想要创建可随时间扩展的设计和设计系统的开发人员设计师来说，这是一个很好的选择。

Webflow 是在开发人员可能喜欢的浏览器中进行设计的另一种选择。 虽然设计界面是可视的，但导出的代码是干净的、语义的 CSS 和 HTML，开发人员会欣赏（并非所有可视化设计工具都导出干净的代码）。 Webflow 包括用于设计和布局的工具，以及内置的 CMS 和电子商务工具，以及托管选项。

颜色、排版和布局的使用

在深入探讨颜色、排版和布局的视觉原则之前，重要的是要谈谈基本的可用性。 世界上最赏心悦目的设计如果不可用，也是毫无用处的。

最重要的可用性原则之一是一致性或可预测性的概念。 设计应该足够可预测，以便用户能够直观地理解如何使用它们。 例如，可点击链接的蓝色下划线文本、完整且标记良好的导航菜单等。元素之间的间距、排版和配色方案也应保持一致。

在每个设计项目中都应考虑的其他可用性原则包括诸如错误预防（以及在确实发生错误时提供信息性错误消息）、熟悉的语言（使用人们习惯的语言，而不是“可爱”或可能不清楚的创造性替代方案)、灵活性和效率，以及容易获得的帮助。 Nielsen Norman Group 还应牢记额外的可用性启发式方法。

可用性评估应在整个设计和开发过程中进行，以确保产品按照设计和开发团队的预期运行，并且不会让用户感到困惑。 启发式评估涉及将产品应遵循的预定义设计原则列表与实际产品进行比较，以查看哪里出现了偏差（然后修复这些偏差）。

一旦彻底了解了与手头产品相关的可用性，设计师-开发人员就可以转向设计的更多视觉方面。

基本色彩理论

色彩理论是视觉设计中最复杂的方面之一。 稍微改变色调可以完全改变颜色的视觉冲击和情感效果。 这也是许多从事该行业多年的设计师仍在与色彩作斗争的原因之一。

虽然已经写了很多关于色彩理论的书籍，但设计师和开发人员可以学习一些非常基本的原则来开始使用。 将这些与任何可用的多种颜色设计工具结合起来，可以相当容易地创建一个令人愉悦的调色板。

一、暖色、冷色、中性色的区别。 暖色包括红色、橙色和黄色。 暖色通常会充满活力和活力。 冷色包括绿色、蓝色和紫色。 这些颜色通常更平静和放松。

中性色包括白色、黑色、灰色、棕色和米色。 在暖色或冷色中添加白色、黑色或灰色会改变它们的含义和影响。 白色会使颜色变浅，通常会使它们的效果不那么强烈或更积极（例如，紫色被认为是一种神秘、富丽堂皇的颜色，而丁香色通常与春天和幸福有关）。 灰色会使颜色变得柔和，并可以减轻它们的影响。 黑色会使颜色变暗并使它们看起来更保守（考虑亮蓝色和海军蓝等颜色的不同影响）。

一旦设计师对颜色的含义有了基本的了解，他们就可以使用 Coolors、Design Seeds 或 Colormind 等工具为他们的设计提供最终的、协调的调色板。

使用 HSL 颜色

当设计师想到网页颜色时，他们通常会考虑十六进制值。 虽然这已成为 Web 颜色方面的行业标准，但开发人员可能会发现使用 HSL 颜色值更有意义。

对于大多数人（包括设计师）来说，十六进制值似乎彼此之间没有关联。 看起来非常相似的两种颜色可能具有完全不同的十六进制值。 例如，#68B4D4 和#92C8E0 是非常相似的蓝色阴影（一个只是比另一个更亮更轻），但它们的十六进制值没有明显的相关性。

然而，它们的 HSL 值显示了它们之间的密切关系：#68B4D4 变为 HSL (198, 58%, 62%)，#92C8E0 变为 HSL (198, 56%, 73%)。 序列中的第一个数字（在本例中为 198）表示特定的色调。 第二个数字是饱和度百分比（颜色的亮度或鲜艳度）。 第三个数字是颜色的亮度（或添加的白色）百分比。

由于使用 HSL 与 hex 很容易看出颜色值之间的相关性，因此开发人员经常发现使用 HSL 通过代码操作颜色要容易得多。

排版原则

排版是另一个甚至可以让经验丰富的设计师绊倒的领域。 但就像色彩理论一样，有一些很棒的工具可以提供帮助。

排版层次结构是设计师-开发者应该首先学习的东西之一。 设计中不同类型元素之间的关系对于使该设计更实用至关重要。

至少，设计应该具有三个层次的排版结构：标题、副标题和正文字体。 标题应该是视觉上最突出的，其次是字幕，然后是正文字体，应该是高度可读的。

许多新设计师在创建层次结构时过于关注字体大小，而对字体样式关注不够。 有时，不是使标题明显大于副标题，例如，标题可以加粗或大写，而副标题保留标题大小写和正常粗细。 颜色也可以用来区分字幕和标题，以及这些元素和正文。

组合不同的字体也会让许多设计师感到困惑，但这是创建视觉层次结构的常用方法。 它们包括选择互补字体（相反的字体经常吸引，但在某种程度上，字体组合的好坏必须根据随着时间的推移磨练出来的直觉来确定），选择合适的字体（不要在法律文件中使用 Comic Sans，因为例如，体型的显示字体在较小的尺寸下不清晰），并在字体之间创建对比（不要使用两个非常相似的字体）。

组合字体的另一种简单方法是从大型字体系列中选择字体。 甚至还有一些家族，包括显示、衬线和无衬线版本，它们可以很好地协同工作（例如 Mrs Eaves 和 Mr Eaves、Fedra 或 Museo 和 Museo Sans）。 这可能是开始真正尝试组合字体的最简单方法，因为它们被设计为看起来很好。

在处理较大的排版层次结构时（例如添加 H1、H2、H3、H4 等），在排版比例中遵循某种原因很重要。 斐波那契数列是一种可能的开始尺度，尽管还有其他已建立的印刷尺度。

在两种排版（以及通常在设计布局中）中使用的一种常见比例包括 4、8、16、24、36、48、72、108 等。这些数字可以以各种方式组合以创建具有令人愉悦的视觉效果的设计比例（例如，24 像素字体与 36 像素行高组合）。

基本布局原则

自从 Web 诞生以来，就出现了某些布局模式作为“标准”。 示例包括顶部的主导航、带有附加信息或导航选项的左侧或右侧边栏，以及占据剩余空间的正文内容。

虽然与这个基本布局有一定的偏差（不是顶部导航、没有侧边栏、两个侧边栏等），但在创建新布局时这通常是一个相当安全的选择。 偏离这个基本模式只能有目的，尤其是新的和没有经验的设计师-开发者。

创建可预测的设计——这通常意味着一致——对产品的可用性有很大帮助。 只有在可用性收益大于损失时，才应该偏离用户在使用产品时所期望看到的内容。

对于相同类型的内容，最好不要在一页上使用 72 像素粗体蓝色标题，然后在另一页上使用 36 像素红色标题，因为布局一致性是关键。 同样，标题和正文之间的间距（填充）在一个部分中为 36 像素，然后在另一部分中为 32 像素，这会造成视觉上的不一致。 虽然一个人可能不会立即理解为什么差异会如此不和谐，但他们会感觉到。

与上面提到的印刷比例类似，4、8、16、24、36、48、72 或 108 像素的间距元素将创建视觉上令人愉悦的设计。 在元素之间使用足够的空间是个好主意，给它们呼吸的空间； 较新的设计师通常会避免留白，最终会得到看起来杂乱无章的设计。

有些人可能会质疑为什么比例尺是这样隔开的。 为什么前两个数字之间只有 4 个像素的差异，而后两个数字之间却有 36 个像素的跳跃？ 原因很简单：在小尺度下，4 像素的增加很容易识别（8 像素是 4 的两倍，很容易识别）。 但是对于较大的数字，72 像素和 76 像素之间的差异并不容易看出。 随着尺寸的增加，更容易看到更大的差异。

一致的间距是基于网格的设计方法如此流行的原因之一。 从网格开始（通常为 12、16 或 24 列）为设计人员提供了一个工作框架，使所有内容保持一致。 列之间的内置排水沟也有助于确保不同的设计元素和其中的内容有一些喘息的空间。

结论

设计师和开发人员都应该专注于扩展他们的技能，以进一步发展他们的职业生涯。 开发人员花在学习设计基本原理上的时间将在未来与设计师合作或创建自己的产品时节省时间。

了解设计的基本原则——可用性原则、色彩理论、排版、布局和用户体验——也将使开发人员更擅长开发。 当他们了解设计师做出选择的原因时，开发人员可以与设计师更好地合作，创造出真正出色的产品。

进一步阅读 Toptal 设计博客：

• 设计原则及其重要性
• 设计师应该知道多少编码？
• 可能性范围：首选 UI 颜色指南
• 使用这些成功的交互设计原则提升您的用户体验
• 设计基础——视觉层次结构指南（附信息图）