CIFCOM跨境电商 CIFCOM跨境电商

当前位置: 首页 » 出海百科 »

facebook blueprint

设计师如何做配色,反驳甲方说配色丑”?

关于配色的书籍与理论有很多,但是大多数人可能还是停留在道理我都懂,可是手就是不会”的阶段,而本文就结合实践分享五个实用技巧,帮助大家做出更好的配色。

在之前,配色一直都是我的弱点,而且会在这方面纠结很久,每次交稿的时候,总会被甲方喷成一坨屎,我觉得他说的很有道理,于是我花了很多时间在网上学习,然后,我的配色可能比坨屎好了点!!!

因为我看到的都是一些:红色代表激情、活力;蓝色代表科技、冷静;绿色代表健康、生机;橙色代表温暖;还有邻近色,互补色等等。

这些理论理论有用吗?答案是肯定的,但我觉得这种理论看几遍也就够了,看多了反而会很茫然,毕竟实践才是王道。

颜色认知这一块我也就不做过多的阐述了,网上的文章有很多,也可以在文章底部获取配色书籍,里面讲的可以说是非常全面了。

下面我会分享5个总结下来的实用技巧给大家:

颜色模式的选择永远不要使用纯黑不得触碰的禁区遵循60 : 30 : 10的的配色原则巧用别人的颜色

文章最后还会给大家安利几个配色网站和一些经典的配色书籍。

一、颜色模式的选择

很多设计师通常是使用RGB颜色模式进行调色,我之前也是一样,好看不好看全靠感觉,当有一天了解到HSB这个模式后,就爱上了,而且非常好掌控,做几个对比就清楚了。

RGB:是由红(R)、绿(G)、蓝(B)色彩三原色组成HSB:是由色相(H)、饱和度(S)、明度(B)色彩三要素组成

为什么说HSB模式更容易掌控呢,因为千变万化的颜色都是由饱和度(S)、明度(B)这两者控制的。

比如我们随意选三个色相360、23、280。

这个时候可以清晰的看出中间的明度和其他两个不同,我们思考一下,换做之前我们使用RGB模式调整,我们肯定是选中中间的圆圈,在色板上上移一点,下移一点。

但是我们换用HSB模式,就只需要降低中间的饱和度S,提高它的明度B,看上去就会和谐很多,不信你看。

可以对比一下色值,就能发现,这也就是我所说的HSB好掌控的原因了。

二、永远不要使用纯黑

还记得高中时期学习美术的时候老师就强调不要使用纯黑!可能你觉得黑色不应该就是黑色吗,难不成还要加入其他颜色?

没错,就是要加入其他颜色,这也叫做环境色,我们总是把颜色较深的颜色叫做黑色,实际上,马路不是黑色,这篇文章的字色也不是黑色,就像天上的云也不是白色,总是偏蓝的,当然乌云除外(细想下,乌云其实也是有色相的,哈哈)。

同理,阴影也不是黑色的,比如在蓝色背景上的阴影应该就是偏蓝的,黄色背景上的阴影就是偏黄的,万物都会受到环境影响。

这是Wayne Thiebaud的作品,我大概看了10遍。他是一位优秀的画家,不拘一格,阴影一般都不用黑色,哪怕是连衣裙阴影的最深处也不是纯黑。

我们再来看一下老版的Facebbok界面,为什么Facebook移动界面看起来这么赞?因为它们的灰色,稍微掺杂了一点Facebook标志性的蓝。

当你精心挑选了颜色,准备开始设计时,你又在页面中加入了纯黑,那很不幸的告诉你,黑色会非常的突出,因为自然界没有真正的纯黑,会显得不自然。所以不放在黑色、灰色中加入一些其他的颜色,这样颜色看起来就不呆板了。

三、不得触碰的禁区

咨询了很多人发现,他们在用色的时候有一部分区域是不会使用的,但不同的人有不同的说法:三角形禁区、矩形禁区、扇形禁区。

但不难发现右下角这块区域很难操控,毕竟他们又脏又深,当然什么颜色都能驾驭的大师就当我没有说过这句话。

