给你点颜色看看 - 上篇

给你点颜色看看 - 上篇 毫无疑问,正确的色彩运用可以让一幅设计作品快速且有效的传递出设计师想要传递的信息。它可以唤起人们的某种情感,可以引导视线使其聚焦于特定元素,也可以传递美感,提升设计的亲和力等等。 同时,在视觉设计中色彩又是一个相对比较难的主题。虽说没有万能的配色方案,但是大部分受使用者还是可以轻松的区分一个良好的,令人愉悦的配色和一个不那么好的的配色。那么是什么让一组色彩比另一组更有效(好看)呢? 在这篇文章中,我想要讨论一些关于色彩的基本原理,一些在实际项目中比较保险(未必非常酷炫,但是比较安全)的配色方法,以及一些工程中的实践(比如accessibility等)。通常来说,大部分人都可以相对轻松的觉察出良好的配色方案,或者说很容易对比出配色方案A比方案B更加的“和谐”。而另一方面,当需要自己从头设计出一个合理的配色时,则往往会不知如何着手。 这篇文章大约不太可能帮你找到五彩斑斓的黑,但是应该可以避免你落入“红配绿,赛狗屁”的窘境(以及如果被要求这么做的时候如何正确应对)。 颜色是什么 原色 有科学研究表明,人类之所以可以进化出远超过其他任何动物的智能,与其视觉能力 – 特别是能够辨别足够多的色彩的能力有着极深的关系。 能够分辨红色的成熟而充满糖分的水果与未成熟营养物质较少的水果,在某种程度上让灵长类有了更大的进化优势。人类大脑更是有超过一半的皮层用来处理视觉信息。能够辨别色彩斑斓的捕食者与丛林中灌木的颜色 – 即使在光线比较暗淡的情况下 – 更是我们祖先的基因得以延续的重要原因(毕竟,无法区分狮子和树干的颜色的基因已经被自然选择所淘汰)。 我们平时所说的颜色是指人眼可见的,在一个波长范围内的电磁波(360 - 400 纳米 ~ 760 - 830 纳米)。这些电磁波通过眼睛,在视锥细胞的作用下产生电信号,并在大脑中产生的不同刺激而产生色觉。自然界处于可见光频谱之外的电磁波更多,只是人眼/人脑对它们没有感应而已。 如果按照频率的顺序将这些颜色排列出来,我们会得到这样一条线: 而如果将这条线弯曲成一个环,则会得到我们经常见到的色轮/色环: 颜色的表示 在诸如显示器、手机等屏幕设备上,人们发现通过将红(Red),绿(Green),蓝(Blue)三种光通过不同比例的混合,就会在让人“感觉”到不同颜色。每种原色的光可以有不同的亮度等级(0-255),这样的组合可以产生256*256*256 种不同的颜色。通常我们使用16进制或者10进制来表示其亮度,记为#004c97或者rgb(200, 38, 118)等。RGB是目前是一种应用广泛的颜色表示法。 和电子屏幕对应的,CMYK(青Cyan,品红Magenta,黄Yellow,黑Black)颜色表示法则多用于印制品(比如纸质海报,彩色书籍等)。通过将3种基本颜色的油墨和黑色混合即可以得到足够多的混合色。相对于RGB,CMYK的可以表示的颜色要少一些(101*101*101),因此印制品的颜色也会显得没有那么多彩。 应该注意的是,这两种颜色模式的呈现方式完全不同。屏幕设备会自主发光,通过将光叠加起来会得到希望获得的色彩(比如三种原色叠加在一起时结果为白色)。而对于印制品,由于颜色是不同颜料对白色的反射光(而不是自主发光),因此不同颜色相当于互相抵消了(比如三种原色CMY叠加在一起时结果为黑色,即吸收所有光而没有反射)。 对于屏幕颜色来讲,RGB并非唯一的色彩表示法。另一种在计算机种经常使用的颜色表示法为HSL或者HSV。H表示色调(hue),S表示饱和度(saturation),L表示明度(lightness)或者V表示色值(value)。相对于RGB,HSL更容易和我们的自然语言联系起来。 比如问一个熟练的Web开发者#3c4492是什么颜色,九成九的回答是不知道(这就好像在问将60份红光,68份绿光和146份蓝光混在一起,是什么颜色?)。而HSL则不同,它通过一个角度和两个百分比来表示颜色,角度是指在色轮上的位置(0度为12点钟方向,颜色是红色,然后依次红橙黄绿青蓝紫,360度再到红色),第一个百分数为饱和度,0为饱和度最低,而100为最高;第二个百分数为明度,0为黑色,100最亮。所以hsl(0, 60%, 50%)大约是一种略显暗淡的红色,而hsl(180, 50%, 50%)则为青色等。 色彩的属性 我们在本文接下来的部分会专注于屏幕色彩的讨论。 色调/色相(Hue) 三原色相邻的两种混合,即可得到6种颜色。在得到的六种颜色再相邻的两两混合,即可得到12种。将这个过程不断重复,就会得到整个色谱。可以想象这个色谱是一条线,线上的每一个点都是一种特定的颜色(hue),也就是我们通常说的颜色,是为hue。当然,日常生活中,我们说到红色可能并不是一个点,而是这条线上的一个区间。 此外,我们通常说的颜色并不是饱和度最高的色调,而往往是有很多层次的。比如对于绿色而言,有墨绿,深绿,浅绿,淡绿,翡翠色等等,这些绿色可能背后对应的色调/色相都是同一个。 饱和度(Saturation) 如果往某一种颜色hue中逐步加入白色,则该颜色会逐渐变淡,直到完全变白。应该注意的是,在整个混合的过程中,色调并没有变,只是饱和度在逐步降低。比如混合了部分灰色的红色依然是红色(在自然语言中将其成为淡红)。 明度(Lightness) 类似的,往某一种色调(Hue)中逐步加入黑色,则该颜色会逐渐变暗,直到完全变黑。 我们可以通过一个例子来详细说明。在下图中,右上角是色谱上的一个点,也就是一个特定的色调(hue),通过向其中加入白色,饱和度逐渐降低,直到最后变成纯白色(越往左颜色越淡,饱和度越低)。另一方面,如果向该色调中加入黑色,明度(或者叫颜色值)则逐渐降低,直到最后变为纯黑色(越往下颜色越深,明度越低)。 应当注意的是,在白色和黑色之外还有大量的灰色值 - 即同时调整饱和度和明度,这样就会得到更多的该色调的变化。也可以这么理解,在色环/线上的任何一个点,展开之后(通过调整饱和度和明度)都对应了一个面。 色值(Value) 另一个与容易和色彩的明度混淆的概念是色值。即使在饱和度最高,明度最高的颜色,色彩之间还是有明暗差异的,这个就是色值。 比如下图中,由于色调的存在,我们事实上很难看清那种颜色更亮(有时候甚至最引人瞩目的颜色反而比较暗,或者说色值比较低): 如果将上图不做任何其他编辑,仅仅转化为灰度图: 可以看到,红色几乎和蓝色一样暗,但是在彩色图片中红色显得更加亮一些。 此外,颜色是很多时候都是一个相对概念,即人眼无法精确区分颜色,而且还善于从上下文的对比中得出错误的结论。比如在著名的灰色棋盘中,A点和B点的色值事实上是一样的,但是由于阴影的原因,大脑错误的假设,由于影子的存在,B点应该比实际上更亮(感兴趣的同学可以用color picker动手试一下)。 色彩的作用 色彩在设计中有着非常广泛的用途。通过不同色彩可以将平面划分为不同的部分(比如不同section具有不同的背景色),可以将元素归位一组(比如高亮选中的行),色彩的对比可以使用户的视线聚焦在需要强调的元素(比如会立刻引起用户注意的下单按钮)等等。 强调特定元素 我们来看一个网页设计,如果将其中的颜色去掉: 由于灰度图的颜色仅有256种,相较彩色图片,很多细节被拍平成了一种颜色。而如果将颜色加回去的话,我们的注意力瞬间就会几种在Try it for free这个按钮上。 如果我们希望强调页面上的其他元素,只需要选用某种颜色即可使之与背景分离。...

