原文链接:https://www.zcool.com.cn/article/ZMTI2ODkwMA==.html

过去的一段时间,团队希望打造有温度、有人情味的产品设计,力求在追求高效的同时也能传递出沉浸、有趣味的设计体验。
image.png
**

Part 1

番茄原创是什么?

随着网络文学市场规模不断的增长,网络文学作家数量越来越多,在百花齐放,百家争鸣的情况下,如何吸引和留住原创作家将是网文阅读平台新一轮竞争风口。

image.png

纵观下来,原创是多方需求的耦合点,既满足读者、作家的需求,也能丰富行业和平台原创内容;同时作为番茄小说的内容提供侧之一,是小说业务未来不断发展的基础和后盾。

image.png

2019年番茄原创开始搭建,从一开始以头条号后台快速搭建起来的创作平台,经过过去一年多的不断搭建和完善创作场景和体验,现在不仅能在PC、WAP的番茄小说网中找书和阅读,而且还支持跨端的作家创作体验(PC、H5、APP)。

image.png
**

Part 2

如何洞察设计切入点?

结合行业发展与产品现状,始终围绕「为番茄原创作家提供业内体验较好的创作平台」为目标,在快速补全功能(完善场景覆盖)、追平体验(提供高效创作平台)和强化感知(延续「番茄小说」设计语言)上,通过专家走查、问卷调研等设计挖掘手段,定位设计切入点。

image.png
**

Part 3

番茄原创体验建设

确定问题后,对应得出设计定位及策略的主要关键词:易用、沉浸、欢愉并围绕该定位及目标完成全系统体验设计。接着将通过不同的例子讲述以上三个目标究竟是如何一一落地、如何在体验上为作家提供一个用得顺手、让人投入、以及有人情味的产品。

image.png

01

提供高效创作平台,

萌新作家也能快速上手

体验路径前置梳理

基于专家走查发现的核心问题,进一步通过问卷的形式进行挖掘,发现我们的作家是谁、有什么创作习惯、在不同阶段下分别有哪些诉求和痛点、对哪些功能有更强烈的诉求,并针对优先级分别落地设计方案。

在成为签约作家之前,萌新作家需要结合福利选择平台,在关键节点上,包括入驻、创建新书、签约前的字数连载提示以及数据监测,均进行适当适时的引导与提示。

image.png

开新书、连载、看数据一步到位

由于链路长、定位难、效率低为后台的核心痛点,因此通过外迁后台、梳理导航、明确工作台模块以解决相应问题。

image.png

工作台承担枢纽的角色,因此需要确保作家能够快速定位到自己正在连载的书,同时,也能获取到平台的公告以及创作小课堂。

image.png

结合差异化展示不同阶段的任务,辅助作家在不同阶段下,完成对应的关键任务。

image.png

数据监测上,采用「总-分」划分,统一数据、收益和稿费布局,通过加大颜色的辨识度,让信息更容易被识别、阅读起来更舒服。
image.png

**

奇思妙想随时记录

除了上述PC外,APP1.0 设计时,结合常更新的2-3本作品,首页采用大卡的形式承载,既能快速进入编辑器进行创作或存草稿,也能满足横滑进入全部作品。
image.png

02

营造沉浸创作体验,

为思考和好故事搭建的小空间

多场景覆盖辅助写作

结合行业调研与现状分析,作为作家连载过程中的必经之路,在设计上,基础功能满足到位,关键模块细致打磨。

通过行业报告和调研可以发现,作家对这些功能有较高的诉求,包括自动备份、字数同步展示、夜间模式、语法替换、章节预览。

image.png

多功能支持无忧无干扰创作

根据作家对写作软件的需求,对功能进行快速补齐,满足作家的写作要求,打造一个无忧无干扰的创作环境,包括日夜间模式切换、错别字识别、自动存盘。而在错别字识别上线后,在作者论坛获得关注与好评。

image.png
**

为好故事搭建思考空间

过去旧版本的编辑器,主要是服务头条内容创作者,未针对小说作家的诉求进行设计。例如,小说创作字数较多,需要一个更加不被打扰的创作空间。因此,原页面中的如:全局导航栏、付费模式等次要信息,既分散注意力,又有可能误触产生跳转。

image.png

编辑器留白,聚焦核心内容,当全身心投入到工作时,人会更容易进入心流(Flow)状态,而对工具的操作过程反馈越及时、干扰越少,创作就越流畅。因此,为了更好进入心流状态,基于可用性原则的上通过灰与白背景创建视觉层次,力求让作家更加聚焦其创作的内容。

同时,人的记忆力是有限的,回忆很难,识别容易。利用空置状态,通过识别暗示来进行章节名录入的格式,减少出错;关联工具栏和菜单栏信息,在tooltips中展示提示,强化信息识别的同时也能降低回忆带来的成本。

image.png

