技术对 UX 的影响

做一个应用程序有非常多不同的技术选择。使用 Web 技术既可以用做小的开发成本做出跨平台的应用,但是性能和功能又有诸多限制。完全使用原生技术则需要极高的成本。选择技术的因素固然有很多,不同的技术可能实现相同的功能,但体验上是有差异的。

下面介绍的顺序是从更接近 Web 技术到更接近原生技术。

Web 后端渲染

典型的 Web 应用模式,网页在后端进行渲染,配合少量的 JavaScript而构成的应用。这种模式适合交互简单,以内容为主的应用。典型的例子是 GitHub, WordPress, Wikipedia 之类的网站。

后端渲染对服务器的压力更大,每跳转一个页面,浏览器都要等待至少数秒钟。除了 Safari 之外的移动浏览器都有一个刻意而为的点击延迟 (300ms),这让点击链接跳转在移动端的体验变得更差了。速度是最大的弊端。

单网页应用

使用 Angular, React, Vue 之类的 JavaScript MVC/MVVC 框架制作的应用。前端作为 JavaScript 被整个或部分加载到浏览器。然后只从服务器获取需要的数据,更新页面的部分内容而不需要重载页面。服务器不再需要处理网页渲染,数据可以缓存,数据库查询等耗时操作也更少。这种模式适合交互频繁,数据更新频繁的应用。典型的例子有 Twitter, Facebook, Instagram 之类的网站。

缺点仍然很多:

  1. 初次加载仍然非常耗时。
  2. 受到浏览器限制,尤其是移动浏览器。
    1. 大多数移动浏览器在滚动时会自动隐藏地址栏。如果有浮动元素的话,这会非常讨厌。
    2. iOS Safari 强制所有网页可两指手势缩放。这种缩放可能会破坏原有布局,给人一种不可靠的感觉。而原生应用是不可以被整个自由缩放的。
    3. 仍然有点击延迟 (300ms)。这是单网页应用给人一种比原生应用慢的最常见原因。
    4. 移动浏览器的性能导致很多动画变得缓慢卡顿。
  3. 设计/开发模式的问题。
    1. Web 开发者通常不会花心思去做手势操作和过渡动画。
    2. 在桌面用响应式设计模式开发,并不能完全模拟实际设备的交互感觉。主要问题在于屏幕尺寸,手指的精度和活动范围,以及导航栏和键盘的影响。
    3. 桌面和手机共用结构和组件,常常在手机上不太好用。

Electron 和 Cordova

这两个东西都是提供了原生系统接口的 Web 容器。Electron 主要用于桌面应用,只要 NodeJS 可以做到的它都可以做到,因此可以使用非常之多的原生接口。Cordova 或者 PhoneGap 面向移动平台,能使用的接口由插件提供,非常之有限。

  1. 加载时间快,不需要下载界面组件。
  2. 界面仍然是 Web 引擎渲染的。运行性能仍然比原生差,但是优于浏览器。
  3. 相比浏览器,消耗更多的系统资源。
  4. 浏览器界面的干扰被削弱。没有标签页,地址栏,更像是单应用。
  5. 无法使用一些原生的库和系统接口。

React Native

JavaScript + 原生 UI。一个性能和快速跨平台开发的折中选择。但也可能是一个陷阱。

  1. 界面与原生应用几乎没有差异,交互非常流畅。
  2. 只提供了原生 UI 组件的一个子集。
  3. 可用的原生系统接口有限,第三方 SDK 就更少了。很多功能仍然用 Web 技术实现,变成了混合式应用。
  4. 可能会使用更多的资源,启动较为缓慢。

原生应用

原生应用可以在所支持的平台上做尽可能多的优化,取得最好的效果。但代价是巨大的开发成本。

以视频播放器为例,原生应用可以支持任意视频格式,并尽可能优化性能,获得悬浮窗等系统权限。

总结

待续……

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.