离线应用程序的8个有效设计技巧

With the seeming massive adoption of web applications, design systems to support this adoption get better. While the internet is abound in certain areas, connectivity could be limited or non-existent in other areas or cases, this notion has influenced the design of applications on both web and mobile platforms. Poor connectivity influenced the development and speedy adoption of progressive web applications.

随着Web应用程序的大规模采用，支持这种应用程序的设计系统变得越来越好。 尽管互联网在某些领域比比皆是，但在其他领域或案例中，连接性可能受到限制或不存在，这一概念影响了Web和移动平台上应用程序的设计。 连接性差影响了渐进式Web应用程序的开发和快速采用。

Progressive web apps are applications which look and function like mobile applications. Caching techniques, service workers, manifest files and design are certain elements considered when designing for offline applications.

渐进式Web应用程序是外观和功能类似于移动应用程序的应用程序。 缓存技术，服务人员，清单文件和设计是为脱机应用程序设计时要考虑的某些要素。

In this post, we shall be discussing 8 tips for effective design of applications required to function offline.

在本文中，我们将讨论8个技巧，以有效设计脱机运行所需的应用程序。

应用状态 ( Application States )

All digital products (for the most of today) function in two main states, the offline state and the online state.

所有数字产品（今天的大部分时间）都处于两个主要状态，即脱机状态和联机状态。

In the online state, an application is basically connected to the internet and have access to resources available on the internet including real-time information and remote communication. Also, third party services and APIs also have access to the internet. This is the state in which most applications function.

在在线状态下，应用程序基本上连接到Internet，并且可以访问Internet上的可用资源，包括实时信息和远程通信。 此外，第三方服务和API也可以访问互联网。 这是大多数应用程序运行的状态。

An alternate state is the offline state. In this state, the application is isolated from the internet and functions with resources stored locally or cached during prior connection to the internet. Another similar state considered during design is the state where there is poor or unstable connection.

备用状态是脱机状态。 在这种状态下，应用程序与Internet隔离，并具有在本地存储或在事先连接到Internet期间缓存的资源。 设计期间考虑的另一个类似状态是连接不良或不稳定的状态。

Offline doesn’t mean ‘no content’

离线并不意味着“没有内容”

As we try to build for the next billion users, diversity is a factor and we’re beginning to understand and accept that not all users can be online all the time as being online is subject to a lot of factors beyond our control. Offline doesn’t mean ‘no content’. Offline simply means no or poor connection to an internet network.

在我们努力为下一个十亿用户建立服务时，多样性是一个因素，并且我们开始理解并接受并非所有用户都能一直在线，因为在线会受到许多我们无法控制的因素的影响。 离线并不意味着“没有内容”。 离线仅表示没有互联网连接或互联网连接不良。

We live in a disconnected & battery powered world, but our technology and best practices are a leftover from the always connected & steadily powered past. — OfflineFirst

我们生活在一个不连贯且由电池供电的世界中，但是我们的技术和最佳实践是始终连接且稳定供电的过去的遗留物。 — OfflineFirst

为什么我们要先离线设计？ ( Why do we design offline first? )

When it comes to creating digital products, accessibility to users at all times is a major driving factor. Accessibility enabled the adoption of mobile-first design style and with smartphones abound, products have to be built to suit the infrastructure provided by smartphones.

在创建数字产品时，始终保持对用户的可访问性是主要的驱动因素。 可访问性使人们能够采用移动优先的设计风格，并且随着智能手机的普及，必须构建适合智能手机提供的基础设施的产品。

Accessibility drove the development of progressive web applications which function and look like mobile applications. Several web technologies exist which enable the development of cross-platform applications that function on the web, and mobile. An example is the Ionic framework for JavaScript.

可访问性推动了渐进式Web应用程序的开发，这些应用程序的功能和外观类似于移动应用程序。 存在几种网络技术，这些技术使得能够开发可在网络和移动设备上运行的跨平台应用程序。 一个示例是用于JavaScript的Ionic框架。

As a product or business owner in recent times, you don’t want to lose a potential customer, partner or client because your application works on only a single platform. The same way you don’t want to ruin the experience for users that have poor internet or are in transit and the internet is poor or totally absent. Poor internet connectivity doesn’t necessarily translate to missed notifications on Twitter.

