嗨,大家好,我是名字很长的jojo,一位严肃活泼的人民艺术家。
我负责番茄小说的设计工作,大家每天在 APP 上看到的各种图像、交互界面,均出自我手。我是不是很棒(没有求夸的意思,真的......愣着干嘛呢,夸呀!)
使用了番茄这么久,你是否好奇过,番茄的 Logo (图标)是怎样被设计出来的呢?
今天我来为大家还原这个 Logo 的设计工作日记:一个 Logo 的冒险之旅。
(一)确定目标:既要醒目,也要高级
我们要明确,通过这个 Logo 我们想要什么。
设计师最怕的就是听人说:“我既要...又要...也要...还要...”。
不,你必须有所舍弃。
想要高端大气,就不要接地气;想要冷静,就不要热情;想要五彩的缤纷,就别要黑色的高贵。
番茄的 Logo 想要实现什么目标呢?在和产品&运营同学讨论(吵架)多次后,我们达成了一致:
一是要醒目,好辨认:我们希望这个 Logo 是独特的、鲜明的、有特色的,在茫茫应用海中能让你一眼 pick 的那种。这样打开手机想看小说时,你才能快速找到我们。
二是要给用户带来美好的感受:我们希望这个 Logo 是优美的,是有品质感的,用户光是看到它就能产生积极的联想。
概括起来就是,既要醒目,也要高级。
(二)确定调性:暖色、简洁、有想象空间
明确目标后,我心里就有点谱了(其实也没有)。
为了更有谱,我仔细欣赏了市面上所有阅读产品的 Logo,发现他们长得就像一胎八宝,咋都差不多呢?
在内心许下一个要比他们全部都好看的誓言后,我进入了“定调”环节。
你可以把“定调”理解为,确定一些具体的形容词,以明确我们要把 Logo 设计成什么感觉。
虽然我自已是一个多年小说用户,但我也不能代表所有人,因此,我对小说群体做了为期两周的走访调研,并通过数据分析,得出了如下结论:
网文读者主要是年轻人和学生,他们共同的特点是对生活充满美好的向往。而网文给读者的体验是沉浸式的,是愉悦的,同时是具有烟火气的。
因此我得到的设计关键词是沉浸、愉悦、烟火气。
到了这一步,就要发挥我小学三年级语文 96 分的优势了:找到更多衍生关键词。
在没有借助新华字典的帮助下,我得到了这些词语:
沉浸——安静、干净、整洁、内部、深色;
愉悦——跳跃、阳光、水果、温暖、火热;
烟火气——城市、中国风、武侠、绘画、美女。
根据这些衍生关键词,我收集了大量的视觉图片(好一顿搜)并将其汇总,并尝试分析其视觉特征。
这样我就得到了番茄的设计语言:
简洁——简约,做不饱和的设计,给用户空间感、想象的余地;
趣味——暖色+趣味,体现产品的温度与友好;
风格多样化——视觉多样化体现小说多样性、市井的特点。
(三)确定图形:番茄+书签
有了语言,接下来要设计图形方案了。
我在,可可爱爱的番茄图形、方方正正的书籍图形、和清清楚楚的“番茄”二字之间,纠结了足足十几秒钟。
我决定将“番茄”的图形抽象化,保留番茄籽,局部留白。
我还做了一个大胆的决定,在右上角增加一个可爱的小书签,形成了一个非对称性式 Logo 。市面上大多产品 Logo 都是对称的,我比较逆反(青春期比较长),决定刻意不对称。
但我不仅仅是为了标新立异,我是觉得非对称 Logo 既能够加深用户对产品的印象,也突出了「愉悦」的特性。你们觉得呢?
接下来是“番茄小说” 4 个字的文字设计,相比正常宋体弱化文字衬线,为了突出空间感,我扩大了字面拉伸了中宫的占比,这样做不仅提高文字识别度,整体气质也也能够与沉浸的定义相耦合。
好啦,知道你没听懂,连连点头就好啦!
(四)确定颜色,你知道世界上有几种红色吗?
色彩能极大影响我们的情绪。你看到黑色会觉得压抑沉闷,看到白色会觉得安静平和。
刚才提到了关键词,愉悦的+沉浸的。
愉悦感的传递需要温暖和阳光的色彩,譬如红色、黄色等等,让人想到光和热,传递偏正面的情绪。
我们在无数种红色、黄色系进行了一番巧妙(是真的很巧妙)的混合。
最终用中国和日本的传统色彩合成了一个叫做“黄丹”的颜色,作为我们的主色调。整体是明丽的橙黄色,不算太高的饱和度又添加了一些柔和的视觉效果,平添静谧温柔。大家看到它时,会想起温暖的阳光、远足的春日,想起生命中那些明快愉悦的幸福瞬间。
在有了主色调后,我们还需要一些辅助色作为配合,在中国古典美学中,色彩搭配需要阴阳调和、君臣相济,像《红楼梦》中莺儿给宝玉打络子,讲究大红色须配黑络子才好看,或是石青络子才压得住颜色;松花色要配桃红,则是雅淡之中带些娇艳。
因此,我们的辅助色除了要负责传递“沉浸感”这一情绪,还需要烘托出主色,与它相映成趣。
我们一共调制出六个辅助色,分别名为白绿、白鼠、柳鼠、灰樱、裹柳和胡桃,都是低饱和度的素雅色彩,或偏淡绿、或偏淡粉,都可以很好地营造出一个沉浸的阅读氛围,且能够成功烘托出主色的明快,像合唱中醇厚的男低音,淡而不化,支撑起整体的视觉框架。
此处省略描述“ 10 次定稿,50 次争吵和 100 次手指戳屏幕艰难过程”的三万字不表。
如此,你看到的 Logo 就顺利竣工啦!希望你喜欢(必须喜欢!)。
(五)彩蛋:设计师的工作日常
你理解的设计师,除了 Logo 还会做哪些设计工作呢?
其实,你们所看到的,小到一条通知、大到一个阅读页面,都需要我们设计师的全力投入。细节的精益求精、排版的“锱铢必较”,都是为了给你们呈现出最优的视觉效果,和最佳的使用体验。
以阅读器(就是你正在看的这个页面)为例,要设计成什么样,我们也有过审慎的思考。
我们觉得,传统文学大多以实体书籍纸张为承载,而网络文学来自于互联网是虚拟的。我们在阅读时,触摸纸张与书本朴实的质感,也能够给读者带来额外的舒适感受,因此如果能以视觉的形式还原用户对书籍的“触感”,不仅能够将网络与实体相链接,也可以帮助用户增加电子阅读的乐趣。
不知道,你有没有感觉到设计中的“触感”呢?
欢迎在评论区与我交流呀!只要不戳屏幕,我们就是好朋友!
名字很长的jojo(勿cue,我只想躺着)
2020.7.17