方格精選

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

閱讀時間約 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這八個簡單步驟,設計出最強的網站!
為什麼會看到廣告
avatar-img
142會員
199內容數
哈利熊的職場生存之道與專業技能分享!
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
你知道有一個非常實用的配色技巧嗎?那就是黃金比例60:30:10!這個比例能夠運用在絕大部分的視覺設計上,無論是網站設計、室內設計、App設計、服裝搭配、相片構圖等都能適用。現在就跟著哈利熊一起來看看60:30:10到底是什麼魔法吧!
色彩是視覺設計中一個非常重要的元素,無論是在網站設計或是LOGO設計中,都佔有舉足輕重的地位。今天,哈利熊為大家來分享一些關於色彩運用的實用小技巧。
冷暖色調指的是一個顏色會給予觀賞者的心情與感覺。比如說,我們想到藍色,就會想到大海、水、風、冰。而橘色,則會想到太陽、火、火山。我們對於每一個顏色都有不同的感受,因為這些顏色與我們生活中的經驗息息相關。今天,哈利熊們要來介紹顏色的冷暖特性!
視覺設計師在選擇顏色時,不僅僅要了解到不同顏色會引發的不同感官效應,還要了解不同的色彩間是否能夠互相搭配。這篇文章中,哈利熊整理了根據色環(Color Wheels)理論延伸出的色彩搭配技巧,來幫大家進一步了解如何配色。
在「品牌行銷顏色使用大全:不同性別、年齡層分別該用什麼顏色」一文中,有提到不同顏色會給觀賞者不同的情緒反應,而根據不同性別、年齡,可以選擇不同的品牌顏色。但決定品牌的專屬顏色之前,有什麼關於顏色的基礎知識是設計時一定要知道的呢?
顏色與情緒有著非常緊密的連結,不同的顏色可以讓人覺得開心、難過、放鬆甚至能促進食慾。這也是為什麼我們必須了解顏色心理學,用在品牌設計與行銷中以達到更好的效果。針對不同性別、年齡層的TA,不同的顏色選擇會有什麼影響呢?讓我們一起來看看吧!
你知道有一個非常實用的配色技巧嗎?那就是黃金比例60:30:10!這個比例能夠運用在絕大部分的視覺設計上,無論是網站設計、室內設計、App設計、服裝搭配、相片構圖等都能適用。現在就跟著哈利熊一起來看看60:30:10到底是什麼魔法吧!
色彩是視覺設計中一個非常重要的元素,無論是在網站設計或是LOGO設計中,都佔有舉足輕重的地位。今天,哈利熊為大家來分享一些關於色彩運用的實用小技巧。
冷暖色調指的是一個顏色會給予觀賞者的心情與感覺。比如說,我們想到藍色,就會想到大海、水、風、冰。而橘色,則會想到太陽、火、火山。我們對於每一個顏色都有不同的感受,因為這些顏色與我們生活中的經驗息息相關。今天,哈利熊們要來介紹顏色的冷暖特性!
視覺設計師在選擇顏色時,不僅僅要了解到不同顏色會引發的不同感官效應,還要了解不同的色彩間是否能夠互相搭配。這篇文章中,哈利熊整理了根據色環(Color Wheels)理論延伸出的色彩搭配技巧,來幫大家進一步了解如何配色。
在「品牌行銷顏色使用大全:不同性別、年齡層分別該用什麼顏色」一文中,有提到不同顏色會給觀賞者不同的情緒反應,而根據不同性別、年齡,可以選擇不同的品牌顏色。但決定品牌的專屬顏色之前,有什麼關於顏色的基礎知識是設計時一定要知道的呢?
顏色與情緒有著非常緊密的連結,不同的顏色可以讓人覺得開心、難過、放鬆甚至能促進食慾。這也是為什麼我們必須了解顏色心理學,用在品牌設計與行銷中以達到更好的效果。針對不同性別、年齡層的TA,不同的顏色選擇會有什麼影響呢?讓我們一起來看看吧!
你可能也想看
Google News 追蹤
Thumbnail
我很鼓勵投資人不要只投資台股,對股市有一點熟悉度後,建議範圍擴況大到美股,甚至是投資全球。因為台股僅是單一國家/市場,如果能將資產投資到其他國家,風險會更分散,機會也更多,特別是美國股市。 美股會很難懂嗎?我相信你認識的美國企業可能會比台灣企業多,我從標普500成分股前15大企業裡隨便抓十
Thumbnail
美股因多家熱門話題與龍頭企業市值快速增長受到關注,本文介紹如何透過國泰世華CUBE App 開設台股及美股複委託帳戶、定期理財的便利性。 定期投資適合單筆資金有限、經驗不多的理財小白、上班族,或者忙碌、沒時間研究基本面的朋友,國泰世華CUBE App美股定額投資功能,操作便利性幾乎完勝海外券商。
Thumbnail
這是張老師的第三本書,我想前二本應該也有很多朋友們都有讀過,我想絕對是受益良多,而這次在書名上就直接點出,著重在從投資的角度來切入
Thumbnail
TinyBook直覺式拖曳介面,快速完成美觀的預約網站;要開始建立電子商務,製作網頁是非常基本的需求,但光是網域、網站及各種版型的功能設計,就足以讓商家勸退,甚至是放棄製作網頁,但是TinyBook完美克服以上痛點,幫助商家能輕鬆製作美觀的預約網頁哦!
Thumbnail
每周一篇文章的讀書會心得報告摘要與筆記,本次分享的文章為:原料到製作過程大公開,消費者反而更愛!解密這股在全球品牌吹起的「透明風」。 1. 一件件商品,都開始「裸體」 2. 透明的不止商品價格 3. 當「透明風潮」吹向各行各業 4. 「懷疑」是當代年輕消費者的關鍵詞 5. 「透明化」並不是一件容易事
Thumbnail
真的要創作的音樂家,還是得好好地、堂堂正正地,動手編出自己要的音符呀!不然坊間太多現成音樂罐頭,使得這時代的音樂聽起來越來越像,可不是創作者該樂意見到的。
Thumbnail
  跟葡萄糖不一樣,果糖不會影響胰島素的分泌,對血糖的影響有限,所以曾經一度認為是一種"安全"的糖類。然而...
