在移动设备上构建设计良好的网站慢慢变得越来越容易。不论使用什么方法（响应式设计、自适应等），如果你了解你所做的，创建一个美观的网站不是问题。但你的用户可能仍然要求网站有原生 app 的体验。完成这样的体验是一个挑战。大多数时候，当人们谈论“app”或“原生”的感觉，他们讲的的不是一个网站的视觉体验。他们所讨论的，是用户界面如何对他们的行为进行反馈，以及这种反馈是怎样呈现的。

原生应用很“快”。原生应用的动画渲染的很平滑，按钮及时响应用户的点击，当 app 加载数据时也不会有什么问题。

让你的网站像原生应用一样，意味着你需要尽可能的提高你网站响应及交互的速度。

提高性能已经是一个很热门且很有价值的话题了。直到最近，web 端还在朝着笨重与缓慢发展。业内一直有个争论：实现一个高性能的 webapp 是不可能的。

从技术上讲，我们有能力使我们的网站变得更加快速，更加时髦，带来更完美的体验。

实际性能的提升很重要，但如果不让用户感知到提升效果，就不意味着这些提升可以到达用户。

当人们“觉得”一个网站不快，那这个网站再快也没用。加载图标只是让用户注意这个事实：数据在加载，用户只能等待，而不能抽离注意力。

作为设计师和开发人员，我们的目标不应该通过一些数字的增长，建立最快的网站，同样应该创造最快的网站体验。

因此最重要的是用户如何感知你网站的速度。任何实际性能的提升只是一份锦上添花。我认为，感知性能的提升，相比实际性能更重要。但这并不意味着你需要忽略实际性能的提升。

OK，解释足够了，如何可以马上提升网站的感知性能？

下面的三个技巧，你可以立即开始尝试

1、给按钮添加触摸状态

最简单的提高站点感知性能的方法，是给网站增加“active”状态。

你看，任何时候一个访问者点击网站上的一个按钮，她必须等待 300 毫秒才知道到底发生了啥。

浏览器设置了这个超时时间，之后可以确保用户不会进行一些其他操作（双击）。因此等待 1/3 秒后，浏览器知晓了用户的动作，并执行最初的点击。当这个动作发生后，按钮被一个灰色的东东覆盖。

这是很糟糕的用户体验。一项研究发现，任何高于 100ms 的延迟都会让用户认为他们在等待。他们可能只想进行一次跳转。

然而很多的移动网站，包括我做的那些，没有考虑这个感知问题。设计师通常的设计是触摸时按钮或者链接保持原样。

为了让你的网站感觉更快，你需要让你的按钮立即响应用户的触摸，给用户一个明显的视觉指示——有些事情正在发生。

有一个很赞的属性用在网站上的按钮或链接；它是：active 伪类。我们在桌面端一直使用这个伪类。

不幸的是，无论是 IOS 还是 Android，当按钮或者链接被点击时都忽略了这个属性，为了激活这个状态，你需要添加一个简单的事件绑定到页面的 JavaScript 中。对按钮设置这两个属性，用户会立即感觉到界面响应了用户的操作，即使最终的响应速度是一样的。你只是让你的界面即时反馈了用户的行动，而不会让用户傻等 300 ms 再看看到底干了啥。

2、优化响应动画效果

App 与网站最明显的差别之一就是动画效果。

现在的设备上，应用程序已经能够充分利用硬件图形加速。而在 web 端，开发者使用基于 javascript 的动画，在移动端的 cpu 上跑是很慢的。

但现在，随着移动浏览器的不断支持，你可以在项目中使用基于硬件加速的 CSS3 动画。

这样，我们就可以添加一些视觉效果，这些效果已经被我们喜欢的一些 app 应用了很多年了。

事实上也没那么快，若使动画贴近原生体验，你需要避免动画的缓慢及抖动，而这都是很难处理的。

然后，我要讨论之前提到的，尽可能去掉加载提示的方案。

我倾向的方案是，当等待时间大于 100ms，小于 250ms 时，使用加载图标弊大于利，因此可以隐藏掉。

例如，如果你使用 Ajax 请求内容，可以对内容的容器应用动画，例如收缩起来再扩展从而适应新的内容。这样的短动画会分散用户等待时的注意力，而不是让用户盯着一个不断旋转的小菊花——他们只是等待一个短动画完成，以至于甚至没有意识到新内容没出现。

当然，需要很长时间才能完成的重复的动画是非常令人讨厌的，所以我们要适当的使用这些动画。对于大多数动画而言都是这个道理。

3、提供自然的手势体验

App 超过 web 端体验的一点，是可以在触控设备上提供很自然的手势。

然而大多数网站只使用了触摸对象。设计师对手势唯恐避之不及，结果用户感觉在 web 端受到了歧视一般。

我们需要考虑直接为设备开发网站。如果一个用户的设备允许手势操作，为什么不使用它们？

当然，还有一个小问题：移动操作系统有个可恶的特性，移动浏览器会劫持某些手势作为己用。

好吧。某些手势在我们的可控范围之外。那么你们应该使用什么手势呢？下面有四个例子。

手势 1：左右划动

即使存在边缘问题，左右划动仍然是一个很好用的手势。你只需要小心触发时不要太靠近屏幕的边缘。

这个手势最好的应用是用于移动一组对象，比如幻灯片或列表标签。

手势 2：下拉刷新

下拉刷新也是用户接触到的手势。这里有一些很赞的 js 库可以很容易的实现这个特性，我使用 hook.js 来实现。

手势 3：长按

有一个很有用的属性：-webkit-touch-callout：none。这将禁用移动 Safari 浏览器中默认的长按效果。在 android 禁用这个效果则需要费点劲。

长按手势可以用于拿起一个项目（如重新排序列表中的项）或显示更多选项（如社会共享）。

手势 4：双指缩放

每个人都懂双指缩放。很多人当看到 web 端的图片后，都会尝试缩放图片来看清细节。

这里也存在浏览器劫持用户手势的情况，不过不是很难办。

当你锁定或不锁定 viewport 的时候，你有时不希望用户在双指缩放时缩放整个页面。为了代替这个多指手势，你可以使用这个小而精的 harmmer.js 库。这个库拥有一系列的手势可以为你使用，你也可以建立自己的手势。

只需要记住，如果你正在使用一个手势，确保对于用户而言，要么感觉自然，要么有意义。

结论：

我希望有一天，我们不会需要区分本地和网络。路漫漫其修远兮，我们的工作是让用户觉得网站是围绕他们设计的，这一天很快就会到来。

我认为，最近关注性能的趋势固然很棒，但必须记住，我们的用户不是机器。

他们不关心你的网站有多少请求，屏幕重绘有多快。但他们确实关心一些影响他们体验的东西——他们的感知性能。

专注于确保你网站的外观和行为像一个尽可能快的网站。如果用户不注意的话是没有资格称作“最快的网站”的。

如果你对于改善感知性能有任何建议，请贴在评论里。