如果你是独立开发者或小团队的一员在开发产品，你可能在设计上遇到过挑战。

打开Figma后。你选择一个字体。然后是一个颜色调板。接着看看一些Dribbble上的设计。然后你开始研究动画、模糊效果、新慕主义等……突然发现已经花了三个小时调渐变，但你的设计感觉还是不对。

这里有个问题：你把设计想反了。

设计不是关于你的应用程序看起来如何，而是关于它让人们可以做什么，以及他们可以多容易地做到这些。

那就是我遵循的一个超级简单的规则：

先设计功能，然后再考虑美观。

设计不是关于某物看起来怎么样，而是关于它让人们能做什么。

当你过早地关注视觉细节时，你就是在为一个还未经过验证的想法做装饰。但当你专注于核心功能需求，考虑屏幕上需要展示什么，用户如何操作界面，以及用户会进行哪些操作时，合适的界面就会自然显现。

这种心态帮助我打造了UserJot（https://userjot.com?utm_source=devto&utm_medium=post&utm_campaign=grayscale_design），一个面向SaaS团队的反馈工具。我独自一人完成了整个产品的开发，一开始并没有设计华丽的用户界面。我从一个清晰、简洁的布局开始，确保反馈流程顺畅无阻。它虽然不花哨，但确实管用。这才是关键的。

许多开发者在甚至还没搞清楚应用程序要做什么之前就开始着手设计，挑选字体、颜色和定间距。

这就像是为一栋还没盖起来的房子挑选装饰一样。

从内部开始:

• 用户需要做的是什么主要动作？
• 支持这一动作的最简单流程是什么？
• 哪些组件是必不可少的？

先搭个框架，设计好布局和交互，最后再考虑美观。

设计得好就像搭建前端技术栈一样。

1. 结构（布局和流程设计）
2. 内容（实际内容、标签、按钮）
3. 间距和层级（视觉层次感）
4. 互动性（过渡、反馈）
5. 视觉样式（颜色、字体、图形）

每一层都基于前一层。如果你的布局和间距已经很稳固，即使是一个使用系统字体的灰度界面也会感觉很棒。

如果你从最外层的样式开始，而没有打好基础，它几乎总是会垮掉。

这就是我为什么建议采用黑白来设计初始版本。

灰阶要求你

• 固定好布局
• 合理运用对比和间隔
• 建立清晰的视觉层次

把界面变成灰度也很难掩饰其糟糕的设计，这正是问题所在。

要是黑白效果不错，彩色的效果肯定更好。
要是黑白效果不行，彩色也救不了。

这里有一个重大的发现：

用户最关心的产品部分是它帮助他们做的事情，也就是产品的核心功能。

那里承载了90%的价值，也是决定一个人是否会留下来还是离开公司的关键。

添加诸如阴影、圆角和动画等美学元素可以提升这种体验，但这些元素无法完全替代这种体验。

它们是最后的10%，这部分让东西感觉更美好，而不是让它运作的部分。
很多时候，如果它们让你的产品变得更慢或更复杂，可能不加它们会更好。

这里有一个事实：卡顿的动画或令人困惑的悬停特效会让用户觉得你的产品体验更糟糕。

一些例子，比如：

• 一个卡顿的滑入菜单，经常掉帧
• 一个模糊的阴影，让按钮变得模糊，难以点击
• 一个柔和的色板，让对比度变得很低

简洁实用优于浮夸易坏，每次都是。

如果处理某个效果有困难，就直接略去。
清晰胜过刻意的风格。

• 在绘制流程图之前选择配色方案
• 在编写实际内容之前选择字体
• 过早添加动画
• 设计与实际用户需求无关的UI元素

这些都是干扰。你正在解决那些还没出现的问题。

以下是如何进行你的下一个UI设计项目的做法：

1. 从灰度线框开始布局页面
2. 使用真实文本（不要使用那些假的 lorem ipsum）
3. 调整间距和字体大小，确保操作流畅
4. 构建产品核心流程
5. 通过实际使用来验证其有效性
6. 完成以上步骤后，再添加颜色、图标和过渡效果等

那就是我用UserJot做的。我让它尽可能简单，专注于反馈、易懂和速度。等它开始运行并且有人开始使用它之后，我才开始加入视觉改进。

这是用户Jot的反馈仪表盘

而且我不用回溯一堆糟糕的设计决定，因为基础本来就很好。

最后的想法：你不需要太复杂的东西

大多数人觉得设计就是装饰。
但，好的设计，特别是早期的产品，更看重实用性和清晰性。

从简单开始。
按正确的顺序一层层地构建。
先让它有用，再让它漂亮。

先做好布局。
再搞定流程。
就可以发布了。
这才是真正的好设计。