Whimsical 是一款允许您创建流程图、线框图和思维导图的应用程序，但直到今天我才知道其网站有多棒——尤其是产品页面。查看此页面，其中介绍了如何使用 思维导图功能，您可以在营销网站上直接使用该产品。
很巧妙，对吧？这完全是通过 <canvas> 元素 的力量实现的。当然，您可以使用 SVG 创建类似的东西，但 在选择 SVG 和 canvas 之间 始终存在一条模糊的界限。
但是，在设计方面，我喜欢广告就是产品的这个想法。我还喜欢省去所有通常的注册麻烦，向用户展示应用程序的价值。大多数产品都会要求您注册并完成入门指南，然后才能看到产品的价值。但这里并非如此；广告就是产品！
此外，我只是喜欢这个东西的设计。每个产品功能都有自己的主题，这使得您在浏览时产品演示更加突出。这是一个小细节，但它让我想要探索网站的其余部分，看看还有哪些花哨的 UI 小玩意儿。
我还喜欢能够直接跳转到线框图的工作示例。没有关于该应用程序如何革命性或如何永远改变思维导图艺术的营销宣传。一切都让路，首先向您展示产品。
但是！再回到导航：选择不标记这些图标是一个有趣的决定。它很漂亮，但每个图标都代表什么？Chris 在之前的一篇文章中对此进行了探讨，他在文章中问道：图标是内容吗？ 也就是说，关于是否标记图标的争论在软件设计中已经持续了几十年。Jef Raskin 是 20 世纪 80 年代最初的 Macintosh 设计师之一，他写了一本很棒的书《人性化的界面》，他在书中论证了我们永远不应该留下未标记的图标。也许这有点过分，但在这种情况下，我认为标记这些图标并不会有害，因为它们是特定于产品的，而且思维导图图标不是我们每天都能看到的。
Whimsical 的排版也很有趣！他们使用的是 DIN Next，至少对我来说，这与视觉设计有点格格不入。DIN Next 是一种容易被忽略的字体，旨在退居幕后，让展示的字体成为焦点。
但我认为字体的成功归功于疯狂的视觉设计——UI 中随处可见的波浪线、漂浮的圆圈和月球形状。话虽如此，也许当您的 UI 视觉效果如此强烈时，您不希望字体过于突出，我的意思是积极的意义上的强烈。
设计这样的界面的诀窍是确保考虑到颜色可访问性。Stacie Arellano 在之前的一篇文章中写过 为什么颜色对比如此重要
您可以数学地知道两种颜色之间是否有足够的对比度。
W3C 有一份名为 Web 内容可访问性指南 (WCAG) 2.1 的文档，其中涵盖了 成功的对比度指南。在进行数学运算之前，我们需要知道我们旨在达到或超过的对比度比率分数。要获得及格分数 (AA)，大多数正文的对比度比率为 4.5:1，较大文本的对比度比率为 3:1。
我不会在这里仔细检查 Whimsical 的数字，但值得关注……尤其是当 UI 在明亮多彩的背景上有很多白色文本时。我犯过不止一次这样的错误，而且很容易出错。但如果用户无法阅读 UI 中的文本，那可是个大问题。
总之，Whimsical 产品的这个网站令人耳目一新。它视觉效果惊人，并且表明可以通过展示和讲述而不是讲述和讲述来传达产品的价值和功能。
这让我想要问您一个问题：您最近访问过哪个网站吸引了您的注意？
他们的网站不仅很棒……我还尝试过这个应用程序，在我检查过的所有思维导图软件中，Whimsical 是一见钟情。事情按我预期的那样进行，并且该应用程序似乎在每一步都引导用户。
您认为他们在实际产品中使用了什么？SVG 还是 Canvas？我觉得他们一定使用了 canvas 来使其具有交互性。使用 SVG 来制作这样的工具将会非常困难。
我知道这是一个愚蠢的问题。我非常了解该平台，但有可能在 WordPress 中创建这样的网站吗？当然，我需要进行大量自定义工作。我从客户那里获得了相同的要求。