方格精選

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

更新 發佈閱讀 5 分鐘
暗黑風格主題或是暗色模式是現在許多網站或是手機程式會提供給用戶選擇的模式,暗黑風格也已經應用於許多知名的品牌網站與應用上,比如說YouTube、Gmail、Facebook messenger等等。過去的網站設計中,大家習慣使用亮的背景搭配深色的字,而現在暗底亮字卻成為一種新的流行,到底暗黑風格有什麼優勢呢?

HoliBear - 網站設計


暗黑風格主題或是暗色模式是現在許多網站或是手機程式會提供給用戶選擇的模式,適用於各種裝置的尺寸。暗色系風格已經應用於許多知名的品牌與應用上,比如說YouTube、Gmail、Facebook messenger等等,而暗色風也是2020年八大網站設計創新趨勢之一。


為什麼這麼受歡迎?

過去的網站設計中,大家習慣使用的亮的背景搭配深色的字,而現在暗底亮字卻成為一種新流行,為什麼呢?

  • 對於OLED手機來說,能省下45–60%的電量
  • 暗色主題對眼睛的負擔更小,我們一天工作回家後,眼睛需要休息,長期盯著白色的物體眼睛容易疲乏
  • 暗色主題呈現一種更精練、時尚的感覺


暗黑風格的特性

暗黑風格如此大受歡迎,究竟有什麼樣的特性呢?

  • 暗色的背景,配上明亮的文字
  • 通常會搭配很多留白空間
  • 中性的顏色
  • 柔和、舒緩的色調與色溫
  • 鮮明的對比

而這種黑暗主題風,會套用完全不一樣的UI設計,同一個網站或是app,在換上暗黑風格主題後,往往呈現一種全然不同的視覺效果。

比如說YouTube的暗黑風格主題模式,我們一起來看一下有哪裡不同吧!

raw-image
raw-image

在灰白色的YouTube底色上,文字基本上是用黑色顯示而成,針對按鈕的部分,則是採用比底色更深的灰色,按鈕的反白用的是跟品牌色一樣的紅色,實為醒目。

而改成黑色主題後,文字改為醒目的白色,而按鈕則是深灰色,搭上白色的反白色,讓整個畫面看起來非常和諧、舒服。

說到這裡,我們不禁想,所有品牌都適合用這種暗色風格主題嗎?


誰適合用暗黑風格主題?

大部分與娛樂相關的品牌,比如說遊戲網站、電視、電影似乎都是用暗色風格主題的UI設計,因為通常這些網站的活動時間都設定在晚上,或是在昏暗的環境中使用,所以螢幕就會使用與環境相符的暗色系,讓其他宣傳圖等能夠從黑暗中跳脫出來。

比如說,Apple TV和Netflix就採用了全黑的UI設計。

raw-image
raw-image

所以如果你的品牌也在考慮使用暗色風格的主題,你可以問自己這些問題:

  • 網站的內容是什麼?
  • 使用者通常會在什麼時段使用網站?
  • 使用者通常會在哪裡使用網站?
  • 使用者通常會用什麼裝置使用網站?

如果你的網站也想做到下列這些事情,那麼或許你就該使用暗色主題。

  • 創造一種強烈的、戲劇性的視覺效果
  • 彰顯出一種時尚、優雅、奢華、有聲望的感覺
  • 創造一種有趣、神秘的感覺
  • 使用最少的干擾讓使用者注意力集中


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

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


使用暗色系3大TIPS

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

1. 盡量不要使用全黑色

雖是暗色系,但全黑色配上全白色不一定是最佳的選擇,有時候反而會造成反效果,讓眼睛更為疲憊。所以比較保險的作法用深灰色作為主要的背景顏色,如此一來,呈現的對比就不會過於刺眼。

下面是幾種不同顏色使用上的比較。

raw-image

Material Design則是推薦使用#121212作為暗色背景。

raw-image

2. 盡量不要使用飽和色

飽和色調在亮色背景上看起來很舒服,但是在暗色背景上反而顏色會被吃掉,讓文字更難閱讀。

UX planet建議大家使用200–50區隔內的顏色,在暗色背景上有最佳的效果。

raw-image

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

之前在顏色使用大全中,我們有提到不同的顏色會給人不同的情緒效果。而暗黑風格主題也是如此,品牌不能期待暗色主題與亮色主題為用戶帶來同樣的情緒,也不需要強加的去修正這件事情,而是應該將其視為產品的優勢。

希望看完這篇文章,為你提供了更多資訊決定是否要採用暗色風的網站。如果決定要著手開始製作網站了,可以看這篇FOLLOW這八個簡單步驟,設計出最強的網站!

