微信读书交互重设计

前言:正如微信读书的官宣——让阅读不再孤单。微信读书延续了微信一贯的社交性 ,弱化了电商属性的书城,更多聚焦于认真读书、发现好书以及读书交流方面。在众多读书APP中,像一股清流,没有太浓的商业气息。界面简约清爽,操作简单。当然也存在书籍太少等问题,该问题不在本次设计范围内。本文将从一些交互细节对微信读书进行重设计。

软件版本:微信读书2.2.0

使用设备:iphone7

操作系统:ios11.1.1

体验时间:2017-11-22

以下为微信读书的结构框架图:

微信读书结构框架图

1、操作按钮位置混乱。最下面的操作栏顺序不是很合理,建议将删除调至最左边,私密阅读在中间,移动在最右边,比较符合直觉的操作习惯。

书架

用户可以对在架书籍进行自定义分组,其中“归档”是默认的分组,可以往分组里添加书籍。如图,当分组内没有书籍时,右上角是“修改分组”,里面的操作包括“修改分组名”和“删除分组”。当分组内有书籍时,右上角是“编辑”,点击以后变成左上角“修改分组”、右上角“取消”。但从书架页面(第一张图)可以看到,点击编辑后,左上角变为取消。 即按钮的位置是不规律的,不符合尼尔森有用性原则中的一致性原则。

归档

建议将分组的“修改分组”与“取消”交换位置,就会与之前的操作位置相一致,避免用户产生困惑和误操作。

除此之外,想要分组书籍,只能通过“书架-编辑-移动”,建议可以在分组内直接添加书籍,点击添加,打开书架内未分组的图书,通过勾选加入此分组。

修改后如下图所示:

归档(改)

2、发现页右上角的FM42|3入口不是很明显,看上去像是个标签或者logo,并且,大部分用户不知道FM42|3的含义(包括本人)。建议修改为一个icon,让人明白是可点击的,然后里面的内容是一些电台节目。

FM42|3

3、读书界面按钮太多,显得很杂乱。如图,当电台在播放时,可以看到z轴悬浮3个按钮,同时页眉与页脚分别有4个按钮,且一些按钮展开后还有更多功能。面对这么多的按钮,有一些按钮还难以区分,用户使用起来成本较高,这时需要更清晰的逻辑。

读书界面

首先将读书页面的所有功能整理如下:

读书界面结构框架

改进意见:

a、“语音朗读 ”和“听书 ”这两个功能会使人困惑。笔者一开始误以为是同一个功能,后来发现语音朗读只是对文章的朗读,而听书是语音书评。这两个按钮在同一页面放开很容易混淆,合并在一起性质又不一样。对此,笔者认为可以将听书功能与文字书评合并,都是书评,只不过形式有所差异(一个文字、一个语音)。从而使“语音朗读”和“听书”不在同一个层级呈现,避免误解。

文字书评是通过“相关想法”功能实现的,“相关想法”入口较深,被收在读书界面右上角的“更多”里。“相关想法”包括精彩想法和好友想法,其中精彩想法是按章节顺序呈现的,如图。

相关想法

将“相关想法”功能与“听书”功能结合,笔者对页面进行重设计如下图所示。新功能命名为“书评”,点击进入有三大模块“听书”、“精彩想法”和“点评书籍”,听书页面与原页面相似;精彩想法包括好友想法和网友想法。相比现有内容以瀑布流为呈现方式,笔者将内容进行了归类:好友想法在页面最上方,出现一条,剩余的可以点击展开箭头查看更多;网友想法按照文章章节划分,每一章呈现5~10条想法,同样可以查看更多 。“点评书籍”是对全书的点评,并可以给书籍打分,按钮在页面右上角。未点评状态时为黄色,点击进入评价;如果已点评,按钮将变灰,可点击,点击后显示“我”的评价。

书评

b、“今天一起阅读本书的人 ”功能其实类似bilibili的当前共同观看人数。但bilibili仅仅是提供了人数,没有细致到个人信息,而微信读书则是有更浓的社交意味。页面内包括“书友”的个人信息、阅读时长、笔记、读书进度以及关于本书的想法。设想微信读书是希望能通过共同阅读来促进交友,再从社交中促进读书。

