首頁 部落格 設計適合行動裝置網站的12個技巧
Jericho
Dec 27, 2023
網路、科技、滿滿的新知在浩瀚的網路上,想要得到他嗎?沒問題,永遠抱持著謙卑的態度,自然會找到方案!

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

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

 

使用大而清晰的字體

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

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

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

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

儘量減少所需的打字量

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

避免大標題和長標題

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

空間連結

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

使文本從背景中脫穎而出

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

空白仍然至關重要

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

剝離內容

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

考慮按鈕大小和位置

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

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

消除彈出窗口

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

確保圖像和CSS被壓縮

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

結論

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

文章標籤
行動裝置網站
手機網頁設計要注意的8個問題
手機網頁設計要注意的8個問題
Jericho
Jericho
Mar 01, 2024
無障礙網站設計的重要性與趨勢
無障礙網站設計的重要性與趨勢
Jericho
Jericho
Feb 28, 2024
選擇一間專業的網頁設計公司非常重要
選擇一間專業的網頁設計公司非常重要
Jericho
Jericho
Feb 21, 2024