什麼是行動優先網站? 名詞解析、網站製作概念、網站設計案例

經驗分享

什麼是行動優先網站? 名詞解析、網站製作概念、網站設計案例

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

 

|目錄|

・前導 - 網站製作的兩種概念

・行動優先是誰麼億思?跟RWD網站設計有什麼不一樣? 

・為什麼行動優先網站如此的重要? 

・行動優先網站製作要領

・生活中的案例

・結尾

                                                                                              ・・・・・

在進入行動優先網站主題之前,讓我們先來了解一下網站製作的兩種概念:

網站製作概念一、漸進式設計

漸進,顧名思義就是漸漸的。

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

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

網站製作概念二、降級式設計

與漸進式剛好相反,以「大銀幕適應性」為優先。

設計師會先將大螢幕功能完成,再依據螢幕大小,調整呈現方式。

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

                                                                                              ・・・・・

行動優先是什麼意思?

行動優先網站是採取漸進式的設計邏輯,為創造更好的UX體驗,「以行動裝置為優先」的網頁設計理念,先將小螢幕UX設定好,再延伸出各種功能與設計。

像是憲法之於行政命令,因憲法(小螢幕UX)最高性,所有行政命令與暫時性條文(其他長出來的大螢幕功能)都不得牴觸憲法,憲法保障了小螢幕UX的使用性。

聽起來很像RWD?有什麼不一樣嗎?

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

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

                                                                                              ・・・・・

為什麼行動優先網站如此的重要?

行動裝置使用率屢創新高

根據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://medium.com/@Vincentxia77/what-is-mobile-first-design-why-its-important-how-to-make-it-7d3cf2e29d00

-https://xd.adobe.com/ideas/process/ui-design/what-is-mobile-first-design/

Ask Simular