满象网络 满象网络
  • 首页
  • 运营知识
    • 用户运营
    • 电商运营
    • 社群运营
    • 产品运营
  • 行业洞察
  • 产品相关
    • 产品经理
    • 产品设计
    • 评测分析
    • 交互体验
    • 数据分析
  • 营销干货
    • 品牌营销
    • 广告文案
    • 增长黑客
    • 活动策划
    • 竞价推广
  • 职场必看
    • 职场攻略
    • 企业战略
  • 好文分享
  • 行业动态
  • 爱思动态
  • 注册
  • 登录
首页 › 产品相关 › 交互体验 › UI设计色彩那些事(下)

UI设计色彩那些事(下)

渔夫
2020-12-01 11:07:13交互体验阅读 144

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

UI设计色彩那些事(下)-满象网络

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

功能色

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

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

UI设计色彩那些事(下)-满象网络

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

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

UI设计色彩那些事(下)-满象网络

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

UI设计色彩那些事(下)-满象网络

辅助色

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

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

UI设计色彩那些事(下)-满象网络

· 相近色

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

UI设计色彩那些事(下)-满象网络

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

UI设计色彩那些事(下)-满象网络

· 互补色

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

UI设计色彩那些事(下)-满象网络

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

UI设计色彩那些事(下)-满象网络

· 渐变色

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

UI设计色彩那些事(下)-满象网络

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

UI设计色彩那些事(下)-满象网络
UI设计色彩那些事(下)-满象网络

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

UI设计色彩那些事(下)-满象网络

配色工具

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

·Color Scheme Designer

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

UI设计色彩那些事(下)-满象网络

·material design palette

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

UI设计色彩那些事(下)-满象网络

划重点

  • 选择功能色的时候遵循现有规律对用户来说学习成本最低,一看就懂。
  • 渐变色既可以选择色相的变化,也可以选择明度、饱和度上的变化,需要根据当下流行趋势及具体情况选择。

#相关阅读#

UI设计色彩那些事(上)

赞赏 赞(0)
电商运营之站内搜索的全面指南 (七)
上一篇
运营者必须要了解的微信公众号推送机制
下一篇

请登录以参与评论

现在登录
暂无评论
近期文章
  • 新能源充电站能赚钱吗?
  • 你怎么看待打工临时夫妻现象?
  • 没有这两种能力,赚钱就是空谈
  • 闲鱼运营学到这些技巧你就离成功更近了!
  • QQ群最新排名优化
  • 没有门槛的项目,真的能赚到钱吗?
  • 当B站“不再二次元”,破圈易,盈利难!
  • 直播间十大话术总结,直播间的互动话术你懂了几个?
聚合文章
写给设计师的9个宝贵建议
工作周期中5个阶段UI设计师的工作方法
双十一剁手节落下帷幕,各大电商交易额战报Pk
VR 产品的用户界面设计
【民警:您这心可够宽的!】
烂疮未除,辛巴着急复出
kindle的文案句句都是经典(建议收藏)
B端产品一定要了解的知识
B端交互设计过程中的思考
2021-04-19 19:26:54
230 0 0
一文读懂“人本主义心理学中洞察人性”的马斯洛需求层级理论
2021-04-06 19:27:01
357 0 0
HSB色彩模式,让配色有理有据
2021-04-03 19:27:36
165 0 0
交互设计中缩短用户路径的方法与案例
2021-04-01 19:27:17
264 0 0
  • 0
  • 0
Copyright © 1992-2023 满象网络. Designed by nicetheme.
未经许可,请勿转载 豫ICP备2020024986号-2
  • 首页
  • 产品相关
    • 交互体验
    • 产品经理
    • 产品设计
    • 数据分析
    • 评测分析
  • 好文分享
  • 职场必看
    • 企业战略
    • 职场攻略
  • 营销干货
    • 品牌营销
    • 增长黑客
    • 广告文案
    • 活动策划
    • 竞价推广
  • 行业洞察
  • 运营知识
    • 产品运营
    • 用户运营
    • 电商运营
    • 社群运营
  • 行业动态
渔夫
1753
文章
0
评论
2
喜欢