新浪新闻与手机新浪网的交互设计区别

首先看看Web App和Native App的区别:

Web App,指采用Html5语言写出的App,不需要下载安装。类似于现在所说的轻应用。生存在浏览器中的应用,基本上可以说是触屏版的网页应用。

Native APP 指的是原生程序,一般依托于操作系统,有很强的交互,是一个完整的App,可拓展性强。需要用户下载安装使用。


从使用场景上,Web App用户面临比原生APP用户更严峻的问题:

1.Web APP对网络环境的依赖性较大,页面跳转更加费力,不稳定感更强。

2.受限于浏览器,不同的浏览器自身的属性不尽相同,如:浏览器自带的手势,页面切换方式,链接跳转方式,版本兼容问题等等。更小的页面空间(由于浏览器的导航本身占用一部分屏幕空间),更大的信息记忆负担。

3.H5技术自身渲染性能较弱:对复杂的图形样式,多样的动效,自定义字体等的支持性不强。交互动态效果受到限制,影响一些页面场景、逻辑的理解。

从信息架构来分析两者差异:


Native App信息架构



Web App信息架构


从上图两者对比后可以看出:

Web APP去除了冗余的功能,如自定义频道、10条最热门新闻,设置字号大小等等,符合H5精简功能,突出了最核心功能:浏览新闻。

导航设计的差异:


Native App主导航与局部导航


Web App主导航与局部导航

以上对比可发现:

1.放弃了选项卡菜单式主导航,手机新浪网将最重要的各个新闻频道选项卡排列在顶部最显眼的位置作为导航,突出了最核心功能:看新闻。首页设置、更详细的频道分类与其余优先级低的分类统统收入侧边抽屉中。

2.新浪新闻首页的频道切换支持左右滑动,而UC浏览器和百度浏览器自身支持手势切换页面,手指从左侧滑动页面,返回至上一级。如果手机新浪网沿用左右滑动方式,将与某些浏览器自身手势发生冲突。因此可以看到其切换频道只有通过点击这一种方式。

3.手机新浪网的快捷导航中包括

①页面下拉太多时返回首页的快捷方式

②出现深层架构时返回重要层级页面的快捷方式

③个人中心、无图模式等常用功能的快捷入口

新闻正文页的差异:


Native App正文页


Web App正文页

以上对比可发现:

1.手机新浪网在正文页提供了返回页面顶部和主页的快捷键。

2.手机新浪网的页面顶部显示面包屑导航,同时提供底部导航。目的是为用户确定位置,增强方向感,以免迷失在一堆页面中。

3.①新浪新闻App的正文页可通过右上角按钮调节字号大小,评论、收藏、分享按钮固定在页面底部;手机新浪网则去掉了字号调节功能和“热点关注”标签,弱化了收藏功能。

   ②新浪新闻App正文结束后的推荐新闻和热门评论均为默认显示5条,而手机新浪网的热门评论仅显示3条,且不显示发帖人位置与其他属性。推荐新闻的位置在广告区域的下方,优先级低。

   分析原因:使用手机新浪网的用户目标是快速浏览+阅读新闻,对“快速”的要求高于新浪新闻客户端的用户,且由于Web App本身的种种限制,难以做到沉浸式体验。因此设计时不是一股脑地将信息展现给用户,而是提供给他们真正需要的信息。

总结

Web App具有开发成本低、更新快、不需要手动升级、跨平台等优点,缺点为设计受很多限制且体验较差等。设计Web App应当充分考虑种种因素,删繁就简,力图为用户创造更好的体验。

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,397评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • 多年以后,面对着这样的一行文字: 郭靖与黄蓉向大汗遗体行过礼后,辞别拖累,即日南归...... 我就会追忆起当年那...
    龙潭独步阅读 445评论 2 1
  • 同心而离居,忧伤以终老。
    卿卿初尘阅读 1,341评论 0 1
  • 今天奶奶回老家还没有回来,婶婶带我去妈妈的市场了,我们是8点多去的,妈妈的店里面好多人啊,妈妈都没顾得管我们,我就...
    段智耀阅读 190评论 0 0