您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

PWAs是什么?UI设计师也是要了解一下的

原创文章 分类: 行业资讯 版权: 原作者: Suzanne Scacca
988 4 7 0
2019-01-15
4.9
编辑推荐




词条解释:

PWAs(渐进式网络应用程序):全称Progressive Web Apps。

国内通俗叫法是“强化版”小程序,但其实它是在浏览器里面用的,跟微信小程序是两个东西。


PWA的优势:

1.离线可用 - 在没有网络环境下,也能加载并呈现内容

2.快 - 快速响应,因此动画流畅

3.占内存小 - 允许用户将网页以图标的形式发送到桌面上

Image title

   我今天上smashingmagazine逛的时候看到了一篇文章《Will PWAs Replace Native Mobile Apps?》我火速把内容过一下,(翻译途中估计难免会有一丢丢个人的主观理解)


文章链接:https://www.smashingmagazine.com/2018/12/pwa-native-mobile-apps/

当我们提及移动端用户体验的时候,是不是总是说消极的内容?你已经听了太多关于本地app的好处了,但如果用户不接受,那将是一场代价高昂的赌博。那么,听起来似乎更先进的Web应用程序(PWAs)是最好的选择吗?PWAS会不会最终取代移动网页和本地app?


我的一个开发者朋友Aaron Gustafsone决定为他的新公司创建PWAs的时候.我问他为什么要选择PWAs而不是大家都用的原生app,他说:“因为PWA将会成为网页的主流”


初次讨论原生app和PWAs孰优孰劣的时候,我和Aaron Gustafsone有着一致的观点:这真的只是选择,而不存在某者优于某者。


“决定选择 PWA还是原生app应该基于特定项目的需求,而不是光想着如何炒作从而达到宣传效果.”—Aaron Gustafsone


随后我听到大量的人们宣称他们支持PWAs而不是原生app.甚至还有很多部分人说PWA将会完全替代app(而app最终会消亡。)

好奇之下我想一探究竟。


现在我认为:是的,但并不是对于每个人来说都会这样。”



原因如下:


PWA将用户喜爱的所有内容应用于本机应用程序 - 应用程序外壳,离线访问,电话功能,始终存在的导航栏等等 - 并为用户提供更方便的体验方式。


·App store里面的app已经泛滥成灾了。


数据研究表明,在所有APP中,70%到80%的时间都是在分享以下四种类型的app:

1.娱乐 (如youtube)

2.社交媒体(如facebook)

3.即时通讯 (如whatsapp)

4.游戏 (如fortnite)


ps解读—对于这五种类型的用户来说,存在于app stores高频的搜索分类,将更容易被发现,如果不是这些类型的,让新用户无意中看得到你的应用是不容易的。


·应用商店里的应用排名取决于下载次数。

 PWAS的搜索排名取决于你投入的SEO工作。因此对于新品牌来说,PWAs可能更有利。

 

·PWA可以存在于用户浏览器中,也可以存在于从按钮到屏幕,这些都可以成为链接让你轻松分享给你的朋友、同事。而不是告诉他们你要分享的APP的名字,然后期望他们乖乖听你的话跑去应用商店下载。


·电子商务企业将特别倾向于PWA,比如HobbyCraft。

 因为用户可以在PWAS里随时搜索他们在使用应用途中产生的任何相关问题。可以在同一页面给出即时回答。通过PWA,您可以将应用直接放置在搜索结果中,并为您的用户提供所需的即时答案。


·我认为前几年疯狂提倡的“移动先行”意思要抓好“体验”。归根到底意味着需要更快的加载速度和响应速度,意味着需要app shell. 而这,正是PWA 所提供给我们的。


ps补充:

这里所说的Mobile First(移动先行),“为移动设备先行”,即产品设计和开发要优先为移动设备考虑。

引申——

2016年,谷歌CEO Sundar Pichai宣布谷歌的一个重大转变——“谷歌将从Mobile First(移动先行)转变为AI First(人工智能先行)


