当老板说出「字要大」「颜色要喜庆,别跟坟前上吊似的」时,他们到底想表达什么?设计师该如何应对?今天让得到首位视觉设计师揭秘他的亲历经验!
以下内容来自APP设计师李岩在得到3周年开放日活动的分享,分享给同学们,看看是不是有所收获呢?
@二手笑话 :大家好,我是李岩,我是这家公司的第一个设计师。

先给大家看一张图。这个不是我的作品,这是 5 年前,我来公司面试时,我的座位。
对,就是五年前,那时候还没有得到,这家公司只有一个微信公号,叫罗辑思维。当时这家公司特别破,在郎园一间很小的屋子里。
没有空调,就几张桌子,连椅子都不够用,所以刚来的前几天,我只能坐在这个上面办公。
其实我也不是很清楚,当时为什么要接受这样一家公司的 offer。
这些才是我在这家公司的作品。有很多你们肯定都很眼熟了,像《薛兆丰经济学讲义》、《你有你的计划,世界另有计划》等等。

在这 5 年里,做了将近四十套图书封面、十几套衍生品,各种大型活动,以及非常多的各种各样的线上页面设计。
不过其实所有这些作品,和我当初想的都不太一样。
上大学还有刚刚毕业的时候,我设想中的工作内容,那得是这样的:

美!高级!有想法!是吧?
但是我要非常负责任地告诉你们,作为一个设计师,无论什么行业。一旦进入到真实的工作之中,不是在做毕业作品,也不是在做飞机稿了,那你的工作内容其实是离那个状态很遥远的。
因为毕业作品、飞机稿,它们的重点是理念,是为了创新,为了与众不同,甚至只是为了参赛获奖。
但在大部分的实际工作中,设计是要解决问题的,要传达信息,要促进销售等等。
其实说白了,你本质上的目标只有一个:满足公司或者客户的需求,从而为用户创造价值。
这是一个什么样的状态呢?以我们公司为例,大家都知道,我们是一家知识服务公司。
所以在我们这做视觉设计,其实和淘宝美工一样,因为大部分作品,是要销售的。无论是书还是课程,最终的结果是要让用户下单购买、产生交易。
但是作为知识服务公司,我们又有两个特点和淘宝不一样:第一个叫知识,第二个叫服务。

知识,决定了我们销售的不是普通的商品。
它不是一个实体物件,和卖衣服箱包什么的不一样,甚至和出版社卖书也不一样。
它是完全虚拟的体验,你不能去称称重量,看有没有缺斤少两,也没有行业统一的质检方法。
所以它的整个销售过程必须是一个取得信任的过程,而且是长期信任。
这导致淘宝的那些招数我们都不能用了,比如价格放大再放大,再虚标一个原价,这种非常管用的招数,我们不能用。
再来看第二个特点,服务。
服务决定了它所有的一切必须建立在亲切、友好为用户创造价值这个基础上。
但服务也不是一味低姿态,好的服务是我们和用户相互尊重,相互创造价值的过程。
那我们来看看工作中,真实的情景是什么样的:

这些是我们公司微信群的一些截图,这个头像是我们的 CEO 脱不花。对,她在公司跟设计师说的最多的三个字就是:
字要大、字要大、字要大。

我相信做过设计的朋友,一定遇到过老板或者甲方跟你说这三个字。
就算没做过设计,也一定能体会作为一个追求美的设计师,看到这三个字,是什么感觉。
那为什么一直以来,甲方的「字要大」和设计师的审美之间,这个矛盾永远不可调和?
其实是因为缺少一个步骤:翻译。我们仔细想想,当她说字要大的时候,到底是在说什么?真的只是要把字放大吗?其实不是的。
字要大的意思,翻译一下:是要醒目、显眼、信号强。

Get 到了这一点,接下来就好办了。
比如这张图:

当时脱不花看了就说,这个不行,字太小了,字要大。好,然后我就修改了一下,这是修改完的结果:

脱不花说,挺好!

