現在很難想像沒有智慧手機的生活,因此針對不同設備的網站優化幾乎是所有軟體、網站開發的主要任務。在這種情況下,行動優先設計 (Mobile First Design) 似乎成為最有效的解決方案。

為什麼 Mobile First Design 在網頁設計中如此重要及受歡迎?首先,你需要先了解什麼是響應式網站設計(也就是RWD)。我們發現非常多的設計師、客戶都搞混了這兩個詞的意思,甚至認為兩者是指同一件事

10分鐘了解 Mobile First Design 及 RWD 的差異

什麼是響應式網頁設計(Responsive Web Design)?

響應式設計是基於創建一種靈活佈局的方法,可以完全適應任何螢幕寬度,內容會自動調整大小。也就是網頁在各種設備和螢幕尺寸(從最小到最大的顯示尺寸)上資訊呈現良好,沒有破格或是破圖的狀況。

什麼是行動優先設計(Mobile Firs Design)?

“Mobile first” 顧名思義,就是從手機端開始產品設計,然後擴展其功能,打造平板或桌面版本。由於手機上的螢幕空間有限,UX 設計師必須優先考慮產品最重要的方面,讓設計師能夠專注於其產品的核心功能。

Mobile first Design及 RWD 兩種設計思維是完全不同的

為什麼要做行動優先的設計?

從2015年開始,手機互聯網的使用已經大大的超過了桌機,有報導指出到了 2025 年,大約有 72.5% 的人將僅通過手機上網,這也表示了行動優先設計的用戶體驗的重要性。除此之外,消費者更有可能手機的購物體驗良好並重返企業的網站或是APP。

Credit: Satista

專注於行動優先設計的另一個好處是 Google 的算法有利於行動優先設計的網站,雖然通過搜索引擎獲得的自然流量是大多數公司成功的關鍵因素,但關注 Google 算法的偏好最有利於產品的可發現性。

而根據統計,現在通過智慧手機為產品做廣告的花費比在電視上的花費更多。到 2019 年底,大部分的企業更願意在智慧手機上宣傳產品,而非電視廣告。帶有動態的 Social media 贊助廣告也成為吸引消費者的最流行方式。

行動優先設計也就是內容優先

當 UI/ UX 設計師為行動優先製作設計時,內容絕對是最大關鍵。因為設計師要為他們的用戶提供消費者他們需要的內容,而不需要額外的東西。因為任何雜亂的訊息都可能使手機體驗變得混亂且可能會分散消費者的注意力。

而行動優先設計有螢幕尺寸和帶寬等限制,因此設計師需要考慮優先級別的資訊,而這些嚴格的限制會使設計師刪除一些較無幾緊要的元素,以便專注於最基本的核心資訊。

通常從行動優先設計中刪除的元素會保留在桌機的設計中,這是因為內容取決於使用的​​上下文。手機用戶的需求通常與桌機用戶不同。

Credit: https://maddevs.io/

舉例來說,你更有可能在手機上看到可折疊菜單或是其他一些小資訊,而桌面網站往往具有更多資訊和更更多高清照片。

桌機的網站設計傾向於使用包括廣告、宣傳材料和全尺寸圖像,網頁設計師擁有展示更多細節所需的所有空間,而這些詳細信息可以包括 Blog 文章、最近舉辦的派對活動的圖片、聯繫表單等。而這些資訊在手機瀏覽的設計上通常會被保留成較小的元素或是刪除。

Quick notes: 若你的網站僅有響應式技術並不能解決行動優先設計的問題。你的網站 UI/ UX 設計師應該要在手機上提供不同的體驗及資訊。

行動優先設計的五大原則

Credit: Adobe stock image


1. 直觀的導航: 設計師必須幫助用戶快速有效地解決問題或完成任務,因此在設計用戶流程時請記住這一點。在手機上尋競爭對手的網站時,請找出他們不提供哪些適合移動設備的選項,並將其包含在你的設計中。

2. 內容優先: 你的內容應該簡潔明了,重要的是設計師應該專注於提供用戶正在尋找的內容、減少可能分散他們注意力的資訊。內容的視覺層次應該向用戶解釋重要性的順序,並且易於辨別哪些元素是最重要的,哪些是次要的。標題記得放在第一屏顯示內容預覽,這有助於用戶立即理解和查看內容。將長文案分成許多單句段落也有助於提高頁面的可掃描性。

3. 簡單的設計: 簡單的手機設計是提高內容清晰度的好方法,同時幫助用戶專注於最重要的內容。因此,在設計行動優先設計的網站時,務必只保留真正需要資訊。

4.清楚一致的 CTA: 清楚且一致的 CTA 有助於確保用戶能夠輕鬆找到出口,不這樣做可能會導致有價值的潛在客戶流失和轉化率下降。因此,請確保你的 CTA 容易被搜尋。

5. 網站的加載速度: 根據統計,若用戶體驗的網站性能不佳,79% 的購物者不太可能從該網站再購買。因此你的網站的速度,包括你啟動畫面是非常重要的。完全加載不應該超過三秒鐘,因為如果在這段時間內沒有加載,用戶往往會離開。

tenten.co 新的 landig page

結論

全球越來越多的網路用戶已經從桌機設備轉向手機設備來查找資訊及訪問網站。因此,設計師開發行動優先的設計作為優先事項的網站是有意義的。

請大家千萬不要把響應式設計網站與手機優先設計網站的定義搞錯,因為兩者是完全不相同的東西。

Share this post