恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
暗黑背景
0.0°
2016-05-22 自译外文 经验/观点 原作者: Marina Yalanska 举报 3187 21 18 2

暗黑色背景


使用深颜色和色调在用户界面背景方面仍属于极具争议的问题。

难怪它是如此的真实:选择合适的背景对于生产效率的提升有着至关重要的作用,因为它可以成为增强或一个关键因素,反之亦然,成为布局和功能等设计解决方案。今天,我们的文章将致力于使用的UI设计深色背景的好处和陷阱,让我们现在开始吧。

 

在我们以前的文章中 ,我们已经分析了所提到的一些要点,在这个过程中要考虑到可能影响普通配色方案和基本的背景颜色的选择以及的其他的一些因素。这一次,我们将详细集中讲解深色设计,网站和移动应用的优点和缺点。对创建和Tubik工作室在这里测试不同的用户界面的实际工作经验证明,黑暗的背景可以提供良好的用户体验和强大吸引力的解决方案。让我们只是想当然,并讨论何时何地,我们可以把它在最大话在工作上。

 

暗视觉

 

其结果被公布,而很久很久以前,在2009年的调查中,在ProBlogger已经拥有了一些有趣的观点。读者问他们喜欢在博客上什么样的背景。几乎一半的读者回答了背景光最好-那就是合理,因为博客是传统文本的驱动,因此可读性胜过其他方面。然而,10%的受访回答说,他们更喜欢深色背景和三分之一以上提到的选择应取决于博客的性质和内容。用户这么大的比例不应该由设计师在寻找设计解决方案的过程中被忽略。此外,在数字化产品的文本驱动内容浓度小的情况下,例如网站或应用程序的比例可变得更大。这表明用户研究和调查应该是设计过程的重要组成部分,这是一个很好的例子。了解用户希望或者至少是他们已经准备好可以推动传统视力的极限。

 

该科研理查德H. Hall和帕特里克·汉纳解决这个问题提供了有关凸显的背景颜色,其性能的视觉感知的重要一点。由早些时候的网页性能和可读性领域做了不同的科学家分析了该实验,作者总结:他们发现,正极性组合造成了更好的性能(即上白底黑字的文字),并与研究如前所述,更大的色彩组合性能越好之间的对比度。因此,深色背景可以是一样有效的情况下,作为浅色时其它方面中,在布局元素的特定对比度和清晰度,设计并适当的测试。这项研究包含了很多根据不同的颜色组合及其有效性的角度看用户测试有趣和有用的信息,因此强烈建议设计师了解。

 Image title

 

可读性解读

 

正如著名用户体验设计大师雅各布尼尔森所说:使用颜色的文字和背景之间的高对比度。最佳可读性需要黑色文本在白色背景(所谓正文本)上显示,与在黑色的背景(负文字)白色文字是几乎一样好。虽然对比度是相同的正文字,倒置的颜色方案促使人们离开一点距离来减慢它们的读取速度。易读性受到更多的配色方案影响,使文本类似纯黑色的打火机,尤其是如果背景是由比任何纯白色暗。

 

的确,可读性是产品影响性能的重要方面,它不仅涉及文字。它超越的拷贝的限制和意味着所有有意义的符号,包括字母,数字,象形和图标都应该注意,并在界面上容易识别。因此,设计者应准备有利于选择深色背景的特别透彻,并在不同的设备上测试字体,图标和图像。

 

 Image title

最好的网络和应用设计的做法,例如收集关于Awwwards最佳黑网站的拥有成功的设计解决方案,用深色背景颜色方案的基础上,仍然不可避免在可读性遭受的问题。为了避免这个问题,在设计过程中重要的是要记住:

 

- 暗背景从其它元素吸收光的某些部分,因此应该有足够的空的空间或元素之间的“空气”;

 

- 该行可以让副标更具可读性和可消化用户的长度;

 

- 字体和选用深色背景字样;

 

- 行间距的考量,以及文本行的长度问题,对于可读性有很大的影响,特别是在黑暗的背景上,所以段大小,字距和行距应仔细考虑了;

 

