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

筱涵|Hannah
發佈於與網頁有關 個房間
閱讀時間約 4 分鐘
「黑色是一種最有態度的顏色」
By 山本耀司

要有層次的黑。

具有質感的黑。

讓人覺得舒適的黑。


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


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

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


前言

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

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

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


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


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


一、深色的定義

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

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


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

深色示意圖

深色示意圖


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

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


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


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

深色底的搭配範例

深色底的搭配範例


三、留意視錯覺

請觀察下面的兩張圖。

淺色底深色字

淺色底深色字

深色底淺色字

深色底淺色字

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

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


四、光與影

陰影的使用

陰影的使用

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

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

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


五、半透明遮罩

遮罩應用示意圖

遮罩應用示意圖


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

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

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

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


結尾

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


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

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


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


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

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


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


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

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

2.2K會員
21內容數
二寶媽用瑣碎的時間來寫寫字,紀錄工作和興趣。
留言0
查看全部
發表第一個留言支持創作者!