我們喜歡的網站：異想天開

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中文網其他相關文章！