設計適合行動裝置網站的12個技巧

行動友好的網頁設計不僅僅是將桌面版本壓縮到小螢幕上。使網站響應式只能部分滿足行動用戶的需求。一些基本的設計功能必須融入一個真正適合行動裝置的網站。以下是為行動裝置設計響應式網站時需要考慮的關鍵點。

使用大而清晰的字體

字體大小必須足夠大，以便人們在桌上型電腦和行動裝置上都能輕鬆閱讀。14像素的字體大小通常最適合桌面用戶。但是，即使是14像素的字體也可能難以在小型行動裝置螢幕上閱讀。因此，您可能需要將行動裝置的字體大小增加到16像素或更多。

字體必須是品牌的。但是，最好選擇在小螢幕上乾淨易讀的響應式字體。實驗字體可能在桌面的大螢幕上可讀。但是，當縮小尺寸以適應行動裝置螢幕時，某些字體實際上變得不可讀。因此，最好在各種設備上測試字體，以確保無論螢幕大小如何，一切看起來都正確。並且不要忘記檢查字體在粗體或斜體時的外觀。

不要假設行動用戶會使用橫向

您可能認為用戶會水平握住手機來查看網站。然而，調查發現這不是真的。事實上，據估計，多達90%的人垂直拿著手機。即使該站點被證明難以使用，他們也不會切換到以橫向模式查看站點。因此，最好在橫向和縱向模式下測試易用性。

儘量減少所需的打字量

對於某些人來說，在手機上打字並不容易。因此，避免要求輸入太多訊息。請記住，有些人手指粗，手機小！您可以使用下拉選單減少打字的需要。最好避免向用戶詢問不必要或冗長的訊息。

避免大標題和長標題

如上所述，較大的字體在行動裝置上更清晰。但是，您可以做得太大，尤其是頭條新聞。如果標題的字體太大，您可能會發現行動螢幕的寬度只能容納一兩個字。如果是這種情況，標題可能會占據螢幕的大部分。過長的標題也會造成同樣的問題。

空間連結

在行動裝置上打字並不是唯一具有挑戰性的事情。試圖點擊放置得太近的可點擊元素也可能令人沮喪。因此，儘量避免將超連結和按鈕放在一起。

使文本從背景中脫穎而出

當行動裝置的字體按比例縮小時，它們的閱讀難度更大。因此，當在行動裝置上查看網站時，文本和背景之間的對比更為重要。例如，白色背景上的灰色字體可能在較大的桌面螢幕上可讀。但是，當針對較小的行動螢幕按比例縮小時，對比度可能不足以使文本清晰易讀。

空白仍然至關重要

行動裝置顯示文本的空間有限。即便如此，最好不要用完整的文本塊填滿整個螢幕。實際上，應該使用空格來分隔文本，就像在網站的桌面版本上一樣。但是，行動裝置上的空間會按比例縮小。空白也有助於解決在行動裝置上選擇可點擊對象的一些困難。

剝離內容

在行動裝置上的小空間內獲取關鍵訊息至關重要。因此，通常最好剝離內容並在摺疊上方獲取重要訊息。如果用戶可以看到摺疊下方還有更多內容可供閱讀，這也很有幫助。例如，在螢幕底部顯示部分標題會鼓勵人們向下滾動。

考慮按鈕大小和位置

用滑鼠很容易點擊的按鈕可能很難用手指按下。因此，在設計適合行動裝置的網站時，請同時考慮按鈕的位置和大小。

當人們使用行動裝置時，他們傾向於用拇指點擊按鈕。因此，將按鈕放置在不需要人們改變手部位置即可按下的位置。按鈕通常也需要在行動螢幕上更加突出。如果可點擊控制項太小或太靠近，則選擇正確的選項可能會很棘手。

消除彈出窗口

彈出窗口在桌面網站上非常有效。使用滑鼠關閉彈出窗口相對簡單。但是，在行動裝置上，彈出窗口可能會占據整個螢幕。找到關閉選項可能具有挑戰性。因此，最好消除網站行動版本上的彈出窗口。

確保圖像和CSS被壓縮

人們通常在旅途中使用行動裝置。因此，頁面加載速度比在桌面上更重要。您可以採取的任何措施來減少頁面加載時間，都將改善行動裝置上的用戶體驗。降低頁面加載速度的方法之一是壓縮CSS（層疊樣式表）程式碼和高解析度圖像。壓縮圖像和CSS使它們加載速度更快，但不會對功能或品質產生負面影響。

結論

行動友好不再是一個很好的選擇；它必須從一開始就集成到網站的設計中。這意味著要做的不僅僅是縮放網站以適應較小的螢幕。這也意味著要考慮內容的佈局、連結和按鈕的位置以及排版。