- 黑暗并不总是意味着黑色,所以在每一个特定的情况下设计,合理的花费一些时间测试不同种类的深色背景和颜色所呈现的内容,作为开放实验;

 

- 色调,渐变和光晕会影响可读性;

 

- 无衬线字体通常比较清晰,而衬线字体看起来更加优雅,在实践中应用该方法可增强内容的可读性。

Image title


 

 

对比度的方面

 

在视觉方面来考虑一个有趣的事情是所提出的表webdesign.about.com。表展示的不同的颜色组合的对比度和性能水平提供了有趣的事实:表中的黑色部分是提供了与几乎所有的颜色对比度良好的唯一的一个。在设计界面的每一个特定的情况下仔细测试,这个因素可以尝试深色背景的设计方案变体的原因。

 

 Image title

在可读性方面,对比度也是能够使内容更容易识别和清晰的因素之一。

 

其中一个早期调查的对比度和清晰度状态方面这样的提示:黑暗背景,确保您不必过于明亮的刻字:白色字体淡化成浅灰色,或用于减少极端的对比沉闷的颜色和眩光; 做幻灯片时,以及这个原则用于:至少5%的灰色用于切割亮白色的强光。有趣的是,这仍然读为白色。此外,使文字加粗,因此它有足够的身体不被«活活吃掉»的黑暗。这个测试以及其他可以在网页或应用程序屏幕上,可有效的和自然的较量提供色调的新变种。

 

更何况还有一件事是,黑底色是莫名其妙重,更深通常呈现图形内容,如图片,照片,插图,海报和广告提供了极大的[商机。良好的组成及以下的视觉层次的坚持的原则可以显著提高这种布局元素的视觉感受。这一因素使得深色背景高效和有吸引力的情况下,当接口更多的图形材料比副本为主。


 Image title

 

情感感知的方面

 

色彩心理学是另一个要重点考虑的选择,这将不仅呈现的有效领域,而且其自身信息的载体的背景。黑暗的颜色通常与优雅和神秘感有关。此外,黑色往往与高雅,形式,声望和权力有关。这或许是为什么许多强大的品牌围绕深色主导光呈现,并通知recepient黑与白的方案视觉表现的原因之一。在界面设计打出来这一方面可以提供给其它设计解决方案和产品的一般介绍的其他支持。

 Image title

 

 

深色背景的好处

 

根据上述各点,我们可以总结出,在用户界面采用深色背景可以提供必要的福利,其中:

风格和优雅

感受神秘

奢华与久负盛名的样子

采用对比的广阔领域

支持视觉层次

深度呈现的内容反射

视觉吸引力

 Image title

 

需要考虑的要点

 

在另一方面,黑底色需要进行彻底的关注和可以迷失在布局,如果他们不正确呈现smalest细节分析。其中,我们应该考虑:

用户研究:关于目标受众的用户研究,实际调查,理论研究和实验,其愿望和期望是选择有效和有吸引力的设计方案基础数据的重要来源。

竞争研究:接近竞争对手市场调研给出了设计方案已经在选择最初的设计解决方案,使产品应用明显受到市场上的其他球员,这个因素的影响的认识。

用户测试:黑暗的背景是在可读性和易读性等方面更容易受到应该在所有的各种设备,并在不同的分辨率进行彻底的测试。

环境因素:在该产品将被目标受众使用可以提供赞成或反对深色背景的选项的其他原因的典型条件分析,

内容数量:元素和模块,它必须在屏幕上或网页上的功能可以影响周围的背景决定的数量:暗背景元素之间的空间太小是非常辛苦的做法。

内容性质为黑底色可以根据图形元素,而不是大批量拷贝和读取接口,来达到更好的性能。

Image title


更新:2016-05-22

收藏

21人已收藏

yhmnin

dribbble.com/yhmnin

  • 14

    作品

  • 477

    粉丝

  • 59

    关注

  • 独白 - 言
  • Alice
  • OPCS
  • Read & Food

    猜你喜欢

      2016-05-22 自译外文 经验/观点 原作者: Marina Yalanska 举报 3187 21 18 2

      暗黑背景

      0.0°

      你确定要举报暗黑背景

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年05月18日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      18
      21
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录