你有沒有嘗試在電腦上找到一個很酷的網站，想分享給朋友（或自己），用手機打開之後樣子卻變了，原本絢麗的效果消失，甚至變得難用，這樣的情況，與我們今天要討論「行動優先網站」的概念，有很大的關係。
在進入行動優先網站主題之前，讓我們先來了解一下網站製作的兩種概念：
網站製作概念一、漸進式設計
漸進，顧名思義就是漸漸的。
在網頁設計中則是指「設計師在製作網時以『小銀幕為優先』考量，隨著銀幕尺寸增加，加上其他功能與動畫效果等，如此一來，所有的效果、功能都是建築在連最小裝置都可以順暢操作的使用者體驗之上」。
行動優先網站就是運用了漸進式設計的思維。
網站製作概念二、降級式設計
與漸進式剛好相反，以「大銀幕適應性」為優先。
設計師會先將大螢幕功能完成，再依據螢幕大小，調整呈現方式。
這種做法，很容易為了展示將華麗的特效、超高清照片，不小心忽略了小螢幕的UX，絢麗、完整的大螢幕效果，在螢幕變小後，不得不犧牲部分效果或功能，造成重開頭所提到的「小螢幕部分功能消失」的現象。
行動優先是什麼意思？
行動優先網站是採取漸進式的設計邏輯，為創造更好的UX體驗，「以行動裝置為優先」的網頁設計理念，先將小螢幕UX設定好，再延伸出各種功能與設計。
像是憲法之於行政命令，因憲法（小螢幕UX）最高性，所有行政命令與暫時性條文（其他長出來的大螢幕功能）都不得牴觸憲法，憲法保障了小螢幕UX的使用性。
聽起來很像RWD？有什麼不一樣嗎？
外觀看起來或許有點像，但設計邏輯不一樣。
行動優先網站使用的漸進式思維，RWD網站則大部分是降級式思維，網頁會根據裝置大小自動調正成相應的設計。
RWD與AWD是什麼？ 網站主該怎麼選？ | 夏木樂網頁設計
為什麼行動優先網站如此的重要？
行動裝置使用率屢創新高
根據2022年we are socail的網路調查報告，在台灣，每人每日平均上網時間有超過50%的是使用行動裝置瀏覽，或許在看此篇文章的你，就正在使用手機。
影響SEO關鍵因素改變
2021年開始，google把行動裝置優先索引列入SEO關鍵因素，意思就是，不管你的網站做得再華美、內容再吸睛，只要不適合行動裝置瀏覽，都可能使網頁排名下滑。
大眾消費模式改變
疫情的爆發，徹底改變了大眾的消費方式，比起實體出門，生活中許多大小事都能靠手機一只搞定，抓住行動用戶的心也就等於抓住了商機。
就是在這些因素的夾擊之下，行動優先網站逐漸進開始受到業內重視。
乍聽之下，行動優先網站的思維似乎沒什麼缺點，對提升網站排名也相當有幫助，但實際使用上，仍須依照產品或網站的主題、TA以及想說的故事為主，以下讓我們來看一些生活中的案例。
生活中的案例
1.EZTABLE
在這個網站的網頁版中，可以看到左右存在很大部分的留白，這是為了在小螢幕時也能適當為畫面流出空白，善用白色作為畫面區隔，讓使用者有喘息的空間。
2.foodpanda
在行動優先網站的設計邏輯中，我們會盡量以瀑布式商品頁，或左右橫拉的方式，來代替頁面跳轉，降低頁數，也會將購物流程數字化、步驟化來表現當前所在位置，必免使用者因分心或迷路造成的跳轉。
3.awwwards
選單通常不會像一般網站，做超巨大的Megamenu或蓋板Menu，而是一個放在左上或右上的小icon，讓使用者有需要再叫出來。對比明顯、位置顯眼的CTA也是行動優先網站的一大特色。
在上述案例中，出現了三個不同的網站，雖然這三個網站目的不同，但我們仍能從中歸納出幾點行動優先網站的製作要領。
行動優先網站製作要領
1.用戶永遠優先
網站設計的初衷，應該要能幫助用戶順利達到使用目的，因此在小螢幕UX設計時，應盡可能屏除容易使人分心的元素，反之，如果頁面多，可適度增加指向性元素，帶領使用者快速到達目的地。
2.注意網站速度
根據google的行動網站速度提升建議，載入速度每縮短0.1秒，轉換率就能獲得8%提升，因此，為了提升轉換率與SEO排名，酷炫的動畫設計與高清的照片遇到行動裝置時可能就需要妥協。
3.保持頁面乾淨
頁面乾淨除了第一點提到的減少使人分心的元素外，也包括字體適中、頁數越少越好、清楚的動線設定、保持左右留白等。
4.統一且有效的CTA
除了在視覺風格上追求統一，CTA所在位置也必須讓人一目了然，文字簡潔，讓使用者知道，這一步之後，我們將會帶他去到哪裏，按下這個按鈕等於做出什麼樣的決定，避免迷路，降低跳轉率。
總而言之的行動優先網站
大約在2016年，Google首次宣布將啟動行動優先索引計畫，那時掀起了一波關於行動優先網站的討論，此後，隨著Google的SEO政策更新，行動優先的話題漸漸被推上高峰。
我們相信，在人們對於小螢幕裝置的需求越來越高的未來，行動優先網站將會成為種網頁設計的主流趨勢。
如果你的網站過於陳舊，需要改版卻沒有方向，行動優先網站會是一個不錯的切入點，歡迎轉貼此文章，與網頁設計公司討論，或直接聯絡我們，夏木樂，品牌網頁設計專家，讓我們幫你從網頁設計開始，提供最好的服務。
・數據、文獻參考網站：
-https://wearesocial.com/uk/blog/2022/01/digital-2022-another-year-of-bumper-growth-2/
-https://xd.adobe.com/ideas/process/ui-design/what-is-mobile-first-design/
