你有沒有嘗試在電腦上找到一個很酷的網站，想分享給朋友（或自己），用手機打開之後樣子卻變了，原本絢麗的效果消失，甚至變得難用，這樣的情況，與我們今天要讨論「移動端優先網站」的概念，有很大的關系。

在進入移動端優先網站主題之前，讓我們先來了解一下網站制作的兩種概念：

漸進，顧名思義就是漸漸地。

在網頁設計中則是指「設計師在制作網時以『小屏幕為優先』考量，随着銀幕尺寸增加，加上其他功能與動畫效果等，如此一來，所有的效果、功能都是建築在連最小屏幕設備都可以順暢操作的用戶體驗之上」。

移動端優先網站就是運用了漸進式設計的思維。

與漸進式剛好相反，以「大屏幕适應性」為優先。

設計師會先将大屏幕功能完成，再依據屏幕大小，調整呈現方式。

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

移動端優先網站是采取漸進式的設計邏輯，為創造更好的用戶體驗，「以移動設備為優先」的網頁設計理念，先将小屏幕UX設定好，再延伸出各種功能與設計。

像是憲法之于行政命令，因憲法（小屏幕用戶體驗）最高性，所有行政命令與暫時性條文（其他長出來的大屏幕功能）都不得及觸憲法，憲法保障了小屏幕用戶的使用性。

外觀看起來或許有點像，但設計邏輯不一樣。

移動端優先網站使用的漸進式思維，RWD網站則大部分是降級式思維，網頁會根據設備大小自動調正成相應的設計。

根據2022年的調查報告，每人每日平均上網時間有超過50%的是使用移動設備浏覽，或許在看此篇文章的你，就正在使用手機。

2021年開始，搜索引擎把移動設備優先索引列入SEO關鍵因素，意思就是，不管你的網站做得再華美、内容再吸睛，隻要不适合移動設備浏覽，都可能使網頁排名下滑。

疫情的爆發，徹底改變了大衆的消費方式，比起實體出門，生活中許多大小事都能靠手機一隻搞定，抓住移動用戶的心也就等于抓住了商機。

就是在這些因素的夾擊之下，移動端優先網站逐漸進開始受到業内重視。

乍聽之下，移動端優先網站的思維似乎沒什麼缺點，對提升網站排名也相當有幫助，但實際使用上，仍須依照産品或網站的主題、TA以及想說的故事為主，以下讓我們來看一些生活中的案例。

在這個網站的網頁版中，可以看到左右存在很大部分的留白，這是為了在小屏幕時也能适當為畫面留出空白，善用白色作為畫面區隔，讓用戶有喘息的空間。

在移動端優先網站的設計邏輯中，我們會盡量以瀑布式商品頁，或左右橫拉的方式，來代替頁面跳轉，降低頁數，也會将購物流程數字化、步驟化來表現當前所在位置，必免用戶因分心或迷路造成的跳轉。

選單通常不會像一般網站，做超巨大的菜單或蓋闆菜單，而是一個放在左上或右上的小圖标，讓用戶有需要再叫出來。對比明顯、位置顯眼的号召用語是移動端優先網站的一大特色。

在上述案例中，出現了三個不同的網站，雖然這三個網站目的不同，但我們仍能從中歸納出幾點移動端優先網站的制作要領。

網站設計的初衷，應該要能幫助用戶順利達到使用目的，因此在小屏幕UX設計時，應盡可能排除容易使人分心的元素，反之，如果頁面多，可适度增加指向性元素，帶領用戶快速到達目的地。

根據移動網站速度提升建議，載入速度每縮短0.1秒，轉換率就能獲得8%提升，因此，為了提升轉換率與SEO排名，酷炫的動畫設計與高清的照片遇到移動設備時可能就需要妥協。

頁面幹淨除了第一點提到的減少使人分心的元素外，也包括字體适中、頁數越少越好、清楚的動線設定、保持左右留白等。

除了在視覺風格上追求統一，CTA所在位置也必須讓人一目了然，文字簡潔，讓用戶知道，這一步之後，我們将會帶他去到哪裡，按下這個按鈕等于做出什麼樣的決定，避免迷路，降低跳出率。

我們相信，在人們對于小屏幕設備的需求越來越高的未來，移動端優先網站将會成為種網頁設計的主流趨勢。

如果你的網站過于陳舊，需要改版卻沒有方向，移動端優先網站會是一個不錯的切入點，還可以直接聯系浪知潮，我們幫你從網頁設計開始，提供最好的服務。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!