August 26, 2021 · 1 min · 邱俊涛 | Juntao Qiu

给你点颜色看看 - 下篇

给你点颜色看看 - 下篇 [[给你点颜色看看-上]]主要讲述颜色的定义,以及颜色在设计中的作用。在下篇中,我们从实践层面来讨论如何搭配颜色,并在实际场景中正确运用。 配色 接下来的一个重要主题就是配色了。在多个世纪以来,艺术家们发现某些色彩和其他色彩一起可以工作的很好,而另外一些色彩的组合则最好不要出现在同一幅作品中。 这里我们可以一起讨论几种常见且安全易用的配色方案。 单色配色(Monochromatic Color Scheme) 单色配色,顾名思义,是一种只用一种色调,但是通过使用不同饱和度和明度的配色方案。它是最简单的一种配色,我个人最喜欢的一种配色法。 比如: 相似色配色(Analogous) 和单色类似,相似色配色选用在色轮上相邻的颜色。由于自然界中存在大量的类似色彩场景:比如树林中不同层次的绿色,黄昏时天空中从红到橙再到黄的自然渐变等等,因此相邻的颜色天然就会比较和谐。 应该注意的是,虽然是相邻,但是颜色之间需要有足够的距离,以示区分。 或者 通常来说,在选择相似色时,应当避免使用超过4个颜色,通常3个就已经足够。 应当注意的是,和单色对比,相似色(右图)通常可以让画面更加立体,而单色则会略显扁平(左图)。 互补色(Complementary) 互补配色是指在色轮上处于对立的颜色,如果通过色轮的圆心做一条直径,则直径两端的色彩互为互补色。这种配色在需要做出较强烈对比的时候尤其有用。 比如非常常见的蓝色/黄色,红色/绿色的组合,就是互补色的典型场景。下图中有两组互补色,比如宜家就采用类似左侧的蓝黄配色。 使用互补色的一个关键点是避免使用饱和度过高的色彩,我们可以通过调整饱和度和明度来得到颜色的变种(variation),来中和强烈的对比。 比如在上图中,第一行和第三行在采用相通的色调的前提下,通过调整饱和度和明度得到一些相对比较和谐的组合。此外,如果将一个颜色的饱和度降低,同时可以减少另一个色彩的明度,从而形成比较合理的明暗对比,使得内容的可读性更高。 比如下面的几组对比中,我们可以很好的看到不同组合所带来的视觉差异: 通过降低红色球和背景的的饱和度,即使红配绿这样的组合也可以比较和谐。 或者反过来,将降低饱和度的绿色球于更暗的红色放在一起: 三角配色(Triad) 在色轮上画一个等边三角形,则三个顶点位置的颜色组成的即为选定的配色方案。由于有三种颜色的参与,三角配色需要有不同的明暗对比和饱和度变化才不至于凌乱。通常我们可以重点突出一种主色,其他两种颜色辅助。或者一种浅色作为背景色,一种深色作为前景色,第三种为高亮色(用于特别强调少量细节)。 比如,如果直接从色轮上选取等边三角形上的颜色,得到的配色会互相争夺注意力。下图中的两个配色方案都有这样的问题: 通过调整明度和饱和度,我们可以得到更合理的配色: 或者替换主色和辅助色: 以上列举的是几种最常见的配色方案,除此之外还有众多的变化。比如补色分割(Split-Complementary)是对三角配色和互补配色的一个合并。四角配色(Tetradic)则使用一个矩形而不是三角形来进行色彩的选取。 安全用色 借鉴优秀作品 毋庸置疑,最好的学习方法就是借鉴优秀作品(但是一定不要照抄)。很多设计网站,诸如dribbble,behance以及designspiration 等都有大量优秀作品。 比如在dribbble上,你还可以通过颜色(比如搜索所有蓝色的设计)来进行过滤,来学习其他设计师如何配色,以及如何调整颜色的参数来让设计更加和谐。 使用图片生成调色板 通过使用一些工具将摄影作品中的色彩方案自动抽取出来,往往会得到极好的效果。这是因为自然界中的众多颜色都为我们的大脑所熟知(碧水蓝天的海滩,层林尽染的秋林等等),而好的摄影作品往往已经经过后期专业调色,通常可以得到很好的效果。 我通常会在诸如unsplash或者pexels上找到合适的照片,然后上传到Adobe Color,然后按照需要的类型进行自动抽取即可: 当然你无需止步于此,你可以将生成的配色作为基础,进行饱和度,明度的调整,满足项目实际的需求。 关注对比 正如我们在讨论颜色的作用时提及的,对比永远时设计中的重中之重。有意思的是,很多视觉设计师都是从灰度图开始设计的。使用灰度图的好处是更容易将需要强调的元素标记出来 - 如果可以在灰度图上做好对比 – 那么最后的上色则事实上会轻松很多。 下面这个图中,在对应的灰度线稿上(线稿是我在网上找的,我只是做了一点点配色),我采用了两套完全不同的配色,但是需要强调的城堡的拱门始终处于焦点所在: 运用中性色 除了鲜艳明亮的色彩之外,实际中更多是略显平稳的中性色。比如不同级别的灰色,棕色,土黄色等。通过与饱和度较高,色值较为明亮的色彩配合使用,不但可以使得可用性增强(比如内容的色彩的对比度高时更容易阅读等),还可以使得整体配色得到更好的平衡。 要得到和谐的中性色,最简单方式是通过调整主色的饱和度和亮度(比如低饱和且高亮度的作为亮的灰色,低饱和且低亮度的作为暗的灰色)。另一个简单的方式是通过使用一些预设的灰色(一个亮灰色,一个暗灰色),然后通过图片的混合模式来生成不同的组合(这里介绍了一种使用Photoshop来操作的教程)。 主次之分 另一个和对比相关的重点是分清主次。无论采取的配色方案是那种,都应该避免采用过于饱和的颜色。因为饱和色通常以为着强调,如果有超过一个的高饱和色,他们就会互相干扰。就好像我们经常说的,强调一切恰好意味着什么都没有强调。通过饱和度和明度的调整(另外在一些场景下还可以设置透明通道)则可以着重以一种颜色为主色,而其他颜色的存在是为了衬托。 一个简单的法则是,在熟练运用颜色之前,尽量将色彩控制在2个以内。比如我们在互补色配色小节讨论的蓝黄配色方案中,如果以蓝色作为基调(主色),黄色为高亮色,我们可以搭配一些中性的灰色来体现一些差异即可形成一个有5种颜色的调色板。 同样的方法,加入中性的灰色之后,我们将红绿配色调配成: 总结 本文讨论了数种最常见的配色方案,从单色到三色的组合,如何通过调整饱和度/明度等来中和多种色彩间潜在的竞争,如何通过调整颜色的主次来达成平衡,以及如何应用这些方案来定义自己项目所需的配色。最后,我们列举了一些安全用色(如何保险的使用颜色)所需的技术细节。 通过使用这些技术,结合之前的色彩基础理论,以及不断的练习,我们就可以比较容易且安全的选出高效且和谐的配色方案。 P.S. 这篇文章是对我在最近一段时间学习设计理论,特别是关于色彩的使用的一个回顾。事实上早在《三周三页面》的后期,我就开始仔细学习色彩理论,后来也偶尔会看一些资料(诸如色彩心理学之类)。但是直到几个月前,我在学习udemy上的一个设计课程的时候,突然将很多关于色彩的理论和实践都连接了起来,那是一种特别有趣的体验。就好像乔布斯有一次在演讲里提到的,你无法在事先看到这些知识的联系,直到某一刻,忽然你就将所有珠子串起来,形成了一条项链。希望这篇文章可以成为某些人那个的触发器。 P.P.S. 其实这本来是一篇文章,但是囿于篇幅,又不忍心删节,所以就拆分成上下两篇。另外,邮件的长度好像也有限制,但是拆分后可以好一些。

