哪樣算有層次的白色？關於淺色系網站設計的三件事
「白不只是顏色，而是一種感受。」
By 原研哉
「我們不需要尋找白，而是要尋找能夠感覺白的方式。」
這是日本平面設計大師、無印良品（MUJI）藝術總監——原研哉對於「白」的理解。
對他來說，白不只是顏色，而是一種狀態與感受。
在原研哉所著的《白》裡面，他運用水墨畫來舉例說明「留白」的意義——在什麼都沒有的地方，反而讓人激起更多想像。
白是包容一切的顏色，它能讓重點更加清晰。
設計師在實際運用「白」這個元素時，不只是單純使用CMYK0或者#FFFFFF的白色。
而是要思考整體的氛圍，非白色的地方所出現的留白，其實也是一種白。
在做平面設計時，有機會運用紙張、布料、塑料來增加質感變化。
那在網站設計上，又會如何呈現白色呢？
前言
這是上一篇深色系網站的姊妹篇，裡面所提到的技巧其實也通用。
只是淺色網站需要留意的比例不同而已。
在接觸網頁設計時，大多數的案件都會是淺色系需求，在白底的基礎上，搭配不同的視覺形象標準色點綴，是最常見的網站基本外觀。
在CMYK的世界，就算只是單純的「白色」，人們可以利用觸覺、視覺、嗅覺來讓設計品有更多的層次變化，比如有凹凸紋理觸感的紙張、會閃爍的金箔燙印、帶有香氣的卡紙。
而RGB世界中的網頁設計，則是在視覺、聽覺上面營造氛圍，我們能看到某些網站的某個區塊或物件有轉動、滑動的特效，點開某個旅遊網站，或許會傳來蟲鳴鳥叫的聲音。
這篇文章，希望提供一些白色、淺色設計的靈感與技巧。
讓設計師或專案經理跟客戶溝通所謂的「簡約」、「俐落」、「層次」時，能有更具體的討論方向。
一、淺色的定義
淺色不等於白色，而白色網站不等於要用純白色。
在開始設計前，請多去觀察其他的淺色網站，用滴管工具吸色看看，會發現有不少網站會是容易被當作白底的「淺灰色」。
或者，為了凸顯白色區塊重點，而出現的灰底。
比如方格子的首頁，淺灰色的底與灰線、白色區塊，將版面先依照比例劃分好區塊。
方格子 - 首頁截圖 - 底色使用F6F6F6
方格子 - 成就列表截圖
在這個情況下，淺色網站的定義就變廣泛了。
設計師可以依照網站VI的顏色，去規劃底下的「淺灰色」如何呈現。
比如
稍微帶一點藍的淺藍灰，能讓冷色調網站氛圍更協調。
用白色搭配著有些暖色調的米灰色，讓整體看起來溫馨些。
淺色示意圖
為了避免產生視覺疲勞，大部分的純白底設計會大量利用淺灰色做搭配。
這些「淺灰色區塊」也有可能是網狀紋路、水泥牆面、石材紋路、紙張材質等圖。
也能運用圓點、線條等幾何元素，讓整體的視覺舒適不少。
淺色運用元素示意圖 - 網、線、點、磚、石、牆
二、運用間距與區塊感，引導視覺動線
這一點直接看範例會更好懂。光看文字真的很難懂
1~2 ：決定好LAYOUT，並將區塊和文字利用間距群組化。
3~4 ：決定好圖片內容，選擇能讓視覺往右的構圖，圖片中的綠色箭頭位置，就是有向右延伸的構圖。
某些情況下，到這個階段就已達到客戶所想要的簡約。
但圖片本身其實還可以調整，讓顏色更穩重，更撐得起這個區塊的留白。
5~6：加進區塊感，調整圖片顏色，增加建物質感底紋，調整顏色 (灰色配合圖片色系，變成米灰色)
※ 延伸閱讀
以上範例圖，已在LAYOUT階段就編排好文字的大中小層次。
要如何讓區塊段落層次分明，可參考以下文章的第四點。
三、關於產業靈感
白底網站非常萬用且常見，若用「士農工商」做產業劃分，最百搭的當然是單純的淺灰色塊，或者直接用滿版的圖片做區塊切分。
在設計時，若對於「要如何簡約而不陽春」感到苦惱，或剛好碰到那種希望淺色網站能有豐富層次的客戶，那可以試著在思考過程中，去想想、去看看該產業都在做些什麼，漸漸地會發現有不少形象元素、幾何圖案可以運用。
比如「室內設計、建設營造業」相關的產業，在網站設計時很喜歡使用牆面與石材的紋路，這能讓人第一眼就感覺到網站與產業的連結。
網站要能具有商業價值，並要和客戶產業有所連結。
除了VI規範中的運用，還可以繼續往這個方向思考：
思考客戶的店面裝潢，是否有什麼「材質」？
復古的磚牆還是溫潤的木材？
讓網站與店面形象一致，能更具備品牌感。
思考客戶的產業型態，是否有什麼「象徵」？
比如
汽車美容或寵物美容服務，在「洗」的商業行為下，會有「泡泡」。
海鮮產地直送、海洋調查服務，在「海洋」的元素，會有「波浪」。
果汁茶飲等飲料店，是否可利用「珍珠奶茶」的「圓點」。
結尾
我們需要習慣思考，去構想要如何利用這些元素，讓客戶「能夠感覺白」。
就像之前說的，提升自己觀察力最好的方法，就是去多看。
而淺色系網站，會更需要花時間認識產業、調整間距，才能避免一個不小心，就讓留白這件事變得陽春，設計師需要引導人們的視覺，這點和深色系網站是一樣的，每一個色彩、每一道光影、每一塊留白，都是設計師與使用者之間的無聲對話。
希望以上的介紹能讓逛到這邊的設計師找到一些靈感~
也歡迎跟我分享淺色系的網站 : )
