温州网页设计：设计无浏览器的Web

用户不关心技术是本机技术，安装的Web应用程序还是网站。让用户参与并让购物者转换的原因实际上就是体验本身。在本文中，解释了我们如何为无浏览器Web浏览的新时代铺平道路。

温州网页设计，当我们将Web浏览器从Web浏览中移除时会发生什么？谷歌新推出的“添加到主屏幕”功能提供快速，专注的网络体验，与本机应用程序无法区分。设计师可以从早期采用者（如Twitter）的成功中学到什么，以及我们如何利用类似应用程序的设计模式来应对这一全新的用户体验挑战？

我们已经看到关于本机与网络体验主题的争论。两者都有它们的优点和缺点，但通常浏览器体验的最大缺点是它不像原生应用体验那样可靠，快速和身临其境。

在本文中，我们将介绍设计和开发渐进式Web应用程序（PWA）的提示和技巧，特别是在Android设备上添加到主屏幕的应用程序。但首先，让我们看一些例子并为PWA提供案例。

应用程序体验的崛起

简而言之，PWA的外观和感觉就像本机应用程序一样。谷歌产品副总裁Rahul Roy-Chowdhury在谷歌I / O开发者大会上的讲话中将其描述为“一种从根本上说更好的网络体验......用户喜欢并且更加投入。”

这些数据支持Rahul的说法。自推出 PWA 以来，福布斯的用户互动量增加了一倍。这些数字也继续显示电子商务领域的增长，兰蔻在推出新的PWA后转化率大幅上升。

用户不关心技术是本机技术，安装的Web应用程序还是网站。让用户参与并让购物者转换的是体验本身。

“

这些快速，流畅，类似应用程序的移动体验是用户想要的，并且随着越来越多的PWA出现在主流市场中，人们会期待这种体验。似乎加速这一浪潮的一个功能是“添加到主屏幕”，这基本上是一个PWA安装过程。对于最终用户，在主屏幕上添加PWA可以启动应用程序般的体验。

什么是“添加到主屏幕”，它值得吗？

“添加到主屏幕”是一项功能，可将PWA安装到Android的主屏幕，使PWA可以立即访问，而无需用户打开浏览器并键入URL或使用搜索引擎。（附注：尽管自最早的iPhone以来iOS OS上已经提供了类似的功能，但用户并没有提供太多来模拟应用程序的行为。因此，Safari的版本不是本文的一部分。）

正如Google的灯塔清单所反映的那样，具有此功能的PWA得分较高，因此搜索结果可能会更好。

以Twitter Lite，PWA为例。传统上，Twitter发现很难在移动网络上重新吸引数百万用户。自从向Twitter Lite PWA引入“添加到主屏幕”提示后，它就会看到每天有250,000个独立用户从主屏幕启动Web应用程序，平均每天四次。

零售业也看到了成功。用户将PWA添加到设备的主屏幕后，阿里巴巴的互动率提高了四倍，而Flipkart 通过主屏幕图标来到的购物者的转化率提高了70％。

虽然“添加到主屏幕”的用户群仅限于Android Chrome，但该功能可以为这位高度敬业的少数人提供身临其境的，更独特的体验 - 传统上由原生应用扮演的角色。

不是渐进式Web应用程序只是网站作为应用程序包装？

基本上，是的，为什么不呢？90％的移动会议记录用于应用，零售行业的转化率提高了120％。

这些统计数据将导致任何零售商走上本机应用程序开发的道路。然而，由于原生应用程序的平均成本约为270,000美元，“添加到主屏幕”提供了一个有吸引力的财务选择。

用户不关心技术是本机技术，安装的Web应用程序还是网站。让用户参与并让购物者转换的是体验本身：

• 它加载速度快吗？

• 它是否可以脱机工作？

• 导航是即时的吗？

• 它是否与设备无缝集成？

这些是类似app的设计的特征，如果“添加到主屏幕”是为了提供通常与本机应用程序相关联的高参与度统计数据，则必须将其包含在内。

什么使应用程序的体验？

“添加到主屏幕”创建了一个专注于相关应用的体验。该网站通过应用程序图标启动，没有浏览器的URL栏或任何导航工具栏，否则将提供到外部网站的链接。

这是一个很好的起点，但如果体验真的像应用程序一样，我们还必须认识到并满足本机应用程序用户的某些期望，包括：

• 即时页面转换;

• 感知性能高;

• 离线可访问性;

• 完整的设备集成;

• app风格的导航;

• 返回键;

• 分享行动;

• 复制URL，打印并继续。

准备潜水了吗？我们来看看每一个。

即时页面转换

用户希望能够快速进入应用程序内部和周围，而无需等待每次交互后加载新内容。

解决了PWA问题

对于PWA通过灯塔清单，它必须遵循某些性能增强指南。内容必须在幕后缓存，新页面必须加载得如此之快，以至于感觉没有加载事件。

感知性能

令人惊讶的是，移动延迟造成的压力水平与观看恐怖电影相当！下载应用程序的用户不希望等待其内容。他们也不愿意承受由于加载时异步出现的元素而导致的脱节经验。

解决了PWA问题

“添加到主屏幕”PWA启动转换（请参阅下面的Flipkart示例）提供了加载和加载内容之间的可视桥梁。这是“预加载状态”如何增强速度和无缝感的示例。精心设计的PWA将通过使用模仿页面结束状态的占位符（骨架）以及使用延迟加载来优先化视图之外的元素来构建此想法，从而使初始加载看起来更快。

脱机工作

下载本机应用程序的用户不希望必须依赖Internet连接才能使应用程序正常运行。

解决了PWA问题