作为产品或企业所有者，您不希望失去潜在的客户，合作伙伴或客户，因为您的应用程序只能在单个平台上运行。 同样，您也不想破坏互联网质量较差或正在传输，互联网质量较差或完全不存在的用户的使用体验。 互联网连接不良并不一定会导致Twitter上缺少通知。

Adopting the offline-first and mobile-first approach when building products go a long way to make sure your product is readily available for most users regardless of device type and internet connectivity.

在构建产品时采用离线优先和移动优先的方法很长，以确保无论设备类型和Internet连接如何，大多数用户都可以轻松使用您的产品。

Offline applications save data. As basic as it sounds, online applications require constant server interaction which directly translates to hosting charges. Reducing the bandwidth usage of an application reduces the hosting charges. This is achieved by efficient UX design and implementation of several offline strategies.

脱机应用程序保存数据。 听起来很基本，在线应用程序需要持续的服务器交互，这直接转化为托管费用。 减少应用程序的带宽使用量可以减少托管费用。 这是通过有效的UX设计和几种离线策略的实现来实现的。

最佳做法和如何首先适应离线 ( Best Practices & How to adapt to Offline first )

Several techniques and best practices are employed while designing offline applications, we shall discuss these below.

在设计脱机应用程序时采用了几种技术和最佳实践，我们将在下面讨论这些技术和最佳实践。

创建意识 (Create Awareness)

It helps a great deal if you can communicate to the users that they are currently in an offline state. This helps them understand why the product is taking time to display data and clears any thoughts of a faulty product.

如果您可以向用户传达当前他们处于脱机状态的信息，则该功能非常有用。 这可以帮助他们了解为什么产品要花一些时间来显示数据并清除有关产品故障的想法。

Good examples of products that do a good job of showing your Offline status is the YouTube & ProductHunt iOS App as seen in the image below;

YouTube和ProductHunt iOS应用程序很好地展示了您的离线状态，这些都是很好的产品示例，如下图所示；

使用通用图标 (Use universal icons)

When designing for offline it is great to use universal icons. Icons are a visual representation of an object or action.

在离线设计时，最好使用通用图标。 图标是对象或动作的视觉表示。

Universal icons are icons that are easily recognizable because they have become the industrial standard over time for example the home icon, search icon & location icon. Universal icons go a long way to make sure users have a great experience using your app.

通用图标是易于识别的图标，因为随着时间的推移它们已成为工业标准，例如主页图标，搜索图标和位置图标。 通用图标可以确保用户在使用您的应用程序方面拥有出色的体验，可以走很长一段路。

Also, try to label the icons as it goes the extra step to strip away any ambiguity that might arise. Remember the user is offline which means you can’t offer them support at that particular time. Best equip them as much as you can.

另外，尝试在图标上加上标签，以消除可能出现的任何歧义。 请记住，用户处于离线状态，这意味着您无法在特定时间为其提供支持。 尽可能多地装备它们。

引起用户的注意 (Hold the User’s attention)

Sometimes, internet may be temporarily down. You want your users to wait more than they are used to while your product fetches the required data. How you handle this phase is very important.

有时，互联网可能会暂时关闭。 您希望用户在产品获取所需数据时比以往更多的等待。 您如何处理此阶段非常重要。

Google Chrome uses the popular T-Rex dinosaur to keep you on the browser while hoping your internet is restored. You jump over cacti and other hurdles that come along using only Spacebar — very simple and convenient for even non-gamers.

Google Chrome使用流行的T-Rex恐龙让您一直在浏览器中，同时希望您的互联网能够恢复。 您仅使用空格键就可以跳过仙人掌和其他障碍，即使非游戏玩家也非常简单方便。

Slack, LinkedIn & YouTube use a skeleton layout loading animation as this usually gives a more optimistic feel than the regular circular & boring loading animation.

Slack，LinkedIn和YouTube使用骨骼布局加载动画，因为与常规的圆形和无聊加载动画相比，这通常会带来更乐观的感觉。

创建“离线保存”选项 (Create the ‘Save for offline’ option)

In a situation whereby your app uses a bunch of data that doesn’t necessarily change, giving users the option to download this data to the local storage on their device is a great way to improve their experience with today’s technology.

在您的应用程序使用一堆不必更改的数据的情况下，为用户提供将这些数据下载到其设备上的本地存储的选项，是改善其使用当今技术的体验的好方法。

