我们喜欢的网站：异想天开

Whimsical: 一款令人眼前一亮的流程图、线框图和思维导图创作应用。最近，我发现其网站设计，特别是产品页面，非常出色。例如，介绍思维导图功能的页面，可以直接在营销网站上体验产品。

是不是很巧妙？这全部得益于<canvas></canvas>元素的强大功能。当然，你也可以用SVG实现类似效果，但在选择SVG和<canvas></canvas>之间，总有一条模糊的界限。

然而，就设计而言，我喜欢这种“广告即产品”的理念。我也喜欢摒弃常见的注册流程，直接向用户展示应用的价值。大多数产品都要求用户注册并完成新手引导才能体验其价值，但Whimsical并非如此；广告本身就是产品！

此外，我非常喜欢这个网站的设计。每个产品功能都有其独特的主题，让产品演示在浏览时更醒目。这是一个小小的细节，但却让我想要探索网站的其余部分，看看还有什么精巧的UI元素。

我也喜欢可以直接跳转到线框图的实际示例。这里没有关于应用如何革命性或如何改变思维导图艺术的营销宣传。一切都是为了首先向你展示产品本身。

但是！让我们再回到导航：不标记那些图标是一个有趣的决定。它很漂亮，但每个图标是什么意思呢？克里斯之前在一篇文章中探讨过这个问题：图标是内容吗？也就是说，关于是否标记图标的争论在软件设计领域已经持续了几十年。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的产品网站令人耳目一新。它视觉冲击力强，并表明可以通过“演示”而不是“讲解”来传达产品的价值和功能。

这让我想到一个问题：你最近访问的哪个网站吸引了你的注意？

以上是我们喜欢的网站：异想天开的详细内容。更多信息请关注PHP中文网其他相关文章！