app shell是什么?

App Shell 架构是构建 PWA 应用的一种方式,它通常提供了一个最基本的 Web App 框架,包括应用的头部、底部、菜单栏等结构。

下图为例子:


Image title




目前使用了PWAS的案例:


①根据Google数据显示,Infobae的PWA数据如下:

5%的跳出率;而以前作为普通手机网页时的跳出率为51%.

在PWA的网页下浏览时间比在手机移动端长 230%。


②XXX运营商显然有足够的资金去建立一个与他们网站相匹配的本地app应用.但是他们没有这样选择。而是通过PWA,让用户在不离开浏览器的情况下,更方便地在线上商店选购商品。

如果用户频繁需要浏览这个网页的话,他们也只需要把这个PWA直接添加到手机桌面上,(而且看起来跟普通APP并没什么两样—用户易于接受。)


③如果你打开app stores来看,你会发现 West Elm开发了两款本地app应用。一款是

为 registries注册用户开发的,这个的意义在于有助于标记和跟踪注册事项。

另一款应用是为 the West Elm card开发的。对于购物狂来说,这款应用也会有意义。

既然,两款应用在用户里面都不是很受欢迎(至少是从评论数量看出来),那么显然,the West Elm从app stores 里退出,转向PWA是一个明智而经济的决定。”


翻译完毕。

我也想来插个嘴。


                                    可不可以简单粗暴地告诉我PWAS是什么?


情景:假设你把淘宝的链接发给没有下载这个软件的大姑妈,这个时候姑妈在微信里收到提示说要复制链接到浏览器才能打开。姑妈在浏览器里打开是这个样子的。

上方会弹出提示框告诉你打开淘宝app才能收藏blabla,点击下载则会跳转到下载页面。


可能会发生的结果:

① 在没有WIFI的情况下可能并不想为了一个不常用到的App消耗流量

② 手机存储空间不足,可能有时候会在删除哪些应用、相册图片的问题上犹豫不决。   


Image title


有了PWAs,在支持PWAs的浏览器下打开链接,点击保存到桌面,就无须下载下次也能轻松打开了。




Demo1:(以安卓为例)

https://weatherpwa.baidu.com


A:正常有网情况下,在谷歌浏览器打开,呈现的页面效果

 

Image title

B:正常有网情况下 ,点击屏幕上新生成的“天气 APP图标”,打开页面显示效果


(PWAs意在打造沉浸式的用户体验,为了让用户停留地更久)

Image title

从桌面图标进去看到的页面中只显示内容区域 ,状态栏、导航栏、工具栏等消失了。



C:无网络的情况下,在QQ浏览器打开 https://weatherpwa.baidu.com/

 (qq浏览器不支持PWA,因此加载不出来)                    

Image title

             

D:无网络的情况下,在谷歌浏览器打开 https://weatherpwa.baidu.com/

(PWAs离线可加载基础数据)

Image title


IPHONE支持吗?


是的,18年初的时候支持了。

操作指南如下:

Image title


Demo2:(以苹果为例)


在iphone的safari里打开https://www.infobae.com/america/


1.点击“添加到主屏幕”


Image title

2.噔噔,变成伪app啦

Image title


iOS 里不像 Android里面那样会有邀请用户安装 PWA 的提示,所以你想要使用到 PWA 应用,可以先登录收集PWA 网址链接的网站上找一下,推荐一个:PWA Directory 。



PWAS的出现对于设计工作上来说可能意味着什么?


1.程序会自动升级不需要用户升级,意味着无须进行系统升级页面设计。

2.被打开时,PWA 展示一个有吸引力的闪屏将会成为趋势。

3.设计上考量app shell的使用,将动态内容与 Shell 分离。


欢迎吐槽欢迎纠正更新欢迎交流










扫描二维码
去手机端查看海报

cre

TA已经获得1枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN