数极客首页

浅谈UI设计中妙用无穷的深色系背景

黑暗系背景,或者说深色的背景,在UI设计中的运用至今都是一个相当有争议的议题。背景选取关于
界面的运用
效率而言是至关重要的,合理的背景设计让界面更易用,相反,一个不恰当的背景则可能毁掉你精心设计的UI。今天我们一同
来讨论
一下深色背景在UI设计中的运用
技巧和留意
事项。

影响配色计划
和背风光
选取的要素
有很多,深色的背景在网页和APP UI 界面中运用时,优点和缺陷
一样显然
。Tubik Studio 的诸多设计项目的实践
阅历

证明,深色背景自身
的确

能够
带来良好的用户体验,提供极具吸收
力的处置

计划
。所以,我们讨论
一下怎么在UI设计中最大水平
地运用深色系背景。

浅谈UI设计中妙用无量的深色系背景

深色系视觉感知

早在2009年的时分
,ProBlogger 就曾做过相应的调研,当问及用户他们喜欢什么样的博客背景之时,简直
有一半的用户反响

喜欢淡色
的背景——这很合理,毕竟博客是以文本内容为主,淡色
的背景 更契合
大家的日常阅读习气
。不过有意义
的中央
在于,大约
10%的用户反响

会更喜欢暗色背景,大约
三分之一的用户则以为
背景的颜色
与网站自身
的属性以及内容 相关。同时,这也意味着有相当大一部分

用户需求在设计师设计过程中被疏忽
掉了。但是
,关于
非文字驱动类的网站和APP当中,用户关于
深颜色

背景方面的需求 可能还要高。用户调研在实践
的设计项目中的重要性,由此可见一斑。

用户关于
背景颜色的感知规律在Richard H.Hall 和 Patrick Hanna 的科学研讨
项目中得 到了证明
。早些时分
,不同范畴
的科学家特地
针对网页的可读性中止

了系统化的实验和剖析
,他们得出了这样的结论:背景和内容两者之间的对比

度和可读性是成正 比的,白色背景下的黑色文字具有
最好的可读性。这个道理同样适用于黑底白字,控制好对比

度和明晰
度,两位科学家又合理的设计整个实验。这项研讨
包含了许多 不同颜色
组合的有效性测试,关于
设计师而言有很重要的参考意义。

浅谈UI设计中妙用无量的深色系背景

可读性方面

用户体验范畴
最著名的先驱之一 Jacob Nielsen 曾经说过:“文字和背景应当运用
高对比

度的配色。白底黑字能将可读性提升到最高,黑底白字在可读性上的效果简直
是一样的。固然
两种配色方式对比

度是相同 的,但是后者还是会让用户对文字的辨认
稍慢一些。受限于配色计划
,白色的文本内容相比于白底黑字的状况
,会显得愈加
纤细、含糊
,整体的明晰
度其实是不如常 见的黑字。这种状况
在纯黑背景和纯白字体的搭配下,最为显然
。”

的确

,可读性是影响产品性能的最重要的影响要素
,而可读性又不只
仅只牵涉到文本,一切
有意义的文本、标识、符号、数字、图案都存在可读性的问题。因而
,当设计师准备运用
深色背景的时分
,应当在不同的设备上测试字体、图标和图像在深色背景下的实践
效果,用来支撑整个设计。

浅谈UI设计中妙用无量的深色系背景

正好像
Awwwards 网站所提供的最佳黑色细网站设计合集中所展示

的,这些优秀的黑色系网站和APP页面为了在黑色背景上正常显现
内容,都精心选择
了合理的配色计划
。这些优秀的案例为我们贡献

出了如下阅历

  • 由于深色的背景会“吸收”其他元素的“光辉
    ”,所以元素之内、元素和元素之间要留有足够的空间,确保辨认
    度;
  • 较长篇幅的文本具有更好的可读性,关于
    用户更容易消化
  • 行间距和文本的长度关于
    可读性有显著的影响,特别
    是在深色的背景之下,所以篇幅长短、字间距、行间距需求
    认真
    思索
  • 深色并不意味着是地道
    的黑色,不同深浅的背景和文字的搭配带来的效果也不尽相同,所以应当怀着开放的心态多加实验
  • 色度、突变
    和光晕关于
    可读性有着显著的影响
  • 非衬线字体在深色背景下可读性更强,衬线字体在深色背景下则会显得愈加
    文雅
    。在实践
    设计过程中应当运用好两者的特性。

