/ 1 分鐘 / -- views

我把 Neubrutalism 搬上 web,結果...

做 App 的時候我超愛 chunky 邊框跟硬陰影。搬到 blog 上之後才發現:當設計被用在「閱讀」而不是「點擊」時,問題完全不一樣。

我做 App 的時候非常迷 Neubrutalism:厚黑邊、硬陰影、鮮豔色塊、歪歪的貼紙。它有種「我不在乎你想要什麼,我就是這樣」的態度,跟 Apple 推的那種柔和擬物剛好相反。

然後我把它搬到 blog 上。

在 App 上很潮,在文章內文裡是災難

App 是「點擊驅動」的——使用者大部分時間在做選擇、滑動、按按鈕。Neubrutalism 強調明確的可點擊性:粗邊讓你知道「這是邊界」,硬陰影讓你知道「這可以按」。

但文章內文是「閱讀驅動」的。使用者要在大段文字裡停留 5-10 分鐘。如果每段話都被粗黑邊框包起來、每個 heading 都帶著歪歪的色塊裝飾、每個段落底色都不一樣——眼睛會在十秒內舉白旗。

我最後的妥協:hybrid

最後我把它拆成兩層:

  • Chrome(nav、hero、卡片、footer、貼紙、按鈕)→ 全力 brutal,要多 chunky 有多 chunky
  • 內文 → 乾淨易讀,最多在 heading 旁邊加一個小色塊裝飾

中間靠 chunky 區塊邊框銜接,視覺上不會打架,閱讀體驗也保住了。

一些自我吐槽

「為什麼我做 App 的時候沒有這個問題?」 ——因為 App 的內容單位是「卡片」、「list cell」,本來就是一塊一塊的,本來就有邊框。Web 的長文不是。

所以下次有人問我「我的 blog 想做 Neubrutalism 風」,我會說:可以,但記得「外殼 brutal、內文乾淨」這個分界。要不然不出兩篇文章,你自己就懶得開了。

點下去看看會發生什麼事 →

留言 / 想法

有疑問、建議或不同看法?歡迎在下方留言(需要 GitHub 帳號)。