August 26, 2021 · 1 min · 邱俊涛 | Juntao Qiu

不想当UX的开发不是好咨询师

成为咨询师 本文旨在帮助开发完成向咨询师的转变,内容不但涉及向UX学习,还包括思维方式的转变。我尽量采用一些亲历的例子来说明该如何做,也会适当的解释为什么需要这样做。不过在展开详细讨论之前,首先来澄清这里提到的三种角色。 开发(Developer)角色 开发是指那些喜欢写代码,享受写代码,喜欢纯粹,讨厌办公室政治,永远穿T恤的有些偏执的程序员。跟他们打交道,有这样一些注意事项: 不要让他们帮你盗QQ号 不要让他们帮你修电脑或者装Windows系统 不要跟他们讨论人文/政治类的问题 开发往往还单纯的可爱,除此之外,他们还有这样一些特点: 逻辑清晰 与人争辩时往往可以通过清晰的逻辑而获胜 单身 业界已经有很多关于开发的描述了,我这里也有一个描述开发的列表: 当然,要严格界定一个人是不是`开发`是非常困难的,大多数情况下,他们沉默寡言,遇到程序中的bug或者在调试某些库的问题时眼神呆滞,口中念念有词,他们不太喜欢和陌生人说话,在晚上精神充沛,白天则显得有些呆滞,喜欢喝咖啡,相信世界上有绝对的正确和错误,往往会带着非黑即白的二分法来看待事物,生活很难自理,喜欢机械键盘/电子设备,周末宁愿宅在家里写代码也不去做社交…… 用户体验设计师(UX) UX是指用户体验设计师,在本文的上下文中,更偏向与非视觉设计的那些设计师(产品设计师)。在项目中,他们会做用户调研,竞品分析,信息架构简历,交互设计(纸上原型,低保真)等活动,并负责开发纸上原型,验证这些原型等。 和UX打交道,也有一些应该注意的点,比如: 不要叫他们美工 不要对他们说诸如:“帮我美化一下这个页面”,“这个颜色得再亮一些”之类的话 不要跟他们讲关于程序员的笑话 事实上,人们对UX的误解很深。提到UX人们的第一反应是PhotoShop,P图/切图。这仅仅是他们日常工作中很小的一部分。大部分UX还要做很多用户研究,信息架构整理的事情。老实说,我在去年5月之前的对UX的认识和大部分开发的认识是一样的,但是在后来的项目上和多个UX合作过之后,我彻底改变了原先那种偏见,开始敬佩他们,并向他们学习。 设计工作可以细分为这样一些不同的方面(图片来源网络): UX的一项特别的技能在于能从复杂的现实世界中抽象出清晰的信息(用户画像,体验地图甚至最后的用户故事)。这项技能不但重要,而且还很牛逼。 知识的诅咒 《反脆弱》里有个有意思的例子:人们仅仅创造了非常有限的词汇来描述颜色,比如蓝色,红色,而任何一个视觉正常的人都可以轻松的识别出数百种不同的颜色。也就是说,人们可以很轻松的理解相当复杂的事物,但是很难向别人描述该事物(想象一下向别人描述一只章鱼的颜色)。 人们对于现实世界中的事情(特别是复杂的业务场景)往往只能意会而很难言传,再加上知识的诅咒(我在《如何写一本书》里,详细讨论了这种常见的陷阱)的存在,当用户在描述A的时候,在没有上下文的人听来,很可能是B或者C。这种情况在软件开发中非常常见,也是很多项目之所以延期的原因(大量并无必要的返工,需求澄清等)。 在项目前期,UX需要和客户坐在一起,将客户的需求分析清晰。分析细节包括业务场景,用户画像生成,信息架构,体验地图等等,这些信息并不是天然就显现的,恰恰相反,它们需要UX经过很多轮的辛苦引导,从用户的脑海里提取出来的。 这里需要UX的核心能力是: 有目的的抛出问题,引导客户进行发散 有节奏的收敛,形成共识 不断修正过程中的错误 可视化能力(这可能是大部分人觉得唯一和UX相关的点) 咨询师 咨询师是指那些根据自己的丰富经验来帮助客户解决具体问题的人。这些问题并不一定局限在技术上 —— 比如架构的设计,具体前端/后端技术的选定,还包括一些流程的改善。比如引入新的工程实践来缩减项目的周期时间,帮助团队发现问题,建设团队的能力,作为各个团队间的润滑剂帮助项目成功等等。 咨询师工作中的一个常见的场景是: 列出目前遇到的问题 确定各个问题的优先级(和各个利益方) 制定方案 给方案加上时间,形成计划 细化计划中的条目,并促成它 引导/启发 我在印度的某一期TWU当教练的时候,发现了一个很有意思的现象,国外的同事在组织培训时更强调用引导/启发的方式,让学生们自己得出结论,并在课堂上进行讨论,以期教学相长。只有在过程中有启而不发的情况出现时,教练才会适当抛出自己的开发,并再次启动讨论。 与我一直的认识不同的是,这种方式效果很好。通过一些适当的启发,学生很容易自己讨论出一些有趣的看法,然后教练在这个基础上做一些总结,并帮助他们分析不同看法/想法之间的优劣。 我非常认同这种模式,后来自己组织的其他培训/workshop也都尽量采取这种方式。咨询师在客户现场,也应该采取这种引导的方式帮助团队来完成能力建设,而不是事必躬亲。 角色转化 从开发者视角切换到咨询师的第一要诀就是:让团队解决自己遇到的问题!乍听起来,咨询师好像变成一个多余的角色了:既然团队自己可以搞定,还要咨询师干什么呢?咨询师的职责是让团队意识到问题,理清思路,制定解决方案,并逐步实施。 使能/赋能 我们来看一个简单的例子:在客户现场,你发现团队往往在集成时会花费很多额外的时间和返工,开发过程中大家各自为政,没有人知道一次commit会给软件包造成什么影响。 如果你是一个咨询师,应该如何解决这个问题?一个常犯的错误是,直接上手帮助团队搭建持续集成(CI)环境,并设置CI纪律(比如build红了不许过夜,红的时候其他人都不许commit等)。 一种更好的做法是:做为咨询师,首先需要帮助团队认识到这个问题,你需要让所有人都知道,我们现在的问题是什么。在所有人都清楚了这一点之后,你需要提出(或者引导出)持续集成的概念(因为根据经验,这是一种可以很好的解决集成时额外的返工现象的好办法)。 但是对于不熟悉持续集成的团队来说,搭建一个持续集成环境是一个非常复杂的任务。因此你需要分解这个任务为一些更小的,可以被解决的问题。 申请虚拟机资源 安装jenkins(包括安装JVM,创建用户等) 配置本地构建脚本到jenkins(构建脚本,自动化测试等) 申请显示器资源(作为CI Monitor) 将结果显式在CI Monitor上 有了任务之后,你需要分别为这些子任务分配owner。对比搭建持续集成环境这样的大任务,这些小的任务已经非常具体,更重要的是,他可以被团队中任何人理解并解决。...

