赞助商
立即赞助

红袖读书做了一次全新的设计升级,数据上涨高达285%!

UI设计3年前 (2021)更新 流光
2.1K 0 0

红袖读书」2018年新改版,打造更轻的阅读验,更适合女阅读的读书APP。

一、项目背景

「红袖读书」APP 原名「红袖添香」,是阅文旗下一款以女为主的阅读产品。为一款自1999年开始运营至今的老牌女小说阅读平台,在竞争趋激烈的网文境下,今年迎来一次新的品牌升级。

二、产品现状

「红袖读书」APP 目前版存在的问题:

红袖读书做了一次全新的设计升级,数据上涨高达285%!

三、产品定位

原产品「合30岁以的白领女性阅读的网文产品」,新产品改「合以女性用户主阅读群体的阅读产品」。了迎合广泛、轻用户群的审,新产品需轻的视觉表。

四、品牌形象

袖读书的品牌形象从1999创立以一直升级过,的形象仅 logo 出,未延伸到整产品的 UI设中。因图案过于抽象,对品牌形象一的延伸 IP化都一的阻碍。

五、阅读体验

原产品的阅读体验一直软肋,一方面缺乏听书功能,流失了一部分听书需求的老用户;一方面缺乏合夜间看书的夜间模式,阶段越越流行「全局夜间模式」的环境下,夜间模式即失去了阅读产品的竞争力。

六、新版目标

由此,我们确了这次的改版目标:

  • 提升品牌形象,使整体品牌更象化、年轻化,更轻量。
  • 提升阅读体验,完善听书功能,一键切换全局夜间模式,提升夜间阅读品质。

七、LOGO改版

旧版app logo 了 web版红袖添香的 logo,形象取自「袖」字,因年代久远,现在这个形象看来已经有些「过时」,非为移端的特性量身定做。

新版计目标首先是符移动端的计标准,再做出有更高延展性、可读性,更象的 logo。

鉴于以目标,我们一始就敲了用「文字」或「吉祥」作 logo 主体的方案。

红袖读书做了一次全新的设计升级,数据上涨高达285%!

方案1:以宋体字基础的「袖」字体变形,加入古女子常绘于额的花钿作点睛之笔,延「袖」字的笔画与「」字相接,一从视觉表「袖」的含义,二使两字连接形一整体的形状,合二一一完整的 logo。

问题:白的底放在同类产品中不够突出,因字型复,笔划又比细,缩小放在移动产品上有辨识度的问题。

案2:以国画常表现「花、鸟、山、」「鸟」作为祥物,应用在 logo 上。不以传统墨形展现,而使用简单剪影和渐变来表现,符合下移动端 logo 流趋势。

问题:吉物来表现的这种形式有些过于年轻,而且是个方案中与题相距最远的。

方案3:在方案1基础上修改的方案。做方案1的候就考虑过这的改变是否之前的 logo「差别过大」,而导致上线后用户的烈反弹。所以在适当调整了文字画面的比例之后,保留 logo 的红底方案,形成了这一稿。

问题:了保留原始 logo 的形式,失去了一部分古典韵。

方案4:以隶书为基础的「红袖」字变形,个方案的意图是运用更的字型来表现「红袖」二字,此方案并未的加工字,而是在文字下面增加书的剪影达到点题效果,是4个方案中最直白的表现方式。

问题:展现过于白,隶书型宽扁,与下书形状组合在起显有些散,不够体。

讨论后首先淘汰掉了「吉物」的方案,在确定使「字」的方案后,对了几个方案的优缺点,最终在方案3的基础上调整了字重,形成了最终方案:

红袖读书做了一次全新的设计升级,数据上涨高达285%!

八、视觉规范

1. 字

新版在位置使用思源宋。款开源字在字型设计上的出表现力已经在业内获得泛认,在对比不同司出品的几款宋,思源宋的表现力也依不输给收费字司。因此在字型没有太大问题的前提下从使用成上考量,最终选择思源宋。

仪旗黑是款制作常完善 GBK 库,与 iOS 苹相比,型偏扁,拥有丰富自,我们选择其50s自作为 app 全局体使用。

红袖读书做了一次全新的设计升级,数据上涨高达285%!

2. 颜

旧版使用的主题红饱和度非常高,虽很抓人眼球,但在需要大面积使用主题的场下有一定的局,因为阅读类产品以文字为主,图很少,并非像电类产品一样需要用强烈彩对比的图吸引用户点击,在大部分场是文字的页面上,少量的高亮即吸引用户的注意,而一旦出现需要大面积使用主题的情况,高饱和度的颜缺少衬托主,便非常刺眼。

考虑到以上素,我们颜色做出以下优化:

  • 仍留红为品牌主,符合女用户偏;
  • 适降低红色饱和度,把原本接近于正红色颜色紫色偏移,减轻大积高饱和度色调用户刺激;
  • 在需要大面积使题色的地方,使红色渐变色降低过于强烈的视觉冲击。

红袖读书做了一次全新的设计升级,数据上涨高达285%!

3. 图标

「袖读书」这字原本取自于诗句「袖添夜读书」,很程度,这字赋予了整产品历史的厚重感,虽然网文阅读平台却也古风的感觉。

因此在设计新版图标时,也希望以加一中国传统元素,以此来「点题」。但果局向古风靠拢的又显得太个,不符合产品需要面向各个阶段不同年龄的女用户的初衷,所以最仅在书首屏关键位置留四个样的 icon。

