移动端网站建设的原则（什么是移动端优先网站）

你有没有尝试在电脑上找到一个很酷的网站，想分享给朋友（或自己），用手机打开之后样子却变了，原本绚丽的效果消失，甚至变得难用，这样的情况，与我们今天要讨论「移动端优先网站」的概念，有很大的关系。

在进入移动端优先网站主题之前，让我们先来了解一下网站制作的两种概念：

渐进，顾名思义就是渐渐地。

在网页设计中则是指「设计师在制作网时以『小屏幕为优先』考量，随着银幕尺寸增加，加上其他功能与动画效果等，如此一来，所有的效果、功能都是建筑在连最小屏幕设备都可以顺畅操作的用户体验之上」。

移动端优先网站就是运用了渐进式设计的思维。

与渐进式刚好相反，以「大屏幕适应性」为优先。

设计师会先将大屏幕功能完成，再依据屏幕大小，调整呈现方式。

这种做法，很容易为了展示将华丽的特效、超高清照片，不小心忽略了小屏幕的用户体验，绚丽、完整的大屏幕效果，在屏幕变小后，不得不牺牲部分效果或功能，造成重开头所提到的「小屏幕部分功能消失」的现象。

移动端优先网站是采取渐进式的设计逻辑，为创造更好的用户体验，「以移动设备为优先」的网页设计理念，先将小屏幕UX设定好，再延伸出各种功能与设计。

像是宪法之于行政命令，因宪法（小屏幕用户体验）最高性，所有行政命令与暂时性条文（其他长出来的大屏幕功能）都不得及触宪法，宪法保障了小屏幕用户的使用性。

外观看起来或许有点像，但设计逻辑不一样。

移动端优先网站使用的渐进式思维，RWD网站则大部分是降级式思维，网页会根据设备大小自动调正成相应的设计。

根据2022年的调查报告，每人每日平均上网时间有超过50%的是使用移动设备浏览，或许在看此篇文章的你，就正在使用手机。

2021年开始，搜索引擎把移动设备优先索引列入SEO关键因素，意思就是，不管你的网站做得再华美、内容再吸睛，只要不适合移动设备浏览，都可能使网页排名下滑。

疫情的爆发，彻底改变了大众的消费方式，比起实体出门，生活中许多大小事都能靠手机一只搞定，抓住移动用户的心也就等于抓住了商机。

就是在这些因素的夹击之下，移动端优先网站逐渐进开始受到业内重视。

乍听之下，移动端优先网站的思维似乎没什么缺点，对提升网站排名也相当有帮助，但实际使用上，仍须依照产品或网站的主题、TA以及想说的故事为主，以下让我们来看一些生活中的案例。

在这个网站的网页版中，可以看到左右存在很大部分的留白，这是为了在小屏幕时也能适当为画面留出空白，善用白色作为画面区隔，让用户有喘息的空间。

在移动端优先网站的设计逻辑中，我们会尽量以瀑布式商品页，或左右横拉的方式，来代替页面跳转，降低页数，也会将购物流程数字化、步骤化来表现当前所在位置，必免用户因分心或迷路造成的跳转。

选单通常不会像一般网站，做超巨大的菜单或盖板菜单，而是一个放在左上或右上的小图标，让用户有需要再叫出来。对比明显、位置显眼的号召用语是移动端优先网站的一大特色。

在上述案例中，出现了三个不同的网站，虽然这三个网站目的不同，但我们仍能从中归纳出几点移动端优先网站的制作要领。

网站设计的初衷，应该要能帮助用户顺利达到使用目的，因此在小屏幕UX设计时，应尽可能排除容易使人分心的元素，反之，如果页面多，可适度增加指向性元素，带领用户快速到达目的地。

根据移动网站速度提升建议，载入速度每缩短0.1秒，转换率就能获得8%提升，因此，为了提升转换率与SEO排名，酷炫的动画设计与高清的照片遇到移动设备时可能就需要妥协。

页面干净除了第一点提到的减少使人分心的元素外，也包括字体适中、页数越少越好、清楚的动线设定、保持左右留白等。

除了在视觉风格上追求统一，CTA所在位置也必须让人一目了然，文字简洁，让用户知道，这一步之后，我们将会带他去到哪里，按下这个按钮等于做出什么样的决定，避免迷路，降低跳出率。

我们相信，在人们对于小屏幕设备的需求越来越高的未来，移动端优先网站将会成为种网页设计的主流趋势。

如果你的网站过于陈旧，需要改版却没有方向，移动端优先网站会是一个不错的切入点，还可以直接联系浪知潮，我们帮你从网页设计开始，提供最好的服务。