字大了吗?并没有,这两张图上的字是一样大的,我只是把颜色调了一下。字并没有变大,但是这个标题的信号变强了。

我们再来看这个,《薛兆丰经济学讲义》。这是当初在做封面时的一个过程稿,当时这本书我们公司非常重视,封面做了很多方案:

这个是最终被选中的方向。觉得都挺好,只有一点,书名太小了,字要大。

薛老师、脱不花以及大家都挺满意,字大了么?没有,实际上甚至更小了。
仅仅是字体的区别对吧。最终这个是我自己做的字体,更简明粗壮,就让信号变得更强了,同时也有教科书的经典感。
那这本书上新当天就卖了两万册,到现在为止,各种版本已经销售了将近一百万册。
作为一个设计师,能参与到这样一本有分量的书中,是很荣幸的。
那再来看另外一个例子。同样,收到的反馈是字太小了看不清楚,字要大!

然后右边这是修改完的。
字体字号完全没变,但清楚了很多对吗?只是分了个段,信息就清晰了很多,于是信号一样也变强了,达到了「字要大」的需求。
前面这几个例子中,我收到的反馈从来没有变过,只有一条:字要大。

那我给的这些解决方案,是不是字要大呢?
你也可以说是吧,虽然实际上没有一个是把字放大了的。
但因为字要大背后的意思其实是信号要强,这些改变都做到了信号强。

原研哉说过,「设计行为是对信息的提取、整理和呈现」,做设计,本质就是处理信息。
那么字要大翻译过来,代表的就是信号强。

如果你理解了这一层意思,就是当老板或者甲方说字要大时,其实是想说信号要强。那你就不会真的只是把字放大了。
你的处理方式有很多种,一定能找到一种既不破坏你心里的审美,又能满足需求的方式。前面说的那个矛盾,也就不存在了。
说到这里,还有一个例子:罗胖每年跨年演讲的 keynote(演讲PPT),都是业内著名的马馺老师做的,包括我们今天这个活动的 keynote 也是。
罗胖说,跨年演讲办了 4 年了,但是他和马馺之间还是一直存在这个矛盾:罗胖要字大,马馺觉得不行已经非常大了,而且信号已经非常强,上面讲的各种手段都用过了,罗胖还是不满意。
后来终于整明白他们俩的矛盾在哪里了,是因为他们俩看这个字的视角不一样。马馺是在电脑屏幕上看这个字,想象的是现场效果怎么样。

而罗胖想象的一直是:有一个观众在现场听罗胖演讲,看到这一页 keynote 不错,掏出手机,把现场的这个照片拍下来,然后发了个朋友圈。

这是两个完全不同的场景,所以对这个字到底多大,也就是这个信号到底多强,这个需求自然是不一样的。
好,这是怎么翻译「字要大」的问题,我们再来看另一个翻译的问题。
熟悉我们的朋友,可能已经注意到了,我们得到 App 的首页 banner、弹窗、开屏等等这些重要的位置,设计图基本都是暖色的。

但其实最开始的时候不是这样的,最开始什么颜色都有。

那现在这种暖色是怎么来的呢?

这是脱不花某一次提的修改意见,叫「别跟坟前上吊似的」。

那对于一个设计师来说,听到这个需求,那是一脸茫然啊,什么叫「坟前上吊」?后来改了半天,改成了这样。

嗯,满意了。哦,我明白了,原来是颜色的问题。
那再后来她就说得更具体了,每次都说要大红色,要办喜事。那是让我们以后每个 banner、弹窗全都做成大红的,是这个意思吗?这当然不可能。

比如这个,脱不花一看说,不行,要大红的。

然后改完是这样。嗯,可以了。
这是另外一个,说要大红,要喜庆!

然后最终改完是这样。OK了。

还有这些也是说,要用大红色。改完了,都长这样。

你看,上面这几个例子,每次脱不花的要求都是大红色。设计师改的颜色却各不一样,然后脱不花觉得 OK,符合要求。
所以对于脱不花来说,这些都是大红色

