96

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

 6 years ago
source link: http://www.uisdc.com/dark-interface-design-analysis
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

2017-10-18 推荐: 布莱恩臣阅读 3.1w 评论有奖 阅读本文需 4 分钟

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

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

一. 前言

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

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

二. 感受

时尚优雅

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

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

神秘感

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

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

奢侈高贵

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

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

抑郁与恐惧

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

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

三. 优点

表现光感

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

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

视觉层次

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

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

视觉对比

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

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

长期阅读

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

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

四. 技巧

考虑内容可读性

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

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

色彩倾向

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

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

黑色更省电

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

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

五. 总结

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

「做设计!从色彩开始」

【优设网 原创文章 投稿邮箱:[email protected]

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

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

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

20220530-dkt-taiye-bottom-banner.jpg
点赞
收藏 25

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


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK