一 网易云阅读web资讯阅读器V1版本情况以及问题
如下截图是网易云阅读web阅读器V1版本(图1),结构上和谷歌阅读(图2)类似,左右两栏模式,左边为订阅源列表,右边是文章列表。网易云阅读右侧的文章列表是默认收起状态,每篇文章都是点击“查看全文”再进行阅读.
谷歌阅读的左右两栏模式自从它诞生开始就基本没有变化过。这种模式,我自己在用的时候效率不高,筛选要看的文章需要大幅度的滑动屏幕,右上角的翻篇操作又离得有点远。而且从视觉感官层面上也不能满足用户日益增进的审美标准。
针对自己平台阅读器的一些不足和问题,开始了网易云阅读web阅读器的设计和开发。
图1
图2
二 竞品分析
以下是一些收集的web端资讯阅读器,包括Digg, Pulse, Taptu, 鲜果, Aolreader, Feedly等等。
http://digg.com/reader
这个是digg的资讯阅读器,它的结构基本上就是延续了谷歌阅读的模式,没有太大的创新.内容上,digg以阅读自主订阅内容为主。
http://www.pulse.me/fb_100003743726724/design/designboom-3kdgz
pulse的web阅读器,也是左右两栏,但是右栏的卡片模式过于混乱。
https://www.taptu.com/stream/feed/60345/827526411
taptu的阅读器为三栏模式,中间是文章列表,但是它中间的文章列表没有缩略图,文章加载数量还有限。
http://xianguo.com/lianbo
鲜果阅读的模式和谷歌阅读模式类似,但是鲜果阅读分“鲜果阅读器”和“我的订阅”将rss订阅和官方内容订阅分开来了,没有整合在一起。
www.flipboard.com
flipboard模式比较新颖,版式非常美观,有杂志阅读的效果。Flipboard以阅读其官方内容为主,自主订阅内容比较少
http://Reader.aol.com
有 aol的资讯阅读器功能比较强大,其中的卡片阅读模式对于图片类文章阅读比较高效直观。
www.feedly.com
feedly是现在国外使用人群比较多的一个web资讯阅读器,不管是功能上还是视觉上都比较好.结构上,feedly也是用比较常见的左右两栏模式,右边的文章区域有多种浏览模式,包括列表、杂志、卡片式、全文式,表现比较全面。Icon和界面布局上都比较简单清晰。同时一些小细节也很有意思,比如文章未读数hover状态有标记全部已读的操作,鼠标hover状态下出现的一些操作、页面滚动时顶部导航的变化等等。
Feedly有个问题就是在国内上,经常无法加载内容,感觉被墙了。
竞品分析小结:现在主流的web阅读器都不同程度受到谷歌阅读器的影响,结构基本都是左右两栏模式,左边大多都是源列表,右边的文章页面表现各不一样,有比较传统的全文模式比如digg,有比较新颖的杂志阅读模式,如FLIPBOARD,有表现全面的多模式阅读,比如AOLREADER和FEEDLY。
这些阅读器中比较多见的有全文模式、卡片模式、列表模式、三栏模式、杂志模式等等。全文模式的特点是阅读时不需要任何多余的操作,只需要鼠标滚轴不停地上下滚动;卡片模式的特点是可以有效地从很多文章中选择性阅读,但是比较适合图片资讯的筛选阅读,如果全部是文字就会显得比较压抑和拥挤;列表模式是将所有文章标题从上至下排列,点击标题阅读文章,但是这种模式的标题宽度一般都很大,完全超出了理想的阅读范围,对于文章的筛选其实效率比较低;三栏模式是包括左侧源列表栏、中间的文章列表栏和右侧的文章详情页面,这种模式是介于卡片模式和全文模式中间的一种方式,对于图片为主的资讯和文字为主的资讯有比较好的兼容;杂志模式是类似Flipboard的阅读方式,这种方式的阅读感官体验非常好,但是扩展性不是非常强,如果图片质量不能保证则比较影响性能,同时不太适配低版本浏览器(网易云阅读的用户中低版本、第像素的用户还是比较多的)
个人使用这些Web端资讯阅读器,总结最重要的几点为:1,整体架构是否清晰易懂、易操作、易于文章阅读;2,基本功能完整,比如资讯源分组、文章收藏、分享等等;3,视觉简洁大方;4,内容抓取完整、及时等等。
三 定位
基于以上的分析,网易云阅读的定位应该是如下这样的:
1,阅读结构方面,网易云阅读是一个比较综合性的阅读平台,涵盖面比较广,不仅包括图文资讯,更有视频、自媒体、rss阅读等等。所以他的展现形式上应该是比较丰富的,包含以下三种阅读模式,以至于迎合阅读各种内容的用户。1,阅读rss为主的用户会比较习惯于google reader这种全文模式;2,阅读图片内容为主的用户更适合卡片式大图的模式;3,阅读新闻类,以文字为主的用户可以使用三栏的模式。
三栏模式
全文模式
卡片模式
2,视觉方面,是简洁大气的。拥有清晰的版面,合理的字体大小、文字行宽、间距、文字颜色等等,同时各种精心设计的icon。
3,功能方面,结合社交功能,让产品更加有活力。社交功能包括网易云阅读的“阅读圈”和易信的“朋友圈”。可以将文章分享到这些平台,然后和朋友互动。
四、设计(草图、交互稿、视觉稿)
草图:
简单绘制的几张草图...
交互稿:
整体效果交互稿
细节交互稿
视觉稿
最后上线的产品可以登录 yuedu.163.com 查看。但是现在线上可以看到的版本只有一个三栏模式(这里有个小插曲,只有一种三栏模式的原因是因为首先定位阶段分析不是很全面,再者版本设计开发周期比较短,以至于只选择了浏览时效率比较高的三栏模式。现在回过头来想想网易云阅读是一个涵盖内容非常大的产品,它的展现形式应该更多样化来满足不同的用户需求,需要三栏、全文、卡片等多种方式。)
五 未来发展
整体做下来还有很多未完善的东西,比如1,资讯源更新文章数显示方式;2,文章操作栏位置;3,分组功能;4,全文模式和卡片模式等等。
在后面的版本迭代中以上的问题都是要逐步完善的,让网易云阅读以相对完整而全面的方式面对用户。同时仍有一些值得研究的东西,比如深入研究三栏、全文、卡片三种模式的用户体验差异;研究用户真正使用产品的效果,寻找有哪些缺陷,有哪些地方需要完善;还有一个比较新颖的命题”Responsive Typography",响应式字体排版,研究在web端、pad端、手机端不同的字体排版设计。