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

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