从程序员的角度进行UI设计

视觉部分

设计系统

抽象

奇怪的想法

只是一个想法

这篇文章取自我的博客，所以一定要查看它以获取更多最新内容😉

我这辈子做过一些设计，你知道吗？😉 一开始是3D艺术、建模和雕塑，然后是矢量图形、标志设计等等。我一直都知道什么才是吸引我的视觉元素，并一直努力达到这个品牌其他专业人士的水平。我知道我有自己的品味（你可以从这个博客的设计中略窥一斑），但我缺乏合适的技能。我一直希望我的设计更上一层楼。我的个人需求从未得到满足。我从未安定下来。然后，编程就来了……

学习编程是一个令人愉悦的过程。我之前在各种设计和其他软件方面的经验无疑对我帮助很大。我学得很快，终于找到了自己的定位。学习编程为我打开了一个充满可能性的广阔世界（即使只是像有些人说的那样，JS🤨），让我最终能够创造出我一直想要的东西。我不再受现有软件和工具的限制，能够从零开始创作任何东西。编程是一门艺术，就像有些人说的那样，是一种精神状态。然而，作为一个自由职业的网页开发者，一个想要独立完成所有事情的人，我又一次被赋予了设计某种东西的使命……

视觉部分

至于网页开发的视觉部分——HTML和CSS ，我必须承认——我并没有真正投入太多精力。我专注于学习 JS，稍微落后了 HTML 和 CSS。当然，我最终也学习了它们，但我仍然感觉不太习惯使用它们。我可以轻松地操作它们的功能和语法，但还没有达到我想要的水平。我敢打赌，无论你学过什么语言，当你完成你的杰作代码时，你肯定会有这种“哇哦” 的感觉✨ 。别人是否和你有同样的感受并不重要——最重要的是你创造的东西让你感到快乐。因为这正是人们创造任何东西的初衷，不是吗？虽然我至少有几次在使用 JS 时有过同样的感觉（有些感觉立刻就消失了🤨），但我对 HTML 和 CSS 却不能这么说。总有一些地方不太理想——错误的对齐、位置、颜色、大小等等。我就是无法做出真正让我满意的东西……

让我们把时间快进到最近的时间。现在，我正在创建我的下一个大型开源项目。你猜怎么着——它需要我设计一些UI 组件！我好像永远都忙不过来，不是吗？UI 设计——我知道它可能会让我陷入一个永无止境的循环，我不断追求越来越好的东西——现在轮到我了。这个问题有解决办法吗？肯定有——算了吧。😅 不过，让我们更有创意一点（讽刺一下），选择更复杂的解决方案——让别人给你指路吧。

设计系统

在 UI 设计中，我们要找的东西叫做设计系统，或者更简单地说是样式指南。顾名思义，它的基本形式是一组规则、规范和其他东西，只是告诉你该做什么。它们作为其他人实现和使用它们的参考点。如果你曾经使用最新的框架和库进行过一些 Web 开发，或者只是喜欢 Android，那么你很有可能听说过 Google 的Material Design (MD) - 它最近非常火爆！是的，它是数十种设计系统之一。它从 Android Lollipop 推出之日起就广受欢迎，并凭借其流畅、赏心悦目的视觉效果扩展到其他移动设备和 Google 产品，最终进入 Web 领域。现在，几乎所有不同 UI 库和框架的顶级组件库都基于 Material Design，或者至少在或多或少的程度上受到了它的启发。

不过，我们还是别深究了，回到正题。我需要创建一套自己的 UI 组件。我觉得这纯粹是逻辑思维的结果🤔，所以我才转向了 MD。过去，在制作一些不错的网站时，我经常将它与不同的库（Vue 用Vuetify ，React 用Material-UI）结合使用，并构建了一些相当好看的网站。但问题是，它们并没有那么棒，你知道的——很棒。可能只有一部分网站还不错。其余的都是基于我的标准模板——工具栏、抽屉、落地页等等。当然，它们看起来很棒，但并没有真正让我满意。

抽象

因此，我选择了 MD，转到 Google 官方文档以了解这一出色功能，然后开始阅读...或者更确切地说是全部阅读。我查看了一些组件、一般准则和其他不同的东西，没有太多的顺序。从我的第一印象来看，我认为这些文档非常完整、写得很好，并且有不同组件的数字规格 - 对我来说正是合适的。然后我开始阅读它......就像真的一样。然后......我想你知道接下来发生了什么。我读了又读。关于我应该/不应该做的事情，这个抽象环境如何运作，阴影，指标，以及 - 最后 - 组件。抽象、信息和示意图的数量让我应接不暇。我意识到 MD 不仅仅是我想要的严格的数字规格。因此，经过几次尝试和错误之后，我继续寻找更好的解决方案。

