设计 101

这是我们社区第一次举办设计分享会，其实去年就想做了，但是得看看大家需要什么样的设计知识。前几天，宇成提出来做设计分享的想法，我一开始有点担心，因为不知道怎么给开发者讲设计，我们这些独立创作者到底需要什么样的设计知识？

一般来说，独立开发者在做产品时候会用到一些买的或者开源的 UI 组件，不太需要深入设计，但是既然对设计感兴趣，说明可能想了解更多的设计知识，比如现有组件和模板不够用，在自定义时担心自己设计得不好，怕搞砸了原有的设计体系。

此外，作为独立开发者，我们不只是关心 UI，还有 landing page。我们经常说，有了想法别急着开发，先做个 landing page 看看反馈。还有在做 marketing 的时候，为了增加浏览量，需要制作图片或视频封面，这也用到设计的知识。

当然，作为开发者，我们不可能通过一次分享就变成设计师，或者学会很多设计理论。关键是用我们手头的工具，满足自身的需求，保持设计品质，这就够了。

什么是“Design”？提到这个词，你可能会想到背景的颜色、按钮的样式，或者页面上的动态效果。有些人可能会联想到某个软件使用起来非常顺手，整个操作流程非常流畅，这也是设计的一部分。实际上，设计涵盖了用户解决问题的整个流程，不仅仅是 UI，还包括使用时的体验。

乔布斯有一句著名的话： “Design is not just what it looks like and feels like. Design is how it works”。设计的核心是解决问题，因此，我们首先需要明确我们是为谁解决问题，即使是为自己设计，也是在满足某种需求。

在构思产品时，我们就需要思考这个产品面向的目标群体是谁，他们的痛点是什么，比如我们是要解决 B 端客户的问题还是 C 端客户。如果是面向 B 端，对方是大公司的情况下，与其现有的流程对接是很重要的，而如果是小公司，则需要提供符合他们发展阶段的解决方案。如果面向 C 端，我们需要考虑目标用户是老年人、儿童、学生还是女性等特定群体。例如，有产品专 门针对女性教授编程。

在设计之前，如果这些问题没有得到妥善考虑，那么设计就失去了其意义，因为它无法解决任何问题。哪怕是艺术品，也是通过艺术家的方式来表达思想，解决社会问题的一种手段，它们以自己的方式发挥作用。

在明确了为谁解决问题以及他们的具体问题之后，我们就可以开始构思我们的设计了。

当我们开始设计时，常常会提到一个概念——设计金字塔。这个金字塔的底层是 Useful，也就是功能性，即一个设计首先必须能解决某个问题。不论设计看起来多么吸引人，如果它不能满足基本的功能需求，那么这个设计在最基本的层面上就失败了。

以报税软件为例，不管是美国的还是中国的，用户可能并不认为这些系统特别好用或美观，但之所以使用它们，是因为它们解决了报税的需求，这就是功能性的体现。

在功能性的基础上，下一层是 Usable 易用性或者可用性。如果报税系统通过优化流程，减少了用户填写时间，提高了前端验证的效率，那么这个系统就在原有的功能性基础上提升了可用性，用户就可以更快、更简单、更愉快地解决问题。

当一个产品同时满足了功能性和可用性，用户的满意度会提高，进而可能提升整个产品的活跃度和收入。如果一个产品仅仅满足功能性而忽略了可用性，除非它是像税务系统那样的刚需产品，否则用户最终可能会放弃使用。

在功能性和可用性的基础之上，金字塔的顶层是好看漂亮 Beautiful。一个设计在满足了基本功能和提高了可用性之后，再加上精心设计的界面和动效，就可以进一步提升用户体验。但直接追求华丽的 UI，作为底层的功能性和可用性都没有做好，这种好看就会是空无一用的花瓶，用户的实际体验会非常糟糕。

因此在设计时，尤其是作为开发者，我们应该首先确保产品的可用性，把它想象成是最基本的命令行界面，虽然没有所谓 UI，但是依然满足了功能性和操作的流畅性。之后，我们可以逐步优化其可用性，比如完善使用流程、尽可能在提交前提示错误信息等，最后再考虑提升 UI 的华丽程度。

这个设计金字塔是一个非常经典的理论，引导我们从解决问题入手，明确目标用户，从功能性到可用性，最后到好看华丽，逐步构思和完善我们的设计。

在讨论设计原则之前，我想额外聊一下“Tools”。最初，我在准备 slides 时犯了一个错误，我一开始想要让 slides 看起来非常华丽，还有各种动效。最初的 slides 中确实包含了动态效果，但当我继续绘制时，我发现如果设计中包含太多动效，页面与页面之间的耦合性会变得非常高，不然页面切换时，元素会乱飞甚至消失不见，我一下子发现我过分重视了工具本身，而忽略了设计的本质。

我错误地将重点放在了如何使设计看起来更加 fancy，以及如何将 Figma 的 tricks 运用起来，忽视了设计最基本的功能性。如果我不说这段小插曲，你们可能根本不会知道我最初设计中包含了动态效果，这也说明在这种情况下，它们对于传达设计的核心原则并不重要。当然，在设计原则部分，我依然保留了动态效果，以增强其解释性，加深大家的印象。

这种情况不仅仅发生在开发者身上，设计师有时也会犯同样的错误，盲目跟随别人使用某个工具，认为那是最好的选择。例如，我使用 Figma 绘制 slides，但是其他人通常会使用 PowerPoint 或 Keynote，但我选择 Figma，是因为我对它更熟悉。工具只是达到目的的手段，重要的是使用你最熟悉的工具，并始终牢记设计目标。

当我醒悟过来之后，就把剩下没绘制完的 slides 先在纸上写个提纲，万一开始直播时真画不完，我就现场画，这种方法简单直接，还能我快速获得反馈并进行迭代，而这正是我们社区反复强调的概念——快速验证快速迭代。

所以，明白了为谁设计，要解决什么问题，以及理解了功能性、可用性和美观华丽这一设计金字塔模型后，再考虑自己会使用哪些工具，哪怕只是纸和笔，这也够了。