对比

度方面

Webdesign.about.com 所给出的这个对比

度的表单很好的为我们展示
了不同颜色
在对比

度上的实践
效果。这个表格最有意义
的中央
在于,黑色这一栏证明了黑色简直
是唯逐一

个能和其他色 彩都构成不错对比

度的颜色
。在中止

界面设计的时分
,尽量认真
测试每种颜色
,而黑色的这种特性使得深色背景下的颜色
搭配具有
更多的可能性。

浅谈UI设计中妙用无量的深色系背景

同样的,对比

度也是确保可动性的辨识度和明晰
的重要要素

有个早期的调查是针对对比

度和明晰
度的,调查标明
:在黑暗的背景下,尽量不要运用
纯白,应当将白色淡化为浅灰色,避免
极端的对比

使白色产生炫光,而 消弭
炫光至少需求
5%的灰色来达效果
果。有趣的中央
在于,这样的灰色在视觉中依然

被辨认
为白色。此外,将字体加粗也是放置白色被黑色“吃掉”的一种办法

另外值得一提的是,深色,特别
是黑色比起其他的颜色
来的愈加
深沉厚重,这也使得它更适合
于展示

图片、插画、海报等内容。良好的规划
和组织结构

下,黑色能够

显著的提升其他视觉元素的表现力,让内容更具有吸收
力。

浅谈UI设计中妙用无量的深色系背景

心情
感知方面

颜色
心理学同样是需求
思索
的要素
。背景不只
仅是内容展示
的平台,同时也想访客传送
着信息。深色通常会显得愈加
文雅
,也会展示
出神秘感。从颜色
心理学 上来看,黑色传送
出高雅、正式、名望、权益

的觉得
,这或许
是为什么许多大品牌会盘绕
着黑色来做视觉设计,并且运用
黑白来做主要的配色计划
。熟知黑色的这一 属性,能够

在UI设计过程中为客户提供优秀、合理的设计计划
,并能够

给出明晰
的解释。

浅谈UI设计中妙用无量的深色系背景

深色背景的优势

综上所述,我们能够
总结出深色背景的优势:

  • 作风
    化,文雅
  • 给人神秘的觉得
  • 带来奢华

    和高端的氛围

  • 具有
    宽广
    而良好的对比

  • 更容易发明
    视觉层次感
  • 发明
    视觉深度,让内容更容易被获取
  • 视觉吸收

浅谈UI设计中妙用无量的深色系背景

值得思索

的问题

浅谈UI设计中妙用无量的深色系背景

另外,深色背景也有省心

的一面,假如
没有合理规划细节的话,用户容易在规划
间迷失。所以,我们还有一些问题是值得思索

的:

  • 用户研讨
    :针对目的
    用户中止

    实践
    调查、理论研讨
    和实验
    ,得出来的数据和信息是发明
    有效和有吸收
    力的配色计划
    的基础

  • 竟品研讨
    :对竞争对手、竟品中止

    是市场调研,调研结果会影响设计计划
    ,让产品更容易被了解
    ,发明
    愈加
    注目
    的设计。

  • 用户测试:深色系背景在不同的设备、不同分辨率下的可读性、明晰
    度上的实践
    效果,经过
    测试寻求影响要素
  • 环境要素
    :剖析
    产品可提供给

    用户其他方面的支持,以及用户感到恶感
    的缘由
    等外部要素

  • 内容量:页面的内容的掩盖
    范围和背景深浅等典型要素
    之间的配比,以及它们关于
    用户运用
    体验、视觉感知的影响。
  • 内容属性:深色的背景关于
    图形和文本等不同属性的元素的影响。

 

译文来自:优设

原文地址:medium

译者:@陈子木

 

新一代大数据用户行为剖析
与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合剖析
用户行为数据和业务数据,能够
自动监测网站、APP、小程序等多种渠道推行
效果剖析
,是增长黑客们必备的互联网数据剖析
软件。数极客支持实时多维剖析
、漏斗剖析
、留存剖析
、途径
剖析
等十大数据剖析
办法
以及APP数据剖析
网站统计网站剖析
小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据剖析
模型,是数据剖析
软件
范畴
首款应用定量剖析
与定性剖析
办法
数据剖析
产品

发表评论

评论已关闭。

相关文章