给开发人员的设计技巧

开发人员的设计技能并不出名。我怀疑开源项目糟糕的设计/用户体验是它们未能成功的主要原因。通常这些项目在技术上非常出色——速度快、测试良好、维护良好。但如果没有一个讨人喜欢的界面，用户就不会上瘾。

也许你是那种对任何标题中带有“设计”的博客文章都望而却步的开发者。如果你是这样，那么我要先说一句：设计的意义在于做得更少，而不是做得更多。我不提倡过度设计，我建议宁可追求简洁。这篇博文将仅阐述这一点。

正如任何事情一样，在设计上“20% 的优秀”会让你成功 80%。本文概述了我多年来积累的一些工具和技巧，可以帮助你成为一名“20%”的设计师。我不会深入探讨用户体验（尽管它更重要），因为我认为学习如何用简单的设计模式思考是创造可用产品的基础。

注：本文根据我的原始博客文章修改而成：https://paul.copplest.one/blog/design.html

内容

建立设计感
创建徽标
- 设计图标
- 设计徽标文字/名称
颜色
字体
图标
图片和插图
- 插图
- 图片
品牌
使用 CSS 框架
设计工具
更多阅读材料、技巧和工具

建立设计感

这一步并非必需，但它却是我用最少的努力获得最大进步的一步。它将提升你的“设计感”，并让你了解自己的个人设计风格。步骤如下：

访问Dribbble（我与该网站没有任何关联）并订阅其每周新闻通讯
当您收到每周新闻通讯时，请点击“最受欢迎的镜头”链接
浏览该周最热门照片的第一页
“收藏”任何你喜欢的

每周大约需要5分钟。几周后，你可以回头看看你最喜欢的。你可能会在你的收藏中找到一个主题——也许是相同的颜色，或者你喜欢的角度等等。

你还会注意到一些新兴的趋势。过去是柔和的阴影和锐利的角度。现在的趋势是人物插画。开始将这些趋势融入你的项目中吧。即使你并非它们的忠实粉丝，也要记住，只有当设计能够吸引你的目标受众而不是你自己时，它才是有效的。

创建徽标

Logo 是一个很好的起点，因为它的设计会延伸到你的软件/网站上。Logo 会因不同的媒介（印刷、数字等）而有所不同，但既然你正在阅读这篇文章，我就假设你是一名开发者，所以你的 Logo 可能会用在网站、应用程序或软件上。

如果这描述了你的用例，则意味着你的徽标应该由两部分组成，并应遵循一些基本模式。你应该从以下几个方面入手：

一个图标
徽标文字/名称

设计图标

以下是一些有用的指导原则：

正方形：确保它均匀地位于正方形内。这一点很重要，因为它favicon可能会出现在一个图标或一个应用图标中。
对称：对称是指标志在正方形内占据均匀的空间。如果标志被挤压到一侧，或者在正方形的某个区域占据了很大的空间，看起来会有点突兀。
简洁：这是迄今为止最重要的规则。图标再简单也不为过。确保图标缩小到 32x32 像素时仍然清晰易读。这是它在浏览器标签页中的显示效果。颜色也要保持简洁——你可以使用多种颜色，但最好只使用一种颜色。

设计徽标文字/名称

在这方面，您可以更自由地使用。不过，我建议您只使用简单的颜色，例如黑色或深灰色。让图标带有徽标，并让您选择的文本字体体现品牌形象。无论您为文本选择哪种字体，都应该（可能）在网站/应用/软件的所有标题中使用它。

颜色

关于颜色，我能给出的最佳建议是选择鲜艳的颜色，仅此而已。其他颜色最好是白色或黑色。

好的，现在我已经解决了这个问题，您可以使用其他颜色（用于警报、警告等）和一些不同的灰色色调。

如果我要开发一款科技产品，我通常会用我称之为“创业蓝”的颜色开始我的设计。你可能已经在无数个不同的科技网站上见过这种颜色了。“创业蓝”的十六进制代码接近#2B70F6。这样做的原因有很多，但最重要的一点就是安全。网站创建完成后，你可以随意尝试一下这个颜色。

如果你想了解所有关于颜色的知识，我强烈推荐你阅读《通过重构 UI构建你的调色板》。掌握这些概念后，你可以使用colorbox.io来构建你的自定义调色板。

字体

我可以给出三条指导原则：

只使用一到两种不同的字体，如果确实需要，可以使用三种。
无衬线字体对于标题来说是最安全的，字体应该（可能）是粗体、对称的
内容可以使用衬线字体，但使用无衬线字体也同样适用。衬线字体表面上更容易阅读长段落，因为字母上的小“尾巴”让阅读更轻松，但这在印刷媒体上比在像素化的屏幕上更适用。

正如我在徽标部分提到的，您（可能）希望标题字体与徽标字体相匹配，但这并不重要。

字体需要反复尝试才能找到自己喜欢的。谷歌字体在这里很有用（如果你不讨厌谷歌的话），因为你无需费力下载/上传字体即可试用。我个人正在尝试摆脱谷歌字体，所以我正在慢慢建立一个网站来实现同样的效果，只不过字体是由 GitHub 提供的。

