官方热线:0769-22501808

7x24热线:+86 13310811808

© 2012-2015 宏翔科技 版权所有

深色风格界面设计指南

转载行业新闻2019/3/21 13:46:30

作为一名设计师,制定和把控设计风格是我们的职责。在开始设计一个产品的时候,我们往往会根据产品的功能,受众,以及想要表达的情感来确定设计风格,其中配色是一开始就需要考虑的。在配色的选择上,最常用的就是白底黑字的浅色风格。

浅色的配色之所以成为主流,是因为它有很多优点,最大的好处就是可读性非常强,根据研究表明,浅色背景上的深色文本的可读性要优于深色背景上的浅色文本,因此这么多年来,杂志和报刊从来都是白底黑字的,我们也习惯了这样的阅读方式,当需要设计的界面中有很多文字的时候,尽量还是要选择浅色风格。

以浅色作为背景还有一个好处,就是可以和任何品牌色都能很好得搭配,这一点是深色背景做不到的,现在流行极简的设计风格,白色和浅灰色的界面可以营造出干净的感觉,这种设计风格基本上可以适用大部分的产品。



深色风格界面

浅色风格的界面有如此多的好处,但还是有很多情况下设计师会使用深色,并且创造出很多惊艳的设计作品。和明亮的界面不同,黑色的背景可以最大程度得减少视觉干扰,集中用户的注意力,并将主体产品凸显出来,深色风格的对比度更强,也更容易营造氛围。

苹果的 Apple TV 官网页面,使用深色背景,模拟了一个晚上在家看电视的场景,很有身临其境的感觉,让产品脱颖而出


还有一个优点是,深色的配色风格很容易表现出科技感和品质感,因此在很多科技行业和奢侈品行业,深色风格都被广泛使用,如下图中的百年灵手表官网就使用了暗色作为主色调:

黑色的背景让前面的手表更加突出,让人把目光焦点放到手表上,细节彰显的淋漓尽致


另外,在这个信息爆炸的时代,人们越来越离不开手机和电脑,据统计,平均每人每天需要盯着屏幕至少两个小时以上,一些特殊的行业比如我们设计师,程序员,还有金融从业者,很多人甚至每天需要在电脑面前工作十几个小时,眼睛疲劳和眼睛疾病成为了很大的困扰。暗色背景可以最大限度得减少光线对眼睛的刺痛,因此很多专业软件,比如 Ps,编程软件以及炒股软件的界面都是深色的,以保护使用者的眼睛。

使用深色背景的专业软件 Bloomberg Anywhere iOS 和 Atom 编辑器


大多数与娱乐相关的设计,都使用了深色的配色,深色的配色可以让用户获得更沉浸的体验,不容易被其他元素干扰,并且这是和用户的使用场景相关的,当人们结束了一天回到家,天色渐晚,打开电视和游戏机,开始最惬意的放松时间,不希望被打扰,和深色的配色风格完美契合。因此我们可以发现,不管是各大电视应用,还是 Steam 和暴雪战网这些游戏平台,都采用了沉浸式的深色主题。

使用深色背景的游戏平台和 NETFLIX



需要注意

有些情况下需要我们警惕,不适合使用深色主题,其中有一个就是视觉层级比较复杂的时候,比方说如果需要设计一个复杂的 Dashboard 控制中心,里面有各种不同的组件,表单和图形,层级也非常复杂,用深色的界面很难将这些元素做出区分,而浅色的界面上可以使用各种灰度和投影来帮助我们布局,可以使用的颜色也更多,更容易设计出有条理的界面。

当界面中元素比较复杂的时候,尽量使用浅色背景