隨着移動裝置的不斷興起,響應式設計越來越受到大眾的喜愛,企業在選擇建站時也更加傾向於選擇響應式網站。不過,很多人都認為既然響應式網站可智慧根據裝置螢幕大小呈現不同的展示效果,那就不用再對移動端的網站進行手動調整了。其實這種看法是片面的,響應式網站雖然自身具備一定的特質,但有時 PC 端網站和移動端網站也許無法真正匹配,那怎麼給多用户提供最佳的瀏覽體驗呢,大家可能會有疑問。在今天這篇文章中,小編就帶您一起看看響應式網站 6 個設計技巧,這些技巧可都是基於多用户在移動裝置上使用習慣而整理出來的。 1. 每屏完成一項任務當我們將網站上的內容遷移到移動裝置上時,儘量安排每個螢幕完成一項任務。儘管現在的手機設計越來越貼近大螢幕,每屏只完成一項任務也是很有必要的。這是因為,在移動裝置上,多用户已經習慣了同時執行多項任務,也許他們在瀏覽網站的同時正和朋友聊天,這決定了移動端網站的介面必須保持簡單直觀,否則多用户無法快速獲取資訊,完成與網站的互動。如何才能做到每屏只完成一項任務呢? 各位站羣站長要確保每一個螢幕上的所有文字、圖片、視訊等元素都是聚焦於一點的,指向於某個特定任務的,比如點選 CTA 按鈕。這個技巧聽上去可能很簡單,但操作起來卻是有很大難度的。 2. 精簡導航機制多用户能否沿着我們想要的方向前進,點選特定的按鈕,這都取決於網站導航模式的設計。一般而言,在大螢幕的 PC 端上,網站的導航選單可以承載多個層級、十幾個或 20 多個不同的選單項; 但是在移動端上,考慮到螢幕大小的限制,以及多用户可能的時間和耐心,導航機制最好清晰明瞭、足夠精簡。這意味着站羣站長們需要確定幾個核心的導航選單項,這可以從分析移動多用户的相關資料着手:最受多用户歡迎的是哪幾個頁面? 這些頁面是網站的核心內容所在嗎? 站羣站長們還希望多用户點選哪些內容? 解決了上面幾個問題,網站的核心導航條目就基本確立了,這樣一來精簡移動端導航機制也會容易得多。 3. 精簡網站內容當網站遷移到移動端上時,網站上的內容也需要刪繁就簡,這不僅能夠讓網站內容更快為多用户所獲取,還會方便搜索引擎抓取,提高搜索引擎對網站的好感度。如何做到網站內容的精簡? 舉個栗子來説,PC 端網站的主頁放置 3 張大圖作幻燈片用,而移動端上可能只需要選擇一張最重要的圖片就好了。還有,在移動網站上記得選擇尺寸更加合理的圖片,也要學會放棄一些不匹配移動端需求的 JS 動效。雖然現在很多移動裝置的網速或 Wifi 速度足夠快,但這仍可能存在一些多用户的網絡連線比較差,簡潔清晰的網頁更易快速載入出來。 4. 增大文字字號小螢幕並不意味着小文字。換句話説,正是因為螢幕變小了,網站文字的字型字號更應該適當增大,這樣文字內容的可讀性才會更高,網站的整體閲讀體驗才能有所提升。在移動端網站應該使用多大的字型需要各位站羣站長根據自身實際情況確定。不過,通常來説,移動端文字每行的字數應該是 PC 端的一半。 5. 移除不必要的特效在 PC 端網頁上,動畫效果和視差滾動常會讓網站看上去極富魅力,但在移動端上情況可就大不相同了。當內容遷移到移動端網頁和 WordPress APP 上的時候,網站的效率和可用性始終是第一需求,多用户首要需求的是快速無縫的載入和即點即用的互動。因此,讓網站剝離掉花哨、無用的動效,這更能優化多用户體驗。 6. 尺寸根據螢幕大小自動匹配當多用户通過移動裝置登入響應式網站,沒有什麼比載入出來小尺寸的元素更讓人覺得沮喪了。設計移動網站就是為了讓移動多用户更易訪問,注意網站內容元素尺寸大小的調整。