今日头条UED团队分享：番茄小说APP设计语言分析

Sponsor

前言：最近小编在使用一款读书APP，深深被其独特创意的设计所吸引。这款来自今日头条旗下的APP在设计方面真的是独具匠心，新颖创意的设计吸引了小编的眼球，今天就为大家推荐今日头条UED团队分享的项目复盘经验：番茄小说APP设计语言分享。

01. 痛点

目前众多的网文产品中，设计同质化比较高，无论是产品视觉或是品牌运营视觉大多都缺乏独创性与统一性。番茄小说想要从众多产品中脱颖而出就需要走出一条合而不同的设计道路。因此提升产品的识别度与消费者对品牌的认知势在必行，设计需探索构建一套属于产品的语言体系。

02. 解决方法

探索番茄小说的设计语言，建立产品认知

1. 文学特性——传统、网络的冷与热

传统文学

文学分为两类，严肃文学（看重语言和细节）、通俗文学（注重情节和故事，浅显易懂）。
周宪《文学理论导引》里定义“文学是以精致语言书写的具有艺术价值的以文本为中心的文化系统。”通过定义可以概括出文学的特点就是具有艺术价值，并且能够通过文字内容带人用户反思或者收获。当人们在阅读文学书籍时是冷静的，只有在这样的心境下读者才能更好的独立思考与分析。因此在氛围上需要给用户提供一个相对沉浸的空间、安逸的环境，通过分析可以提炼出的传统文学情绪关键词：沉浸、冷静、舒适、价值

网络文学

不同于传统文学，网络文学是顺应市场价值而诞生，是文学创作的平民化，让大家能够以网络为载体而发表的文字内容。广义来说，网络文学属于通俗文学的一类，注重情节和故事，通过文字传递的内容更加的朴实、接地气，在创作分类上也更加的多样化，作者可以天马行空的表达自己感受，可以说是在传统文学的基础上，给文字增加了几分烟火气息，也多了几分热闹的感受。
因此通过文学关键词可扩展出网络文学情绪关键词：沉浸、愉悦、烟火气

2. 调研分析

前期通过对小说用户群体与市场的走访调研，并通过数据分析，我们得到了如下结论：

产品用户类型

12-50岁青中年人
后GenX时代
一二三线城市有阅读小说习惯的人群
目前为对生活充满向往的学生与蓝领
产品品牌人格
乐观愉悦（轻松）
品质（书好）
亲民、丰富（书多）
产品视觉风格
品牌色贯穿产品，但不过分使用
视觉为产品功能服务，不做多余的设计
视觉表现多样化，但需要表达相同的产品气质
适度的留白，增强设计空间感

3. 小说产品特性

产品核心词：「沉浸中的愉悦」

正如我们对文学的分析，小说阅读同样是一种独立个体的行为方式，在读书时，我们不希望被人打扰，不希望被琐事细节阻断，我们希望在一个相对安静、舒适的环境下阅读，这是一种沉浸式的感受。
因此这里我们就根据用户的想要的感受，引入“沉浸”的概念——希望能够给读者留下一定的空间，并抛除繁杂打扰，让大家享受阅读与独立思考。其核心是围绕信息内容本身而呈现，设计不再作为独立于内容之外的元素存在，而将着眼于内容本身，为用户打造直观的视觉体验。拉大层级对比，增加适当的留白，在一定程度上增加少许修饰，打破绝对的冷淡。其既能体现出文学的特点，又能够在简约的基础上增加画面的构成感，给用户愉悦的感受。

触感

网络小说与传统文学另外一个最大的区别是触感。
传统文学大多以实体书籍纸张为承载，而网络文学来自于互联网是虚拟的。我们在阅读时，触摸纸张与书本朴实的质感，也能够给读者带来额外的舒适感受，因此如果能以视觉的形式还原用户对书籍的“触感”，不仅能够将网络与实体相链接，也可以帮助用户增加电子阅读的乐趣。

4.建立番茄小说情绪版

根据归纳出的文学特征，以及调研用户年龄层与喜好，我们可以归纳出番茄小说基础原生关键词。

基础原生关键词

拓展衍生关键词

根据网络文学原生关键词，我们拓展出衍生词

沉浸：安静、干净、整洁、内部、深色
烟火气：城市、中国风、武侠、绘画、美女
愉悦：跳跃、阳光、水果、温暖、火热
触感：纸张、磨砂、纹理、褶皱、斑驳

