方格精選

製作暗黑風格的網站?你的品牌適合嗎?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
哈利熊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
債券投資,不只是高資產族群的遊戲 在傳統的投資觀念中,海外債券(Overseas Bonds)常被貼上「高資產族群專屬」的標籤。過去動輒 1 萬甚至 10 萬美元的最低申購門檻,讓許多想尋求穩定配息的小資族望而卻步。 然而,在股市波動劇烈的環境下,尋求穩定的美元現金流與被動收入成為許多投資人
Thumbnail
債券投資,不只是高資產族群的遊戲 在傳統的投資觀念中,海外債券(Overseas Bonds)常被貼上「高資產族群專屬」的標籤。過去動輒 1 萬甚至 10 萬美元的最低申購門檻,讓許多想尋求穩定配息的小資族望而卻步。 然而,在股市波動劇烈的環境下,尋求穩定的美元現金流與被動收入成為許多投資人
Thumbnail
透過川普的近期債券交易揭露,探討債券作為資產配置中「穩定磐石」的重要性。文章分析降息對債券的潛在影響,以及股神巴菲特的操作策略。並介紹玉山證券「小額債」平臺,如何讓小資族也能低門檻參與海外債券市場,實現「低門檻、低波動、固定收益」的務實投資方式。
Thumbnail
透過川普的近期債券交易揭露,探討債券作為資產配置中「穩定磐石」的重要性。文章分析降息對債券的潛在影響,以及股神巴菲特的操作策略。並介紹玉山證券「小額債」平臺,如何讓小資族也能低門檻參與海外債券市場,實現「低門檻、低波動、固定收益」的務實投資方式。
Thumbnail
解析「債券」如何成為資產配置中的穩定錨,提供低風險高回報的投資選項。 藉由玉山證券的低門檻債券服務,投資者可輕鬆入手,平衡風險並穩定財務。
Thumbnail
解析「債券」如何成為資產配置中的穩定錨,提供低風險高回報的投資選項。 藉由玉山證券的低門檻債券服務,投資者可輕鬆入手,平衡風險並穩定財務。
Thumbnail
相較於波動較大的股票,債券能提供固定現金流,而玉山證券推出的小額債,更以1000 美元的低門檻,讓學生與新手也能參與全球優質企業債投資。玉山E-Trader平台即時報價、條件式篩選與清楚的交易流程等特色,大幅降低投資難度,對於希望分散風險、建立穩定現金流的人來說,玉山小額債是一個值得嘗試的理財起點。
Thumbnail
相較於波動較大的股票,債券能提供固定現金流,而玉山證券推出的小額債,更以1000 美元的低門檻,讓學生與新手也能參與全球優質企業債投資。玉山E-Trader平台即時報價、條件式篩選與清楚的交易流程等特色,大幅降低投資難度,對於希望分散風險、建立穩定現金流的人來說,玉山小額債是一個值得嘗試的理財起點。
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等等。過去的網站設計中,大家習慣使用亮的背景搭配深色的字,而現在暗底亮字卻成為一種新的流行,到底暗黑風格有什麼優勢呢?
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News