创建调色板11个的技巧

文字和插图:Patrick Multani

无论是新手还是老手,如何最有争议和难以捉摸设计中使用颜色。

颜色具有多种文化,社会和情感的意义,设计师的选择实际上是无限的,因此选择调色板的复杂性不会变得更简单。

在本周的文章中,设计师Patrick Multani分享如何构建出色调的技巧。


在开始挑选颜色之前,我总能想到Dustin Senos’ short article about design principles。他在文章中解释了,在“Medium”中,他们如何使用“针对的和选择的”,“恰当的和一致的”和“进化的和完成的”这些原则。我认为形成这种原则的方式也适用于颜色:白色和灰色;和谐和分离;寒冷和热情。我试着保持这些想法在我工作的时候。它们作为一种感觉检查——有点像一个用户角色如何引导UX设计师。


选择颜色时,我尝试保持在一条直线而不是对角线或是从左到右。这给任意调色板间带来了直接的关系和进步。所得到的一组颜色可用于指示活动和非指示活动按钮、边框或背景。我们也可以将点放在颜色选择器上的相同位置,而且可以让色调滑块循环使用颜色。这将会产生令人兴奋且和谐的调色板,如上图所示(中心)。


我经历过一个不断反复且脆弱的调色板:轻微的调整可以对配色方案的整体效果产生巨大的影响。所以我觉得要敏感,重要的是在小步骤中做出改变。例如,选择冷或暖色调的灰色可以大大增加设计的和谐。我们可以通过挑选很多颜色,并让它们反复迭代,从而变得更加敏感于色彩的微妙。


我用混合模式来帮助创建令人兴奋的调色板。通过简单地创建两个重叠的形状,并选择“乘法”混合模式,我们得到第三个匹配的颜色。在白色背景下,我们还可以尝试透明度设置,以快速调整亮度。我觉得对立面是值得尝试的:黑色背景,结合“屏幕”的混合模式。混合模式提供了一种与颜色进行交互的新方法,经验丰富的设计师都在一直广泛使用。


最近在Framer website上,我发现了四个旋转正方形的示例原型,它们具有不同的色调和模糊度。这是非常棒的,所以我立即启动了Framer,使用一个简单的循环来创建一些调色板。设置起始背景颜色,并使用色调与模糊度一起旋转以生成颜色。色调的旋转范围在0到360之间,模糊度的范围从0到1(小数也可以工作),根据这些数字,我们得到不同的调色板。我发现这非常有价值,所以我现在Sketch与Framer结合使用,以查看循环中的某些颜色。要从Framer中选择将要在设计中使用的颜色,对Framer画布进行屏幕截图,将其粘贴到Sketch中,然后再使用颜色选择器。


使用好的颜色是一回事——在视觉设计中有效地使用它们另外一回事。颜色可以看起来很漂亮,但一旦适用于某个特定的设计项目,调色板就会崩溃。尽可能少地使用几种颜色可以使设计冷静下来。例如,对文本,图标和边框使用不同种类的蓝色可以很好地工作。这种方法让我们在使用不同色调突显某些东西时,可以真正让它脱颖而出。


我记得从事一个需要可扩展颜色系统的项目。我选了大量细微的颜色,而且难以区分它们。所以我做了一个颜色的副本,并添加了一个暗的背景来以此找到另一个视角这有助于我做出更好的决定。


从颜色选择器的右上角选择可以安全地找到适合视觉设计的颜色组合。在自然界中,灰尘的添加形成了灰色和黑色。虽然添加灰色或黑色的颜色可以增加设计的比重,但使用太多的重色调能潜意识地传达污秽。所以我尝试着用清晰明亮的配色方案制作设计。


想像一张白色的半透明纸。想想如何“提亮”任何颜色。可以通过创建所想到的“过滤器”形状来在Sketch中进行模仿。使用模糊度,混合模式或两者的组合,我们可以使用亮色暗色过滤器形状来提亮或变暗颜色。有时候,在一些UI项目中,我会使用这种技术来暂时提亮或变暗界面的整个区域。这比单独更改颜色更快且更容易,它保持了色彩之间的和谐关系。

上图显示:

·黑色层,叠加混合模式,模糊度50%(增加饱和度)

·白色层,普通混合模式,模糊度50%(变亮)

·黑色层,正常混合模式,模糊度50%(变暗)


当决定背景颜色时,作为第一步我喜欢前景,变亮或变暗。而不是选择中性的灰色(即位于白色和黑色之间),选择稍微暖色调或冷色调的灰色,这会给人很机械的感觉。


最后,记住光和暗对我们对视觉深度的看法的影响。在黑暗的背景下,较浅的颜色会出现在前面而在较浅的背景下,它的颜色较深,呈现出前景我经常在阳光下想到这一点:在上图中,我们可以想象太阳直接照亮左上角的圆圈,右下角的圆圈被太阳背光,形成一个轮廓。

更多Sketch的提示

lSketch Tips Part 1: Objects, Layers, and Artboards(对象,图层和画板)

lSketch Tips Part 2: Editing and Exporting(编辑和导出)

lSketch Tips Part 3: Composition, Light and Shadow(构图,光和阴影)

lSketch Tips Part 4: Symbols(符号)



原文地址:https://blog.prototypr.io/11-tips-for-building-great-color-palettes-2d3201d4c920

原文作者:Designlab

译者:SKYUI

欢迎关注SKYUI官方微博“SKYUIHOME”

官方微信公众账号“SKYUIUX”

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,723评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,080评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,604评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,440评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,431评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,499评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,893评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,541评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,751评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,547评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,619评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,320评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,890评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,896评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,137评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,796评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,335评论 2 342

推荐阅读更多精彩内容