每個設計師都應該遵循的 5 個移動用戶體驗技巧

現在有很多重點是解決移動問題，包括移動性能問題，因為用戶繼續堅持使用較小的設備。

通常，這些問題會在網站啟動後得到解決，此時谷歌搜索控制台的移動可用性報告中開始出現錯誤。 雖然開發團隊通常可以解決此類錯誤，但設計師從一開始就理解和實施移動 UX 最佳實踐會更有效率。

移動速度也是搜索引擎優化的一個重要因素，因此設計師和開發人員必須考慮從動畫到圖像的所有內容將如何影響這些指標。

注重設計元素的間距

間距設計元素不僅僅是創造一個漂亮的視覺流; 這是為了讓所有訪問者（包括移動設備上的訪問者）都易於使用您的網站。

Google Search Console 中一個常見的移動可用性錯誤是“可點擊元素靠得太近”。

這給使用較小設備的訪問者帶來了令人沮喪的體驗，他們在嘗試瀏覽網站時無意中點擊了元素。

從移動用戶體驗設計的角度來看，按鈕和交互式或可點擊元素需要足夠大，並且在設計中放置得足夠遠。

在桌面上，訪問者使用鼠標進行導航，這是一種非常精確的工具，而在移動設備上，大多數用戶使用拇指。 拇指通常比您的小鼠標光標大，並且可能有點笨拙，尤其是當您嘗試在步行或多任務處理時瀏覽網站時。

因此，您需要在按鈕和元素之間設計足夠的空間，以便訪問者不會有令人沮喪的移動體驗。

您還需要考慮可訪問性以及訪問者如何拿著較小的設備。 有些人可能用左手拿著手機或平板電腦，有些人用右手，或者有些人用雙手。 無論如何，網站設計都需要易於瀏覽。

最後，訪問者還使用他們的拇指在設備上滾動並瀏覽網頁，因此您需要確保沒有大的可點擊元素，他們可能會在滾動時無意中點擊。

確保文本和字體的可讀性

除了間距之外，Google Search Console 報告中另一個常見的移動可用性錯誤是“文本太小而無法閱讀”。 雖然開發人員可以調整字體大小的某些方面，但設計團隊可以從一開始就在可讀性方面實施一些 UX 最佳實踐。

首先要選擇一種易於閱讀的字體。 請記住，用戶在使用較小的設備時經常步行或執行多項任務或在戶外，並且他們在嘗試瀏覽您的網站時可能處於不理想的場景中。

根據字體大小創建視覺層次結構是幫助移動用戶快速瀏覽和理解頁面內容的另一種方法。 它還有助於移動或平板設備的標題文本可能換到下一行。 在整個頁面中使用相同的字體和大小可能會導致對頁面含義的混淆。

在您的設計中，您還可以增加文本行之間的行高，以提高頁面的可讀性。

一旦你決定了字體和大小，你還需要考慮顏色對比度。

由於訪客可能在室內或室外或光線不足的情況下，因此遵循背景色和前景色之間的對比度標準非常重要。

這在可訪問性和創建符合 ADA 的網站方面也發揮了作用。 根據 WCAG 2.1 標準，建議普通文本的對比度至少為 4.5:1，大文本的對比度為 3:1。

確保懸停和動畫遵循最佳實踐

當今大多數網頁設計都包含一些微動畫和交互式組件； 這是客戶在重新設計過程中的常見要求。

向網站添加移動通常是設計師和開發人員之間的協作，因為動畫會影響頁面加載時間，如果編碼不當會導致無休止的質量控制。 在設計過程中選擇動畫時，您還需要計劃這些交互是否會在移動設備上發生。

由於性能問題，通常會在移動設備上關閉複雜的動畫和視頻背景，因為它們會減慢網站的加載時間，尤其是對於移動網絡上的訪問者。 自 2018 年以來，這種類型的更改變得越來越普遍，當時移動頁面速度成為谷歌的排名因素之一。

一般來說，動畫和交互應該以微妙的方式使用來支持用戶體驗，並且不應該分散訪問者的注意力。 它也不應該是幫助訪問者完成操作的基本要素。

懸停是另一種常見的設計元素，在移動設備上可能看起來不同。 在桌面上，懸停是指當訪問者將鼠標懸停在對像或圖像上時會更改或顯示文本的對像或圖像。 雖然這在大型設備上效果很好，但請記住，在移動設備上，訪問者不使用鼠標，這意味著訪問者必須點擊才能看到懸停。

因此，如果您有一個框或圖像在懸停時顯示文本，則應確保消息傳遞對訪問者的步驟並不重要。

在討論動畫時，您和您的開發團隊還可以查看 Google 的網絡動畫最佳實踐指南，以避免任何有關 Flash 或過時技術的錯誤。

規劃彈出窗口和第三方元素的位置

關於是否在網站上使用彈出式表單以及是否在移動設備上實現它們一直存在很多爭論。

避免在移動設備上彈出表單的一個論點是訪問者可能更難關閉表單或消息。 自 2017 年 1 月以來，谷歌警告不要使用侵入性插頁式廣告來阻止訪問者看到頁面上的所有內容，因為它們在移動設備上尤其成問題。

您可以在與客戶討論彈出式表單時權衡所有這些元素，並決定表單設計的最佳用戶體驗。

在採用移動設計方法時，考慮如何將元素放置在較小的設備上會很有幫助。 例如，當訪客滾動時，屏幕右側的粘性按鈕可能在桌面上可以正常工作，但這些類型的粘性元素會使移動設備上的視圖空間變得更小。

雖然實時聊天和可訪問性小部件等元素可能會在最後一刻添加，但在網頁設計過程的早期進行規劃有助於避免訪問者界面混亂。

實時聊天已成為一種非常流行的工具，聊天小部件通常位於設計的右下角或左下角。 通過將這些元素包含在設計模型中來提供有關放置這些元素的建議將幫助您預見重疊項目的任何問題。

重新考慮表單設計和佈局

在移動設備或較小的平板電腦上填寫和提交表單對於訪問者來說可能是一項煩人的任務。 這就是為什麼在網站設計中考慮表單的替代選項至關重要的原因。

在創建移動菜單導航時，請考慮在標題中包含“點擊通話”電話號碼，以便訪問者可以輕鬆聯繫到商家。

在設計網站上的所有表單時，桌面和移動設備的最佳做法是盡可能減少表單字段的數量 - 並明確指出什麼是必填字段。

表單移動體驗的一個技巧是設計表單標籤，而不僅僅是在表單字段中使用佔位符文本。 移動設備上的訪問者很容易被其他通知和交互打斷，因此他們可能會在表單完成過程中被打斷並忘記列出的佔位符文本。 提供清晰的表單標籤和錯誤消息對於 ADA 合規性也很重要。

最後，表單在頁面上的位置以及如何通過響應式佈局進行調整至關重要，因為表單位置會影響轉換。

結論

鑑於對移動性能的日益關注，在您設計項目時將上述一些想法付諸實踐將在這些項目啟動時為您節省時間和挫敗感。 是否有其他有助於您的設計流程的移動 UX 技巧？ 在下面發表評論！

下一步：通過有用的在線課程建立您的網頁設計技能！

移動用戶體驗設計只是作為專業網頁設計師必須掌握的眾多事情之一。 雖然並不總是有很多時間可以提高您的技能，但參加在線課程是確保您繼續接受教育的好方法。

本文為網頁設計師提供了一些最佳在線課程的完整列表（+他們的成本），因此您不必花費更多時間搜索所有可用選項！