方格精選
製作暗黑風格的網站？你的品牌適合嗎？3個一定要掌握的TIPS！
更新於 發佈於 閱讀時間約 4 分鐘
暗黑風格主題或是暗色模式是現在許多網站或是手機程式會提供給用戶選擇的模式，暗黑風格也已經應用於許多知名的品牌網站與應用上，比如說YouTube、Gmail、Facebook messenger等等。過去的網站設計中，大家習慣使用亮的背景搭配深色的字，而現在暗底亮字卻成為一種新的流行，到底暗黑風格有什麼優勢呢？
暗黑風格主題或是暗色模式是現在許多網站或是手機程式會提供給用戶選擇的模式，適用於各種裝置的尺寸。暗色系風格已經應用於許多知名的品牌與應用上，比如說YouTube、Gmail、Facebook messenger等等，而暗色風也是2020年八大網站設計創新趨勢之一。
為什麼這麼受歡迎？
過去的網站設計中，大家習慣使用的亮的背景搭配深色的字，而現在暗底亮字卻成為一種新流行，為什麼呢？
- 對於OLED手機來說，能省下45–60%的電量
- 暗色主題對眼睛的負擔更小，我們一天工作回家後，眼睛需要休息，長期盯著白色的物體眼睛容易疲乏
- 暗色主題呈現一種更精練、時尚的感覺
暗黑風格的特性
暗黑風格如此大受歡迎，究竟有什麼樣的特性呢？
- 暗色的背景，配上明亮的文字
- 通常會搭配很多留白空間
- 中性的顏色
- 柔和、舒緩的色調與色溫
- 鮮明的對比
而這種黑暗主題風，會套用完全不一樣的UI設計，同一個網站或是app，在換上暗黑風格主題後，往往呈現一種全然不同的視覺效果。
比如說YouTube的暗黑風格主題模式，我們一起來看一下有哪裡不同吧！
在灰白色的YouTube底色上，文字基本上是用黑色顯示而成，針對按鈕的部分，則是採用比底色更深的灰色，按鈕的反白用的是跟品牌色一樣的紅色，實為醒目。
而改成黑色主題後，文字改為醒目的白色，而按鈕則是深灰色，搭上白色的反白色，讓整個畫面看起來非常和諧、舒服。
說到這裡，我們不禁想，所有品牌都適合用這種暗色風格主題嗎？
誰適合用暗黑風格主題？
大部分與娛樂相關的品牌，比如說遊戲網站、電視、電影似乎都是用暗色風格主題的UI設計，因為通常這些網站的活動時間都設定在晚上，或是在昏暗的環境中使用，所以螢幕就會使用與環境相符的暗色系，讓其他宣傳圖等能夠從黑暗中跳脫出來。
比如說，Apple TV和Netflix就採用了全黑的UI設計。
所以如果你的品牌也在考慮使用暗色風格的主題，你可以問自己這些問題：
- 網站的內容是什麼？
- 使用者通常會在什麼時段使用網站？
- 使用者通常會在哪裡使用網站？
- 使用者通常會用什麼裝置使用網站？
如果你的網站也想做到下列這些事情，那麼或許你就該使用暗色主題。
- 創造一種強烈的、戲劇性的視覺效果
- 彰顯出一種時尚、優雅、奢華、有聲望的感覺
- 創造一種有趣、神秘的感覺
- 使用最少的干擾讓使用者注意力集中
誰不適合用暗色風格主題？
如果你的網站會用到大量的文字、資訊，或是包含非常多不同種類的內容形式（文字、圖片、影片、下拉選單、資訊圖表等），那麼就不適合用暗黑風格主題風。暗色主題風對於設計來說是有一定的挑戰的，在白色背景上，幾乎所有的顏色都適用，但是在黑色的背景上，就會有許多的限制。
使用暗色系3大TIPS
如果你今天已經打算使用暗黑風格主題了，那麼一定要知道這3大TIPS。
1. 盡量不要使用全黑色
雖是暗色系，但全黑色配上全白色不一定是最佳的選擇，有時候反而會造成反效果，讓眼睛更為疲憊。所以比較保險的作法用深灰色作為主要的背景顏色，如此一來，呈現的對比就不會過於刺眼。
下面是幾種不同顏色使用上的比較。
而Material Design則是推薦使用#121212作為暗色背景。
2. 盡量不要使用飽和色
飽和色調在亮色背景上看起來很舒服，但是在暗色背景上反而顏色會被吃掉，讓文字更難閱讀。
UX planet建議大家使用200–50區隔內的顏色，在暗色背景上有最佳的效果。
3. 暗色背景會激發不同的情緒效果
之前在顏色使用大全中，我們有提到不同的顏色會給人不同的情緒效果。而暗黑風格主題也是如此，品牌不能期待暗色主題與亮色主題為用戶帶來同樣的情緒，也不需要強加的去修正這件事情，而是應該將其視為產品的優勢。
希望看完這篇文章，為你提供了更多資訊決定是否要採用暗色風的網站。如果決定要著手開始製作網站了，可以看這篇FOLLOW這八個簡單步驟，設計出最強的網站！
為什麼會看到廣告
留言0
查看全部
你可能也想看
Google News 追蹤
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約)
今天我會用不同角度帶大家看這款國泰世華CUB
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
【外掛擴充】Dark Reader
這是一個護眼的 Chrome 瀏覽器擴充套件，通過即時產生深色主題，為每一個網站啟用夜間模式。即使是 Google 信箱或表單，都能使用。透過 Dark Reader 反轉明亮的顏色，使其網頁內容具有高對比度並且易於在夜間閱讀。除了可以減少電量的消耗，也能減少用
隨著科技的不斷發展，網頁設計已經從過去的靜態頁面演變為充滿動態、互動性和個性化的體驗。本文介紹了網站設計的最新趨勢，包括夜間模式、無障礙設計、響應式設計、聊天機器人和虛擬助手等功能。
LED照明設計是室內設計的關鍵元素，在室內設計師的的眾多選擇中，LED照明是最重要的一環，提供多功能性和高能效應用。本文我們將探討 LED 照明領域，並討論 10 種可提升室內空間美感的照明設計手法。
高級灰色系，深受設計師及客戶青睞
有點特別，可調性高讓其隨意搭配也可顯現出
深邃、高雅、神秘，灰階，但這些都不足以形容
這種調調不僅有很多種範例，還藏有許多大師的設計格調
灰色系列不像其他顏色
其變化萬千是很難把握
如果你沒有很深厚的硬的底子來使用
容易把灰
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約)
今天我會用不同角度帶大家看這款國泰世華CUB
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
【外掛擴充】Dark Reader
這是一個護眼的 Chrome 瀏覽器擴充套件，通過即時產生深色主題，為每一個網站啟用夜間模式。即使是 Google 信箱或表單，都能使用。透過 Dark Reader 反轉明亮的顏色，使其網頁內容具有高對比度並且易於在夜間閱讀。除了可以減少電量的消耗，也能減少用
隨著科技的不斷發展，網頁設計已經從過去的靜態頁面演變為充滿動態、互動性和個性化的體驗。本文介紹了網站設計的最新趨勢，包括夜間模式、無障礙設計、響應式設計、聊天機器人和虛擬助手等功能。
LED照明設計是室內設計的關鍵元素，在室內設計師的的眾多選擇中，LED照明是最重要的一環，提供多功能性和高能效應用。本文我們將探討 LED 照明領域，並討論 10 種可提升室內空間美感的照明設計手法。
高級灰色系，深受設計師及客戶青睞
有點特別，可調性高讓其隨意搭配也可顯現出
深邃、高雅、神秘，灰階，但這些都不足以形容
這種調調不僅有很多種範例，還藏有許多大師的設計格調
灰色系列不像其他顏色
其變化萬千是很難把握
如果你沒有很深厚的硬的底子來使用
容易把灰