編輯嚴選
製作暗黑風格的網站?你的品牌適合嗎?3個一定要掌握的TIPS!

2020/08/26閱讀時間約 4 分鐘
暗黑風格主題或是暗色模式是現在許多網站或是手機程式會提供給用戶選擇的模式,暗黑風格也已經應用於許多知名的品牌網站與應用上,比如說YouTube、Gmail、Facebook messenger等等。過去的網站設計中,大家習慣使用亮的背景搭配深色的字,而現在暗底亮字卻成為一種新的流行,到底暗黑風格有什麼優勢呢?
暗黑風格主題或是暗色模式是現在許多網站或是手機程式會提供給用戶選擇的模式,適用於各種裝置的尺寸。暗色系風格已經應用於許多知名的品牌與應用上,比如說YouTube、Gmail、Facebook messenger等等,而暗色風也是2020年八大網站設計創新趨勢之一。

為什麼這麼受歡迎?

過去的網站設計中,大家習慣使用的亮的背景搭配深色的字,而現在暗底亮字卻成為一種新流行,為什麼呢?
  • 對於OLED手機來說,能省下45–60%的電量
  • 暗色主題對眼睛的負擔更小,我們一天工作回家後,眼睛需要休息,長期盯著白色的物體眼睛容易疲乏
  • 暗色主題呈現一種更精練、時尚的感覺

暗黑風格的特性

暗黑風格如此大受歡迎,究竟有什麼樣的特性呢?
  • 暗色的背景,配上明亮的文字
  • 通常會搭配很多留白空間
  • 中性的顏色
  • 柔和、舒緩的色調與色溫
  • 鮮明的對比
而這種黑暗主題風,會套用完全不一樣的UI設計,同一個網站或是app,在換上暗黑風格主題後,往往呈現一種全然不同的視覺效果。
比如說YouTube的暗黑風格主題模式,我們一起來看一下有哪裡不同吧!
YouTube
YouTube的暗黑風格主題模式
在灰白色的YouTube底色上,文字基本上是用黑色顯示而成,針對按鈕的部分,則是採用比底色更深的灰色,按鈕的反白用的是跟品牌色一樣的紅色,實為醒目。
而改成黑色主題後,文字改為醒目的白色,而按鈕則是深灰色,搭上白色的反白色,讓整個畫面看起來非常和諧、舒服。
說到這裡,我們不禁想,所有品牌都適合用這種暗色風格主題嗎?

誰適合用暗黑風格主題?

大部分與娛樂相關的品牌,比如說遊戲網站、電視、電影似乎都是用暗色風格主題的UI設計,因為通常這些網站的活動時間都設定在晚上,或是在昏暗的環境中使用,所以螢幕就會使用與環境相符的暗色系,讓其他宣傳圖等能夠從黑暗中跳脫出來。
比如說,Apple TV和Netflix就採用了全黑的UI設計。
Apple TV網頁
Netflix
所以如果你的品牌也在考慮使用暗色風格的主題,你可以問自己這些問題:
  • 網站的內容是什麼?
  • 使用者通常會在什麼時段使用網站?
  • 使用者通常會在哪裡使用網站?
  • 使用者通常會用什麼裝置使用網站?
如果你的網站也想做到下列這些事情,那麼或許你就該使用暗色主題。
  • 創造一種強烈的、戲劇性的視覺效果
  • 彰顯出一種時尚、優雅、奢華、有聲望的感覺
  • 創造一種有趣、神秘的感覺
  • 使用最少的干擾讓使用者注意力集中

誰不適合用暗色風格主題?

如果你的網站會用到大量的文字、資訊,或是包含非常多不同種類的內容形式(文字、圖片、影片、下拉選單、資訊圖表等),那麼就不適合用暗黑風格主題風。暗色主題風對於設計來說是有一定的挑戰的,在白色背景上,幾乎所有的顏色都適用,但是在黑色的背景上,就會有許多的限制。

使用暗色系3大TIPS

如果你今天已經打算使用暗黑風格主題了,那麼一定要知道這3大TIPS。

1. 盡量不要使用全黑色

雖是暗色系,但全黑色配上全白色不一定是最佳的選擇,有時候反而會造成反效果,讓眼睛更為疲憊。所以比較保險的作法用深灰色作為主要的背景顏色,如此一來,呈現的對比就不會過於刺眼。
下面是幾種不同顏色使用上的比較。
使用暗色系3大TIPS|盡量不要使用全黑色
Material Design則是推薦使用#121212作為暗色背景。
使用暗色系3大TIPS|盡量不要使用全黑色

2. 盡量不要使用飽和色

飽和色調在亮色背景上看起來很舒服,但是在暗色背景上反而顏色會被吃掉,讓文字更難閱讀。
UX planet建議大家使用200–50區隔內的顏色,在暗色背景上有最佳的效果。
使用暗色系3大TIPS|盡量不要使用飽和色

3. 暗色背景會激發不同的情緒效果

之前在顏色使用大全中,我們有提到不同的顏色會給人不同的情緒效果。而暗黑風格主題也是如此,品牌不能期待暗色主題與亮色主題為用戶帶來同樣的情緒,也不需要強加的去修正這件事情,而是應該將其視為產品的優勢。
希望看完這篇文章,為你提供了更多資訊決定是否要採用暗色風的網站。如果決定要著手開始製作網站了,可以看這篇FOLLOW這八個簡單步驟,設計出最強的網站!
為什麼會看到廣告
哈利熊HoliBear
哈利熊HoliBear
大家好,我是稀有的橘色熊熊 – 哈利熊,橘色的毛髮象徵我的熱情以及創造力!
留言0
查看全部
發表第一個留言支持創作者!