最佳 PWA 设计的主要 UI 考虑因素

如果您还没有听说过 PWA，那么您应该先深入了解这一点： “什么是 PWA？ 所有你需要知道的关于渐进式 Web 应用程序” 。 简而言之，它们是 Web 应用程序，旨在提供远远优于传统用户界面和体验的用户界面和体验。

在本文中，我们将提出设计 PWA 时最关心的 UI（用户界面）问题。 继续阅读以了解如何为渐进式 Web 应用程序提供最佳用户界面。

系统字体

如果您希望用户在使用渐进式 Web 应用 (PWA) 时感到舒适，则应稍微改进其样式以匹配他们的操作系统 (OS)。 在为每个平台实现不同的菜单和按钮之前，您可以从系统的首选字体开始，分别适用于 iOS、Android、Windows。

换句话说，让微软 (Segoe)、谷歌 (Roboto)、苹果 (旧金山) 甚至 Mozilla (Fira Sans) 的辛勤工作，通过提升用户体验，让您的工作更轻松。 因此，系统字体是您永远不应该离开列表的一项。

 /* iOS */
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

/* 安卓 */
字体系列：'RobotoRegular'，'Droid Sans'，无衬线；

/* 视窗电话 */
font-family: 'Segoe UI', Segoe, Tahoma, Geneva, sans-serif;

应用程序图标

确实，移动应用程序设计师特别关注图标设计。 而且由于您的 PWA（通过将其添加到主屏幕）将位于其他本机应用程序旁边，因此也应该考虑其图标设计。

这是有充分理由的。 第一印象总是极其重要的，一个应用程序的图标是它给用户的第一印象。 解释一下，用户可能会犹豫在手机上的本地应用程序图标中点击具有不同外观的图标。

为了让你的 PWA 图标与设备中的其他应用程序融为一体，它必须灵活地适应不同的平台——例如 Android、iOS 和 Windows——并适应风格元素（它的形状、有/没有背景的外观或不同的颜色等）。 做到这一点的一个好方法是让 PWA 的图标设计匹配——或者至少接近——原生应用程序图标的视觉标准。 灵感来源之一是 Google 的 Material Design 指南 Google 的 Material Icons。

 推荐阅读：PWA vs Native App：哪个更适合你？

触摸交互

触摸交互应该很好地实现，或者根本不实现。

尽管这并非真的不可能，但很难融入高级触摸交互，例如“滑动关闭”或“拉动刷新”。 虽然您认为这样的交互会让用户赞叹不已，但只有当它们按预期工作时才会出现这种情况。 如果没有，那么你就有麻烦了。

如果您的 PWA 需要高级触摸交互，请确保它们在真实设备上运行良好。 通常，这意味着您已经找到了由其他人努力开发的此功能的实现，例如出色的 react-swappable-views。

同时，您可以通过修改设计完全避免这个问题，这样它就不会建议高级触摸交互，例如，您可以使用底部导航选项卡代替选项卡。

可分享的内容

在 Progressive Web Apps 的情况下，当前的 URL 通常不容易访问； 因此，您必须确保用户能够轻松地分享他们正在查看的内容。 可以集成一个共享按钮，该按钮允许用户将 URL 复制到剪贴板，以便可以在著名的社交网站上共享它。

针对这种情况的一个小提示：如果您正在实施社交分享按钮，请务必将第 3 方 JavaScript 的加载延迟到页面中的主要内容加载之后。

触控反馈

首先，可点击区域应该提供触摸反馈。 当点击按钮或可点击区域时，用户不应该怀疑点击是否被识别。

旨在立即明确水龙头已被识别。 例如，这可以通过以（浅）灰色突出显示点击区域、显示材料波纹或立即开始页面转换来完成。

触摸反馈做得很好的例子：

Google I/O 2016 网络应用程序在点击谈话时会立即提供灰色突出显示，并且禁用默认的蓝色点击颜色（默认情况下，某些浏览器会在点击元素时显示自己的突出显示。这种默认样式没有吸引力并且可能与您的品牌视觉质量）。

其次，滚动时触摸元素不应触发触摸反馈。

每当您实现触摸反馈时，重要的是不要在用户仅触摸元素以滚动页面时错误地触发它。

在错误时间给出的触摸反馈示例：

流行的 Material-UI 库的早期版本在滚动期间触摸可触摸元素时会触发涟漪。

如果用户的触摸位置在前几百毫秒内沿任何方向移动超过 6 个像素，则通过中止波纹动画来解决此问题。

保留上一个列表页面的滚动位置

从详细信息页面按回应该保留上一个列表页面上的滚动位置

当用户从详细信息返回时，页面必须保留上一个列表页面上的滚动位置。 当用户从列表中选择项目并查看其详细信息时，点击返回不能将它们带到列表顶部。 主要目的是当用户点击时，他/她应该被带回列表页面，“滚动位置与他们在按下项目之前相同”。

毕竟，当按下返回时，浏览产品、文章或其他项目的列表会变得很困难，这会将用户再次带到列表的顶部。

显然，当您让用户更难导航时，他们往往不会再回来。

避免过度“类似网络”的设计

“经典”网页设计在很大程度上依赖于文本中的链接，以及每个页面上可用的静态元素，例如页眉和页脚。 事实上，这些设计元素在原生应用程序中很少见，因此为了匹配用户的心智模型，建议避免使用这些设计元素，而是使用更多类似应用程序的设计。

例如，应谨慎使用链接。 您应该小心放置按钮或可点击区域。

此外，应避免使用包含导航链接和版权信息的静态页脚。 从原生应用程序设计中汲取灵感，了解如何将类似信息移至菜单中，或以其他方式不包含在每个页面中。

深色主题

黑暗主题将继续存在，它们只会变得更好。

根据 Android 开发者的说法，深色主题有很多好处： 可以显着降低功耗（取决于设备的屏幕技术）。 提高低视力用户和对强光敏感的用户的能见度。 使任何人都可以更轻松地在光线不足的环境中使用设备。

那些能够在深色 UI 的可访问性和耀眼色彩的情感反应之间找到平衡点的人将在明年名列前茅。 Google Material 提供的指南可以为您提供帮助。

综上所述

渐进式 Web 应用程序是当下的需要，因为它们允许开发人员在手机上为用户提供直观的 Web 体验。 通过简单地实施这些建议，您可以在用户使用您的 PWA 时轻松地为他们提供类似于应用程序的出色界面和体验。

SimiCart 在这里回答您每个与 PWA 相关的问题和需求。 特别是对于为您的电子商务网店寻找全方位完美Magento PWA解决方案的在线商家，我们为您和您的商店提供完整且具有成本效益的解决方案。