哈喽小伙伴们~今天给大家推荐一篇由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
暂无评论
违反法律法规
侵犯个人权益
有害网站环境