哪樣算有層次的白色？關於淺色系網站設計的三件事

截圖自原研哉 - 原設計研究所

「白不只是顏色，而是一種感受。」
By 原研哉

「我們不需要尋找白，而是要尋找能夠感覺白的方式。」

這是日本平面設計大師、無印良品（MUJI）藝術總監——原研哉對於「白」的理解。

對他來說，白不只是顏色，而是一種狀態與感受。

在原研哉所著的《白》裡面，他運用水墨畫來舉例說明「留白」的意義——在什麼都沒有的地方，反而讓人激起更多想像。

白是包容一切的顏色，它能讓重點更加清晰。

設計師在實際運用「白」這個元素時，不只是單純使用CMYK0或者#FFFFFF的白色。

而是要思考整體的氛圍，非白色的地方所出現的留白，其實也是一種白。

在做平面設計時，有機會運用紙張、布料、塑料來增加質感變化。

那在網站設計上，又會如何呈現白色呢？

前言

這是上一篇深色系網站的姊妹篇，裡面所提到的技巧其實也通用。

只是淺色網站需要留意的比例不同而已。

在接觸網頁設計時，大多數的案件都會是淺色系需求，在白底的基礎上，搭配不同的視覺形象標準色點綴，是最常見的網站基本外觀。

在CMYK的世界，就算只是單純的「白色」，人們可以利用觸覺、視覺、嗅覺來讓設計品有更多的層次變化，比如有凹凸紋理觸感的紙張、會閃爍的金箔燙印、帶有香氣的卡紙。

而RGB世界中的網頁設計，則是在視覺、聽覺上面營造氛圍，我們能看到某些網站的某個區塊或物件有轉動、滑動的特效，點開某個旅遊網站，或許會傳來蟲鳴鳥叫的聲音。

這篇文章，希望提供一些白色、淺色設計的靈感與技巧。

讓設計師或專案經理跟客戶溝通所謂的「簡約」、「俐落」、「層次」時，能有更具體的討論方向。

一、淺色的定義

淺色不等於白色，而白色網站不等於要用純白色。

在開始設計前，請多去觀察其他的淺色網站，用滴管工具吸色看看，會發現有不少網站會是容易被當作白底的「淺灰色」。

或者，為了凸顯白色區塊重點，而出現的灰底。

比如方格子的首頁，淺灰色的底與灰線、白色區塊，將版面先依照比例劃分好區塊。

在這個情況下，淺色網站的定義就變廣泛了。

設計師可以依照網站VI的顏色，去規劃底下的「淺灰色」如何呈現。

比如

稍微帶一點藍的淺藍灰，能讓冷色調網站氛圍更協調。

用白色搭配著有些暖色調的米灰色，讓整體看起來溫馨些。

為了避免產生視覺疲勞，大部分的純白底設計會大量利用淺灰色做搭配。

這些「淺灰色區塊」也有可能是網狀紋路、水泥牆面、石材紋路、紙張材質等圖。

也能運用圓點、線條等幾何元素，讓整體的視覺舒適不少。

二、運用間距與區塊感，引導視覺動線

這一點直接看範例會更好懂。光看文字真的很難懂

1~2 ：決定好LAYOUT，並將區塊和文字利用間距群組化。

3~4 ：決定好圖片內容，選擇能讓視覺往右的構圖，圖片中的綠色箭頭位置，就是有向右延伸的構圖。

某些情況下，到這個階段就已達到客戶所想要的簡約。

但圖片本身其實還可以調整，讓顏色更穩重，更撐得起這個區塊的留白。

5~6：加進區塊感，調整圖片顏色，增加建物質感底紋，調整顏色 (灰色配合圖片色系，變成米灰色)

※ 延伸閱讀

以上範例圖，已在LAYOUT階段就編排好文字的大中小層次。

要如何讓區塊段落層次分明，可參考以下文章的第四點。

三、關於產業靈感

白底網站非常萬用且常見，若用「士農工商」做產業劃分，最百搭的當然是單純的淺灰色塊，或者直接用滿版的圖片做區塊切分。

在設計時，若對於「要如何簡約而不陽春」感到苦惱，或剛好碰到那種希望淺色網站能有豐富層次的客戶，那可以試著在思考過程中，去想想、去看看該產業都在做些什麼，漸漸地會發現有不少形象元素、幾何圖案可以運用。

比如「室內設計、建設營造業」相關的產業，在網站設計時很喜歡使用牆面與石材的紋路，這能讓人第一眼就感覺到網站與產業的連結。

網站要能具有商業價值，並要和客戶產業有所連結。

除了VI規範中的運用，還可以繼續往這個方向思考：

思考客戶的店面裝潢，是否有什麼「材質」？

復古的磚牆還是溫潤的木材？

讓網站與店面形象一致，能更具備品牌感。

思考客戶的產業型態，是否有什麼「象徵」？

比如

汽車美容或寵物美容服務，在「洗」的商業行為下，會有「泡泡」。

海鮮產地直送、海洋調查服務，在「海洋」的元素，會有「波浪」。

果汁茶飲等飲料店，是否可利用「珍珠奶茶」的「圓點」。

結尾

我們需要習慣思考，去構想要如何利用這些元素，讓客戶「能夠感覺白」。

就像之前說的，提升自己觀察力最好的方法，就是去多看。

而淺色系網站，會更需要花時間認識產業、調整間距，才能避免一個不小心，就讓留白這件事變得陽春，設計師需要引導人們的視覺，這點和深色系網站是一樣的，每一個色彩、每一道光影、每一塊留白，都是設計師與使用者之間的無聲對話。

希望以上的介紹能讓逛到這邊的設計師找到一些靈感~

也歡迎跟我分享淺色系的網站 : )