让移动网站变身本地APP

移动端构建网站变得越来越简单,一旦心里有想法，制作一个精致的站点就不是什么问题。但当大多数人提及一个应用就像一个原生程序或者像本地应用时，他们并没说是网站的外观，他们在意的是操作之后的响应效果。本地应用相对于Web应用不止速度上有优势，动画效果渲染也更加平滑，当点击按钮时，按钮自身会立即响应变化的样式，不管操作是否加载成功，都不会报错。要让站点看起来像本地应用，就意味着要尽一切可能使站点快速的响应。

 

体验性能 VS 实际性能

 

虽然提高实际性能很重要，但这并不意味着用户最终能够感觉到改善。用户对性能感知来说很重要，网站是否真正运行非常快并不重要。等待网站响应的时候也不能只专注吸引用户的注意力，但事实上仍然让用户感觉在等待响应，而正确的做法是应该去分散用户的注意力。作为设计师和开发者，我们的目标不仅仅是从学术理论上创造一个快速的站点，而更应该从体验上去创造一个最快的站点。用户是如何感知你的站点的运行速度才是最重要的，任何实际速度的提升不过是一个华丽的外衣，体验性能优化比实际性能优化更重要，但绝不代表不去实施实际性能优化。

 

接下来介绍4个技巧来改变上述情况：

 

1. 给你的按钮增加触摸状态

 

在移动设备上改善网站体验性能最容易的方法之一就是使用激活状态。众所周知，用户在任何时候点击你网页上的按钮，在网页响应前他都必须等待约300毫秒。浏览器会保持这个延时，这样它才能确保用户并不是想做其它动作（准确地说就是双击）。所以浏览器在这三分之一秒内检测用户是否有其它操作，如果没有，则响应用户上一次点击。当这个事件最终发生时，它会给出一个灰色的高亮展示给用户。

 

要使你的站点感觉快，就要让你的按钮能够及时响应用户的点击事件，并且在状态改变时给用户一个可见的反馈。有一个非常好用的CSS伪类叫做 active 状态，它可以用来在网页上显示一个按钮或者链接被点击了。我们也可以同时把它使用在PC端浏览器上。

 

2. 使用默认滚动

 

滚动条使用起来就像是使用本地程序的感觉，实际上它就是原生的，你需要做的只是给你的滚动容器添加这个属性：

Css

-Webkit-overflow-scrolling: touch;

 

然而，关于这个属性还存在一个问题，那就是当滚动到页面最顶部的时候会禁止你的iphone显示状态栏。这个BUG已经存在有段时间了，即使是最新版本iOS7上的移动版Safari都没有解决这个问题。解决问题的方法之一是：创建一个类来给容器添加 overflow-scrolling:touch属性。然后只有当容器处于可见状态时，使用JavaScript去应用这个类，使其生效。

 

3. 创建高性能动画

 

在Web网站和本地应用之间最显著的差别是动画的使用。多年前，本地应用在当今设备中就能够充分利用硬件图形加速。而在Web端，开发者却只能基于JavaScript来实现动画，对于移动端功能比较弱的CPU来说，运行起来会比较慢。但是现在，随着移动浏览器的支持，我们可以大量利用CSS3动画来实现硬件加速。

 

4.手势利用

 

移动开发者已经意识到手势的魅力所在，并很快就使其得到了很好的利用。大多数网站都只会使用手势点击来触发事件，设计师甚至不想去实现其它手势，这样给用户像一个二等公民待遇的感觉。当然，移动操作系统都存在一个问题那就是：劫持在浏览器中的手势，而去执行系统自身的响应。对于本地应用，比如Facebook 使用屏幕左右边缘的滑动开拓导航。但对于Web应用来说，这种行为叫出界，因此，这些手势还是有相当多的限制的，能纳入考虑的有以下几个：

 

手势1 一侧到另一侧的滑动

即使即将出界，一侧到另外一侧的滑动也是一个相当不错的手势，只是需要注意的是不要太靠近屏幕的边缘了。

 

手势2 拉取刷新

拉取刷新是让用户去获取数据的另外一个手势，有一大堆JavaScript库可以很简单的去实现这个手势，有一个我以前用过的库叫Hook.js。

 

手势3 长按

有一个很有用的属性叫做–Webkit-touch-callout: none; 它将关闭移动端Safari默认的长按事件，但是你想要在Android上关闭它还需要额外的工作。长按手势主要用于拖动一个元素或者展示更多操作给用户。

 

手势4 缩放功能

每个人都理解缩放，大多数人在网站上看到一个照片的时候都会去缩放来查看更多细节。有时候浏览器也会劫持这种手势，无论是否需要锁定整个窗口的放大或者缩小，有时你也并不希望用户去缩放整个页面。

 

专注性能优化虽然是件好事，但用户不是机器，他们不关心你的网站发出了多少请求，也不在乎你的屏幕渲染得有多快，他们只关心网站带给他们体验上的感觉。重要的是如何让你的网站看起来或者感觉上是最快的，那些用户无法感知的高速网站是毫无意义的。

 

本文为Anyforweb前端分享博客，需要了解网站建设相关，请访问anyforweb.com。