可以看到,该功能与“相关想法”功能有些重复,微信读书的做法是把“相关想法 ”收在“更多”里。而经过a中的改造,“相关想法”也就是“书评”的功能点增加了,不适合再被收起。此时将作为一个独立的按钮与“今天一起阅读本书的人 ”共同出现在一级页面。所以功能重复的问题就要用其他方式解决。

两者重复的地方主要在“想法”上,“今天一起阅读本书的人 ”有关于本书的想法,“相关想法”则更是想法的聚集地,这样重复显得臃肿多余。

书评

但进一步分析可知,“今天一起阅读本书的人 ”和“书评”功能侧重点不同,“今天一起阅读本书的人 ”侧重于人,“书评”侧重于评论。所以可以通过弱化“今天一起阅读本书的人 ”中关于想法的部分。具体实现方法是在“今天一起阅读本书的人 ”页面隐藏“关于本书的想法”,然后用户可以通过点击名片进入个人主页查看他人相关想法。

c、当前页脚有4个按钮,分别是抽屉式导航入口、进度条、亮度模式、字体。亮度模式和字体都是对阅读体验的调整,可以整合到一起。这样可以腾出位置放置“书评”功能。进度条使用频率相对较高,可以直接显示出来。最终页脚改进如下:左下角为目录、书签、划线等功能的抽屉式导航入口,调整亮度、颜色、字体、字号统一放在一个按钮内,“书评”功能放置在右下角,进度条直接显示于三个按钮上方。

读书界面(改)

结合以上修改意见,读书界面的最终结构框架如图所示:

读书界面结构框架(改)

(更多中的功能除了“相关想法”被挪出以外,其他功能仍保留,这是为了防止例如“点评书籍”、“书籍详情”一类功能入口太深,降低可用性而做的保险措施。)

4、微信读书支持纯划线摘录,或者划线摘录并写想法。划线可以在抽屉式导航中找到,如图(左),但是没有列出相应划线的想法。这点掌阅做的比较好,把划线和想法都罗列出来,让用户可以轻松看到自己对该书的所有想法,用户体验更好,如图(右)。

划线和想法

5、微信读书可以丰富一些手势操作。如图为多看阅读的多种手势操作,下拉:添加书签;上拉:关闭图书;双指左/右滑动:打开/关闭抽屉式导航。

手势操作

6、语音朗读时不能通过点击任意某句话开始播放,只能拖动进度条,而进度条不够准确。可以参考音乐播放器中点击相应歌词直接从该句歌词开始播放的形式,长按某段文字直接从该段文字开始朗读。

7、掌阅写想法可以“所有人可见”,也可以“仅自己可见”。而微信阅读个人想法不能选择“仅自己可见”(私密阅读的想法是私密的,但公开阅读的想法无法进行隐私设置),需要改进。

隐私设置

8、笔者发现,阅读时选中一段小于14字的文字会跳出如图左所示功能条,包括复制、划线、写想法、查词典、分享和纠错。而当选中一段大于等于14字的文字时会出现如图右所示功能条,包括复制、划线、写想法、录音、分享和纠错。也就是说字少时是查词典、字多时是录音。这种设计应该是考虑到查字典时通常是查字词,所以字数较少。而录音通常需要录比较长的句子。但是这样的智能切换在实际操作中容易出现问题,比如一段话刚好只有13个字,那就不能录音了?所以建议按钮上都呈现出来,即选中文字后跳出功能条,包括复制、划线、写想法、查词典、录音、分享和纠错7个按钮。

跳出功能条

9、掌阅自定义设置较多,比如可以设置行间距、翻页方式、护眼模式等,但这些属于比较次要的功能,微信读书可以在满足产品大方向的前提下逐渐完善。

10、从产品角度看, 微信读书定位于读书社交,但目前做的远远不够。仅仅是分享想法和好友关注,还没有涉及到读书群的概念。比如可以开设作者专栏,建立一个由作者为导向的兴趣社群,书迷们可以在社群内互动,交流读书心得,甚至可以逐步发展线下活动。当然,这也是要看微信读书的产品定位的,暂时是笔者一个不成熟的设想。

欢迎批评指正,欢迎补充!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,108评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,699评论 1 296
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,812评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,236评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,583评论 3 288
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,739评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,957评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,704评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,447评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,643评论 2 249
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,133评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,486评论 3 256
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,151评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,108评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,889评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,782评论 2 277
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,681评论 2 272

推荐阅读更多精彩内容