一 背景颜色
用面与面来区别各个组件之间的不同,通常会找一个跟背景色相差无几,稍微深一点或者浅一点的颜色。这个颜色唯一的功能就是告诉人们这两个区域是不同的,仅此而已。
下面推荐集中颜色:
为了不抢占人们太多注意力,在白色的背景上一般用非常浅的灰,深色背景上用的则是比背景色稍浅或者稍微深一点的灰。
颜色对照表: https://tool.oschina.net/commons?type=3
颜色选择网站: https://flatuicolors.com/
二 字体、内容颜色
UI中文字的层级关系,除了用字号字体和间距来表达外,最常用的一种就是通过颜色的对比了。而这种对比跟上面用来布局的遵循的原则完全相反。上面的色彩对比是越小越好。而文字的层级关系上色彩的差别越大则层级关系越清晰。除此之外它们都需要跟背景有相对高的对比,否则会影响文字的阅读。
三 其他配色
黑白灰基本上可以和任何一种颜色和谐相处。大部分的UI配色都是黑白灰+一个主色+一个辅助色。
在黑白灰的基础上添加了些许的色彩,例如推特这种,主色调是蓝,无论是背景还是文字,都其实是一种饱和度极低的蓝。
这里说一下,Facebook 界面的主色调貌似也是选择蓝色。
四 拓展内容 — 蓝色界面风格
蓝色是 UI 设计中最重要的颜色之一,也是其中最常见的。看看你的智能手机应用程序图标,你会看到很多都是蓝色的:Facebook,Twitter,Shazam,Safari等。(国内有知乎、支付宝、钉钉、App Store等)
为什么都选择蓝色?原因?
1、蓝色是代表科技感的颜色
led发光种,红绿蓝、蓝色led是最后被发明的,在历史上曾具有科技性的代表,且赋予创新意识。所以,通常科技类公司喜欢使用蓝色,因为它与技术和创新相关。
2、人们喜欢这种颜色。
调查显示,大多数人将蓝色视为最喜欢的颜色(一半以上男人喜欢蓝色,三分之一以上女人喜欢蓝色)。蓝色被认为是全球最安全的颜色。
3、让人感到安全。
蓝色是旅游行业网站和应用程序的常见颜色。它代表可靠性,这对旅游公司来说是件好事。
4、无障碍。
最常见的色盲症(红绿色盲)可以看到蓝色。但对于绿色或红色的颜色来说,很难识别。