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

首先看看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应当充分考虑种种因素,删繁就简,力图为用户创造更好的体验。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

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

友情链接更多精彩内容