January 31, 2016 · 1 min · 邱俊涛 | Juntao Qiu

成为设计师

####Hack design的建议 首先,design无处不在,它的目的是提高产品使用者的效率和易用性的。它不是一个“运用之妙,存乎一心”的东西,它是一个实实在在可以通过学习来获得的能力(正如编程或者写作或者厨艺一样,当然,如果一个人把精力和心血放在编程上,同样可以将编程做成一个“运用之妙,存乎一心”的东西。) 什么是一个好的设计?下面是设计师Dieter Rams给出的10条原则: 创新性 使产品有用 美学 使产品可以被理解 不那么引人注目 诚实的设计 可持久的 彻底,纯粹 尽量做小的设计 环境友好 这里有原文的链接,总而言之,设计不仅仅是一个web页面,一个海报,所有的产品都会有不同程度的设计包含在其中。 ####Alex的建议 想想你觉得“好看”的页面为什么好看,是字体,配色,背景色,布局还是其他?把这些记录下来,并在自己后续的设计中尝试使用。 多看一些优秀的设计,比如web页面,如果你发现上边有一些很感兴趣的特性,或者细节,比如这个菜单看着很漂亮,后者标签功能很炫,你可以用chrome的inspect来查看别人使用了什么样的HTML,又apply了那些CSS,做出了这样的效果。 如果在这个过程中,遇到一些没有见过的标签,或者标签的属性,那么去w3school上查看一下这些标签/属性的含义,尽量使用这些Tag原始的意义(设计时的初衷)。 比如div,它是divider的缩写,本来是用来分割块的,那么就用它来做分割,比如p(paragraph)标签,用来分段,可以将文字放入其中。这些都是HTML标签的设计初衷,我们应该尽量遵循,在实现的时候,如果使用原始的标签很难实现,那么可以尝试一些比较trick的方式来绕过,但是毕竟并非正途。 最后,design和编程类似,你需要不断的练习,自己动手多尝试,在研究了别人的实现之后,自己最好做一个示例出来。 ####其他人的建议 最近读到的一篇写的非常好的文章,作者也是一个有开发背景的设计师,因此有很多地方可以借鉴: 在转向designer的同时,不要丢掉编程 按照一定的顺序来学习design(可用优先,性能优先) 设计一切见得到的东西 和其他人一起讨论设计,并聆听别人 尝试分享,尝试将自己的设计讲给别人

March 26, 2013 · 1 min · 邱俊涛 | Juntao Qiu