用户在移动中,输入并不很方便。特别是在一些大屏幕手机中,输入时需要双手操作才可以。针对这样的场景,可以进行下面这样的设计。
• 尽量使用触控操作,而不要让用户输入太多内容。例如,使用滑块来代替数字的输入。用户用手指拖动滑块就完成了数字输入。
• 重要内容放在第一屏,特别是引导用户采取行动的按钮要鲜明地呈现给使用者。
• 输入内容尽量少,能够使用选择和按钮的地方就不要让用户输入。输入内容越多,往往应用的转化率就越低,用户流失率也越高。
为了保证手机能够在不同网络条件下正常打开页面,可以进行下面这些优化。
• 将网站部署得尽量靠近最终用户。如果你的客户在美国和加拿大,就将服务器架设在 Amazon AWS或者 Google Cloud,而不要在国内选择网络服务商。
• 使用 CDN 提高静态内容下载速度。
• 优化 DNS 网络,使得用户可以访问最近的服务器。特别是在全球推广的时候,对于跨越地域和若干运营商而言就非常重要。
• 根据移动设备分辨率提供适合尺寸的图片,不要将PC浏览器下的图片直接用在移动设备浏览器中。
• 合并图片、CSS、JavaScript 以减少 TCP/IP连接数量,提升内容下载速度。
• 不会使用到的HTMIL、CSS 或JavaScript代码段要移除掉。
• 使用压缩工具对 CSS 和 JavaScript 进行压缩,例如 Google Complier。
• 使用 HTML5 的离线技术,在网络掉线的时候可以通过本地离线缓存加载内容。
• 使用监控工具检查最终用户是否可以有效访问服务器,如果不能有效访问则尽快调整网络。
• 使用适合移动业务的精简的 JavaScript 库,而不要用臃肿而功能复杂的JavaScript 库。
移动设备的内存通常都不大,如果页面过大,显示速度会变慢,甚至造成浏览器崩溃。
• HIML 的DOM 不宜过于呢大和复杂,复杂的DOM 会减慢浏览器的呈现速度。
• 过期的DOM 对象要释放掉。
不同移动设备的分辨率可能会相差很大,为了保证用户阅读体验,可以参考下面这几个技巧。
• 使用 HTMILS 的媒体查询技术,在不同整动设备分辨率(视口尺寸)和移动设备水平或垂直方向的时候,自动调整网页样式、字体、字号、粗细等。
• 使用折叠或者分层技术,通过用户触控操作可以展开或者折叠内容块,以便在小尺寸移动设备下使用。