在我们设计师眼里,这些全都是不同的颜色啊,这些颜色唯一的共性是暖色。
你要知道,在潘通色卡中,即使是最简陋的那一版里,暖色就有五百种。
但是不好意思,这么多颜色,在脱不花那,统一都叫一种:大红色。不过让我很奇怪的是,她管这些全叫大红色,但口红色号她分的清清楚楚。

玩笑归玩笑。后来,我们明白了暖色这回事之后,我们制定了一个标准,除了特殊情况,做 banner 的时候,只能在色环的这个范围取色。然后就再也没有「坟前上吊」这个问题了。

所以你看,脱不花表面上是说要大红色,实际上翻译过来是说:这个信息要传达温暖亲切,要友好的感觉。

那为什么要这样呢?只是一个审美偏好的问题吗?其实不是的。我们设想一下,用户刚进门,你来迎接,那你希望这个氛围是什么样的呢?
是冷冷清清地说「哦,来了啊,坐,喝水么?」还是「呦您来啦,赶紧请坐,您喝茶还是喝咖啡?」对,当然是要后面那样嘛。
而且,整个互联网多年的经验和统计数据也表明:对于要销售东西来说,红色、橙色这种暖色确实效果更好,这一点,你去看淘宝和京东的页面,他们其实也一直在这样做。
那明白了这些,再翻译成设计上的具体操作,其实就是两条:颜色上要用暖色,构图上不要太单调。
前面讲的是最有代表性的两个词的翻译,类似的模糊的需求还有很多很多。我顺便做了一个表

这是我们公司常见的一些设计需求的词,除了字要大、大红色,还有比如说炸裂,炸裂是什么意思呢,翻译过来就是信号超强。
大概是这样,具体操作上就是用重型字体、强对比色、最少的文字信息。

还有高级,这个高级是什么样呢?大概这样,就是要用流行色、元素要少,要用非常规的构图

还有什么简洁、丧、喜庆、对话感……就不一一举例了,我大概总结了一下它们的翻译,送给大家。

大家有没有发现,我前面说的那些例子,无论需求是字要大还是大红色,最后解决的思路其实很简单,就是两步:
翻译需求,弄明白他说这个到底是什么意思。
专业匹配,从我掌握的设计技巧中,找到合适的方法去实现需求。

我们平时工作时,往往特别重视第二步,拼命提升设计感,拼命美化细节,但其实更重要的是第一步。
我们经常看到网上流传的那些段子,什么高端大气上档次、五彩斑斓的黑、logo 放大的同时缩小一点等等。

这些其实不是瞎编的,做设计的人都知道,这是真实存在的。
不过你要明白,这些看似奇葩的需求,不是他们要故意为难设计师。甲方不是设计专业的,他不懂我们的那些衬线体、视觉平衡、色彩构成这些玩意,我们不能期望他用设计专业的语言去描述需求。
他只能用他能想到的有限的词汇。甚至实际上,在他没看到心目中对的那个方案时,他也不清楚自己到底想要什么。这很正常。
只要你们的目标是一致的,都是为了品牌和用户创造价值,那出现这种情况,其实就是一个翻译的问题

先想一下,这个看似奇葩的需求,在这个目标的情景下,代表的是什么意思。翻译好了,再运用你的专业能力,自然能达到需求和审美之间的平衡。
最后我想说,我是一个设计师,听起来似乎挺艺术的一个职业,不过本质上其实就是一个手艺人,靠手艺吃饭。
那像我这样的人其实特别多,你可能不是设计师,可能是一个程序员、编辑、运营,或者什么别的手艺。
对于所有手艺人来说,其实经常都会面对这种问题,就是我们作为内行,有时候面对一个不是内行的人提出的需求,感觉很难做。
比如一个程序员,老板说我要做一个人工智能软件;一个运营,甲方说,咱们搞一个事件营销、病毒传播;一个产品经理,老板说我要像微信那样的用户体验……
我觉得面对这种情况,解决思路都是一样的:翻译需求,匹配专业。按照这个思路,一定能找到一个合适的办法。

好,这就是我今天的全部内容,希望对你有帮助,谢谢。