5 个优化技巧助你提高移动 Web 应用的用户留存率

TODO1/5-optimization-tips-for-your-mobile-web-app-for-higher-user-retention.md

@@ -2,78 +2,78 @@
 > * 原文作者：[Axel Wittmann](https://medium.com/@axelcwittmann)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 本文永久链接：[https://github.com/xitu/gold-miner/blob/master/TODO1/5-optimization-tips-for-your-mobile-web-app-for-higher-user-retention.md](https://github.com/xitu/gold-miner/blob/master/TODO1/5-optimization-tips-for-your-mobile-web-app-for-higher-user-retention.md)
-> * 译者：
+> * 译者：[Roc](https://github.com/QinRoc)
 > * 校对者：
 
-# 5 optimization tips for your mobile web app for higher user retention
+# 5 个优化技巧助你提高移动 Web 应用的用户留存率
 
 ![Photo by [Jaelynn Castillo](https://unsplash.com/@jaelynnalexis?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)](https://cdn-images-1.medium.com/max/9310/0*Cj9Dw7l2u-wSTCqK)
 
-> Your mobile website can be more appealing to mobile users by going beyond css style optimization
+> 在 CSS 样式优化以外，再使用其他优化方式，你的移动网站对移动用户会更有吸引力。
 
-As of 2020, internet traffic is around half mobile and half desktop. Google looks to your mobile website version to determine at what position to rank your pages when it indexes. A significant share of young users don’t even use desktop devices at all anymore.
+在 2020 年的互联网流量中，移动端和桌面端各占半壁江山。Google 在索引页面时，会根据网站的移动版本来确定网站排名。相当多的年轻用户甚至不再使用桌面设备。
 
-These 3 facts show why optimizing your website for mobile usage is more important than ever. And even more importantly: Mobile users are way more picky and subconsciously irritated by UX issues on mobile devices than desktop users. If there are issues in how your website behaves on a mobile device, it’s highly likely your mobile user retention rate is suffering.
+上述三个事实说明了为什么现在针对移动端访问来优化网站比以往任何时候都重要。更重要的是：移动用户更挑剔，而且潜意识里更容易被移动设备上的 UX（用户体验）问题惹恼。如果你的网站在移动设备上的展示存在问题，那么很可能会影响到移动用户的留存率。
 
-Here are a few tips to optimize your mobile website beyond just using different CSS styles for devices below 600px width.
+除了为 600 px 宽度以下的设备使用不同的 CSS 样式外，这里还有一些技巧可以优化你的移动网站。
 
-## 1. Remove mobile ghost shadowing click effects
+## 1. 去除移动端的阴影点击效果
 
-Native apps don’t have them, mobile browsers do. When you click on any button or anything clickable such as an icon, users on browsers such as Safari or Chrome will see a shadow click effect.
+原生应用没有这些效果，移动浏览器却有。使用 Safari 或 Chrome 等浏览器的用户在点击任何按钮或任何可点击的对象（例如图标）时，会看到阴影点击效果。
 
-The `\<div>`, `\<button>` or other element that is clicked on will have a brief underlying shadow effect. This effect is supposed to give users feedback that something was clicked on and something should happen as a result. Which makes sense for a lot of interactions on websites.
+`\<div>`， `\<button>` 或其他元素在被点击时，在它的下面会出现一个短暂的阴影效果。这种效果会为用户提供这样的反馈：点击了某些东西后，某个事件应该发生。对于网站上的大量交互而言，这很有意义。
 
-But what if your website actually is responsive enough already and includes effects for loading data? Or you use Angular, React or Vue and a lot of the UX interaction is instantaneous? It is likely, that the shadow click effect gets in the way of your user experience.
+但是，如果你的网站已经做了充分的响应并包含了加载数据的效果呢？或者你使用了 Angular，React 或 Vue，并且很多 UX 交互是瞬时的呢？这些情况下，这种阴影点击效果可能会妨碍用户体验。
 
-You can use the following code in your style-sheet to get rid of this shadow click effect. Don’t worry, it won’t break anything else, even though you need to include it as a global style.
+你可以在样式表中使用以下代码来移除这种阴影点击效果。请放心，即使你将其添加到全局样式中，它也不会破坏其他任何内容。
 
 ```css
-* { 
-  /*prevents tabing highlight issue in mobile */
+* {
+  /*阻止移动端突出显示点击的问题*/
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     -moz-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 ```
 
-## 2. Use the user-agent to detect whether the user accesses from a mobile device
+## 2. 使用 user-agent 来检测用户是否来自移动设备
 
-I am not talking about abandoning style-sheet specific @media code for devices below 600px width. Quite on the contrary. You should always use your style-sheet to make your website mobile friendly.
+我不是说要在宽度小于 600 px 的设备上放弃样式表的特定的 @media 代码。恰恰相反。你应该经常使用样式表来让你的网页对移动端更友好。
 
-However, what if there is an additional effect that you want to show based on whether the user is on a mobile device? And you want to include it in your JavaScript functions — and you don’t want this to change if a user changes its smartphone direction (which increases the width beyond 600px).
+然而，当你想要根据用户是否在移动设备上来进行区分展示时，如果存在副作用呢？你想把这个放到你的 JavaScript 函数中，同时不想它随着用户横向使用手机（这会使宽度增加到超过 600 px）而改变。
 
-For these kind of situations, my advice is to use a globally accessible Helper-function that determines based on the user-agent of the browser if the user device is a mobile device or not.
+对于这些场景，我的建议是使用一个全局访问的辅助函数，基于浏览器的 user-agent 来确定用户的设备是否是一个移动设备。
 
 ```js
 $_HelperFunctions_deviceIsMobile: function() {
   if (/Mobi/i.test(navigator.userAgent)) {
      return true;
-  } else 
+  } else
      {return false;
-  }      
+  }
 }
 ```
 
 ![Photo by [Holger Link](https://unsplash.com/@photoholgic?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)](https://cdn-images-1.medium.com/max/6716/0*qYl5LnaPjGjQqXfp)
 
-## 3. Load mobile versions of larger images
+## 3. 加载较大图片的移动版本
 
-If you use large images and want to make sure that the loading time on mobile is still adequate for your mobile users, always load different versions of images.
+如果你使用大图片，并且想要确保移动用户仍然可接受图片的加载时间，那么应该总是加载图片的不同版本。
 
-You don’t even need JavaScript for it (well, you can also do it with JavaScript too…). For a css version of this strategy, look at the following code.
+这个功能不需要使用 JavaScript（当然你也可以用 JavaScript）。这种策略的 CSS 版本实现代码如下所示。
 
 ```html
-<!-- ===== LARGER VERSION OF FILE ========== -->
+<!—— ===== 文件的较大版本 ========== ——>
 <div class="generalcontainer nomobile">
     <div class="aboutus-picture" id="blend-in-cover" v-bind:style="{ 'background-image': 'url(' + image1 + ')' }"></div>
 </div>
 
-<!-- ===== MOBILE VERSION OF FILE ========== -->
+<!—— ===== 文件的移动版本 ========== ——>
 <div class="generalcontainer mobile-only">
     <div class="aboutus-picture" id="blend-in-cover" v-bind:style="{ 'background-image': 'url(' + image1-mobile + ')' }"></div>
 </div>
 ```
 
-And in your CSS file, define mobile-only and nomobile.
+在你的 CSS 文件中定义移动端专用和非移动端。
 
 ```css
 .mobile-only {   display: none; }
@@ -85,56 +85,56 @@ And in your CSS file, define mobile-only and nomobile.
 }
 ```
 
-## 4. Try out endless scrolling and lazy loaded data
+## 4. 尝试无限滚动和懒加载数据
 
-If you have large lists such as users or tasks that run into dozens or hundreds, you should consider lazy loading more users when a user scrolls down instead of showing a `load more` or `show more` button. Native apps typically include such a lazy loaded endless scrolling feature.
+如果你有很大的列表，比如包含几十或数百的用户或者任务，那么当用户向下滚动的时候，你应该考虑懒加载更多用户信息，而不是展示一个`加载更多`或者`展示更多`的按钮。原生应用通常包括了这样的懒加载的无限滚动功能。
 
-It is not hard to do so in a mobile web in Javascript frameworks.
+在移动网页中，使用 JavaScript 框架不难实现这个功能。
 
-You add a reference ($ref) to an element in your template or simply rely on the absolute scroll position of your window.
+你可以把一个参照（$ref）添加到网页模板的一个元素上，或者简单地绑定到窗口的绝对滚动位置。
 
-The following code shows how to implement this effect in a Vue-app. Similar code can be added in other frameworks such as Angular or React.
+下面的代码演示了如何在一个 Vue 应用中实现这个效果。相似的代码可以添加到其他的框架中，比如 Angular 或者 React。
 
 ```js
 mounted() {
   this.$nextTick(function() {
      window.addEventListener('scroll', this.onScroll);
      this.onScroll(); // needed for initial loading on page
-  });        
+  });
 },
 beforeDestroy() {
    window.removeEventListener('scroll', this.onScroll);
 }
 ```
 
-The onScroll function loads data if a user scrolls to a certain element or to the bottom of the page:
+这个 onScroll 函数会在用户滚动到某个元素或者页面底部时加载数据。
 
 ```js
-onScroll() {    
+onScroll() {
    var users = this.$refs["users"];
    if (users) {
       var marginTopUsers = usersHeading.getBoundingClientRect().top;
       var innerHeight = window.innerHeight;
       if ((marginTopUsers - innerHeight) < 0) {
           this.loadMoreUsersFromAPI();
-      }                               
-   }  
+      }
+   }
 }
 ```
 
-## 5. Make your modals and popups full width or full screen
+## 5. 用全宽度或者全屏幕展示弹出框和弹出窗口
 
-Mobile screens have limited space. Sometimes developers forget that and use the same type of interface they use on their desktop version. Especially modal windows are a turn off for mobile users if not implemented correctly.
+移动端的屏幕空间有限。有时开发者会忘记这种限制，使用和桌面版一样的交互界面。特别是当弹出窗口未能正确实现时，移动用户会不喜欢。
 
-Modal windows are windows you overlay on top of other content on a page. For desktop users, they can work great. Users very often want to click on the background content to get out of the modal window again — typically when a user decides to not perform the action the modal window suggests.
+弹出窗口是一个放置在页面中其他内容的顶层的窗口。对于桌面用户来说，它们可以很好地工作。在用户决定不执行弹窗所建议的操作时，常常想要点击背景内容来离开这个弹窗。
 
 ![](https://cdn-images-1.medium.com/max/4816/1*J7cegVnnZMO7zl6uv357tA.png)
 
 ![](https://cdn-images-1.medium.com/max/3912/1*6tVjltC9faX0gnRT25xKaQ.png)
 
-Mobile usage of a website and modals represent a different challenge. Due to the limited screen space, large companies with well designed mobile web apps such as Youtube or Instagram make modals full width or full screen with an ‘X’ on the top of the modal to close it.
+网站和弹窗在移动端的使用是一个不同的挑战。受限于有限的屏幕空间，大公司的设计优秀的移动端网页应用，比如 YouTube 或者 Instagram，会把弹窗进行全宽度或者全屏幕展示，并在弹窗的顶部放置一个“X”来关闭它。
 
-This is particularly the case for sign-up modals, which in desktop versions are normal modals windows, while full screen on a mobile version.
+这是注册弹窗的一个典型案例，它的桌面版本是一个普通的弹窗，而移动版本则全屏幕展示。
 
 > 如果发现译文存在错误或其他需要改进的地方，欢迎到 [掘金翻译计划](https://github.com/xitu/gold-miner) 对译文进行修改并 PR，也可获得相应奖励积分。文章开头的 **本文永久链接** 即为本文在 GitHub 上的 MarkDown 链接。