Both Netflix and Google Maps allow you download for offline consumption. Now imagine you’re in transit and in an internet-dead zone — You can still watch movies in the bus & Google Map your way back home!

Netflix和Google Maps均允许您下载以供离线使用。 现在，假设您正在途中并处于互联网死亡区域–您仍然可以在回家的路上乘坐公共汽车和Google Map观看电影！

创建“以后保存”选项 (Create the ‘Save for later’ option)

Scenarios occur whereby your product users absolutely need an internet connection. Maybe it’s to complete a doctor’s appointment or checkout after shopping on your e-commerce store. A good way to handle this is to allow the user perform all the tasks that do not need an internet connection while the rest occurs once connection has been established.

发生方案的情况下，您的产品用户绝对需要Internet连接。 在电子商务商店购物后，可能要完成医生的预约或结帐。 处理此问题的一种好方法是允许用户执行不需要Internet连接的所有任务，而其余的一旦建立连接即发生。

Instagram & WhatsApp typically allow you upload images & send messages respectively while offline and they auto send once the device is connected to the internet again.

Instagram和WhatsApp通常允许您在脱机时分别上传图像和发送消息，一旦设备再次连接到互联网，它们就会自动发送。

启用后台刷新或缓存 (Enable Background Refresh or Cache)

For Apps that have data that are time-sensitive; a news app or your social media app for instance, the background refresh idea is usually a good option in a situation whereby the internet connection is poor. This allows the App auto-update latest information before you need it & it saves that extra time and frustration of a spotty internet.

对于具有时间敏感数据的应用； 例如新闻应用程序或您的社交媒体应用程序，在互联网连接较差的情况下，背景刷新提示通常是一个不错的选择。 这样一来，该应用程序可以在您需要之前自动更新最新信息，从而节省了额外的时间，也使您的互联网混乱不堪。

Caching is also a good idea especially when your app doesn’t require much data. Browser caching allows assets on your website to be downloaded to the viewer’s local storage temporarily which allows subsequent page loads to be faster as these assets don’t rely on the internet connection anymore.

缓存也是一个好主意，尤其是当您的应用不需要大量数据时。 浏览器缓存允许将您网站上的资产临时下载到查看器的本地存储，这使得后续页面加载更快，因为这些资产不再依赖Internet连接。

定制内容 (Customize content)

Another way to help your users offline is to customize their content for them. In a situation whereby the user’s internet is poor, you can serve them a lite version of your product & even go as far as disabling images (especially if they are not optimized).

帮助您的用户脱机的另一种方法是为他们自定义他们的内容。 如果用户的互联网状况不佳，您可以为他们提供精简版的产品，甚至可以停用图片（尤其是如果图片没有经过优化）。

Google Mail does this exceptionally well as it recognizes when your internet is poor and offers you a stripped-down basic version of Gmail to get your stuff done.

Google Mail能够出色地做到这一点，因为它可以识别出互联网状况何时不佳，并为您提供精简的Gmail基本版本，以完成您的工作。

优化资产 (Optimize assets)

Optimizing images & icons for poor connections is a good practice. Images can disrupt accessibility to your website if they are not properly optimized. Don’t use a larger image or higher resolution size than needed.

为连接不良而优化图像和图标是一个好习惯。 如果图像未适当优化，则可能会破坏对您网站的可访问性。 请勿使用比所需更大的图像或更高的分辨率。

Bigger files mean it takes longer for the server to generate that page, and longer for the user to render the page. Avoid TIFF and BMP image files, as they aren’t optimized for web pages. Formats such as Webp, JPEG or PNG files are advised.

文件越大，表示服务器生成该页面所花费的时间就越长，而用户呈现该页面所花费的时间就越长。 避免使用TIFF和BMP图像文件，因为它们不是针对网页优化的。 建议使用Webp，JPEG或PNG文件等格式。

结论 ( Conclusion )

And that brings us to the end of the 8 Effective Design Tips for Offline Applications. I hope you learnt a couple of new things and enjoyed yourself in the process. Did I miss anything or you have a couple of questions to ask? Let me know in the comments section right below. Cheers!

至此，我们结束了针对离线应用程序的8个有效设计技巧。 希望您学到了一些新知识，并在此过程中感到愉快。 我有什么想念的吗？或者您有几个问题要问？ 在下面的评论部分中告诉我。 干杯!

翻译自: https://scotch.io/tutorials/8-effective-design-tips-for-offline-applications