新闻资讯

当前页面:首页 > 资讯动态 > 小多比的设计笔记(18):火星阅读APP改版分享

小多比的设计笔记(18):火星阅读APP改版分享

图片


你每天花在阅读上的时间有多少?随着手机功能不断完善,手机上的图书资源也越来越多,各类图书APP争奇斗艳。因此今天为大家介绍的是来自UI32期刘同学关于火星阅读APP的改版分享。


根据市场调研显示,图书类app的用户涌入大量的年轻群体,大家的阅读标准不仅仅只是停留在文字上,而逐渐也看重app带来的视觉感官体验和所谓的“懒人化体验”,所以在改版之初,刘同学就希望能够重新打造一个年轻化设计、内容丰富、操作简单的个性化图书馆。



图片


从数据分析网站以及原版app内的用户留言和反馈得出,火星阅读的用户群体主要是18-35岁的年轻群体,男女用户占比也相对平均,根据不同年龄、职业的用户,发现他们的期望点以及痛点有许多相似的地方,用户痛点大多是:书籍类型少、界面复杂、分类不明确等,希望书籍类型多、高质量个性化推荐、界面美观易操作、有书友社交圈等等。


图片


根据这些特点选择了四个对标的竞品,他们各自有不同的优点:微信阅读:操作清晰、没有花哨的设计;掌阅:书籍种类多,精准个性化推荐,番茄小说:涵盖大量免费的影视原著;百度阅读:可自由切换主题和同步多设备。


图片


所以根据以上的调研分析,火星阅读改版的目标主要针对三个方面:1、交互逻辑方面:简单易操作,明确各大功能,归类板块内容,2、视觉方面,干净舒适,增加阅读氛围感,3、功能层面,增加个性化功能,完善优化社交圈来提升用户活跃度。


图片


整合信息架构,刘同学保留了原本app的四个主要功能,对其进行了内容分类,在此基础上增加了一部分全新的内容和个性化设计。


图片


通过产品定位和用户反馈提炼出三个关键点:精致简单、创意活跃有个性、记录阅读生活,对应的也构建了三个情绪版来定义风格。色彩方面,基于图书类app严谨大气的产品属性上,选用了紫色为主色,营造一种更舒适轻松、更有趣的阅读氛围,加入黄色为辅助色给app带来轻快活泼且明亮的视觉体验。


图片


为了凸显品牌的亲和力但也不显得幼稚,选择了中等圆度的设计去中和图书棱角给人锐利的感觉。布局充分留白,强调视觉层级、明确信息分组,一方面是为了统一设计规范,一方面方便后期开发和更新。图标使用了较圆润、简单的线性设计,方便用户辨识的同时又增加了亲和力。然后就是一些个性化组件的整合,规范统一各个板块,方便后期修改和更新。


图片

图片

图片


接下来是界面设计,进入app第一页,还是保留它原本一进入app就是个人的阅读页,也就是书架,因为用户使用图书app大部份时间和主要目的一般都是直接进入阅读界面或者找已收藏的书籍,所以相比之下,功能使用频率要高一些,原来的排版单一枯燥,没有层级,所有收藏的书籍都堆积在一起,分类查看、搜索等都需要跳转到下一界面,操作步骤过于繁琐。改版新增了情感化设计增添亲和力,直观展示当下在看书籍的详情,新增快捷键方便用户操作,以日历组件的形式提醒用户是否有阅读计划安排,相比于原版来说,板块功能更加清晰明确,方便用户认知和操作。


图片


图书馆界面,把全部分类折叠进了标签栏,设计左右滑动效果查看,既有效利用了界面空间,又方便用户操作浏览以及选择。瓷片区采用了图标+玻璃拟态的设计来提升视觉体验,强调功能入口,吸引并引导用户点击操作。布局运用卡片式设计:提升空间复用率,有利于信息分层和整合,增强视觉空间感和表现力。通过用户喜好和阅读习惯进行个性化推荐,满足用户喜好和需求来增强用户粘性。


图片


图书馆全部分类界面,点击标签,对应板块跳转到页面中部展示,方便用户浏览和查找书籍,图书详情界面,将优先级按钮以悬浮的形式固定在页面底部,并且将可点击查看的信息突出显示,强调可操作按钮的点击感。


图片


阅读界面遵从秩序感,没有增加花哨设计,提升用户的阅读效率,用户可根据自己习惯来进行页面个性化设置,比如更改行间距、界面风格、选框颜色等,照顾用户阅读情绪。


图片


为了满足部分用户需求和完善app功能,新增了有声读物,相同的标签栏方便用户认知。卡片式布局整合板块信息,增加类型标签,方便用户筛选推荐内容。为了方便用户操作在底部添加非固定悬浮播放器,方便用户随时定位听书进度和一键返回听书界面。

听书界面是根据用户使用播放app的习惯来进行设计的,播放界面和文稿界面可左右滑动切换,功能图标也进行了全览展示,简单易懂方便操作,降低用户的学习成本。


图片


原版的广场发现页改成了社交圈,将话题弹幕化设计,与用户进行实时互动,下方紧跟热门讨论,方便用户快速参与话题活动,通过用户之间的交流,提高用户参与感,一键加入个性化推荐讨论圈,吸引用户参与互动,从而带动社交圈界面流量和热度。


图片


社交圈标签栏简单切换到聊天界面,将好友消息和讨论组群聊分开,让用户可以简单区分开互动类型,快速获取信息。不同内容框有不同的展现形式,减少聊天界面的乏味感。


图片


个人中心页把关于app的信息折叠进官方消息,注重用户自身习惯、爱好、阅读历程,拉近与用户距离来提升用户对产品的信赖感。新增读书日历模块,添加趣味插画设计,吸引用户去制定个性化读书计划,以日历的形式清晰展示本月的阅读安排以及查看阅读笔记,引导用户培养阅读习惯,增强app与用户之间的互动性和用户对产品的依赖性,来达到用户留存。


图片


下面就是其他页面的展示,引导页和缺省页都运用了插画设计,增强视觉效果和界面的趣味性来过渡缓解用户焦虑情绪,引导用户下一步操作。弹窗放在了话题活动界面,当用户想要参与互动时,以趣味场景式插画来吸引用户去参与运营活动,减轻对推广活动的厌烦感。闪屏页,通过节日插画的形式去营造世界读书日的气氛来体现人文关怀,拉近与用户的距离,引导用户参与话题。H5运营页承载品牌运营活动,以阅读会员日的激励机制和专属福利,吸引用户参与,从而提升品牌活跃度和品牌形象。


图片

图片

图片

图片


最后是所有界面的一个展示,以上就是火星阅读3.0改版的所有内容。


图片


小多比的设计笔记(18):火星阅读APP改版分享

阅读量:1458