微信号:grzlwx

介绍:光荣之路官方资讯

聊聊Web App、Hybrid App与Native App的设计差异(二)

2016-02-27 22:40 光荣之路

吴老的《selenium webdriver 实战宝典》出版了!

相关阅读:

聊聊Web App、Hybrid App与Native App的设计差异(一)

三、Web App受限制因素及设计要点

相比Native App,Web App体验中受限于以上5个因素:网络环境,渲染性能,平台特性,受限于浏览器,系统限制。

1. 网络环境,渲染性能

WebAPP对网络环境的依赖性较大,因为WebAPP中的H5页面,当用户使用时,去服务器请求显示页面。如果此时用户恰巧遇到网速慢,网络不稳定等其他环境时,用户请求页面的效率大打折扣,在用户使用中会出现不流畅,断断续续的不良感受。同时,H5技术自身渲染性能较弱:对复杂的图形样式,多样的动效,自定义字体等的支持性不强。

因此,基于网络环境和渲染性能的影响,在设计H5页面时,应注意以下几点:

  • 简化不重要的动画/动效

  • 简化复杂的图形文字样式

  • 减少页面渲染的频率和次数

从下图移动Web版jing.fm和Native版jing对比后可以看出:WebAPP首页去除冗余的功能,回溯本源,只给用户提供了jing.fm最初的本质需求——电台。既符合H5精简功能又达到了突出核心功能的设计原则。无疑给用户眼前一亮的气息。

正如书中《瞬间之美》的一个核心观点:重要的并不是我们提供的信息量有多大,而是我们能否给他们提供真正需要的信息。


再如:百度最新推出的直达号,以良子健身为例:

从Native App和Web App(百度直达号)的对比中,我们可以看出Native良子以九宫格的形式展现,且属于双重导航,功能入口太多;弊端是用户不知道聚焦在哪里,分散用户的注意力。而Web版良子整合并减少了导航的入口,增强用户的专注度;界面清爽,整洁,很好地传达了良子本身的寓意——轻松、愉悦、休闲、舒适。

2. 受限于浏览器

通常Web App生存于浏览器里,宿主是浏览器。不同的浏览器自身的属性不尽相同,如:浏览器自带的手势,页面切换方式,链接跳转方式,版本兼容问题等等。

例如下图:UC浏览器和百度浏览器自身支持手势切换页面。手指从左侧滑动页面,返回至上一级。百度手机助手H5页面,顶部Banner支持手势左右滑动切换。这一操作与浏览器自身手势是冲突的。

再如,基于浏览器的Web APP在打开新的模块中的页面时,大多会新开窗口来展现。例如用户在使用购物类APP时,浏览每日精选模块时,每当打开新的商品时,默认新开一个窗口。这样的优劣势显而易见:优势是能够记录用户浏览过的痕迹,浏览过的商品,以便后续横向对比;劣势是过多的页面容易使用户迷失在页面中。

正如Google开发手册里描述:当用户打开一个Web App的时候,他们期待这个应用就像是一个单个应用,而不是一系列网页的结合。然而,什么情况下需要跳转页面,什么情况下在当前页面展示则需要设计师细致考量。

因此,Web App基于浏览器的特性,从设计角度应该遵循以下了两点:

少用手势,避免与浏览器手势冲突。

减少页面跳转次数,尽量在当前页面显示。

<未完待续>

(作者:guowenwe 来源:mux.baidu)

公益传播测试知识、技能与正能量!感谢作者!
分享测试生活,思考测试人生!欢迎投稿!
文章图片来自网络,如有侵权请见谅,请联系我们妥善处理。
735821166@qq.com

光荣之路
软件测试培训


官网:www.gloryroad.cn

微信公众号:gloryroadtrain

性能测试QQ群:415987441
测试招聘QQ群: 203715128
自动化3群QQ: 371211499

Python群:457561756

 
光荣之路 更多文章 今天晚上的 linux 公开课- Awk 编程 7月28日(今天)晚上的 linux 公开课- shell编程 8月4日(今天)晚上的 linux 公开课- shell编程 9月1日(本周一)晚8点半,光荣之路Web自动化系列基础课—javascript第二讲 推荐本好书《与机器赛跑》
猜您喜欢 【原译】自文档化的JavaScript代码的开发方法 聊聊代码规范 大神Linus说要写代码到71岁,你呢? 机器学习算法 Python&R 速查表 Web前端优化最佳实践及工具集锦