网易云阅读网页端资讯阅读器设计总结

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

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,569评论 25 707
  • 2017/8/3 1.我怎么如此的幸运呢,刚刚调取出来的热乎数据,我做新心女儿的是一万区,今天自家麻麻,发来微信消...
    扶摇万事屋阅读 229评论 0 1
  • 苏东坡生于巴蜀,眉山镇。眉山不大,但街道整洁,五六月间荷花盛放,最为有名。 宋仁宗景祐三年,十二月十九日,苏东坡出...
    鱼服阅读 1,581评论 2 13
  • 无论工作上的我们有多不开心,不得承认,工作是一个人的底气,离职是需要勇气的?而随着年龄的增长,我们越来越缺乏的就是...
    miranda刘阅读 233评论 0 0
  • 前几天临时替了节肚皮舞课程,好几年没上,急匆匆拾了起来。 早年前,就听说肚皮舞是上天赐给女人的礼物,看...
    白瑪_ceaf阅读 174评论 0 0