超全面!可能是最全面的「深色界面」使用方法+优缺点分析

@布莱恩臣 (作者):适当的使用深色界面,可以使界面在市面中普遍浅色系之中脱颖而出,更展现个性。

一. 前言

开始动手设计界面时,需要根据产品的调性选择应用的主色以及背景色,而这时是否选用深色背景好像不是首要选择,很多设计师会默认选择白色作为背景。这篇文章就是来分析一下深色界面,看看深色界面会有哪些使用方法,有哪些优点以及问题。

早在2009年,国外博客网站ProBlogger针对博客使用浅色还是深色背景进行了一次投票。投票结果显示,有接近一半的人喜欢用浅色,只有10%的人投给了深色,有趣的是,有36%的票数是投给“看实际情况”,也就是说浅色并不是人们选择的唯一情况,深色如果使用切当,还是有不少人喜欢的。

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

二. 感受

时尚优雅

使用低饱和度背景和高饱和度的内容,给人简约直白的清爽效果。

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

神秘感

通过展示内容部分细节,留给人更多的遐想空间。

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

奢侈高贵

深色界面加上金灿灿的土豪金,更多的留白,会有稳重可靠的感觉。

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

抑郁与恐惧

表达这种情绪首选深色背景,比浅色更能表现气氛。

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

三. 优点

表现光感

利用在深色背景下的强烈对比优势,发光的效果会得到最大的发挥。

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

视觉层次

增加深色背景,可以丰富界面的层级关系。

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

视觉对比

深色背景与内容进行强烈对比,可以更有效的突出内容,重要内容一目了然。

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

长期阅读

深色界面比浅色更适合长时间查看,特别是夜间。很多设计类软件和开发软件都会默认使用深色主题皮肤。

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

四. 技巧

考虑内容可读性

在深色界面中显示文字,需要考虑文本与背景的对比度是否足够大,次要文本是否依然清晰可见。

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

色彩倾向

不是所有界面都是纯黑灰色作为背景,很多看上去接近深灰色的界面,都会根据产品或者作品的品牌色方向进行调整。

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

黑色更省电

屏幕是通过发光传导色彩,而深色界面发光较弱,因此很多小型的电子产品都会选用纯黑色背景,既突出内容,也省电。

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

超全面!可能是最全面的「深色界面」使用方法+优缺点分析

五. 总结

适当的使用深色界面,可以使界面在市面中普遍浅色系之中脱颖而出,更展现个性。但需要考虑产品要传达给用户的气氛和品牌形象,合理使用内容色彩,不单方面追求个性与视觉效果,避免画不达意的情况。在这前提下,大家不防尝试一下这种小清新以外的风格。

「做设计!从色彩开始」


【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

收藏 42
点赞

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。