

移动设备优先的设计
source link: https://seo.g2soft.net/2022/04/20/mobile-first-design.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Google 早已把移动设备的优先设计作为最重要的移动设备搜索的重要因素了。很多时候,我们也都做了网站,网页的移动设备适配,或者是响应式的设计,用来通过 Google 的移动设备友好测试。
这里有个 Google Search 的移动设备友好的测试工具。可以输入网址,也可以把代码黏来测试。
移动设备优先设计的网站此类网站的优化,也许从设计之初就有下面几点要特别的注意。
提高网站的载入速度
网站网页的载入速度,始终是一个除了内容之外,很重要的页面因素。大体上有四个角度可以来做。
AMP 页面
AMP页面是一个开源的标准,就是为了移动设备而设计出来的,大体上是 HTML 的一个子集,但是比普通的 HTML 页面会快上很多。用户的体验当然就非常的好。
具体的标准和如何应用,可以参考其官方网站。https://amp.dev/
用 WordPress 的网站,可以直接用插件,很方便。
PWA 设计
Progressive Web Apps,PWA 是一个 AMP 的替代方案,主要的特点是,使用体验类似于移动设备上的原生 APP。
Google 有一个非常棒的帮助网站,可以了解怎样使用 PWA。
PWAMP
坦白说,这个我也不太了解,大致上是结合了 PWA 和 AMP 的优点,也许这是未来的走向。
最后一种,其实就是不用做什么,如果你的网站已经是响应式的设计,移动设备优先考虑的,而且载入速度不错,用户交互设计的问题也没有,那么还需要做什么呢?就这么用下去就是了。
展示在移动设备的内容
移动设备的屏幕毕竟有限,很多设计都用到了折叠菜单,下拉框之类的元素。这很好,Google 不会因此而惩罚这种隐藏内容。
有几点需要小心的,就是:
- 不要使用 Flash
- 考虑弹窗的使用
- 文字的大小,手指能够点击的范围
移动设备上购物车结账的处理
有研究表明,超过80%的顾客,在一部手机上开始浏览商品,而在另外一个设备上完成购物,或者是到店内。显然这里有某些因素阻碍了客户在同一台设备上完成购物过程。
看看下面几点,能否有所改善。
- 提高页面载入速度
- 减少购物结账时需要输入的资料
- 导航栏的易于使用
- 给客户明确的保存购物篮,并在其它设备上继续购物的选择
总而言之,目前阶段,移动设备优先的网站设计很需要一个总体的规划,结合现在的主流移动设备的信息处理能力来考虑,现在的很多手机,平板,笔记本,都有很强劲的 CPU,大内存,高速的LTE上网,或者 5G 的网速,所以CSS Javasc,图片之类的原先会减少使用的页面元素,现在可以适当的摆放上去了,只要有利于页面的展示,有利于用户的访问,就可以。
现在越来越多的人使用手机之类的移动设备,有智能手机的人要远远多于只使用桌面电脑的人了,那还有什么因素阻挡你设计一个移动设备优先的网站呢?
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK