想做好UI配色?只需要这三步!

释放双眼,带上耳机,听听看~!
一套产品色彩需求有哪几种色彩:品牌色+提示类型色彩(成功、过错、警告)+中性黑白灰色彩(各种字体、背景、分割线色彩等)那么用到的色彩类型:品牌色品牌黑内容底色大局底色分割底色图标色文字链接可点击色彩提示信息过错提示过错提高文字色彩重要文字惯例文字辅助文字 1辅助文字 2反白文字或图表非必须的反白文字或图表分割线惯例分割线(10%)、着重分割线(30%)、最弱分割线(5%)反白:惯例分割线(10%)、着重分割线(30%)、最弱分割线(5%)如何...

一套产品颜色需要有哪几种颜色:品牌色+提示类型颜色(成功、过错、警告)+中性黑白灰颜色(各种字体、布景、切割线颜色等)

那么用到的颜色类型:

  • 品牌色
  • 品牌黑
  • 内容底色
  • 大局底色
  • 切割底色
  • 图标色
  • 文字链接可点击颜色
  • 提示信息
  • 过错提示
  • 过错提高

文字颜色

  • 重要文字
  • 惯例文字
  • 辅佐文字 1
  • 辅佐文字 2
  • 反白文字或图表
  • 非必须的反白文字或图表

切割线

惯例切割线(10%)、着重切割线(30%)、最弱切割线(5%)

反白:惯例切割线(10%)、着重切割线(30%)、最弱切割线(5%)

怎么承认品牌颜色

选取品牌色方面,挑选公司 logo 色是最为稳妥的,便于与公司的品牌标识保持共同,具有更好的辨识度。假如因为出于公司的产品战略要求,需要跟公司其他的产品有所区分,更多的仍是要考虑到产品本身的特征,比方医疗方面多用蓝色、绿色,给用户一种安全、牢靠;购物产品用色多为艳丽,主要目的是要激起用户的购买欲。

首要,咱们承认主色为:

想做好UI配色?只需要这三步!

想做好UI配色?只需要这三步!

想做好UI配色?只需要这三步!

想做好UI配色?只需要这三步!

在获取品牌色色阶之后,选取其中的几个颜色用于产品中进行不断的尝试与评定,终究承认:

想做好UI配色?只需要这三步!

想做好UI配色?只需要这三步!

辅佐色挑选

依据 HSB 的办法去得到同色温下面的 24 色:

以 H 值(色相)以 15,S 和 B 不变,递增到基于主色的 24 个色带,原理便是 15/360=24,正好环绕色环一盘。

想做好UI配色?只需要这三步!

想做好UI配色?只需要这三步!

色盘

辅佐色是丰富使用中的非必须颜色,它会包含一到若干个和主色不同的颜色,除了品牌传达外,具有更强的实用性。

想做好UI配色?只需要这三步!

想做好UI配色?只需要这三步!

真正的辅佐色的挑选是依据实践场景功能来承认的,

比方告诉、提示、取消用大红色,承认、赞同用绿色或许蓝色,收藏、打分、评价用橙黄色。都是已经在用户心智中建立了规范的用色类型。

想做好UI配色?只需要这三步!

想做好UI配色?只需要这三步!

从色环中吸取红、黄、绿三种颜色,在这四种颜色之上掩盖纯黑色#000,混合形式再选色相,这样就能看出他们是否是在同一个明度之上,再依据实践的需求进行纠正,比对,调至舒服停止。

想做好UI配色?只需要这三步!

想做好UI配色?只需要这三步!

将挑选好的辅佐色进行明度与对比度的变化,得出相应的色阶,假如不承认色阶是否科学合理,也可以使用颜色东西,比方 Antdesign 的配色东西,Figma 里面也有许多配色插件,这些都可以快速取得相应的色阶。依据实践的使用场景再进行合理的配色。

中性色的挑选

中性色一般与文字色汇总为一个灰色模块,一般包含布景色、切割元素色、反馈色、禁用色。布景色在使用卡片设计形式时必然会用到,一般为带有一点主色的浅灰色。

切割元素色包含常见的线框元素、线性切割元素、面型切割元素。反馈色包含 hover、press、highlight 多种反馈颜色。中性色让整个页面更加富有层级感。

中性色的装备,便是拟定一个由深到浅的灰度阶梯,使用在对应权重的元素上,颜色轻重的主要判别依据是 HSB 中的 B(明度) 值。

想做好UI配色?只需要这三步!

想做好UI配色?只需要这三步!

中性色虽然指的是无特性,但并不是只能用纯灰色,常见的一种做法,便是为中性色增加适量的蓝色饱和度,提高观看体会(满意 RGB 的某种特性)。

想做好UI配色?只需要这三步!

想做好UI配色?只需要这三步!

依据选定的品牌色,使用上述的中心色挑选办法,进行中性色的选配:

想做好UI配色?只需要这三步!

想做好UI配色?只需要这三步!

使用之前的作品或许现有的设计页面,进行不断的调配调试,确保全体页面作用为最佳。当然,咱们也要考虑到一些特殊的场景使用,假如现阶段并没有出现复杂或许特殊的使用场景时,咱们可以先共同共同用色。跟着产品的不断完善与迭代,有可能现在的中性色并不能满意需求时,要及时做到调整与更新,确保全体的共同性与共同型。

想做好UI配色?只需要这三步!

想做好UI配色?只需要这三步!

文字色

在实践的使用场景中,文字色的色阶可以划分 3-5 个阶梯:重要的标题和正文、辅佐内容的非必须文案、非必须等级文字、及需要进一步弱化的最次级文字。当然在命名文字色的时候,你可以用一级色、二级色、三级色、或许其他的命名规则去定义每个阶梯色。另外还有带有特殊语义的文字用色,例如链接文字用色、着重文字用色等。

文字色的强弱代表了该信息的重要程度,一起也表现出信息的层级与逻辑关系,传递给用户是怎么可以正确、快速的找到所需信息。一起,文字色也对其是否具有可操作性进行释义说明,这就要求文字色各个色阶之间的对比明显,语义明晰。

Sam Gordain 在 Medium 上有一篇文章《Pick Better Colors with the Hue Shift Method》中很好的叙述了其阶梯颜色选取规则与技巧的关键理论。总结下来即,想要由一个基础颜色拆分出一套梯级配色,在通过调整透明度或明度的一起调整色相、饱和度、明度三个特点,这样终究生成的一套梯级配色会更加和谐,过度更为自然。

文章链接:https://medium.muz.li/natural-color-palettes-7769e5b38ecd

在做配色时,咱们大都知道怎么使用同类色、类比色、中差色、对比色、互补色等这样的配色规则去调配颜色。但在实践的工作中,其实这些常识并不能满意咱们的需要,尤其是跟几个设计师共同完成一个项目时,就会出现许多问题:辅佐色、文字色、布景、切割线、暗影等方面差异,导致的成果便是不能确保视觉上的共同性。

在许多的设计网站上,输入“配色”进行搜索,就能看到许多有关配色的文章,我们从许多原理、理论性的方面进行讨论,可是关于怎么进行配色、配色的进程具体的进行描述的文章很少。咱们在找了许多参阅文章、配色理论与配色东西之后,结合实践使用场景,进行配色。希望这篇文章可以给有相同疑惑的设计师一些协助。

参阅的文章:

  • 《10 年经验总结的高效 UI 配色策略》酸梅干超人
  • 《Ant Design-颜色》
  • 《揭密可视化专家配色秘笈,你在乎的颜色远远不够》作者:白弦,蚂蚁集团设计师
  • 颜色东西:Ant Design 中颜色东西;Figma 中的 colo rshades 插件;Figma 中 Palettes 插件

给TA打赏
共{{data.count}}人
人已打赏
教程分享

学会这15个细节,帮你快速提升B端图表用户体验

2021-7-7 17:16:40

教程分享

京东出品!如何搭建高效的设计体系:利其器

2021-7-13 17:16:58

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索