网站设计系列|制作暗黑风格的网站?你的品牌适合吗?3个一定要掌握的TIPS!

暗黑风格主题或是暗色模式是现在许多网站或是手机程式会提供给用户选择的模式,适用于各种装置的尺寸。暗色系风格已经应用于许多知名的品牌与应用上,比如说YouTube、Gmail、Facebook messenger等等,而暗色风也是2020年八大网站设计创新趋势之一。

为什么这么受欢迎?

过去的网站设计中,大家习惯使用亮的背景搭配深色的字,而现在暗底亮字却成为一种新流行,为什么呢?

  • 对于OLED手机来说,能省下45–60%的电量
  • 暗色主题对眼睛的负担更小,我们一天工作回家后,眼睛需要休息,长期盯著白色的物体眼睛容易疲乏
  • 暗色主题呈现一种更精练、时尚的感觉

暗黑风格的特性

暗黑风格如此大受欢迎,究竟有什么样的特性呢?

  • 暗色的背景,配上明亮的文字
  • 通常会搭配很多留白空间
  • 中性的颜色
  • 柔和、舒缓的色调与色温
  • 鲜明的对比

而这种黑暗主题风,会套用完全不一样的UI设计,同一个网站或是app,在换上暗黑风格主题后,往往呈现一种全然不同的视觉效果。

比如说YouTube的暗黑风格主题模式,我们一起来看一下有哪里不同吧!

YouTube
YouTube
YouTube的暗黑风格主题模式
YouTube的暗黑风格主题模式

在灰白色的YouTube底色上,文字基本上是用黑色显示而成,针对按钮的部分,则是采用比底色更深的灰色,按钮的反白用的是跟品牌色一样的红色,实为醒目。

而改成黑色主题后,文字改为醒目的白色,而按钮则是深灰色,搭上白色的反白色,让整个画面看起来非常和谐、舒服。

说到这里,我们不禁想,所有品牌都适合用这种暗色风格主题吗?

谁适合用暗黑风格主题?

大部分与娱乐相关的品牌,比如说游戏网站、电视、电影似乎都是用暗色风格主题的UI设计,因为通常这些网站的活动时间都设定在晚上,或是在昏暗的环境中使用,所以萤幕就会使用与环境相符的暗色系,让其他宣传图等能够从黑暗中跳脱出来。

比如说,Apple TV和Netflix就采用了全黑的UI设计。

Apple TV网页
Apple TV网页
Netflix
Netflix

所以如果你的品牌也在考虑使用暗色风格的主题,你可以问自己这些问题:

  • 网站的内容是什么?
  • 使用者通常会在什么时段使用网站?
  • 使用者通常会在哪里使用网站?
  • 使用者通常会用什么装置使用网站?

如果你的网站也想做到下列这些事情,那么或许你就该使用暗色主题。

  • 创造一种强烈的、戏剧性的视觉效果
  • 彰显出一种时尚、优雅、奢华、有声望的感觉
  • 创造一种有趣、神秘的感觉
  • 使用最少的干扰让使用者注意力集中

谁不适合用暗色风格主题?

如果你的网站会用到大量的文字、资讯,或是包含非常多不同种类的内容形式(文字、图片、影片、下拉选单、资讯图表等),那么就不适合用暗黑风格主题风。暗色主题风对于设计来说是有一定的挑战的,在白色背景上,几乎所有的颜色都适用,但是在黑色的背景上,就会有许多的限制。

使用暗色系3大TIPS

如果你今天已经打算使用暗黑风格主题了,那么一定要知道这3大TIPS。

1. 尽量不要使用全黑色

虽是暗色系,但全黑色配上全白色不一定是最佳的选择,有时候反而会造成反效果,让眼睛更为疲惫。所以比较保险的作法用深灰色作为主要的背景颜色,如此一来,呈现的对比就不会过于刺眼。

下面是几种不同颜色使用上的比较。

使用暗色系3大TIPS|尽量不要使用全黑色
使用暗色系3大TIPS|尽量不要使用全黑色

Material Design则是推荐使用#121212作为暗色背景。

使用暗色系3大TIPS|尽量不要使用全黑色
使用暗色系3大TIPS|尽量不要使用全黑色

2. 尽量不要使用饱和色

饱和色调在亮色背景上看起来很舒服,但是在暗色背景上反而颜色会被吃掉,让文字更难阅读。

UX planet建议大家使用200–50区隔内的颜色,在暗色背景上有最佳的效果。

使用暗色系3大TIPS|尽量不要使用饱和色
使用暗色系3大TIPS|尽量不要使用饱和色

3. 暗色背景会激发不同的情绪效果

之前在颜色使用大全中,我们有提到不同的颜色会给人不同的情绪效果。而暗黑风格主题也是如此,品牌不能期待暗色主题与亮色主题为用户带来同样的情绪,也不需要强加的去修正这件事情,而是应该将其视为产品的优势。

希望看完这篇文章,为你提供了更多资讯决定是否要采用暗色风的网站。如果决定要著手开始制作网站了,可以看这篇FOLLOW这八个简单步骤,设计出最强的网站!

推荐文章:

本文由作者【HoliBear哈利熊】创作,原文刊登于【HoliBear哈利熊】,如未经授权不得转载。
回应