方格精選
製作暗黑風格的網站？你的品牌適合嗎？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
查看全部
你可能也想看
1.加權指數與櫃買指數
週五的加權指數在非農就業數據開出來後，雖稍微低於預期，但指數仍向上噴出，在美股開盤後於21500形成一個爆量假突破後急轉直下，就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後，週二或週三開始有無買單進場支撐，在沒有明確的反轉訊號形成前，小夥伴盡量不要貿然抄底，或是追空
重點摘要：
1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息
2.SEP 上修失業率預期，但快速的降息速率將有助失業率觸頂
3.未來幾個月經濟數據將繼續轉弱，經濟復甦的時點或是 1Q25 季底附近
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？
新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️
使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
TinyBook直覺式拖曳介面，快速完成美觀的預約網站；要開始建立電子商務，製作網頁是非常基本的需求，但光是網域、網站及各種版型的功能設計，就足以讓商家勸退，甚至是放棄製作網頁，但是TinyBook完美克服以上痛點，幫助商家能輕鬆製作美觀的預約網頁哦！
每周一篇文章的讀書會心得報告摘要與筆記，本次分享的文章為：原料到製作過程大公開，消費者反而更愛！解密這股在全球品牌吹起的「透明風」。
1. 一件件商品，都開始「裸體」
2. 透明的不止商品價格
3. 當「透明風潮」吹向各行各業
4. 「懷疑」是當代年輕消費者的關鍵詞
5. 「透明化」並不是一件容易事
真的要創作的音樂家，還是得好好地、堂堂正正地，動手編出自己要的音符呀！不然坊間太多現成音樂罐頭，使得這時代的音樂聽起來越來越像，可不是創作者該樂意見到的。
為什麼密密麻麻，把所有內容寫在投影片上的簡報，總是讓人昏昏欲睡，達不到應有的溝通效果？因為那不是簡報，那叫「繁報」。
我爸媽分床睡已經一年多了，我媽得知我爸其實喜歡男人。婚姻破裂，可是沒人明說。
你重視自己的工作嗎？如果重視，應該會花很多時間找尋適合自己的公司與職務、也花時間確定自己對這個工作有興趣。在應徵與面談時，不只是對方評估你，你也在評估這家公司是不是重視人才──是認真想找一起打拼的夥伴，還是只想找個人來做事就好？
1.加權指數與櫃買指數
週五的加權指數在非農就業數據開出來後，雖稍微低於預期，但指數仍向上噴出，在美股開盤後於21500形成一個爆量假突破後急轉直下，就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後，週二或週三開始有無買單進場支撐，在沒有明確的反轉訊號形成前，小夥伴盡量不要貿然抄底，或是追空
重點摘要：
1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息
2.SEP 上修失業率預期，但快速的降息速率將有助失業率觸頂
3.未來幾個月經濟數據將繼續轉弱，經濟復甦的時點或是 1Q25 季底附近
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？
新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️
使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
TinyBook直覺式拖曳介面，快速完成美觀的預約網站；要開始建立電子商務，製作網頁是非常基本的需求，但光是網域、網站及各種版型的功能設計，就足以讓商家勸退，甚至是放棄製作網頁，但是TinyBook完美克服以上痛點，幫助商家能輕鬆製作美觀的預約網頁哦！
每周一篇文章的讀書會心得報告摘要與筆記，本次分享的文章為：原料到製作過程大公開，消費者反而更愛！解密這股在全球品牌吹起的「透明風」。
1. 一件件商品，都開始「裸體」
2. 透明的不止商品價格
3. 當「透明風潮」吹向各行各業
4. 「懷疑」是當代年輕消費者的關鍵詞
5. 「透明化」並不是一件容易事
真的要創作的音樂家，還是得好好地、堂堂正正地，動手編出自己要的音符呀！不然坊間太多現成音樂罐頭，使得這時代的音樂聽起來越來越像，可不是創作者該樂意見到的。
為什麼密密麻麻，把所有內容寫在投影片上的簡報，總是讓人昏昏欲睡，達不到應有的溝通效果？因為那不是簡報，那叫「繁報」。
我爸媽分床睡已經一年多了，我媽得知我爸其實喜歡男人。婚姻破裂，可是沒人明說。
你重視自己的工作嗎？如果重視，應該會花很多時間找尋適合自己的公司與職務、也花時間確定自己對這個工作有興趣。在應徵與面談時，不只是對方評估你，你也在評估這家公司是不是重視人才──是認真想找一起打拼的夥伴，還是只想找個人來做事就好？