哪樣算是舒適的黑色？關於深色系網站設計的五個技巧

Yohji Yamamoto 官網

「黑色是一種最有態度的顏色」
By 山本耀司

要有層次的黑。

具有質感的黑。

讓人覺得舒適的黑。

當我聽到客戶對於黑色有這樣的要求時，我就會想起這位已年過七十的日本時裝設計師，在他的作品中，可以看到各種各樣的黑，他對黑色有著近乎瘋狂的熱愛。

服裝設計有豐富的材質和剪裁、衣著風格可以運用。

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

前言

一般常見的網頁與APP，仍然是以白底、淺色底居多數，而在2019年，有文章討論到在 Android 開發者文件中，Google 曾說明了深色模式的三項優勢，分別為改善續航(省電)、提高對強光敏感者的可視性(無法護眼，但對畏光者友善)，以及讓用戶在光線不足的環境下更好地使用設備(聚焦視覺重點)。

或許是這樣更省電吧，網站、瀏覽器、通訊軟體、社群軟體，也都陸續推出夜晚模式。

近幾年的Netflix也是這樣的深色路線，也的確讓人感覺有種時髦感。

以下整理了關於深色系網站設計的五個技巧，其中有些資訊來自Google Material設計指南，若有興趣可以去看看更多設計資源。

希望能為初次接觸深色系的設計師有所幫助。

一、深色的定義

深色不等於黑色，而黑色網站不等於要用純黑色。

在設計的時候，為了避免讓畫面看起來太過死版、太過剛硬，通常會避開使用#000000的純黑色，改用#222222左右的黑色，或讓黑稍微帶一些不同的顏色。

純黑底與純白底，都會出現高對比的色差，會很容易讓人視覺疲勞，這時候將黑色稍微調淺一點點，或讓白色稍微帶一點灰，都能讓整體的視覺舒適不少。

二、搭配的輔助色、點綴色，需要進行色階整理

文字與整體搭配用的輔助色、點綴色，在黑色或深色背景時，建議使用較淺且飽和度不要過高的色階，較淺的顏色不僅能緩解視覺疲勞，並提升網站的閱讀性。

有些網站會特意做比較刺眼、特別的螢光色設計，但那或許是設計師針對產業和客群所制定的策略，一般日常碰到的中小企業，不一定能接受過於標新立異的配色，會更傾向以舒適、好閱讀的風格為主。

接著，可以觀察看看下圖的顏色配置，會發現彩度越高的顏色越刺眼(鮮豔顯眼，但是容易造成視覺疲勞)，用在按鈕上或許還可以有醒目的效果，但若用在文字上，閱讀時將會非常不友善。

三、留意視錯覺

請觀察下面的兩張圖。

有發現嗎？在相同間距的情況下，在深色底的列表，文字和欄位距離會感覺比較擠。

但數值明明是一樣的，在深色底卻感覺距離不太夠，淺色的文字在深色底會有種放大的錯覺，而範例中使用的內容文字，一樣都是設定15px和淺灰色，在淺色底的文字層級感覺有被整理過，但放到深色底，文字看起來就感覺變亮了，不如淺色底的層次感。

四、光與影

利用適當的光影變化，能讓畫面依照設計師所規劃的視覺動線呈現。

在淺色的介面或網站設計時，常常會使用陰影來表現物件的前後或層次。

但一樣的效果，在深色底的呈現上就沒有那麼明顯，在看不出來的情況下，其實就不需要在深色底裡面做陰影的效果，可改用光暈、漸層之類的方式展現層次感。

五、半透明遮罩

讓底圖和文字之間，再增加一層半透明遮罩，讓文字更清楚，這是很常見的手法。

不只應用在深色網站上，淺色網站也常常會用來讓大圖的文字更清楚。

有時候我們也會看到那種把顏色完全抽掉的濾鏡，在滑鼠滑過時才變回彩色。

這種方式能讓網站的顏色像被整理過，但並不是全部客戶都接受XD

結尾

在山本耀司旗下的品牌網站，能看到很多對於黑色的處理，除了加上一層遮罩，也有這種在圖片側邊直接刷黑，讓文字更清楚的做法。

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

將網站中可以學習的觀念吸收，這些技法都將成為我們設計的養份。

深色設計並不僅僅是追求一種時尚或潮流，而是一種人們對視覺舒適度的深刻理解。

正如山本耀司在他的作品中所展現的，黑色並非只有單調或壓抑，而是充滿了無限的可能性和深邃的美感、層次感，而在網站設計中，這樣的理念同樣適用。

每一個色彩、每一道光影、每一層半透明遮罩，都是設計師與使用者之間的無聲對話。

當我們能熟練運用這些元素時，就能打造出擁有良好體驗與質感的深色設計。

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

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