Thumbnail
為什麼密密麻麻,把所有內容寫在投影片上的簡報,總是讓人昏昏欲睡,達不到應有的溝通效果?因為那不是簡報,那叫「繁報」。
Thumbnail
我爸媽分床睡已經一年多了,我媽得知我爸其實喜歡男人。婚姻破裂,可是沒人明說。
Thumbnail
你重視自己的工作嗎?如果重視,應該會花很多時間找尋適合自己的公司與職務、也花時間確定自己對這個工作有興趣。在應徵與面談時,不只是對方評估你,你也在評估這家公司是不是重視人才──是認真想找一起打拼的夥伴,還是只想找個人來做事就好?
Thumbnail
我很鼓勵投資人不要只投資台股,對股市有一點熟悉度後,建議範圍擴況大到美股,甚至是投資全球。因為台股僅是單一國家/市場,如果能將資產投資到其他國家,風險會更分散,機會也更多,特別是美國股市。 美股會很難懂嗎?我相信你認識的美國企業可能會比台灣企業多,我從標普500成分股前15大企業裡隨便抓十
Thumbnail
美股因多家熱門話題與龍頭企業市值快速增長受到關注,本文介紹如何透過國泰世華CUBE App 開設台股及美股複委託帳戶、定期理財的便利性。 定期投資適合單筆資金有限、經驗不多的理財小白、上班族,或者忙碌、沒時間研究基本面的朋友,國泰世華CUBE App美股定額投資功能,操作便利性幾乎完勝海外券商。
Thumbnail
這是張老師的第三本書,我想前二本應該也有很多朋友們都有讀過,我想絕對是受益良多,而這次在書名上就直接點出,著重在從投資的角度來切入
Thumbnail
TinyBook直覺式拖曳介面,快速完成美觀的預約網站;要開始建立電子商務,製作網頁是非常基本的需求,但光是網域、網站及各種版型的功能設計,就足以讓商家勸退,甚至是放棄製作網頁,但是TinyBook完美克服以上痛點,幫助商家能輕鬆製作美觀的預約網頁哦!
Thumbnail
每周一篇文章的讀書會心得報告摘要與筆記,本次分享的文章為:原料到製作過程大公開,消費者反而更愛!解密這股在全球品牌吹起的「透明風」。 1. 一件件商品,都開始「裸體」 2. 透明的不止商品價格 3. 當「透明風潮」吹向各行各業 4. 「懷疑」是當代年輕消費者的關鍵詞 5. 「透明化」並不是一件容易事
Thumbnail
真的要創作的音樂家,還是得好好地、堂堂正正地,動手編出自己要的音符呀!不然坊間太多現成音樂罐頭,使得這時代的音樂聽起來越來越像,可不是創作者該樂意見到的。
Thumbnail
  跟葡萄糖不一樣,果糖不會影響胰島素的分泌,對血糖的影響有限,所以曾經一度認為是一種"安全"的糖類。然而...
Thumbnail
為什麼密密麻麻,把所有內容寫在投影片上的簡報,總是讓人昏昏欲睡,達不到應有的溝通效果?因為那不是簡報,那叫「繁報」。
Thumbnail
我爸媽分床睡已經一年多了,我媽得知我爸其實喜歡男人。婚姻破裂,可是沒人明說。
Thumbnail
你重視自己的工作嗎?如果重視,應該會花很多時間找尋適合自己的公司與職務、也花時間確定自己對這個工作有興趣。在應徵與面談時,不只是對方評估你,你也在評估這家公司是不是重視人才──是認真想找一起打拼的夥伴,還是只想找個人來做事就好?