编码前进行原型设计的 4 个好处

我怎样才能快速完成任务，但又不影响质量？

全面披露：我不是设计师，但作为前端开发人员，我一直在思考：

• 我如何改善我的应用程序的用户体验 (UX) 和用户界面 (UI)？
• 我怎样才能快速完成任务，但又不影响质量？

虽然这篇文章主要回答的是第二个问题，但对于第一个问题，这里有一个建议：

今年我读了一本很棒的书，叫做《重构 UI》，作者是 Adam Wathan 和 Steve Schoger。我强烈推荐！这本书从开发者的角度出发，提供了大量设计技巧，对我来说意义非凡。

如果您想在购买之前尝试一下，您会在上述网站中找到一些截屏视频和文章。

如果你觉得重构 UI 很酷，你应该看看 Adam 和 Steve 正在开发的新项目，叫做TailwindUI。

我怎样才能快速完成任务，但又不影响质量？

几个月前，我开始从事一个名为“我需要它吗？”的副业。这是一款原生 iOS 应用，旨在帮助您在购买非真正需要的东西之前理清自己的冲动，从而避免生活中的混乱。

由于我已经在做一些耗时耗力的业余项目，比如Cephhi，所以我决定针对这个项目改变我的工作流程。于是，我萌生了先原型设计，再编码的想法。

Figma 是关键

如果你还没听说过 Figma，它是一款跨平台工具，可以帮助团队从头到尾创建、测试和交付更优质的设计。它与 Sketch 或 Adob​​e XD 等其他工具类似，但完全免费。

我使用 Figma 已经很多年了，但主要用它来制作一些独立的设计或低分辨率的原型图。但这次我决定为我的应用创建一个完整的功能原型（包括页面之间的过渡效果）：

编码前进行原型设计的好处

以下是在开始编码之前对应用程序进行原型设计的一些好处：

一致性

在编码之前进行原型设计，迫使你仔细思考应用的每个页面/屏幕。当你将整个应用放在 Figma 画布上时，会发生一件非常酷的事情：因为你关注的是森林而不是树木，所以你很快就会发现设计中存在很多不一致之处。例如：你可能使用了两个不同的按钮作为“主按钮”，或者你使用了不同的字体大小或颜色，而不是相同的。尽早发现这些不一致之处可以节省大量时间，并避免你一遍又一遍地重构代码。

所有资产都集中在一个地方

由于所有屏幕都在 Figma 上，因此只需一分钟即可轻松导出所有素材。Figma 还允许您为 iOS 和 Android 生成不同版本的素材。很酷吧？
我还习惯在 Figma 上为每个素材指定一个名称。这样，当我需要使用特定素材时，只需查看我的 Figma 画布即可。以下是我的一些图标示例：

项目规划

设计完整个应用程序后，您将对项目的复杂性有更精确的概念。通过逐页浏览，您将能够识别每个独特的组件，并做出合理的工作量估算。
就我而言，我会将我的设计转化为 Azure DevOps 任务或用户故事。

参考

当你开始编写组件代码时，Figma 画布可以帮你搜索颜色、内边距、外边距、字体大小、字体系列等等。这功能简直无法形容！想想看，你根本不需要费心思考要用哪种字体大小。Figma 已经帮你搞定了。Figma 能帮你节省大量时间，更重要的是，它能让你专注于代码。

您认为这些好处怎么样？

你通常会在写代码之前先设计原型吗？请在下方评论区留言告诉我👇