原文：Analyzing Good Designs: Ritual.com

有時候我們看到一個網站，第一個反應會是「這個設計很好看」，但真的要說它到底好看在哪裡，反而不一定講得出來。這支影片就是拿 Ritual.com 的頁面來拆解，從 Visual Hierarchy、Color Palette、Imagery 到 Consistency，去看一個設計為什麼會讓人覺得舒服、精緻，而且不是單純靠感覺。

我覺得這支影片最有意思的地方，是它把「好看」這件事拆成可以觀察、可以討論的設計決策。也就是說，設計不是「這個人很有美感，所以做得好看」，而是畫面裡很多小決定疊起來的結果。

第一個重點：Visual Hierarchy，決定使用者第一眼先看到什麼

影片先從 Visual Hierarchy 講起。簡單來說，就是使用者的眼睛進到頁面後，會先被什麼吸引，以及為什麼。

Ritual 的頁面裡，最先被注意到的是最大的文字標題，因為 Size 本身就會建立優先順序。接著是產品圖片，再來是按鈕。按鈕除了位置之外，也因為用了比較亮的黃色，所以很容易從整體畫面裡跳出來。

我覺得這裡可以直接記成一個很簡單的概念：不是所有元素都應該一樣重要。

如果一個頁面裡標題、內文、圖片、CTA 全部都在搶注意力，使用者反而不知道要先看哪裡。好的 Visual Hierarchy 其實是在幫使用者安排閱讀順序。

所以做 UI 時，不只是問「這個字夠不夠大」，而是要問：「我希望使用者第一眼先看到什麼？第二眼看什麼？最後希望他做什麼？」

第二個重點：Color Palette 不只是好不好看，也要讓角色分得清楚

這個頁面的 Color Palette 很簡單，主要就是 Blue 和 Yellow。影片提到，這兩個顏色本身是互補色，所以 Contrast 很明顯。

但更重要的是，它們在畫面裡有不同功能：Blue 大多用在內容上，Yellow 則被拿來當 CTA。這樣使用者不用特別思考，也可以很快知道「黃色的東西比較像是可以互動的」。

我覺得這比單純說「這組配色很好看」更有意思。因為好的 Color Palette 不只是視覺風格，它也可以幫忙建立資訊層次和行為提示。

影片也特別提到，顏色本身的選擇也很重要。它不是直接用非常亮、很原始的藍和黃，而是選了比較柔和、有控制過的色調。如果把它換成很亮的 Cyan 和像螢光筆一樣的 Yellow，整體質感就會完全不一樣，甚至有一種早期網頁設計的感覺。

所以顏色不只是「用藍色和黃色」這麼簡單，色相、明度、飽和度本身也都會影響整體質感。

第三個重點：Imagery 不應該只是裝飾

接著影片講到產品圖片。

Ritual 的產品照有一個很明顯的特色，就是產品本身都被放在畫面中心，而且背景很乾淨，沒有太多會分散注意力的東西。這讓整個圖片看起來很 Balanced，也很 Direct。

另外，產品圖的位置和 Grid 也對得很整齊，所以整體會有一種對稱、穩定的感覺。圖片背景也和 Product Card 的背景幾乎融在一起，讓整個畫面看起來更完整，而不是一張張圖片被硬塞進卡片裡。

我覺得這裡最重要的一句話是：圖片應該幫助使用者理解產品或概念，而不是只是為了把畫面填滿。

有些網站會覺得某一塊太空，就放一張 Stock Photo 上去，但如果那張圖和內容本身沒有關係，其實只是在增加 Noise。

Ritual 的照片很簡單，但它很清楚知道要讓使用者看到什麼，所以反而更有質感。

第四個重點：好看的設計，其實來自 Consistency

影片最後把這些原則收回到一件事：Consistency。

Visual Hierarchy 要一致、Color Palette 要一致、Imagery 的處理方式也要一致。如果每一區都自己玩自己的風格，就算單看每一塊都不差，整體還是會有一種很散的感覺。

我覺得 Consistency 很像一個很容易被忽略的東西。因為大家會很注意「這個 Banner 好不好看」、「這張圖漂亮不漂亮」，但真正讓整個產品有質感的，很多時候反而是那些沒有那麼顯眼的規則。

像是同樣層級的標題是不是都用一樣的字級、CTA 顏色是不是固定、圖片是不是都用相同的裁切邏輯、Card 之間的空間是不是一致。

這些東西單獨看都很小，但全部加起來就會決定「這個網站看起來到底有沒有整理過」。

我的延伸思考

1. 「好看」是不是其實可以被拆成很多可以檢查的問題？

我覺得是。

以前看到一個畫面覺得怪，可能會說「這裡好像不好看」，但這種 Feedback 其實很難執行。

看完這支影片之後，我會更想把問題拆開問：Visual Hierarchy 有沒有清楚？CTA 有沒有被突出？Color Palette 有沒有建立角色差異？圖片是不是有幫助理解？Spacing 和 Alignment 有沒有一致？

當「不好看」被拆成這些問題之後，討論就會從主觀變得比較具體。

這對 PM 也滿重要的，因為 PM 不一定要自己做 Visual Design，但至少要能說清楚「哪裡不對」，而不是只丟一句「我覺得這版不好看」。

2. 視覺越簡單，就一定越好嗎？

我覺得不一定。

Ritual 這個案例看起來很乾淨，是因為它有刻意把資訊優先順序、配色和圖片處理得很清楚，不是單純把東西刪光。

如果只是為了追求 Minimal，而把必要資訊也拿掉，使用者還是會覺得難用。

所以我覺得真正重要的不是「少」，而是 每一個留下來的元素都有目的。

這也呼應影片最後講的：Design decisions should be intentional。不是因為現在流行留白，所以就留很多白；不是因為極簡好看，所以什麼都刪掉。每一個決定都要有原因。

3. PM 在沒有專業設計背景的情況下，可以怎麼看 UI？

我覺得可以先從這幾個最基本的地方開始。

不一定要會配色理論，也不用知道每一個 Design Principle 的正式名稱，但至少可以去看：第一眼看到什麼？CTA 清不清楚？顏色是不是亂？圖片有沒有干擾？同一種元件是不是長得一致？

這些問題其實都比「我喜不喜歡這個風格」更有用。

因為 PM 真正要做的，不是代替 Designer 做設計，而是能不能從使用者角度去判斷：這個畫面有沒有把資訊和行動說清楚。

最後

看完這支影片之後，我最大的感覺是：Design 看起來好，不是偶然。

Visual Hierarchy 決定使用者先看到什麼，Color Palette 幫不同內容建立角色，Imagery 幫使用者更快理解產品，Consistency 則把這些東西全部收成一個完整的體驗。

所以「好看」其實沒有那麼玄。

當我們開始可以說出「為什麼這個頁面看起來舒服」，就代表我們也開始比較知道，下一次自己的畫面該怎麼調整。

我覺得這支影片最值得帶走的不是某一條很厲害的技巧，而是一個思考方式：每一個視覺決策都應該有目的。

不是「這樣比較漂亮」，而是「這樣可以讓使用者更快看到重點」、「這樣可以讓 CTA 更清楚」、「這樣可以減少干擾」、「這樣可以讓整體更一致」。

當設計可以講出理由，「美感」就不只是感覺，而會變成一套可以討論、可以調整的設計邏輯。