留言
avatar-img
留言分享你的想法!
avatar-img
哈利熊HoliBear的沙龍
141會員
199內容數
哈利熊的職場生存之道與專業技能分享!
2021/05/12
B2B行銷,也就是企業對企業的業務拓展,是一種常見的模式,但是市面上關於網路行銷的資訊,大部分都在B2C的面向上討論。其實網路行銷也可以對B2B行銷帶來很大的助益,尤其在Covid-19疫情肆虐的今天,網路行銷工具更是可以派上用場。今天我們邀請訪問到具有9年B2B行銷經驗的專家張毓瑋來為我們分享
Thumbnail
2021/05/12
B2B行銷,也就是企業對企業的業務拓展,是一種常見的模式,但是市面上關於網路行銷的資訊,大部分都在B2C的面向上討論。其實網路行銷也可以對B2B行銷帶來很大的助益,尤其在Covid-19疫情肆虐的今天,網路行銷工具更是可以派上用場。今天我們邀請訪問到具有9年B2B行銷經驗的專家張毓瑋來為我們分享
Thumbnail
2021/05/06
價格是行銷4P中最有趣的部分之一,有許多行銷策略都是憑藉著在價格上面動的一些小心思,而讓大大提升客單價、企業營收增長。今天我們就來跟大家分享許多商家都愛用的「誘餌效應」!
Thumbnail
2021/05/06
價格是行銷4P中最有趣的部分之一,有許多行銷策略都是憑藉著在價格上面動的一些小心思,而讓大大提升客單價、企業營收增長。今天我們就來跟大家分享許多商家都愛用的「誘餌效應」!
Thumbnail
2021/03/17
接觸網路行銷的人,相信對SEO(搜尋引擎優化)這名詞不陌生,那SEM(搜尋引擎行銷)又是什麼呢?和SEO的差別在哪裡?在網路行銷中有什麼不同的用處?我們將為你解答!
Thumbnail
2021/03/17
接觸網路行銷的人,相信對SEO(搜尋引擎優化)這名詞不陌生,那SEM(搜尋引擎行銷)又是什麼呢?和SEO的差別在哪裡?在網路行銷中有什麼不同的用處?我們將為你解答!
Thumbnail
看更多
你可能也想看
Thumbnail
在小小的租屋房間裡,透過蝦皮購物平臺採購各種黏土、模型、美甲材料等創作素材,打造專屬黏土小宇宙的療癒過程。文中分享多個蝦皮挖寶地圖,並推薦蝦皮分潤計畫。
Thumbnail
在小小的租屋房間裡,透過蝦皮購物平臺採購各種黏土、模型、美甲材料等創作素材,打造專屬黏土小宇宙的療癒過程。文中分享多個蝦皮挖寶地圖,並推薦蝦皮分潤計畫。
Thumbnail
小蝸和小豬因購物習慣不同常起衝突,直到發現蝦皮分潤計畫,讓小豬的購物愛好產生價值,也讓小蝸開始欣賞另一半的興趣。想增加收入或改善伴侶間的購物觀念差異?讓蝦皮分潤計畫成為你們的神隊友吧!
Thumbnail
小蝸和小豬因購物習慣不同常起衝突,直到發現蝦皮分潤計畫,讓小豬的購物愛好產生價值,也讓小蝸開始欣賞另一半的興趣。想增加收入或改善伴侶間的購物觀念差異?讓蝦皮分潤計畫成為你們的神隊友吧!
Thumbnail
【外掛擴充】Dark Reader 這是一個護眼的 Chrome 瀏覽器擴充套件,通過即時產生深色主題,為每一個網站啟用夜間模式。即使是 Google 信箱或表單,都能使用。透過 Dark Reader 反轉明亮的顏色,使其網頁內容具有高對比度並且易於在夜間閱讀。除了可以減少電量的消耗,也能減少用
Thumbnail
【外掛擴充】Dark Reader 這是一個護眼的 Chrome 瀏覽器擴充套件,通過即時產生深色主題,為每一個網站啟用夜間模式。即使是 Google 信箱或表單,都能使用。透過 Dark Reader 反轉明亮的顏色,使其網頁內容具有高對比度並且易於在夜間閱讀。除了可以減少電量的消耗,也能減少用
Thumbnail
隨著科技的不斷發展,網頁設計已經從過去的靜態頁面演變為充滿動態、互動性和個性化的體驗。本文介紹了網站設計的最新趨勢,包括夜間模式、無障礙設計、響應式設計、聊天機器人和虛擬助手等功能。
Thumbnail
隨著科技的不斷發展,網頁設計已經從過去的靜態頁面演變為充滿動態、互動性和個性化的體驗。本文介紹了網站設計的最新趨勢,包括夜間模式、無障礙設計、響應式設計、聊天機器人和虛擬助手等功能。
Thumbnail
本文討論了YouTube廣告的最新趨勢,包括廣告攔截器的取締、悄無聲息的廣告擴張以及極端的廣告方式。提出了對應的應對策略,讓讀者對未來的YouTube廣告發展有更深入的瞭解。
Thumbnail
本文討論了YouTube廣告的最新趨勢,包括廣告攔截器的取締、悄無聲息的廣告擴張以及極端的廣告方式。提出了對應的應對策略,讓讀者對未來的YouTube廣告發展有更深入的瞭解。
Thumbnail
好的網站應該要有直覺性網站版面配置與迅速的網頁載入速度,需要具備好的使用者體驗,進而提升SEO關鍵字排名。隨著時代演進,網站設計經歷了五個世代的變革,並逐漸注重UI/UX的整合。本文說明網站版面的重要觀念、配色的重要性、動畫對網站行銷的影響,以及改善網站PSI分數的優化方法。
Thumbnail
好的網站應該要有直覺性網站版面配置與迅速的網頁載入速度,需要具備好的使用者體驗,進而提升SEO關鍵字排名。隨著時代演進,網站設計經歷了五個世代的變革,並逐漸注重UI/UX的整合。本文說明網站版面的重要觀念、配色的重要性、動畫對網站行銷的影響,以及改善網站PSI分數的優化方法。
Thumbnail
作者:FCNWT MARKET LTD FCNWT MARKET LTD發現,YouTube 一口氣為手機、網頁端推出大型更新,帶來介面上的改變和一些新功用,其中最實用的大约是能够縮放畫面的手勢吧。FCNWT MARKET LTD表示,過去先給 Premium 用戶試用的版本是能够稍稍以雙指放大畫面
Thumbnail
作者:FCNWT MARKET LTD FCNWT MARKET LTD發現,YouTube 一口氣為手機、網頁端推出大型更新,帶來介面上的改變和一些新功用,其中最實用的大约是能够縮放畫面的手勢吧。FCNWT MARKET LTD表示,過去先給 Premium 用戶試用的版本是能够稍稍以雙指放大畫面
Thumbnail
許多YouTube頻道主都希望自己的影片,不論是在Google上或在YouTube上,都可以有很多網友搜尋到,然後點進去觀看。但是要獲取這種流量的做法,變得跟2021年以前不太一樣了。
Thumbnail
許多YouTube頻道主都希望自己的影片,不論是在Google上或在YouTube上,都可以有很多網友搜尋到,然後點進去觀看。但是要獲取這種流量的做法,變得跟2021年以前不太一樣了。
Thumbnail
現今,響應式網頁設計已成為網站設計不可或缺的一部分,良好的設計可以為公司帶來豐厚的收益,現在也成為不少公司的首選方案,就讓我們看下去吧!
Thumbnail
現今,響應式網頁設計已成為網站設計不可或缺的一部分,良好的設計可以為公司帶來豐厚的收益,現在也成為不少公司的首選方案,就讓我們看下去吧!
Thumbnail
暗黑風格主題或是暗色模式是現在許多網站或是手機程式會提供給用戶選擇的模式,暗黑風格也已經應用於許多知名的品牌網站與應用上,比如說YouTube、Gmail、FB messenger等等。過去的網站設計中,大家習慣使用亮的背景搭配深色的字,而現在暗底亮字卻成為一種新的流行,到底暗黑風格有什麼優勢呢?
Thumbnail
暗黑風格主題或是暗色模式是現在許多網站或是手機程式會提供給用戶選擇的模式,暗黑風格也已經應用於許多知名的品牌網站與應用上,比如說YouTube、Gmail、FB messenger等等。過去的網站設計中,大家習慣使用亮的背景搭配深色的字,而現在暗底亮字卻成為一種新的流行,到底暗黑風格有什麼優勢呢?
Thumbnail
Youtube頻道的美觀程度對其數位行銷效果至關重要。本篇哈利熊分享關於設計Youtube頻道圖示、橫幅、浮水印以及設置客制URL需要注意的事項。
Thumbnail
Youtube頻道的美觀程度對其數位行銷效果至關重要。本篇哈利熊分享關於設計Youtube頻道圖示、橫幅、浮水印以及設置客制URL需要注意的事項。
Thumbnail
從2018年開始,Google在網頁的排行上會更著重於網站的手機用戶體驗。這裡介紹針對手機SEO優化的一些小技巧及注意事項。
Thumbnail
從2018年開始,Google在網頁的排行上會更著重於網站的手機用戶體驗。這裡介紹針對手機SEO優化的一些小技巧及注意事項。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News