什么是移動(dòng)端優(yōu)先網(wǎng)站？它有什么好處？

時(shí)間：2024-05-10 21:30:02 | 來(lái)源：建站知識(shí)

時(shí)間：2024-05-10 21:30:02 來(lái)源：建站知識(shí)

你有沒(méi)有嘗試在電腦上找到一個(gè)很酷的網(wǎng)站，想分享給朋友（或自己），用手機(jī)打開(kāi)之后樣子卻變了，原本絢麗的效果消失，甚至變得難用，這樣的情況，與我們今天要討論「移動(dòng)端優(yōu)先網(wǎng)站」的概念，有很大的關(guān)系。

在進(jìn)入移動(dòng)端優(yōu)先網(wǎng)站主題之前，讓我們先來(lái)了解一下網(wǎng)站制作的兩種概念：

網(wǎng)站制作概念一、漸進(jìn)式設(shè)計(jì)

漸進(jìn)，顧名思義就是漸漸的。

在網(wǎng)頁(yè)設(shè)計(jì)中則是指「設(shè)計(jì)師在制作網(wǎng)時(shí)以『小屏幕為優(yōu)先』考量，隨著銀幕尺寸增加，加上其他功能與動(dòng)畫(huà)效果等，如此一來(lái)，所有的效果、功能都是建筑在連最小屏幕設(shè)備都可以順暢操作的用戶體驗(yàn)之上」。

移動(dòng)端優(yōu)先網(wǎng)站就是運(yùn)用了漸進(jìn)式設(shè)計(jì)的思維。



網(wǎng)站制作概念二、降級(jí)式設(shè)計(jì)

與漸進(jìn)式剛好相反，以「大屏幕適應(yīng)性」為優(yōu)先。

設(shè)計(jì)師會(huì)先將大屏幕功能完成，再依據(jù)屏幕大小，調(diào)整呈現(xiàn)方式。

這種做法，很容易為了展示將華麗的特效、超高清照片，不小心忽略了小屏幕的用戶體驗(yàn)，絢麗、完整的大屏幕效果，在屏幕變小后，不得不犧牲部分效果或功能，造成重開(kāi)頭所提到的「小屏幕部分功能消失」的現(xiàn)象。



移動(dòng)端優(yōu)先是什么意思？

移動(dòng)端優(yōu)先網(wǎng)站是采取漸進(jìn)式的設(shè)計(jì)邏輯，為創(chuàng)造更好的用戶體驗(yàn)，「以移動(dòng)設(shè)備為優(yōu)先」的網(wǎng)頁(yè)設(shè)計(jì)理念，先將小屏幕UX設(shè)定好，再延伸出各種功能與設(shè)計(jì)。

像是憲法之于行政命令，因憲法（小屏幕用戶體驗(yàn)）最高性，所有行政命令與暫時(shí)性條文（其他長(zhǎng)出來(lái)的大屏幕功能）都不得牴觸憲法，憲法保障了小屏幕用戶的使用性。

聽(tīng)起來(lái)很像RWD（響應(yīng)式網(wǎng)站設(shè)計(jì)）？有什么不一樣嗎？

外觀看起來(lái)或許有點(diǎn)像，但設(shè)計(jì)邏輯不一樣。

移動(dòng)端優(yōu)先網(wǎng)站使用的漸進(jìn)式思維，RWD網(wǎng)站則大部分是降級(jí)式思維，網(wǎng)頁(yè)會(huì)根據(jù)設(shè)備大小自動(dòng)調(diào)正成相應(yīng)的設(shè)計(jì)。

為什么移動(dòng)端優(yōu)先網(wǎng)站如此的重要？

移動(dòng)設(shè)備使用率屢創(chuàng)新高

根據(jù)2022年的調(diào)查報(bào)告，每人每日平均上網(wǎng)時(shí)間有超過(guò)50%的是使用移動(dòng)設(shè)備瀏覽，或許在看此篇文章的你，就正在使用手機(jī)。

影響SEO關(guān)鍵因素改變

2021年開(kāi)始，搜索引擎把移動(dòng)設(shè)備優(yōu)先索引列入SEO關(guān)鍵因素，意思就是，不管你的網(wǎng)站做得再華美、內(nèi)容再吸睛，只要不適合移動(dòng)設(shè)備瀏覽，都可能使網(wǎng)頁(yè)排名下滑。

大眾消費(fèi)模式改變

疫情的爆發(fā)，徹底改變了大眾的消費(fèi)方式，比起實(shí)體出門(mén)，生活中許多大小事都能靠手機(jī)一只搞定，抓住移動(dòng)用戶的心也就等于抓住了商機(jī)。