服务工作者（一种改善离线体验的技术）可用于在低连接或无连接的区域中即时显示在线内容。页面内容在幕后缓存，允许在浏览体验滞后时访问，例如在火车上进入隧道时。

完整的设备集成

设备上的某些位置用户希望查找和管理他们的应用。

PWA解决方案

现在，添加到主屏幕的PWA会显示在您希望Android应用程序显示的任何位置。这包括应用程序启动器，任务切换器和系统设置。这还可确保链接到PWA上的页面的任何其他应用程序（例如Google搜索或社交媒体链接）将打开应用程序而不是浏览器。推送通知甚至看起来好像来自本机应用。

应用程序样式导航

应用程序共享一种通用的导航方法。标题栏通常显示中心当前部分的标题; 后退按钮位于左上角; 任何上下文行为（收藏，分享等）都位于右上方。

然而，没有PWA解决方案

这种模式在移动网络上并不常见。相反，这些操作可以在浏览器的内置功能中找到（例如，浏览器的后退按钮）。网络以这种方式工作是有原因的。应用程序通常每次都从同一屏幕开始，而移动网络用户通常从搜索或社交媒体中引用 - 任何页面都可以是其着陆页。出于这个原因，徽标和其他全局操作在标题栏中占据中心位置，并在整个体验中保持不变。

如果具有“添加到主屏幕”的PWA真的感觉像应用程序，则必须解决此期望。为此，设计人员必须弄清楚如何恢复现在因浏览器而丢失的关键导航模式。

返回键

有些人可能会争辩说，因为Android通过设备本身提供了一个后退按钮，所以不需要替换浏览器的后退功能。事实上，这两种互动做了不同的事情。大多数应用程序继续在标题中提供后退按钮作为“向上”操作，以在页面之间的层次关系内导航。系统的后退功能可能会关闭模态窗口或完全导航到其他应用程序。

解

一种可能的解决方案是在用户前进到初始页面后用后退按钮替换左上角的菜单按钮。当我们将这种模式放在用户面前时，这已得到验证。一旦参与者进入初始主页（并且菜单图标不再可见），我们要求他们导航到新的部分。六分之六的人直观地使用后退按钮导航到主页，他们可以在那里打开菜单。

分享行动

内置于任何Web浏览器的用户界面的功能是能够在社交媒体上以及通过设备上安装的其他应用程序共享页面。

解

设计人员应提供更多提示，以在页面内共享共享内容。我们在测试期间发现用户通常会在打开任何菜单之前在页面的头部或产品图像周围寻找共享按钮。如果未找到该功能，参与者希望在标题栏中找到共享图标。

“更多”图标是Android-esque模式，用于指示选项溢出。尝试在这样的菜单后添加共享操作。甚至可以使用Web Share API触发Android的本机共享对话框（在撰写本文时，它是仅限Chrome的功能，但仍未进行标准跟踪）。

复制URL，打印，前进

不太常见的操作，例如复制URL和打印，是浏览器的基本功能，不应该被忽视。

解

提供复制URL和打印功能的简便方法是使用Web Share API（在撰写本文时，再次仅在Google Chrome中支持）。或者，它们可以在溢出菜单中显示为单独的选项。然后可以扩展此菜单以包括前向操作或其他任何可以从标题栏中的持久位置（例如，登录和注销）中受益的内容。

如何让它在现实世界中发挥作用

“添加到主屏幕”需要一段时间才能发展为一组可接受的模式。以下是一些有助于此开发的最佳实践。

粘滞的标题，持久的行为

“添加到主屏幕”早期采用者Flipkart和AliExpress都认识到在引入新模式时可学习性的重要性。它们确保用户始终知道在哪里可以找到关键的全局操作（后退，购物车，搜索）：在标题栏中，它位于屏幕顶部。

智能提示

由于谷歌Chrome团队宣布它将让PWA完全控制何时提示用户，“添加到主屏幕”的安装量已经增加。Flipkart 在购买后提示用户时，参与度增加了三倍。

压力和测试

任何新模式的部分验证过程都是在多个应用程序中对其进行压力测试。我们发现这种模式很好地适应了最边缘的情况。兰蔻PWA的标题栏包含许多号召性用语。兰蔻认为溢出菜单是简化其用户界面的绝佳机会，同时为希望使用“添加到主屏幕”的高级用户提供独家优惠，例如链接到其忠诚度计划。

支持“添加到主屏幕”的位置？

Apple已经宣布它将支持服务工作者，但它也承诺使App Store成为本地应用程序开发者花费时间和金钱的有吸引力的地方。这可能是iOS'Safari浏览器采用PWA和无浏览器网页浏览速度缓慢的原因，尽管竞争对手取得了进步。

三星互联网浏览器在浏览器栏中开发了一个持久的“添加到主屏幕”提示，以便用户始终知道在哪里可以找到它。

Windows进一步采用“添加到主屏幕”。具有此功能的任何PWA现在都将作为可下载的应用程序列在Windows应用商店中。这些应用程序很轻，可以快速安装在桌面和平板电脑设备上，运行网站作为方便，无浏览器的体验。

结论

“添加到主屏幕”为高度敬业的转换用户提供身临其境的独家体验。虽然在用户群和支持该功能的设备上都采用了增长，但验证可以在早期成功案例中找到，例如Twitter Lite。这些故事展示了一个更现代，类似应用的网络如何在满足用户对性能和设计的期望时对参与产生积极影响。

通过将PWA性能增强与导航和类似应用程序的用户体验中的直观设计模式相结合，可以满足这些期望。有了这个，我们可以为无浏览器网页浏览的新时代铺平道路。

温州网页设计