图标

尽量只使用少量图标。实际上，图标的作用微乎其微，除非你能用图标完全取代某些文字。一个很好的例子是 ≡“汉堡图标”，它完全取代了导航栏中“显示菜单”的必要性。坦白说，我认为即使是“优秀”的设计师也会使用太多图标。

话虽如此，一些图标可以让网站看起来更完美。只需确保图标有一致的“主题”：它们的描边粗细应该相同；如果有些图标是圆角的，那么所有图标都应该是圆角的；保持颜色一致。

再次强调，简化！图标的意义在于减轻用户的认知负担。尽量使用细节较少的图标。

以下是我常用的最佳（免费）资源

图片和插图

图片和插图主要用于填充空间并强调您的信息。选择哪种方式取决于您的个人喜好，但尽量不要混用。

插图

插图确实能让网站/应用焕发生机。它们在软件中不那么重要（事实上，它们在大多数软件中可能看起来很傻），但在落地页上却能很好地发挥作用。然而，插图是最难驾驭的，因为它们很难定制，很难在所有页面上保持一致的外观。

首先尝试创建没有插图的网站（我怀疑这对大多数读者来说不会有问题），然后最后一步，如果还有空白需要填补，可以添加一些插图。现在有一些非常棒的资源开始涌现，它们提供一些免费、轻量级的插图供您尝试。这些资源包括：

humaaans.com --> 你可能已经开始在各处看到这些
undraw.co
icons8.com/ouch
avataaars.com
freepik.com

图片

图像比插图更容易制作，因为库存照片的数量比库存插图的数量多得多，而且如果您将来想将设计转移到内部，那么找到一位称职的摄影师比找到一位称职的插图画家要容易得多。

再说一次，图像在网站上比软件更有效（这可能不言而喻，但我还是坚持这一点）。

让图片感觉像网站的一部分可能很困难——很多时候它们看起来就像漂浮在某个地方一样。只需一些小技巧就可以缓解这种情况。例如，你可以让图片拉伸到全宽。或者，如果您的网站使用大量圆角，请为浮动图片添加圆角。如果您的网站使用阴影，请将其添加到图片中。

在图片上添加文字有点冒险，因为这可能会影响文本的可读性。如果要添加文字，请为文本添加一个非常细微的阴影。
或者，您可以考虑在文本和图片之间添加叠加层。

我使用的最好的图片网站是：

品牌

这里你唯一需要记住的就是一致性。为了让产品感觉有凝聚力，它必须保持一致。以下是一些指导原则：

选择一种颜色，并将其用于所有地方。其他颜色请使用黑色或深灰色。
选择一种字体并在任何地方使用它
文本大小应始终相同（标题除外）。不要将一个段落设置为 12px，另一个段落设置为 14px。
使用一致的填充
把东西排列整齐。当我们第一次看到事物时，更容易理解更少的“块状”事物。我们可以通过将事物分组并对齐来实现这一点。

不要掉入“重新设计版块”的陷阱。刚开始设计时，你会觉得网站的每个部分都应该略有不同。但事实恰恰相反。尽量在所有地方使用相同的布局。当人们第一次看到某个东西时，他们的大脑必须理解所看到的一切。在确定哪些信息是重要信息时，会产生认知负荷，这在心理上是一个不舒服的过程。如果可以在整个网站上重复使用相同的布局，那么用户的认知负荷就会减轻，他们只需要感到一次不适。

使用 CSS 框架

如果你正在构建网站，我强烈建议你将 CSS 框架和 JS 框架分开。尽可能避免使用像 ReactStrap 这样“锁定”的框架，而选择“基于类”的 CSS 框架。一旦你适应了这一点，你的设计就可以在任何地方实现——无论你使用 HTML、React、Vue，还是任何你决定使用的最新、最强大的框架。

我还建议坚持使用“实用优先”的 CSS 框架。您可以选择Bulma或Tailwind，并花一天时间学习它们的工作原理。这一天的学习回报丰厚——使用其中任何一个进行原型设计都比从头开始设计再实现要快得多。避免使用style标签。从布局到外观，一切都使用类。

设计工具

Figma。这就是你真正需要的。忘掉 Sketch 和 Invision 吧。Figma 拥有矢量设计功能、可点击的原型、评论功能，并且支持协作。而且它是免费的（增值版）！花点时间学习一下——视频教程很有帮助——然后就可以用它来完成所有设计和编辑工作了。

我的确是 Figma 的忠实粉丝，但这是有原因的。我之前尝试过很多其他工具，但没有一个像 Figma 这么好用（而且功能全面）。如果你处理照片，可能还需要 Photoshop，但作为开发者，处理照片通常只是压缩和调整大小，而 Asset Pipeline 可以更好地实现这些功能。

给开发人员的设计技巧

给开发人员的设计技巧

建立设计感

创建徽标

设计图标

设计徽标文字/名称

颜色

字体

图标

图片和插图

插图

图片

品牌

使用 CSS 框架

设计工具

更多阅读材料、技巧和工具