1. UI呀-UIYA.CN-高品质UI/UX设计学习网站 | Sketch UI设计网 学UI设计 sketch 学ui,ui,ui设计,ui素材,ui资源,ui教程,ui设计教程,免费ui,ui设计培训,ui培训,交互设计,ui学习网站首页
  2. 教程
  3. APP设计

UI色彩那些事(下)

人们对色彩的敏感程度高于形状,色彩能在第一时间吸引人们注意力,也是最容易被人们记住的元素,在UI设计中也非常重要,更是逐渐形成了一些色彩的使用规范、技巧与惯用颜色。


上篇我们已经分析了UI设计中品牌色中性色的使用,今天继续功能色辅助色这两方面。想回顾上篇内容的小伙伴可以直接传送门进入→《UI色彩那些事(上)》。



功能色


功能色顾名思义就是代表某种功能或意义,现在常用功能一般都已经有了与其匹配的惯用色,我们在选择的时候遵循现有规律即可,这样对用户来说学习成本才是最低的,能够清晰明了一看就懂。

大家最常见熟悉的功能色,比如绿色代表正确成功,红色代表错误。


再比如从链接文字,带颜色的文字会给人以可点击感,有些情况下会选择的主题色,但也有一些主题色不适合的情况,比如主题色是红色,红色本身会带有些警告警示的意味;黄色明度高不适合小文字的阅读等。

除了主题色,还有一种通用的选择就是使用蓝色作为链接文字的颜色,这是从web时期就培养出来的视觉习惯,用户也很熟悉。点击前为蓝色,点击后用紫色。


提醒、警示性则以橙红色为主,橙红色系能带来视觉刺激,最能引起用户注意。不管是徽标圆点,还是文字提醒,都选择了它。




辅助色


上篇中提到品牌色是体现公司文化、产品特色的重要视觉元素,是人们脑海中对于产品的强烈记忆点。但在一些情况下,只有品牌色不足以表达完整的视觉效果,所以还需要辅助色的帮助,丰富视觉层级,减少审美疲劳。

辅助色的选择可以从三个方面来考虑,分别是:相近色、互补色、渐变色。



· 相近色

相近色其实就是与主题色相近的颜色,比如Tints and shades系统:通过对主题色加入白色或黑色(tints加白色,shades加黑色),改变主题色的明度与饱和度,增加颜色的层级变化,以满足不同场景的需要。


常见的使用场景比如web端按钮的常态、经过与点击的色彩,就可以使用tints和shades系统的算法来得到。



· 互补色

互补色则与相近色刚好相反,相近色的色相不发生改变,而互补色则是选择不同色相,色环相对180°的色彩产生强烈对比。


熟悉的例子比如Airbnb、厨房故事都是采用互补色的配色方式。



· 渐变色

渐变色选择与主题色在色环内15°的色彩,色相与主题色接近又稍有不同,保持色彩的冷暖一致,过渡更加自然,视觉效果自然和谐。


PS:15°以内是安全区域,指不超过15°的范围,但并不是指选择相差最大的色彩,根据现在微渐变的流行趋势,选择与主题色更相近的颜色会更加适合。且不同色相给人视觉上的感观区别程度也不一样,我们还应根据具体情况选择,多尝试对比。



除了色相上的变化,也可以使用上面定义的同类色来制作渐变色,选择明度和饱和度的变化,这种方式是比较保险的方式,是一张安全牌出错几率小一些,效果更加可控,对新手小伙伴更加友好。




配色工具


当然现在也有不少配色工具可以帮助我们,推荐我个人觉得比较好用的两款

·Color Scheme Designer

确定主色后可以选择单色、互补色、类似色等搭配。

http://www.peise.net/tools/web/



·material design palette

www.materialpalette.com

选择两种颜色后,可以有颜色搭配及页面预览。




划重点 


· 选择功能色的时候遵循现有规律对用户来说学习成本最低,一看就懂。

· 渐变色既可以选择色相的变化,也可以选择明度、饱和度上的变化,需要根据当下流行趋势及具体情况选择。


参考引文

http://1t.click/aUyw《颜色》




本文来自:海盐社    作者:海盐社

文章版权归原作者,内容为网络收集。如有侵权请告知我们并会及时删除。邮箱: hello@sketchui.net

发表评论

电子邮件地址不会被公开。