在继续讲述之前，让我们先分析一下，作为一名程序员和一名设计师，以上这些事实对我意味着什么。首先，我想要非常清晰的规范，像引导孩子穿过一条名为“设计”的拥挤街道一样引导我。我只希望编程世界中的一切都像编程世界一样——简单明了。我并不是说程序员局限于纯粹的逻辑思维，就像许多行业外人士喜欢认为的那样。事实上，情况恰恰相反！他们非常有创造力，他们创造的艺术——代码——本身就是一件杰作。程序员不断努力，通过更新的架构、工具、原则等等，将他们的创作推向更远！⚡——就像UI 设计部门的视觉效果一样，不断改进（有时会出现一些缺陷）。只是这种代码艺术与大多数艺术作品略有不同。它的主要目标是清晰、易读，并以最佳、最紧凑的方式完成尽可能多的工作。编写良好的代码应该像一本优秀的科学书籍一样读起来令人赏心悦目。而我想要在 UI 设计中采用同样的原则，这是一个巨大的错误。

UI 设计不同于代码。它是为了给最终用户留下深刻印象，而不是其他程序员。它应该在视觉上令人愉悦🤗、出色、直观，并以最佳方式表达个人品牌。这就是为什么我非常钦佩那些创造出这些令人难以置信的设计的人（包括程序员），因为他们真的非常擅长他们所做的事情。而且，当你意识到这不是那么容易的任务时，你会更加佩服。你需要有品味、使用正确工具的知识、将你的想法转化为现实所需的表现力等等。也许我有点过度饱和了（或者只是想让自己感觉好一点😅），但编程也是一样的。当然，几乎每个人都可以学习如何编码——只需要一些逻辑思维。但是，当你进入更复杂的层次时，事情就开始复杂化了。在这里，你需要了解编程的真正潜力，以及它是如何工作的。就像设计一样——编程也是一项抽象的活动！层层递进，从机器码和汇编语言，到高级语言，再到软件架构中使用的各种概念，这才是编程的真正意义所在。编程是一种抽象。

所以，我想要明确的规范，但在 MD 中找不到，所以我继续前进！我真的梦想有一个设计系统，它实际上只有开源文档，其中包含清晰、详细、数字规范，可供任何想要实现它的人（在这种情况下 - 我）实现。是的，这只是一个白日梦……首先，几乎所有设计系统都有自己的实现，通常是在 React 中。这当然没什么不好！我完全同意设计系统需要有自己的官方实现，这样我才能接受这一点（即使这意味着重新发明轮子😕）。然后，一些样式指南有点开放但同时也封闭。他们提供了在真实应用程序中使用的代码示例，但没有提供组件本身，这让我怀疑我是否被合法允许复制他们的设计。由于我不想深入研究，所以我并没有真正考虑过这些选择。最后，我发现的所有系统都有一些不同的规则和抽象指南。正如我所说，我还没有完全准备好理解所有这些概念，所以这样的系统对我来说也不是合适的选择。你可能已经猜到了，这让我别无选择。

奇怪的想法

我浪费了大量时间和精力去搜索那些风格指南。但是，我这样做真的有效吗？一路走来，我发现了一些很棒的设计系统集合、资源，以及一些真正鼓舞人心的东西。事实上，我看到了一些赏心悦目的设计，让我内心的设计师兴奋不已。甚至到了……我决定自己动手制作组件的程度。

现在，毕竟我以前也经历过这样的决定，这看起来相当……糟糕，甚至可以说是令人困惑。但是，现在的我和过去有所不同，你可能在这个故事中没有注意到。现在，我对自己想要创造的东西已经有了清晰的认识。🖼 我把我的设计过程比作编程。我有一个清晰的清单，上面列出了我想做的事情。我想创造一个程序员和设计师都易于使用和理解的东西。我希望它极其简洁美观，不需要任何高超的设计技巧或品味就能驾驭。并且，希望我能充分发挥我的设计师天赋，创造出这样的东西。😅

但是，除了上面提到的那些具体的愿望清单之外，我还收获了一些新的体验。你不会想到我会从零开始做所有事情吧？我拥有丰富的资源来支撑我的设计。优秀的 Material Design 组件尺寸规格，来自其他优秀设计师不同作品的配色灵感，以及其他设计系统中那些让我印象深刻的交互功能。获得灵感的感觉真好。它能激励你创造出更棒的作品！🙌

只是一个想法

这些只是我的一些想法——我是一个逻辑思考者和程序员，也渴望成为一名伟大的设计师。我个人认为，不断追求成为更好的自己是一件好事。编程与设计并不像你想象的那么遥远。你只需要……稍微改变一下你的观点。我认为，一点点灵感可以帮助任何人培养自己的设计品味，并最终在设计方面至少有所进步。也许我不是在谈论一些超高水平的杰作或什么，但至少有一定的设计经验肯定会帮助你成为一个更好的网页开发者……反之亦然。而且，设计很有趣！

无论如何，只有时间才能证明我这次逻辑驱动的设计尝试最终会取得怎样的成果。希望它能带来好结果。现在，我希望你喜欢这个故事。这样的写作风格让这篇博客和其他博客都独具特色（甚至可能鼓舞人心），也体现了作者的个人反思。😉 请在下方评论区或留言告诉我你对这篇文章的看法。请关注我的推特、脸书页面，并访问我的个人博客，及时了解最新内容。非常感谢你阅读这篇文章，祝你拥有美好的一天！✌