Work        About

流利说阅读



在项目进行时,流利说阅读是国内最大的英文阅读App,有100万用户选择它阅读来自BBC、经济学人等外刊的原版新闻。在我加入之初,项目计划加入新的业务线—英文书籍阅读。而我负责了这个全新功能板块的从 0 到 1 的 UX/UI 设计。




项目时间

2019年 6月

所属公司

流利说

设计人员

关普键

个人职责

交互设计
UI 设计




流利说阅读在 AppStore





01   过程 Process




全新板块 - 书籍阅读


加入书籍阅读的目的是为了给用户提供一个新的提高英语阅读能力的选择。因此,和外刊阅读一样,每本书里我们会附带一些老师讲解和做题训练给用户。用户可以在书城里按照自己的能力和兴趣选择适合的书籍进行阅读。





空荡荡的书城。


和一般的书籍阅读App不同,我们目前能提供的书籍非常少。因此,流利说阅读的书城功能在设计初期就遇到了困难。在书籍数量稀少、上架缓慢的情况下,怎么能让书城看起来不那么空旷?



让它看起来多一点?


放大书籍的封面是我想到第一个办法,但封面被放大后,毫无质感的画面很容易让人感到品质低劣,以及数量少的现实还是无法被掩饰,较难让用户在这里感受到停留的价值与可选择的空间。



转变思路。


回到书籍的制作周期上看,我了解到制作周期长其实是因为我们的教研在讲解的设计上下了很多功夫,相比起其它竞争对手以及普通的阅读App,我们上架的这些书似乎“有份量”得多。

由此我转换了思路,试图从凸显每本书的价值的角度下手。

我把这件事分成了几部进行:

  • 提升书籍的精美程度
  • 体现学习价值
  • 利用老师给书本质量背书









02   设计 Design



Step 1.
提升书籍的精美度


如何在 APP 里凸显书籍但品质感?以我在学校里做书的经验,不同的装帧以及纸质材料都会对最终书籍的品质感有所影响。因此,我尝试了解首发的每一本真书的状况,并总结出两个设计维度:


1. 装帧风格


平装和精装、哑光和抛光,我们的书籍可以依据自身风格的需要匹配相应的搭配。

2. 封面比例


根据书本的实际比例进行封面制作,尽量不裁剪原有的封面设计。同时还原出书店里整齐又带有点参差的观感。






模拟视觉原型,
确认效果。



书城 Demo





Step 2.
强调每本书的学习价值


1. 个性化排序


由于我们会对每一本书进行难度分析,因此用户浏览书城前,需要进行词汇水平测试,以匹配合适的书籍。 建基于此,我认为应该根据用户的能力来改变书城的显示结构 - 按能力水平对书籍进行分类,并将最适合用户能力的类别放在书城的顶部,并用高亮的标签提醒:“这些是最适合您的书”。





2. 难度建议 & 知识含量


打开书的简介页时,我们将显示能力匹配的相关信息。 在这里,我将每本书的推荐级别简化为一个面部符号。 用户单击该符号即可查看其词汇水平、本书的难度以及我们的建议。

此外,因此还有一个叫“知识收获”的板块,显示用户在阅读本书后可以获得哪些知识。




Step 3.
利用老师给书本质量背书



推荐语


每篇外刊新闻以及每本书,我们都提供一名带读老师。 在阅读过程中,用户可以听老师录制的音频说明。 自流利说阅读启动以来,一些老师已经逐渐获得了自己的粉丝群,这些用户可能会对特定老师产生更大的兴趣和信任。 基于这个猜测,我建议让每位老师亲自为他们所负责的书写推荐语。 同时,我认为这种个人的推荐也能传达一种温度。





团队信息


我们的教学和研究人员通常具有良好的专业背景。 因此,我们显示了每本书制作团队的成员信息,以此提高用户对内容质量的信心。 当然,这也促使了每一位成员对内容质量负责。






UI 设计



书架 & 书城




书籍阅读中