举个栗子:下图是之前做的一个出差的应用入口,窗户位置一开始就使用到了禁区中的颜色,看上去非常不通透。

但是在调整到了非禁区颜色的时候,整个都变得通透,统一了起来。

我们来看下实际效果:

最后强调一下:禁区中的颜色也不是不可以使用,存在即合理,只是相对新手不是那么好驾驭,需要慎用。

四、遵循60:30:10的配色原则

经常的时候,我们的配色杂乱无章,很有可能是这一个原因造成的,没有遵循配色占比,以及配色数量。

60%的主色使用要点:

主色一般使用品牌色,来加深品牌记忆,但对于主色有两个错误认知,我们要了解下:

60%的主色不是指的使用面积,而是说主色的数量。主色不是说一种色彩,而是一种色相,是可以通过调节我们前面说的饱和度(S)、明度(B)去变化的。

30%的辅色使用要点:

辅色一般和主色一起出现,用来衬托主色,使页面变的更加丰富,一般有以下这几种配色方法,下图以蓝色为例,可能出现使用的辅色。

10%的点缀色使用要点:

这是一个占比最小的颜色,一般在平衡画面冷暖关系的时候会出现或者是在主色和辅色无法满足某些信息时会用到。

点缀一般都是主色的互补色,我们来看下示例就清楚了:

还有一个小的知识点,一个页面中颜色最好不要超过3种,色相不要超过7种,避免颜色过多产生混乱以及视觉疲劳。

五、巧用别人的颜色

第五点,也是我之前在设计过程中经常使用的一种方法,巧用别人的配色,这个方法只适合初期配色时没什么头绪的设计师。

首先我们像往常一样打开dribble,然后选择一个你喜欢或者觉得可借鉴配色的作品。

打开这个作品你就会发现有这样一个配色板,那么,你个色板就直接拿去用吧。

或者你还可以像这样,挑选一个你需要的主色,从这里面去选择一个合适的作品生成自己的色板。

最后

最后安利3个亲测好用的配色网站。

相信看懂了前面的配色知识点后,以下的配色网站也用不到了。

1、Color Space ——适合给主色找配色

2、Color Hunt ——适合找流行、时尚的调色板

3、Cool Hue——渐变色配色版(有sketch和ps插件)

作者:会设计的喵微信公众号:会设计的喵,多年UI设计经验

本文由@会设计的喵 原创发布于人人都是产品经理,未经许可,禁止转载

互联网时代你需认清的设计上的目的

来源 | 新闻实验室

那些让人欲罢不能的功能设计

先分享几个关于社交媒体功能设计的故事。

第一个功能。Facebook的like”(赞)是它最成功、最具标志性的功能。现在当我们提到Facebook的时候,往往会直接用那个向上竖起大拇指的小手来代替。自2009年正式推出后,like”功能令Facebook的用户活跃度飙升——每个人都很享受被人点赞的感觉,以至于每发一张照片、更新一条状态,就急切地等待着点赞的提示。很快,点赞成了所有社交媒体的标配。

开发like”功能的主要工程师叫Justin Rosenstein。如果你以为他对自己的创造感到很自豪,那就错了。现在,他甚至会厌恶自己开发出来的这种功能。他说:like”带来的是一种虚假愉悦,它非常诱惑,也非常空洞。

身在硅谷,34岁的Justin Rosenstein却是一个有意识的戒网瘾者”。他让自己的笔记本无法登录Reddit,禁止自己使用Snapchat并称它为毒品,并且严格限制自己使用Facebook的时间。从今年8月开始,他让助手给他的新手机设置了家长模式,以禁止他下载任何app。

Justin Rosenstein并不是异类。当年,在官方博客中正式宣布like”功能上线的是Leah Pearlman。现在,她也对like”功能以及社交媒体上的其他各种上瘾功能日渐不满。她给自己的浏览器装了一个插件,屏蔽掉了Facebook的信息流,并且雇了一个人管理她的Facebook专页,这样她就不需要使用Facebook了。

第二个功能,同样是大家非常熟悉的:红色的写着数字的小圆圈,提醒你有多少未读通知。

