网易云阅读页面html代码,网易云阅读网页端资讯阅读器设计总结

一网易云阅读web资讯阅读器V1版本情况以及问题

如下截图是网易云阅读web阅读器V1版本(图1)，结构上和谷歌阅读(图2)类似，左右两栏模式，左边为订阅源列表，右边是文章列表。网易云阅读右侧的文章列表是默认收起状态，每篇文章都是点击“查看全文”再进行阅读.

谷歌阅读的左右两栏模式自从它诞生开始就基本没有变化过。这种模式，我自己在用的时候效率不高，筛选要看的文章需要大幅度的滑动屏幕，右上角的翻篇操作又离得有点远。而且从视觉感官层面上也不能满足用户日益增进的审美标准。

针对自己平台阅读器的一些不足和问题，开始了网易云阅读web阅读器的设计和开发。

图1

图2

二 竞品分析

以下是一些收集的web端资讯阅读器，包括Digg, Pulse, Taptu, 鲜果， Aolreader, Feedly等等。

这个是digg的资讯阅读器，它的结构基本上就是延续了谷歌阅读的模式，没有太大的创新.内容上，digg以阅读自主订阅内容为主。

pulse的web阅读器，也是左右两栏，但是右栏的卡片模式过于混乱。

taptu的阅读器为三栏模式，中间是文章列表，但是它中间的文章列表没有缩略图，文章加载数量还有限。

鲜果阅读的模式和谷歌阅读模式类似,但是鲜果阅读分“鲜果阅读器”和“我的订阅”将rss订阅和官方内容订阅分开来了，没有整合在一起。

flipboard模式比较新颖，版式非常美观，有杂志阅读的效果。Flipboard以阅读其官方内容为主，自主订阅内容比较少

有 aol的资讯阅读器功能比较强大，其中的卡片阅读模式对于图片类文章阅读比较高效直观。

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端、手机端不同的字体排版设计。