在视觉设计中，色彩是似乎一切的灵魂，界面设计中更是离不开色彩，色彩可以说像语言一样强大，它可让你牢记于心，比如可口可乐红色，我相信大部分人印象很深刻。所以说色彩魅力对于产品设计至关重要。
今天分享一个配色技巧，下面是分享目录：
1. 目前现状
2. 为什么要学习颜色
3. 使用颜色的技巧
4. 需要注意的问题
5. 总结归纳
1.目前现状
设计师不理解产品，不会去合理在界面中使用颜色，这是最头痛的事情。要么只顾着美观好看，不去思考背后逻辑，因此配色只能碰运气，下面看一些真实案例。
△ 来源于群小伙伴的案例
上面这个案例色彩随意使用，很难让你抓住重点（已投，点赞，关注）都可点击吗？右侧界面标签颜色和价格这两个功能随意使用颜色，整个界面毫无层次感可言。
△ Johnny Nova （Dribbble）
如上图，是一个App概念设计图，左边界面中颜色过多并且很乱，画面花哨，关键信息在里面不易查找，给用户造成一种什么都重要的感觉。
△ Mat Jankowski（Dribbble）
同样一售卖产品界面设计，左侧用力过猛，每个模块都使用颜色。画面花哨同时缺乏精致度和美感。
2.为什么要学习
色彩影响着我们生活方方面面，比如红绿灯影响着我们什么时候可以过马路，周边绿色植物多，我们心情会更好。在设计中的影响同样很大。
1 强调品牌
色彩第一进入人眼，也是更加让用户记忆深刻，有研究表明，用户在读取文字时候与看颜色相比，颜色更易记住。
△ 大家比较印象深刻的可口可乐红色
△ 星巴克绿
△ KFC 红
除了通过留白，大小来区分层级关系，色彩也是一个比较重要因素。
△ 右侧比左侧视觉重量大
△ 高亮地方使用颜色
3 增强购买欲
△ 关键入口使用颜色引导
4 强调交互
3.使用颜色的技巧
色彩运用中我们可以使用黄金比例 6：3：1，即60％+ 30％+ 10％的原则是达到色彩平衡的最佳比例。
颜色使用尽量控制在3种以内，这种其实也是和黄金原则相匹配，可以配合使用。
下面我们先看一些案例：
△ 60%绿色，30%白色，10%深色
△ 60%深色，30%白色，10%品牌蓝
△ 60%白色，30%深色，10%红色
上面四个案例中我们可发现，界面中色彩使用不超过3种，视觉设计也是有层次，功能设计也能得到满足。
△ Google材料设计语言案例，2种颜色
为了减少过多颜色使用，我们通常同色系运用比较多，或者单一颜色就设计整个界面，这里我们可以运用HSB模式。
这种思路方法是：通过降低亮度和增加饱和度，可以使颜色变化更深。通过增加亮度和降低饱和度，可以产生更明亮的色彩变化。
△ 同色系，产品通过明暗亮度关系建立层级
4.需要注意的问题
色彩让产品品牌记忆得以加强，增强交互元素，提升设计美感，同时可运用颜色激发不同情感，但我们在运用时候需要规避一些问题。
– 注意色彩之间不同情绪表达，不同颜色给用户传递不一样性格特征，如蓝色、红色、粉色、绿色、黑色。
– 红色避免大面积运用，除非特殊行业属性，比如肯德基，暖色调加强食欲
– 颜色使用需要依据该产品定位及用户群体
设计的颜色始终与产品的品牌联系在一起。设计师使用颜色作为传达产品含义的一种方式。在设计中，颜色合理使用，可促进关键功能满足商业诉求，增强购买欲，加强入口曝光。
因此设计师在做界面设计时候，应减少颜色使用数量，尽量控制3种以内，采用6：3：1比例去合理分配颜色。
大家注意看顶部四个图标的色彩其实都是源于LOGO颜色，不断重复重组的使用。最后要说的是6：3：1并不是绝对的一个数值，
在应用过程中随着产品增加复杂功能，需要更多颜色，大家合理控制使用色彩占比。
学会使用重复手法，HSB色彩模式，这点绝对不会错，掌握透了，界面配色不是难题。
粉丝福利：一个不错的配色网站，https://color.adobe.com/zh/create
原文地址：功夫UX（公众号）
作者：功夫UX
评论0