Facebook的内部员工透露,其实Facebook的设计师最初把通知图标做成了蓝色的,因为这样看起来符合Facebook的主色调,而且低调、不打扰。但这样的设计很快就被替换成了显眼的红色,因为只有这样,才能刺激人们去点它。

现在,我们每个人的手机上都有无数这样的小圆圈,他们无一例外都是红色。因为红色是醒目的警示色。每一次点击那些带着红色圆圈的app图标时,我们都期待着背后的内容——是什么有趣的、重要的东西吗?当然我们常常会失望,但失望的可能性让我们更加难以自制地去点击那些红色圆圈。

第三个功能。在app里面如何进行刷新?现在大家都已经非常熟悉了:下拉即可刷新。

发明这个功能的人叫Loren Brichter,他在app设计开发界享有盛名。2009年,他设计出下拉刷新这一功能的时候,纯粹是一种偶然,因为当时他在自己设计的app上找不到地方放置刷新”按钮了。于是灵机一动之下,他把刷新功能安排到了下拉动作中。

从那时起,下拉刷新就逐渐成了app的标配。这让Loren Brichter感到意外,他根本没有预料到这个下拉动作会这么受欢迎——其实很多app都可以自动刷新了,但它们依然保留了下拉刷新的功能,就是因为用户喜欢。

用户为什么喜欢?Google前产品伦理设计师Tristan Harris的解释是:这个动作很像在玩老虎机。每次往下刷新,就好像扳动了老虎机的手柄,你不知道会出来什么,也许是一张很漂亮的图片,也许只是一则广告。这种感觉,让人很上瘾。

发明下拉刷新的Loren Brichter说自己完全同意老虎机的比喻。他也成了为自己的网瘾”烦恼的人:我现在有两个孩子,当我被自己的智能手机吸走而没有关注到他们的时候,我每一分钟都感到懊悔。”

社交媒体还有很多功能,都在刻意培养你的网瘾”,让你无法抑制地花更多时间在上面。正如一则TED演讲 () 中所提到的几个例子:YouTube希望你在它上面花的时间越多越好,于是增加了自动播放下一个视频的功能;于是,Netflix也增加了自动播放下一集;Facebook则更进一步,会自动播放你的信息流中的所有视频(微博也是这样)。这些都是为了吸引你多看。

再比如美国青少年很喜欢用的Snapchat。它发明了一种叫Snapstreaks的功能,展示两个人持续互动的天数。为了让这个数字不断变大,孩子们不得不每天登陆互动。如果两个孩子连续交流了150天,他们当然不希望它在一夜之间归零。如果其中一个要去度假不能用手机,ta会把密码告诉好几个朋友,让朋友来帮助ta把Snapstreaks接力下去。这一成功提升用户活跃度的功能,利用的正是人类(特别是青少年)心理中的薄弱之处。

使用社交媒体的我们并不自由

举了这么多例子,想说明的其实很简单:我们以为自己在主动、自由地使用着社交媒体,但其实,我们的种种行为都是被精心设计和引导的。科技公司设计出的许多功能,目的都只有一个,那就是让你上瘾。

你发现自己总是抑制不住刷朋友圈和微博的冲动?你总是期待着下拉刷新读到更多?你每隔几分钟就想看一眼手机?这些种种令人沮丧的现实,并不是因为你是一个意志力薄弱的人,而是因为你的智能手机上的种种功能,就是为了让你上瘾而设计的。连设计开发出这些功能的人自己都抑制不了网瘾,只能用其他工具来强迫自己戒除。

在硅谷,传授设计开发上瘾功能的经验技巧,已经成了一门显学。曾写过《Hooked: How to Build Habit-Forming Products》一书的Nir Eyal就是其中的一位导师”。要听他一次课,需要付费1700美元。

在课上,他会讲解各种心理学的伎俩,来让人产生一种使用产品的渴望”,或者利用负面情绪(无聊、孤独、挫败、困惑等)来引导人们的使用。他对自己的这一套振振有词:你能怪面包房烤的面包太好吃、太诱人吗?当然不能,所以我们也不能怪科技公司开发的产品太好用、太诱人。”

