开发人员如何有效设计

缺乏设计技能的 Web 开发人员

设计原则

开发设计工具

设计框架

获得灵感并不断迭代

最初发布于scenelab.io - 尝试我们的在线编辑器进行品牌推广和模型图形制作。

构建网站或应用程序需要一系列不同的技能。无论你选择哪种工具集，你都需要掌握一定程度的 HTML、CSS 和 JavaScript 基础知识。如今，你可能还会用到 React、Angular 或 Vue.js 等框架。即使你使用 WordPress 之类的工具进行简单的服务器端渲染，并在上面添加一些 jQuery，你仍然需要熟悉另外两件事。

能够很好地管理这些技术本身就值得尊敬。不可能事事精通，这很正常，所以你不应该因为设计技能不足而感到内疚——无论如何，我会给你一些关于如何设计出像样的用户界面的建议。

缺乏设计技能的 Web 开发人员

即使没有设计技能，你也完全可以成为一名专业的 Web 开发者。在我看来，这根本不应该成为工作描述的一部分。不过，一旦你在这个行业工作过一段时间，你可能会不同意这种说法。尤其是在企业软件开发领域，有一种观念，认为用户体验和设计优先级较低。这可能会导致一些令人不快的意外，因为开发人员会猜测什么才是最好的。

在设计和可用性方面，消费级网站和应用程序早已超越企业级软件。如今，企业用户期望获得他们日常使用的工具（主要是手机）所具备的那种用户体验。

但是，在小型企业工作或独自建造项目时，你可能也缺少指定的设计师。在所有这些环境中，掌握一些基本的设计技能和一些小技巧都是有益的。你对项目的价值必然会更高，而且由于你了解设计师的来历，你与设计师的沟通技巧也会得到提升。

设计原则

原则是任何技艺的坚实基础。它们为你提供适用于众多不同领域的概念。你可以用它们来反思和验证你的创作。这样，你在讨论和改进设计时就能有合理的论据，而不仅仅是争论什么“看起来更好”。

你可以从一些有影响力的人物的作品开始阅读。艾伦·迪克斯（Alan Dix）写了一本名为《人机交互》的书，他在书中将一些原则分为可学习性、灵活性和稳健性三个类别。唐纳德·诺曼（Don Norman）撰写了《设计心理学》，其中列出了可用性设计的七项原则。

虽然这些原则常常被高度赞扬，但它们却相当抽象。我不会轻信某个人在写设计书籍时得出的结论，而是喜欢观察那些在实际设计用户界面时行之有效的方法。正因如此，我强烈建议你看看其他公司的设计案例研究，以及他们从经验和迭代中总结出的原则。以下是一些我觉得很有意思的研究：

• Airbnb：我们的建设方式
• Relay：为开源软件设计
• Snapchat 的成功是因为其备受争议的用户界面吗？

另一套用于评估用户界面设计的实用原则是格式塔原则。这些心理学原则描述了人类如何识别群体和模式。它们可以帮助你了解新用户如何接触你的界面，从而避免你对设计中可能出现的某些错误视而不见。

开发设计工具

设计界面似乎需要大量的工具支持，以便你构建复杂的网站模型，然而，我建议相反的做法：只需使用纸笔或白板即可。在我看来，在大多数情况下，这些工具都是最好的。它们的简洁性带来了几个优点：

• 你不需要学习复杂的工具
• 你不会迷失在复杂工具的无意义的碎片中
• 迭代速度很快，而且不会伤害感情——翻页或擦黑板，重新开始

用简单的方法设计用户界面可以得到所谓的低保真原型。如果你坚持使用数字工具来实现这一点，可以尝试Wireframe.cc、draw.io或Sketchpad。

如果您想要更精致的外观，您仍然可以将您的涂鸦转移到更先进的工具中，为您提供高保真原型。

但有时你的设计需要更加精致。对于这些情况，我使用balsamiq有一些不错的体验。它的保真度介于低保真度和高保真度之间——取决于你使用它的强度。

当你想要全力以赴地创建高保真原型时，可以参考Sketch、Figma或Adob​​e XD等工具。Photoshop或Gimp也可能会适合你，因为它们能让你创建像素完美的设计。

再次强调，这些工具入门可能颇具挑战性。因此，将它们融入你的工作流程可能比从简单的工具入手更难。

虽然你肯定会更接近网站或应用的实际实现，但高保真原型也可能会遇到一些问题。在讨论这类原型时，很容易陷入细节的纠结。此外，人们可能不会批评你设计的基本方面，因为他们不想贬低你付出的努力。当你展示功能齐全、可能具有交互性的原型时，技术不太精通的人也可能会觉得最终产品已经接近完成。

当你在寻找适用于设计的调色板时，可以尝试Adob​​e 色轮或Material Color Tool。我个人非常喜欢Coolors，因为你可以从现有的调色板中获得灵感，或者反复尝试，直到找到合适的颜色。

设计框架

我所说的设计框架（或设计系统）并非指构建网站或应用时会用到的 CSS 主题或一堆组件。虽然后者通常基于前者——例如React Material UI正在实现Google Material Design 框架——但设计框架提供了设计界面或整体用户体验的原则、样式和最佳实践。以下是一些示例：

• VMWare Clarity
• IBM Carbon
• Ant Design
• iOS 人机界面指南

您还可以在此设计系统库中找到由不同公司创建的精美设计系统集合。

与逐个界面设计相比，设计系统有几个优势。首先，您可以获得一套可靠的现有组件，无需为了常见的交互而重新设计。其次，您可以获得一套创建与现有组件和界面兼容的规则。此外，您的界面将保持一致，让用户能够无缝地浏览您的网站。

您可能会感觉受到设计框架的限制，但这正是它应该做的：为您的创造力提供一个坚实的框架，以简化您的工作并提供连贯的结果。

如果你不喜欢使用别人的设计框架，你也可以创建自己的框架。Storybook或Bit之类的工具在这里就派上用场了。

获得灵感并不断迭代

看看你喜欢用的工具，弄清楚你到底喜欢它们什么。向别人学习是一种完全有效的方法——只要你不直接照搬。此外，如果你需要一些针对开发人员的小型设计提示，可以看看“重构 UI”。

建立一个基础稳固、同时又足够灵活以适应你的用例的系统至关重要。快速犯错可以让你更快地迭代，最终降低犯根本性错误的风险，并让你不断成长。