同样地,在APP上的编辑器中,将核心操作区与信息提示区展示在页面的头部与底部,目的也是为了保证能更快的聚焦到内容输入的区域中。

image.png
**

上线效果

比老后台相比,编辑器容错性、沉浸氛围、功能清晰明确的满意度得分相均有较大提升。

image.png

**

03

传递欢愉创作氛围,

通过品牌拉近关系、通过情感化融入点滴

定位不清晰

作为番茄大体系下的创作者部分,延续番茄小说设计语言的简洁、趣味,结合作家的写作习惯与需求进行界面的设计。希望通过建立品牌的个性,在细节中融入品牌的调性与情感化的细节设计,为作家创造一个值得被信任、欢愉的创作氛围。

原创后台很长一段时间耦合在头条号后台,不具备独立的产品承载功能并建立相应的品牌意识。作家无法理解番茄与头条的关系,内容的投放渠道及其相应的收益也无法明了,无法建立信任。

image.png



强化品牌:以番茄作家助手为例

为原创作家提供移动端良好的创作体验、公开透明的数据至关重要。而在品牌主张上,鼓励作家持续长久创作,从朴实的生活体验中创作有趣的故事,支持原创,让更多人看到原创的成果。希望读者能从好故事中得到憧憬,热爱生活,让好故事影响更多人。

image.png

品牌人格、调性

分别选取了清雅恬适(清欢)、真挚质朴(朴拙)、百花齐放(丰富)、具有温度(温暖)品牌调性。
image.png
image.png

色彩选取

整体色彩主感觉为白色及灰色,点缀以主题色橙色,给人纯净不失愉悦之感。其余的辅助色皆为灰调的莫兰迪色系。

色彩的使用方法皆为纯色,更凸显质朴简单之意思。减少渐变和质感的使用,降低过多细节导致失焦。辅助纯色的使用,能降低橙色的躁动,整体更沉浸,平稳和安静。

image.png

构建品牌外在清雅恬适,而内在却又丰富有趣的个性。不刻意逢迎,也不强行吸引,通过真挚质朴的态度建立与作家间的情感信任。

Logo初印象

设计灵感来源番茄与创作钢笔的形的结合,图形细节偏圆,让图形感觉更形象也更亲民。颜色选取自番茄,橙色具有非常强的标识性。

从色彩心理学上也是一种让人兴奋和愉悦的颜色,与我们想给作家带来情感温度的预期,不谋而合。同时,也遵从宏观上番茄小说全体系的统一性,清晰品牌的定位,容易建立品牌的信任度。

image.png

image.png

**

界面设计的延展

界面设计的核心关键词为MODERN WHITE & WRITE。该概念是从品牌的调性中总结而来,MODERN WHITE 是一种清雅的灰白色色调,给人平静沉浸之感,纯色的灰调和质朴的手绘线条有朴拙之意,模拟用手书写和图画的真挚。

image.png

界面细节透传个性

在界面设计中,主要通过「形、色、情感、插图、动效」等方面的设计,透传品牌个性。

image.png

**

对于作家助手的气质,虽主要以白灰为主的清雅,但作为助手本身一定是亲民易用,不刺人,温和没有距离感,所以在形状的使用上,包括控件和装饰图形,基本都使用全圆角。

image.png

整体色彩主感觉为白色及灰色,并点缀以主题色橙色,给人纯净不失愉悦之感。其余的辅助色皆为灰调的莫兰迪色系。色彩的使用方法皆为纯色,更凸显质朴简单之意思。

减少渐变和质感的使用,降低过多细节导致失焦。辅助纯色的使用,能降低橙色的躁动,整体更沉浸,平稳和安静。

image.png
image.png

情感化与动效

头部的问候语随时间变化而变化,结合微动效的图标,建立对话感,拉近距离,从而建立彼此的信任。
image.png

适当动效的加入,让用户在使用的过程中更感觉到用心和趣味。
image.png

image.png

插图

image.png

image.png

品牌书展示

image.png

image.png

image.png

**

Part 4

一份来自用户的反馈

01

定期监测,

双月满意度对比

经过一年的耕耘,创作体验、界面设计获得了较高的满意度和关注度,在关键指标上也有了符合预期的提升。**

image.png



02

专项调研,

新老后台满意度对比

**

随着新功能上线,进行了新老后台满意对比的调研,以问卷的形式,关注核心路径与模块的对比。其中,「视觉美观」与「品牌感」提升较大、认为后台更加赏心悦目、更能感知这是番茄原创后台。

image.png



Part 5

持续要做的

过去的一段时间,团队希望打造有温度、有人情味的产品设计,力求在追求高效的同时也能传递出沉浸、有趣味的设计体验。

反观过往,我们仍然有许多不足的地方需要继续完善。帮助番茄作家创作更多、更好的故事,最终让工具用得更顺手,让灵感被捕捉得更容易,让好故事影响更多的人。