以前，当我的团队和我在设计我们的应用程序的用户界面时，我们全力以赴，注重功能胜过形式。并非出于选择。我们正在处理这个错误，没有人知道是什么原因导致的，我们需要在午夜前让MVP运行起来。打磨界面并不是我们列表中最紧迫的事情。

现在风暴已经过去，我们正试图将我们的应用市场推向更广泛的受众，UI/UX 是一个大问题，伙计们。让我们真实一点，当你访问一个设计糟糕的网站时，你只想点击关闭，是吧？更糟糕的是，这甚至可能影响你品牌的声誉。据报道，网站的美学形成了用户对可信度判断的75%。因此，为了我们的应用不会失败，我们需要重新设计。 我们的初始原型是在 Figma 中设计的。回想起来，我们都不是设计大师或 Figma 的高级用户，甚至可能由于使用它而减慢了我们的速度。但没有遗憾，这都是学习经验。

尽管如此，值得一提的是，即使使用像 Figma 这样强大的工具，所生成的原型仍然没有达到它本应具有的效果。一个例子就是，重要的不是工具，而是你如何使用它。

那么你如何使用它呢？我相信有很多种方法，但我想更多地谈谈贯穿各种工具的主要思想。基础原则。

如果你问我在设计原型之前是否了解了 Nielsen 的10个可用性启发式，我会说是的。显然，尽管知道它们是什么，但在原型中一些启发式我未能实施。所以让我们来回顾一下。

**1. 系统状态的可见性
**没有人喜欢不知道发生了什么。你不希望用户认为你的应用程序崩溃了，因为这会让用户感到焦虑。 他们认为系统“没有响应”，而实际上只是在加载。

系统在处理请求时显示加载消息 — Gmail

**2. 系统与现实世界的匹配
**系统应设计为反映现实世界，即使是初次使用者也能直观地使用。

计算器应用程序的布局与真实计算器相似 — Vivo手机上的计算器应用

**3. 用户控制和自由
**我们都会犯错误，预计用户也会犯错。当用户即将执行重要操作时，增加摩擦，要求他们确认。如果可能的话，提供撤销或取消选项。

在删除电子邮件时提供撤销选项 — Gmail

**4. 一致性和标准
**您希望您的系统与自身以及其他应用程序保持一致。这意味着遵循某些标准，如拥有设计指南，使用广泛认可的图标，使用常见格式等。

垃圾桶图标是一个普遍认可的删除操作符号 — Gmail **5. 错误预防
**预防胜于治疗。系统应该防止用户犯错误。

日程安排不允许过去的时间 — Google 日历

**6. 辨识而非记忆
**用户不应该每次想进行操作时都要思考。元素应该一目了然，系统应该提示用户应该做什么。

系统显示了建议的文件，用户很可能会想要继续处理这些文件，而不是让他们试图记住文件名 — Google 云端硬盘

**7. 灵活性和使用效率
**系统设计应该容易让每个人使用，无论他们是新手还是经验丰富的人。其中最常见的例子之一就是快捷键。快捷键应该不会打扰新手用户，但对经验丰富的用户来说又足够易识别。

用户可以通过用户界面样式化单词，或者更快地使用键盘快捷键，就像大多数文本编辑器那样。 **8. 美学和极简设计
**只展示重要内容。不要出现让用户感到困惑的杂乱设计。

清晰的CTA极简设计以进入搜索 - 谷歌

**9. 帮助用户识别、诊断和从错误中恢复
**我们尽力预防错误，但如果错误发生，我们需要帮助用户自助解决。错误信息应该清晰明了，普通公众可以理解，并提供解决问题的见解。

输入错误密码时的错误消息 - Gmail

**10. 帮助和文档
**帮助用户自助解决问题的另一个要点。提供清晰、逐步（但不要太长）的说明是个好主意，用户可以参考。

帮助资源的汇编 - Gmail

**不是工具，但让我们谈谈工具

Figma很棒，很强大，但我们不需要它提供的所有灵活性。此外，我们正在一个冲刺期间重新设计。我们需要快速的东西，一些。 经过试验的，即使是新手也能在相对短的时间内创建一款看起来相当不错的原型。在浏览快速原型工具5分钟后，我发现了Visily (opens new window)。

我的第一印象是“这就像是Figma，但内置了我喜欢的所有插件”。以下是我在重新设计我们的原型时经常使用的一些功能。

预构件

如果你想快速设计一个干净的设计，预构件模板将是你的救星。当然，它们不会是独一无二的，但我们有多少次是要让我们的注册页面成为焦点呢？

这个注册页面只花了我大约一分钟就完成了。我只需要微调一些资源并调整字段。它看起来非常基础，但它能正常运作，绝对没问题。

如果你想对设计有更多控制，那么考虑使用预构件元素（而不是基本上是整个页面的模板）。

它具有所有基本元素。 这是一个网页，非常方便。例如，我喜欢这个按钮直接就是一个带有可编辑标签的按钮。

这比创建一个矩形，然后创建一个文本框，然后对齐两者来模拟按钮要快得多。按钮非常常见，它们随处可见，因此预先构建它们可以节省大量时间。

一个好的设计具有和谐感。您希望组件和页面的整体外观和感觉看起来相同，以免用户认为他们已被引导到另一个网站。您必须具有品牌意识，知道我在说什么吧？

Visily有一个很棒的功能叫做“项目主题”，您可以在其中标准化设计的基本方面，包括颜色、字体、阴影和圆角。它们可能只是四种东西，但相信我，它们有巨大的影响。

以上是我们原型的配置。

这个功能很棒，因为当您创建新组件时，Visily会自动设计成符合您的主题，使一个组件 除了编辑文本之外，此图表是在1（一）点击中创建的，其设计从一开始就符合品牌标准。

如果您懒得设计自己的主题，您可以从他们的库中选择，或者也可以从其他来源提取。

代码检查

我们是设计师，但也是我们应用程序的开发人员。我们不会拒绝捷径。

一旦您确定了设计方案，您可以使用Visily中的检查模式查看代码的外观。目前，他们只提供CSS，但将来可能不会是这种情况。

前面提到的项目主题还具有此功能，您可以将主题的配置导出到Tailwind中。

我发现这非常方便，因为我不可能从每个组件中逐个检查和复制粘贴：

组件保存

如果您喜欢在React中进行组件化设计的概念，这就像它的原型版本。

假设我有这个图表（最右边）在分析页面中，但我想... 我可以按CTRL + S键保存该图表并将其添加到我的已保存组件中。

然后，我可以转到我的主页，从我的收藏中取出该图表并将其添加到页面上。

在一个地方组织所有组件很好，而不是每次想要复制粘贴时都在画板周围搜寻。

Visily AI

没有提到AI，2024年的文章真的算是一篇吗？ - 我，在我的上一篇文章 (opens new window)中说道

Visily有很多AI，但我只会谈论Color Assistant，因为那是我经常使用的。

Color Assistant会自动检测设计中缺乏对比度的部分，并用一个魔杖图标标记出来。

如果你点击魔杖，你会看到这条消息以及尝试Visily建议的选项。

这是接受建议后的结果。

尽管我应该补充说， 人工智能在某些情况下效果不佳。例如，当组件故意缺乏对比度时，Visily仍会标记它。然而，您可以选择忽略这些标记。