隨著(zhù)移動(dòng)設備的不斷興起，響應式設計越來(lái)越受到大眾的喜愛(ài)，站長(cháng)們在搭建網(wǎng)站時(shí)也更加傾向于選擇響應式網(wǎng)站。不過(guò)，大多數站長(cháng)們都認為既然響應式網(wǎng)站可智能根據設備屏幕大小呈現不同的展示效果，那就不用再對移動(dòng)端的網(wǎng)站進(jìn)行手動(dòng)調整了。其實(shí)這種看法是片面的，響應式網(wǎng)站雖然自身具備一定的特質(zhì)，但有時(shí)PC端網(wǎng)站和移動(dòng)端網(wǎng)站也許無(wú)法真正匹配，為了給用戶(hù)提供最佳的瀏覽體驗，在進(jìn)行內容遷移上時(shí)，站長(cháng)們最好稍微做出一些調整。大家可能會(huì )問(wèn)，這要從哪里著(zhù)手？怎樣才能讓移動(dòng)端網(wǎng)站內容呈現最佳狀態(tài)呢？在今天這篇文章中，小飛就帶您一起看看網(wǎng)站遷移到移動(dòng)端的7個(gè)設計技巧，這些技巧可都是基于用戶(hù)在移動(dòng)設備上使用習慣而整理出來(lái)的。

1. 每屏完成一項任務(wù)

當我們將網(wǎng)站上的內容遷移到移動(dòng)設備上時(shí)，盡量安排每個(gè)屏幕完成一項任務(wù)。盡管現在的手機設計越來(lái)越貼近大屏幕，每屏只完成一項任務(wù)也是很有必要的。這是因為，在移動(dòng)設備上，用戶(hù)已經(jīng)習慣了同時(shí)執行多項任務(wù)，也許他們在瀏覽網(wǎng)站的同時(shí)正和朋友聊天（這樣的案例實(shí)在是太多了），這決定了移動(dòng)端網(wǎng)站的界面必須保持簡(jiǎn)單直觀(guān)，否則用戶(hù)無(wú)法快速獲取信息，完成與網(wǎng)站的交互。如何才能做到每屏只完成一項任務(wù)呢？各位站長(cháng)要確保每一個(gè)屏幕上的所有文本、圖片、視頻等元素都是聚焦于一點(diǎn)的，指向于某個(gè)特定任務(wù)的，比如點(diǎn)擊CTA按鈕。這個(gè)技巧聽(tīng)上去可能很簡(jiǎn)單，但操作起來(lái)卻是有很大難度的。

2. 精簡(jiǎn)導航機制

用戶(hù)能否沿著(zhù)我們想要的方向前進(jìn)，點(diǎn)擊特定的按鈕，這都取決于網(wǎng)站導航模式的設計。一般而言，在大屏幕的PC端上，網(wǎng)站的導航菜單可以承載多個(gè)層級、十幾個(gè)或20多個(gè)不同的菜單項；但是在移動(dòng)端上，考慮到屏幕大小的限制，以及用戶(hù)可能的時(shí)間和耐心，導航機制最好清晰明了、足夠精簡(jiǎn)。這意味著(zhù)站長(cháng)們需要確定幾個(gè)核心的導航菜單項，這可以從分析移動(dòng)用戶(hù)的相關(guān)數據著(zhù)手：最受用戶(hù)歡迎的是哪幾個(gè)頁(yè)面？這些頁(yè)面是網(wǎng)站的核心內容所在嗎？站長(cháng)們還希望用戶(hù)點(diǎn)擊哪些內容？解決了上面幾個(gè)問(wèn)題，網(wǎng)站的核心導航條目就基本確立了，這樣一來(lái)精簡(jiǎn)移動(dòng)端導航機制也會(huì )容易得多。

3. 精簡(jiǎn)網(wǎng)站內容

當網(wǎng)站遷移到移動(dòng)端上時(shí)，網(wǎng)站上的內容也需要刪繁就簡(jiǎn)，這不僅能夠讓網(wǎng)站內容更快為用戶(hù)所獲取，還會(huì )方便搜索引擎抓取，提高搜索引擎對網(wǎng)站的好感度。如何做到網(wǎng)站內容的精簡(jiǎn)？舉個(gè)栗子來(lái)說(shuō)，PC端網(wǎng)站的主頁(yè)放置3張大圖作幻燈片用，而移動(dòng)端上可能只需要選擇一張最重要的圖片就好了。還有，在移動(dòng)網(wǎng)站上記得選擇尺寸更加合理的圖片，也要學(xué)會(huì )放棄一些不匹配移動(dòng)端需求的JS動(dòng)效。雖然現在很多移動(dòng)設備的網(wǎng)速或Wifi速度足夠快，但這仍可能存在一些用戶(hù)的網(wǎng)絡(luò )連接比較差，簡(jiǎn)潔清晰的網(wǎng)頁(yè)更易快速加載出來(lái)。

