UI 设计系统

Hansel2025-04-152025-04-17

让你的想法看起来很棒，而不依赖设计师，了解如何使用从开发人员的角度解释的特定策略自己设计漂亮的用户界面。
读《Refactoring UI》 | 本山德彪的 Apple Notes

从零开始

当你开始设计一个新的应用程序创意时，你会先设计什么？如果是页面顶部的导航栏，那你就错了。

在进行新设计时，最容易让自己感到沮丧和困顿的方法就是一开始就试图 “设计应用程序”。当大多数人想到 “设计应用程序 ”时，他们考虑的是外壳。

问题是，“应用程序”实际上是一系列功能的集合。在你设计出一些功能之前，你甚至都不知道需要哪些信息来决定导航应该如何工作。这也难怪会令人沮丧！

与其从外壳开始，不如从实际功能开始。

例如，您正在构建一项航班预订服务。您可以从 “搜索航班 ”这样的功能开始。

您的界面需要：

从这里开始。

见鬼，你可能根本不需要其他的东西–谷歌就是这么做的。

在设计新功能的最初阶段，重要的是不要纠结于字体、阴影、图标等低级决定。

这些东西最终都会很重要，但现在并不重要。

如果你在浏览器或你最喜欢的设计工具等高保真环境中工作时难以忽略细节，Basecamp 的杰森-弗里德（Jason Fried）喜欢用的一个技巧是用厚厚的夏普笔在纸上进行设计。

用夏普笔无法专注于小细节，因此它是快速探索各种不同布局创意的好方法。

即使你准备以更高的保真度来完善一个想法，也要抵制立即引入色彩的诱惑。

通过灰度设计，你不得不使用间距、对比度和大小来完成所有繁重的工作。

这样做会更有挑战性，但你最终会得到一个层次分明、更清晰的界面，以后再用色彩来强化也会更容易。

低保真设计的全部意义在于能够快速行动，这样你就可以尽快开始构建实物。

草图和线框图是一次性的–用户无法使用静态模型做任何事情。用它们来探索你的想法，并在你做出决定后将它们抛在脑后。

在开始实施之前，您不需要设计应用程序中的每一个功能；事实上，最好不要这样做。

要想知道产品中的每个功能应该如何交互，每个边缘情况应该如何显示，这真的很难，尤其是在抽象的情况下。

如果用户有 2000 个联系人，这个屏幕应该如何显示？

这个表单中的错误信息应该放在哪里？

如果同时安排了两个活动，这个日历应该如何显示？

如果仅凭设计工具和想象力就想弄明白这些问题，会让自己陷入挫折之中。

与其事先设计好所有东西，不如缩短工作周期。从设计下一个要构建的功能的简单版本开始。

一旦你对基本设计感到满意，就把它变成现实。

在设计过程中，你可能会遇到一些意想不到的复杂问题，但这正是问题所在–在实际使用的界面中解决设计问题，要比事先设想每一种边缘情况容易得多。

对工作设计进行迭代，直到没有问题需要解决为止，然后跳回设计模式，开始下一个功能的开发。

不要在抽象的工作中不知所措。尽早构建实物，这样你的想象力就不必承担所有繁重的工作。