就是在這些因素的夾擊之下，移動(dòng)端優(yōu)先網(wǎng)站逐漸進(jìn)開(kāi)始受到業(yè)內(nèi)重視。

乍聽(tīng)之下，移動(dòng)端優(yōu)先網(wǎng)站的思維似乎沒(méi)什么缺點(diǎn)，對(duì)提升網(wǎng)站排名也相當(dāng)有幫助，但實(shí)際使用上，仍須依照產(chǎn)品或網(wǎng)站的主題、TA以及想說(shuō)的故事為主，以下讓我們來(lái)看一些生活中的案例。

生活中的案例

1.EZTABLE

在這個(gè)網(wǎng)站的網(wǎng)頁(yè)版中，可以看到左右存在很大部分的留白，這是為了在小屏幕時(shí)也能適當(dāng)為畫(huà)面流出空白，善用白色作為畫(huà)面區(qū)隔，讓用戶有喘息的空間。



2.foodpanda

在移動(dòng)端優(yōu)先網(wǎng)站的設(shè)計(jì)邏輯中，我們會(huì)盡量以瀑布式商品頁(yè)，或左右橫拉的方式，來(lái)代替頁(yè)面跳轉(zhuǎn)，降低頁(yè)數(shù)，也會(huì)將購(gòu)物流程數(shù)字化、步驟化來(lái)表現(xiàn)當(dāng)前所在位置，必免用戶因分心或迷路造成的跳轉(zhuǎn)。



3.awwwards

選單通常不會(huì)像一般網(wǎng)站，做超巨大的菜單或蓋板菜單，而是一個(gè)放在左上或右上的小圖標(biāo)，讓用戶有需要再叫出來(lái)。對(duì)比明顯、位置顯眼的號(hào)召用語(yǔ)是移動(dòng)端優(yōu)先網(wǎng)站的一大特色。

在上述案例中，出現(xiàn)了三個(gè)不同的網(wǎng)站，雖然這三個(gè)網(wǎng)站目的不同，但我們?nèi)阅軓闹袣w納出幾點(diǎn)移動(dòng)端優(yōu)先網(wǎng)站的制作要領(lǐng)。



移動(dòng)端優(yōu)先網(wǎng)站制作要領(lǐng)

1.用戶永遠(yuǎn)優(yōu)先

網(wǎng)站設(shè)計(jì)的初衷，應(yīng)該要能幫助用戶順利達(dá)到使用目的，因此在小屏幕UX設(shè)計(jì)時(shí)，應(yīng)盡可能排除容易使人分心的元素，反之，如果頁(yè)面多，可適度增加指向性元素，帶領(lǐng)用戶快速到達(dá)目的地。

2.注意網(wǎng)站速度

根據(jù)移動(dòng)網(wǎng)站速度提升建議，載入速度每縮短0.1秒，轉(zhuǎn)換率就能獲得8%提升，因此，為了提升轉(zhuǎn)換率與SEO排名，酷炫的動(dòng)畫(huà)設(shè)計(jì)與高清的照片遇到移動(dòng)設(shè)備時(shí)可能就需要妥協(xié)。

3.保持頁(yè)面干凈

頁(yè)面干凈除了第一點(diǎn)提到的減少使人分心的元素外，也包括字體適中、頁(yè)數(shù)越少越好、清楚的動(dòng)線設(shè)定、保持左右留白等。

4.統(tǒng)一且有效的CTA（號(hào)召行動(dòng)用語(yǔ)）

除了在視覺(jué)風(fēng)格上追求統(tǒng)一，CTA所在位置也必須讓人一目了然，文字簡(jiǎn)潔，讓用戶知道，這一步之后，我們將會(huì)帶他去到哪里，按下這個(gè)按鈕等于做出什么樣的決定，避免迷路，降低跳出率。

總結(jié)

我們相信，在人們對(duì)于小屏幕設(shè)備的需求越來(lái)越高的未來(lái)，移動(dòng)端優(yōu)先網(wǎng)站將會(huì)成為種網(wǎng)頁(yè)設(shè)計(jì)的主流趨勢(shì)。

如果你的網(wǎng)站過(guò)于陳舊，需要改版卻沒(méi)有方向，移動(dòng)端優(yōu)先網(wǎng)站會(huì)是一個(gè)不錯(cuò)的切入點(diǎn)，還可以直接聯(lián)系浪知潮，我們幫你從網(wǎng)頁(yè)設(shè)計(jì)開(kāi)始，提供最好的服務(wù)。