红袖读书做了一次全新的设计升级,数据上涨高达285%!

九、体验优化

1. 统一 App Loading 式

书城顶部导航采用风推的计式,旨在露出更多内容,更有效的命中目标用户。为了更流畅的展示每个版块,在各个栏目间切换增加整屏 loading。这个 loading 式也同应用于书籍加载等需要较长间加载的页面中。

红袖读书做了一次全新的设计升级,数据上涨高达285%!

2. 赠送礼物

目前的版本中存在一些表意太恰当的礼物,如「刀片」。改版时掉了这些表意好的礼物,同时升级礼物样式,增质感,升质。在户打赏过程中适当入效,更有趣味性及消成就感。

红袖读书做了一次全新的设计升级,数据上涨高达285%!

3. 键切换,全局夜模

不仅是在阅读页,为了更好提升夜阅读体验,本版本升级加入了全局夜模,从此再也不用担心夜阅读「亮瞎眼」。

红袖读书做了一次全新的设计升级,数据上涨高达285%!

4. 不一样的阅读工具栏

把所有操集中在页面底部的阅读工具栏,更适用现在越来越大的屏幕操习惯;功能按钮按照使用频率从高到低排列,低频使用的功能向二三级页面依次排列。

红袖读书做了一次全新的设计升级,数据上涨高达285%!

5. 如同音乐播器一般的TTS听书体验

可以自由跳跳出的听书页面,听书的同时还可以浏览其他页面;听书过程中自由调节章节度,一秒跳过不喜欢或已听过的章节。

红袖读书做了一次全新的设计升级,数据上涨高达285%!

十、品牌形象的延伸

为了使整体品牌形象更象化,新版本首次加入了吉祥物「鸟」。

红袖读书做了一次全新的设计升级,数据上涨高达285%!

鸟在中国传统文化中,经常被运用诗词歌赋及绘画的创作中。在二次风靡互网的当下,依然有它的一席之地,而且换了一个更加萌萌哒的名字——「肥啾」。

「肥啾」其实指的鸟类中一种叫「银喉尾山雀」的品种,由于其外型蠢萌深受二次元创作者的喜。本次改版的目标之一「加轻的用户群」,当下也越越多的二次元创作者加入同人或原创小的创作行列,因此品牌中加入含「二次元」标签的形象「肥啾」我们认十分恰当的。

红袖读书做了一次全新的设计升级,数据上涨高达285%!

从 IP 化的角度考虑,未「肥啾」的形象也可以朝拟人化方向发展,形一套既包含动形象又普通 Q版人形象的品牌。

1. 多页面展示

红袖读书做了一次全新的设计升级,数据上涨高达285%!

2. 上线后户反馈

改版对于设计师来说既是机遇又是挑战。的设计方案可会户眼前一亮,但可分老户感到适,甚至现抵触心。在版本上线之前我们已经有了这样的心预期,因此在版本上线之后,看到有来自老户的吐槽,我们要是抚情绪为,针对老户赠送一些礼物作为补偿,在产上没有急于修改,结合设计目标做全判断,有影响到户体验的地方我们及时迭代优。

随着间推移,新用户持续不断上涨,收了更多来新用户的评价,虽然产品依然存在一些问题,但对视觉上的评价已经开始向正面发展,最近已经不再会收来用户关于视觉上的负面反馈了,本预计会持续不断收负面评价的结果并未真的发生。从长期发展来,这次的改版给产品带来了远高于预期的增值。

新版本线后从9月份至11月份的数据涨幅:

DAU 上涨率75.3%,Android 上涨率36%,iOS 上涨率285%。

3. 部分用户反馈

红袖读书做了一次全新的设计升级,数据上涨高达285%!

红袖读书做了一次全新的设计升级,数据上涨高达285%!

欢迎关注「阅文体验计YUX」公众号:

红袖读书做了一次全新的设计升级,数据上涨高达285%!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

吴轶 :用户体验有的时候是和商业化指标KPI 相矛盾的,那我们在设计一款产品的时候如何用量化的方式获得商业化指标和用户体验...
商业价值
前几年我刚从密大人机交互的项目毕业的时候,就加入了爱彼迎  Airbnb。在那之前,我只有两份实习的工作。作为一个毕业生,我...
交互原型
王镇雷:这几天帮朋友看作品集,很高兴地看到大家在阐述设计思路时把竞品分析纳入进来,竞品分析是设计师或产品经理在工作前...
产品分析
我们正式走入下一个10年。在设计和开发之间,在体验和功能之间,我们将会使用不同的工具和服务来协调、弥合、融汇。在这次推...
干货合集
如何为创意插上理性的翅膀,滴滴设计师和你一起回顾春节地图小车 icon 换装的设计全过程。 前言 新年刚过,元宵即临,开工...
交互设计
作为设计师,你是否遇到过这些问题:一直都在做产品的体验优化设计,但怎么知道是否真的有所改进?有 A、B 两种设计方案,要...
入门
@Fornever :豌豆荚在 2011 年引入了 Design Workshop 的方法论做产品设计,并使用这种方法设计出了如豌豆荚 2.0 的 Windows ...
用户体验
给予用户即时反馈是交互设计中十分重要的一个原则。它是关于系统如何即时有效地应对用户进行的操作的设计。当用户进行操作时...
按钮设计