4. 增大文本字號

小屏幕并不意味著(zhù)小文本。換句話(huà)說(shuō)，正是因為屏幕變小了，網(wǎng)站文本的字體字號更應該適當增大，這樣文本內容的可讀性才會(huì )更高，網(wǎng)站的整體閱讀體驗才能有所提升。在移動(dòng)端網(wǎng)站應該使用多大的字體需要各位站長(cháng)根據自身實(shí)際情況確定。不過(guò)，通常來(lái)說(shuō)，移動(dòng)端文本每行的字數應該是PC端的一半。

在移動(dòng)端上設計排版時(shí)要注意的事項還有很多，關(guān)于更多實(shí)用的網(wǎng)站排版技巧可以瀏覽：《讓網(wǎng)頁(yè)文本看上去更舒服，這8個(gè)關(guān)鍵技巧一定要記牢》。

5. 意義清晰的微文案

大家對微文案這個(gè)概念可能有點(diǎn)陌生。舉個(gè)栗子來(lái)說(shuō)，一般“行為引導”按鈕上都是有文字的，這些文字就是微文案的一種。意義清晰的微文案對整個(gè)網(wǎng)站設計的成敗有著(zhù)重要影響，它不僅可以用來(lái)傳遞重要信息，幫助引導用戶(hù)，還可以給網(wǎng)站添加個(gè)性化色彩，讓整個(gè)設計更加出彩。

在移動(dòng)端網(wǎng)站中，微文案需要足夠顯眼，幫助引導用戶(hù)完成操作。下圖就是一個(gè)很好的栗子，在用戶(hù)填寫(xiě)復雜的表單時(shí)，這存在一些文本提示，引導性較強的微文案能夠更好的幫助用戶(hù)一次填寫(xiě)好正確的內容。

6. 移除不必要的特效

在PC端網(wǎng)頁(yè)上，動(dòng)畫(huà)效果和視差滾動(dòng)常會(huì )讓網(wǎng)站看上去極富魅力，但在移動(dòng)端上情況可就大不相同了。當內容遷移到移動(dòng)端網(wǎng)頁(yè)和APP上的時(shí)候，網(wǎng)站的效率和可用性始終是第一需求，用戶(hù)首要需求的是快速無(wú)縫的加載和即點(diǎn)即用的交互。因此，讓網(wǎng)站剝離掉花哨、無(wú)用的動(dòng)效，這更能優(yōu)化用戶(hù)體驗。

另外，懸停動(dòng)效也要去掉。這是因為。用戶(hù)在移動(dòng)網(wǎng)頁(yè)上最主要的交互手段就是上手觸摸，這時(shí)懸停動(dòng)效毫無(wú)用武之地。站長(cháng)們在構建移動(dòng)端體驗時(shí)最好圍繞著(zhù)點(diǎn)擊和滑動(dòng)這兩種交互方式，因為只有它們才能給用戶(hù)正確的反饋。

7. 尺寸根據屏幕大小自動(dòng)匹配

當用戶(hù)通過(guò)移動(dòng)設備登入響應式網(wǎng)站，沒(méi)有什么比加載出來(lái)小尺寸的元素更讓人覺(jué)得沮喪了。設計移動(dòng)網(wǎng)站就是為了讓移動(dòng)用戶(hù)更易訪(fǎng)問(wèn)，注意網(wǎng)站內容元素尺寸大小的調整。而很多時(shí)候，在移動(dòng)端調整元素尺寸只需要重新調整它們的位置就可以完成了：

在PC端橫向排列的元素，可以垂直排列在移動(dòng)端頁(yè)面上；

考慮移動(dòng)用戶(hù)的瀏覽方式，圖片最好被切割為方形，或者和手機屏幕比例相近的形狀；

文本和微文案應該設計的更加簡(jiǎn)明直觀(guān)

導航可以不用沿用桌面端的導航模式，可以采用側邊欄或者底部導航等更適合移動(dòng)端的方式；

CTA按鈕可以設計地更為醒目，甚至擴展到整屏

所有的按鈕或者可點(diǎn)擊的元素都按照用戶(hù)的手持方式，放到手指最易于觸發(fā)的位置