当前位置: 首页 >文章 > UI配色如何更和谐?这7个实用技巧告诉你!
收藏
分享

UI配色如何更和谐?这7个实用技巧告诉你!

举报BIGD0BIGD0发布于 2020-12-191422阅读0点赞
7个实用技巧让你UI配色更和谐...

哈喽小伙伴们~今天给大家推荐一篇由Medium专栏主编Nick Babich总结的干货文章,作者从7个方面阐述了我们在构建配色系统时需要注意的小技巧,非常精炼和实用,希望能给大家带来一些新的思考~


原文内容


色彩对任何界面(以及排版和空间)来说都是非常重要的部分,它会对数字产品的整体感知产生巨大的影响力。而配色结构也同样重要,如果没有合理地组织颜色,我们将会被各种杂乱的色彩淹没。


那如何才能建立一个统一的颜色系统呢?


以下是在一个新的设计项目中构建配色系统的七个实用技巧:


1. 进行界面统计


界面统计是对APP或网站的组件进行分类的过程,它可以帮助我们了解在产品中使用了多少种颜色和元素。


如果我们设计的是网页产品,可以使用CSS Stats这样的工具来查看样式表中有多少种独特的颜色。(CSS Stats:https://cssstats.com/)


如果是在Sketch中统计界面目录,可以使用Sketch-Style-Inventory(https://github.com/getflourish/Sketch-Style-Inventory?ref=uxplanet)插件统计所有的颜色,还能够合并相似的样式。



对于现有产品,我们建议检查每种颜色在代码中的实际使用次数。这样做可以帮助我们了解到颜色在不同的地方的使用情况,以便更好的组织色彩系统。



2. 让品牌色彩成为基础


如果我们在为一个知名品牌工作,那么一定会有一个标志性的品牌色彩。


不要为UI设计修改品牌颜色


在为已经拥有品牌色的产品设计时,最重要的是我们不能在品牌色彩上进行创新,因为这样做会偏离品牌的指导方针。


那应该如何做?


尝试在设计结构中使用品牌颜色。


我们可以尝试在UI元素中体现品牌颜色,如页眉、页脚、菜单等等。



Slack使用其品牌颜色作为侧边栏配色


如果我们的品牌颜色适用于浅色或深色背景,也可以将其用作设计的布局颜色。



3.定义基本颜色


在确定基本色彩时,我们最好不要选择极端的颜色,如纯白色(#FFFFFF)或纯黑等。并且根据对配色系统的需求,我们可能需要一系列的浅色调或深色调,如果选择太多的色彩和色调的话,会让设计师在选择颜色时更加困难。


寻找低对比度的中性颜色


虽然低对比度的中性颜色对于需要读取的元素来说不太友好,但对于输入字段这样的元素来说绝对是最佳搭配。因为输入字段并不需要太突出,所以低对比度的中性颜色可以帮助我们创建一个完美的UI容器。



限制基本色的数量


理想情况下,我们应该有少数经过认可的基本色(1-3种品牌色)和足够数量的强调色。



4. 定义交互的颜色


交互配色是用于交互元素的颜色——按钮、链接和用户可以单击或触摸的其他UI控件。


限制交互颜色的总数


如果可能的话,尽量只使用一种颜色作为主要的交互颜色,因为这样可以让用户加深对这种颜色的记忆。


与此同时,我们还可以创建交互颜色的浅色和深色版本。颜色的深浅可以帮助我们为UI元素传达不同的状态——例如,按下状态/悬停状态。



争取一致性


对于用户来说,颜色是非常好的导航工具。在链接和按钮中使用相同的颜色可以帮助用户识别交互元素。



5. 定义色彩


有动机的色彩才是有意义的配色。在产品中我们需要为错误、警告和成功等状态设置颜色。


错误状态的颜色


我们经常会使用红色部分来表示错误状态。但如果我们的品牌颜色碰巧是红色,那么最好避免将其用于错误消息。为什么?因为这样做会让用户把你的品牌颜色和问题联系起来。


成功状态颜色


绿色通常表示成功状态,如果我们的品牌色是绿色,那么用它来表示成功状态绝对没问题,因为用户会把你的品牌颜色和积极的结果联系起来。



限制动机色彩的数量


在理想情况下,错误状态和成功状态都只有一种颜色代表。所以我们需要确保这两种颜色都适用于低对比度和高对比度的背景。



禁用状态颜色


设计师们通常会使用低透明度色彩来代表禁用状态。这里我们应时刻注意颜色具有足够的对比度,以便用户能够阅读。




6. 明确的命名约定


如果要将色彩保存在设计系统中,我们一定要为使用的每种颜色给出清晰且易于理解和记忆的名称,以方便设计人员和开发人员能够轻松地引用系统中定义的特定颜色。


与此同时,我们还要尽量避免使用层次性的形容词(如浅蓝、深蓝),而是使用功能名称——根据UI中的位置来描述颜色名称。




6. 可访问性


创建可访问的配色,让任何人能够使用我们的产品。


检查颜色对比


下面是一些检查色彩对比度的工具合集,大家可以根据需要选择。


https://uxpro.cc/toolbox/accessibility/color-accessibility/




7. 测试你的调色板

虽然在某些情况下,修改现有颜色不会产生任何问题,但一旦出现错误,就有可能会破坏整个UI,所以我们必须仔细测试用于UI的配色方案。


现在可以使用一些工具(https://uxpro.cc/toolbox/web-design/visual-regression-testing/)来实现此目的,但手动测试可以获得更好的结果。



最后,如果你仍然对构建配色系统感到无从下手,也可以参考下面的实用配色工具合集:


https://uxpro.cc/toolbox/visual-design/colors/



原文链接:https://uxplanet.org/7-tips-to-organize-colors-for-ui-design-97bbefed8a8a


用设计的角度看世界,用学习的方式来成长

BigDcc


0条评论
别默默看啦~登录/注册一起参与讨论吧~

暂无评论

请选择举报理由

违反法律法规

侵犯个人权益

有害网站环境

更多训练营>>

为你推荐 · 训练营(全勤打卡报名费全额返累计全额返用户133,481人)

【4月】趣味MG动画制作训练营
距离开班仅剩11天33人已报名
【4月】零基础手绘插画训练营
距离开班仅剩11天61人已报名
电商海报设计训练营
距离开班仅剩39天23人已报名
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了46,688
并提交了341份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证