如何让你的网站更像是原生 APP

2015.05.30 00:03:43 Friday 472 views

在移动设备上构建设计良好的网站慢慢变得越来越容易。不论使用什么方法(响应式设计、自适应等),如果你了解你所做的,创建一个美观的网站不是问题。但你的用户可能仍然要求网站有原生 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 库。这个库拥有一系列的手势可以为你使用,你也可以建立自己的手势。

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

结论:

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

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

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

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

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

亲爱的读者:本文结束了,非常感谢你的阅读。阅读是美意,分享是鼓励,如果觉得本站文章对你有用,请分享文章给你的朋友。你的支持将鼓励我继续创作。本站电脑版此前长期一段时间下线了评论功能,目前已经恢复了,如果需要评论请使用手机访问或直接在下方填写,我们万分期待看到你的留言。

你可以通过下方的评论模块与我们进一步交流,评论内容不会公开展示:


提示:当前页面不支持阅读模式。

扫二维码添加微信

★ ★ ★ ★ ★

“感谢你的鼓励与陪伴,我们的坚持才有意义”

创新与发展 – 我的网络日志保留所有权利 欢迎各界朋友与本站交换友情链接或在本站投放广告,如有合作意向请直接与站务联系

测试文字 体验新版 站内搜索 测试文字 测试文字 测试文字 测试文字 测试文字 虚拟主机