然而,Nir Eyal的课程结尾,教的却是抵制这些诱惑的方法。他自己就会使用一个叫做DF YouTube的浏览器插件,这款插件可以除掉许多诱惑性的元素。他还推荐过一款叫做Pocket Points的app,功能是帮助自己远离手机。他还给自己家里的路由器装了一个定时装置,每天都有一段时间自动断网。

这听起来既讽刺又真实。Nir Eyal太清楚智能手机的上瘾性了,所以他自己会主动防止自己上瘾。可是,亿万普通用户呢?他们并不了解app背后的这些精心设计,他们是被引导、被控制的羔羊。

有一些人对这种现象看不下去了。比如前面提到的Tristan Harris。他之所以曾经在Google获得产品伦理设计师”这样的职位,就是因为他曾经在公司内部群发邮件,严肃探讨这一问题。但是当他真正走向这一职位的时候,他才明白:这与其说是提拔,不如说是被边缘化。因为Google并没有为这一职位提供任何支持,他除了每天看书思考之外,改变不了什么。

于是他辞职,向公众传递信息。他写文章、接受采访、去TED做演讲:代价已经太高了,我不知道还有什么问题比这更紧迫的。”他和朋友一起发起了名为Time Well Spent” () 的倡议团体,帮助用户夺回对自己时间的控制权,倡导有伦理的软件设计。

注意力经济的恶果

问题这样严重,并不是因为科技公司的人都是坏蛋。

开发了like”功能的Justin Rosenstein说,人类经常出于善良的愿望开发出新东西,但却会产生意想不到的负面影响。

其实,这些负面影响并不是意想不到。它正是所谓注意力经济”造成的结果。今天互联网的基本商业模式就是注意力,有了注意力才能变现,才能融资。所以,我们的注意力成为千千万万科技公司疯狂争抢的对象,谁能成功让我们上瘾,谁就能胜出。

我们今天见到的许许多多问题,都可以归结到注意力经济上面。一个最简单的例子就是标题党”、10万加”。如果注意力不是商业逻辑中核心的、乃至唯一的评价标准,自媒体们也就无须处心积虑地搞标题党了。

和Tristan Harris一起发起Time Well Spent的Google前员工James Williams说:注意力经济激励了那些争夺我们注意力的设计。这样设计的结果就是,我们的冲动胜过了我们的意愿。”

冲动胜过了意愿,这句话说得隽永——我们本来真的不想这样,但科技公司推出的种种设计,让我们冲动地作出了并不理性的选择。所以我们往往在刷了很久手机之后,懊悔不已,但下一次依然会重蹈覆辙。

同时,这些设计还让耸人听闻的东西胜过了精致细微的东西,让情绪胜过了理性。它带来的后果不仅仅是个人的上瘾,还有社会的问题。

在川普当选前一个月,James Williams就曾在一篇博客 () 中写道:川普的竞选表明,这种新的、由数字技术强力驱动的注意力经济模式,终于跨过了一个门槛,进入了政治领域。”曾经是真人秀节目明星的川普,的确是深谙注意力经济的秘诀,他的当选与注意力经济有着分不开的关系。而随之而产生的假新闻”、后真相”现象,无不与注意力经济息息相关。

所以,注意力经济的更大恶果是对民主制度的破坏。James Williams说:注意力经济的模式在结构上就是要侵蚀人类的自主意志。如果政治是人类意志在个体和集体层面的表达,那么注意力经济就是直接破坏民主制度赖以生存的根基。”

这的确是一篇色调灰暗、令人脊背发凉的报道。让人感到一丝安慰的是,截止10月12日,这篇发表于10月6日的报道已经在社交媒体上被分享了近17万次。在西方,已经有Tristan Harris和James Williams这样的人在行动,有《卫报》等媒体在严肃报道和探讨。在中国,注意力经济的程度和后果绝不亚于西方。但我们还在等待我们自己的Tristan Harris和James Williams出现。

未经允许不得转载: CIFCOM跨境电商 » facebook blueprint

相关文章

CIFCOM

contact