北京免費網站設計（設計真正適合移動設備的網站的12個技巧）

一些網站是使用移動優先開發流程開發的。這種設計和開發網站的方法將移動設備用戶的需求放在第1位。然而，盡管使用移動設備的人數不斷增加，但一些網站仍然無法在移動設備上提供優質的用戶體驗。當然，移動友好的網頁設計不僅僅是將桌面版本壓縮到小屏幕上。使網站響應式隻能部分滿足移動用戶的需求。一些基本的設計功能必須融入一個真正適合移動設備的網站。以下是為移動設備設計響應式網站時需要考慮的關鍵點。使用大而清晰的字體字體大小必須足夠大，以便人們在臺式機和移動設備上都能輕松閱讀。14 像素的字體大小通常最適合桌面用戶。但是，即使是 14 像素的字體也可能難以在小型移動設備屏幕上閱讀。因此，您可能需要將移動設備的字體大小增加到 16 像素或更多。字體必須是易讀的。但是，最好選擇在小屏幕上幹凈易讀的響應式字體。實驗字體可能在桌面的大屏幕上可讀。但是，當縮小尺寸以適應移動設備屏幕時，某些字體實際上變得不可讀。因此，最好在各種設備上測試字體，以確保無論屏幕大小如何，一切看起來都正確。並且不要忘記檢查字體在粗體或斜體時的外觀。不要假設移動用戶會使用橫向您可能認為用戶會水平握住手機來查看網站。然而，調查發現這不是真的。事實上，據估計，多達 90% 的人垂直拿著手機。即使該站點被證明難以使用，他們也不會切換到以橫向模式查看站點。因此，最好在橫向和縱向模式下測試易用性。盡量減少所需的打字量對於某些人來說，在手機上打字並不容易。因此，避免要求輸入太多信息。請記住，有些人手指粗，手機小！您可以使用下拉菜單減少打字的需要。最好避免向用戶詢問不必要或冗長的信息。避免大標題和長標題如上所述，較大的字體在移動設備上更清晰。但是，您可以做得太大，尤其是頭條新聞。如果標題的字體太大，您可能會發現移動屏幕的寬度隻能容納一兩個字。如果是這種情況，標題可能會占據屏幕的大部分。過長的標題也會造成同樣的問題。空間鏈接在移動設備上打字並不是唯一具有挑戰性的事情。嘗試點擊放置得太近的可點擊元素也可能令人沮喪。因此，盡量避免將超鏈接和按鈕放在一起。使文本從背景中脫穎而出當移動設備的字體按比例縮小時，它們的閱讀難度更大。因此，當在移動設備上查看網站時，文本和背景之間的對比更為重要。例如，白色背景上的灰色字體可能在較大的桌面屏幕上可讀。但是，當針對較小的移動屏幕按比例縮小時，對比度可能不足以使文本清晰易讀。空白仍然至關重要移動設備顯示文本的空間有限。即便如此，最好不要用完整的文本塊填滿整個屏幕。實際上，應該使用空格來分隔文本，就像在網站的桌面版本上一樣。但是，移動設備上的空間會按比例縮小。空白也有助於解決在移動設備上選擇可點擊對象的一些困難。剝離回內容在移動設備上的小空間內獲取關鍵信息至關重要。因此，通常最好剝離內容並在折疊上方獲取重要信息。如果用戶可以在折疊下方看到更多內容，這也很有幫助。例如，在屏幕底部顯示部分標題會鼓勵人們向下滾動。考慮按鈕大小和位置用鼠標很容易點擊的按鈕可能很難用手指按下。因此，在設計適合移動設備的網站時，請同時考慮按鈕的位置和大小。當人們使用移動設備時，他們傾向於用拇指點擊按鈕。因此，將按鈕放置在不需要人們改變手部位置即可按下的位置。按鈕通常也需要在移動屏幕上更加突出。如果可點擊控件太小或太靠近，則選擇正確的選項可能會很棘手。避免在表單上使用自動更正如前所述，在移動設備上準確打字可能具有挑戰性。因此，人們經常鍵入並在鍵入時快速糾正錯誤。但是自動更正可能會替換整個拼寫錯誤的單詞，從而使更正更加耗時。並且自動更正通常會用更常見的術語替換地址等內容，從而導致需要更多更正。因此，通常最好在網站的移動版本上禁用自動更正功能。消除彈出窗口彈出窗口在桌面網站上非常有效。使用鼠標關閉彈出窗口相對簡單。但是，在移動設備上，彈出窗口可能會占據整個屏幕。找到關閉選項可能具有挑戰性。因此，最好消除網站移動版本上的彈出窗口。確保圖像和 CSS 被壓縮人們通常在旅途中使用移動設備。因此，頁面加載速度比在桌面上更重要。您可以采取的任何措施來減少頁面加載時間，都將改善移動設備上的用戶體驗。降低頁面加載速度的方法之一是壓縮 CSS（層疊樣式表）代碼和高分辨率圖像。壓縮圖像和 CSS 使它們加載速度更快，但不會對功能或質量產生負面影響。結論移動友好不再是一個很好的選擇；它必須從一開始就集成到網站的設計中。這意味著要做的不僅僅是縮放網站以適應較小的屏幕。這也意味著要考慮內容的佈局、鏈接和按鈕的位置以及排版。未能融入基本移動設計原則的網站將失去不斷增長的移動流量。但希望以上技巧能幫助您設計出對移動設備用戶和桌面用戶一樣容易使用的網站。