图片搜索、提取情绪版

根据相关的衍生关键词，我们收集大量的视觉图片并将其汇总，借以分析其视觉特征

色彩提取

视觉映射

通过对情绪版的分析，我们可以得出结论并整理出番茄小说设计语言，轻量的色彩、写意式元素、非对称布局、纸纹理噪点

03. 番茄小说设计语言

将传统的冷静沉浸与网络文学的热闹向融合是番茄小说设计语言的重要视觉呈现方式风格多元化的简约设计+情感化修饰

简洁：简约，做不饱和的设计，给用户空间感、想象的余地
趣味：暖色+趣味，体现产品的温度与友好
风格多样化：视觉多样化体现小说多样性、市井特点
质感：增加视觉纹理，给用户带来真实阅读的感受

Logo

番茄的品牌名称基于“最新、优质”的产品理念，服务于产品设计、品牌设计中。番茄相对于红果是一个更加具象的表达，不仅可提高用户对产品的认知，也能传递小说品牌的理念和态度。基于此，这个理念框架是讲述品牌故事的关键载体。

logo动画展示

小说相关产品logo汇总

在logo的设计上我们将番茄的图形概念化，保留番茄籽，局部的留白让标志同样能表达空间与白的概念。我们选择在白色底上用红色非对称性式logo ，既区别了市面上大多产品logo样式，又能够加深用户对产品的印象，突出了「愉悦」的特性。

选定 logo 并设计图形+文字组合：

在文字设计上，相比正常宋体弱化文字衬线，为了突出空间感，我们扩大了字面拉伸了中宫的占比，这样做不仅提高文字识别度，整体气质也也能够与沉浸的定义相耦合。

品牌色

前期通过情绪版的分析，摘取关键词配色，综合归纳出符合番茄小说特性的的色彩搭配

通过对情绪版色彩的归纳，我们抽取具有代表性的颜色，作为番茄小说的品牌色

辅助图形

从logo中番茄图形的概念出发，提取出以圆、番茄籽、番茄轮廓为基本型的品牌图形元素

官方字体

考虑到官方字体在沉浸式页面中的运用，番茄官方字体的选择与品牌属性相契合的苹方体、宋体。

VI 呈现：

品牌视觉感受：

品牌体现

产品场景

番茄小说给人的感觉是安静、平和、友好。因此在颜色使用中以品牌色配合低饱和度背景色做搭配，突出产品的带给用户的沉浸、愉悦感。

运营场景

运营设计对品牌塑造的意义

第一眼的感受，往往决定了用户对产品的整体印象。目前在番茄小说的产品中，最直观的品牌视觉展示主要以书单活动banner为载体，其做为活动入口本身就处在一个前置的位置，占用空间大且更能吸引到用户的注意。因此，需要对运营焦点图设计精细化的打磨，让用户在打开产品的瞬间，快速塑造产品在用户心中的视觉形象。

番茄小说运营设计——和而不同

运营设计的基本原则
1.信息快速传达
2.促使用户行动

因此番茄小说的运营视觉需要紧密围绕在这个大前提下进行设计，快速传达信息=保证信息的简单化、文字有效性，促使用户行动=画面内容的趣味性、吸引性。

视觉呈现形式

遵循番茄体系，体现小说内核的“烟火”气质，视觉呈现多元化。以运营文案为中心，画面设计贴近内容，降低用户信息识别成本。

品牌运营视觉一期构建：手绘元素+非对称构图+质感

设计规范

运营视觉与品牌调性应是统一的，因此在运营设计的色彩选择需要与品牌配色相呼应，保证视觉与整个产品的和谐性。
运营插图案例

在运营活动中，依然要以产品所传递的气质来进行画面设计，即是保留沉浸的前提下，抽取关键词的某个方向来表达品牌运营所传递的理念。在色彩的使用上可以围绕关键词的方向来选择颜色，以表达内容所传递的信息，可适当使用品牌色作为点缀，但依然需要的保持视觉给人带来的平和感。

04. 总结

作为一个从 0 到1的品牌，番茄小说的设计语言依然在不断的打磨、优化。整体清晰的品牌规划能够保证线上、线下、产品与营销的各个视觉设计环节更加统一，同时也为后续的设计指明方向，助力业务持续发展。

作者 | 今日头条UED
来源 | 今日头条UED(id:toutiaoued)

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。