返回
南京学码思教育
置顶
该校与厚学网暂未合作,平台不保证课程的真实有效性,如有侵权等争议,请及时与厚学网联系处理
招生热线:400-800-2178

学校地址:南京市秦淮区科巷10号三楼301室

UI设计中,深色背景的使用技巧和注意事项

655 2018-07-17 09:09:16

学习笔记

黑暗系背景,或者说深色的背景,在UI设计中的运用至今都是一个相当有争议的议题。背景选取对于界面的使用效率而言是至关重要的,合理的背景设计让界面更易用,相反,一个不恰当的背景则可能毁掉你精心设计的UI。今天苏州学码思小编就和大家一起来探讨一下深色背景在UI设计中的使用技巧和注意事项。

深色的视觉感受

一个新的投票结果得出了一些有趣的点。用户投票选出了他们喜欢的博客背景,几乎一半的人都选择了浅色背景。这个结果也算合理,因为博客是以文字为主导的,所以可读性胜过了其他因素。然而,有10%的读者选择了深色背景,超过三分之一的人提到做出什么选择需要根据博客的内容而定。如此大比例的一群用户不应该被忽略。而且,在非文字驱动的内容条件下,有更多的人选择了深色作为网站和App的背景色。这也是一个很好的例子,告诉我们研究和问卷应该是设计过程中很重要的一个环节,它告诉了我们用户真正想要什么。

不同的科学家通过实验研究了背景颜色对网页的性能和可读性的影响得出结论:深色文字在浅色背景上表现更好。两者之间的对比度越高,表现越好。

所以理论上,当其他因素(特别是对比度和易读性)不变的时候,深色背景也可以跟浅色背景表现得一样好。那个实验基于用户测试,包含了很多有趣又有用的信息,得出了不同组合的颜色以及它们各自的效率。所以对设计是来说非常值得。

关于可读性

好的网站和App设计,成功地运用了深色背景而丝毫没有降低可读性。为了避免这个问题,在设计过程中要记住以下几点:

a.深色背景从吸收了其他界面元素的光,所以在元素之间需要有足够的空白空间或者“空气”:

b.行间距和文字的长度对可读性的影响很大,特别是在深色背景上,所以段落的长度,文字间距和行距要特别重视;

c.深色不一定是,所以在每个不同的项目中,都要尝试多种不同的深色,对比他们在内容表现上的差异再做出选择;

d.阴影,渐变和发光效果可能影响可读性;

e.sans-serif字体通常被认为可读性更好,运用这种字体可以提高可读性。

关于情感感受

颜色心理学是我们在选择背景的时候的另一个考虑因素。从这个层面上说,背景不仅仅关乎展示的有效性,背景背身就带有信息。深色通常个人优雅而神秘的感觉。而且,通常跟正式,礼仪和权力联系在一起。这也是为什么很多力量型的品牌都喜欢用黑白两色来展示形象。在界面设计中考虑到心理层面,可以为你的设计方案提供更多依据。

另一方面,在用背景的时候需要注意到页面上每一个细节,一不小心就有可能布局不当。所以在应用的时候,要特别考虑以下几点:

1.用户调研。实际调查,理论研究和实验是非常重要的设计素材。目标用户的愿望,期待是选择有效和有吸引力的颜色的基础。

2.竞品分析。市场调研可以帮助你了解哪些设计方案已经在使用了,所以要使你的产品在市场上脱颖而出,就要给出一个让人眼前一亮的新设计。

3.用户测试。在可读性和易读性上,深色背景似乎比较弱。所以要进行用户测试,并且进行多种设备和分辨率的测试来保证深色背景上的可读性和易读性。

4.环境因素。分析可能的用户使用环境,将会提供你使用背景的更多的支持依据或者反对因素。

5.内容的数量。页面上需要展示的内容的数量也将影响你对背景的选择:深色背景上的元素之间如果没有足够的空间,将很难阅读。

6. 内容的形式。深色背景更利于展示图片形式的内容而不是大块的文字内容。


文中图片素材来源网络,如有侵权请联系删除
来源:南京学码思教育
热门课程 全部课程

热门动态

申请免费试听

只要一个电话

我们为您免费回电

立即申请
刷新
图形验证
关闭
>>
拖动左边滑块完成上方拼图
机器人