随着移動設備的(Of)不(No)斷興起，響應式設計越來越受到大(Big)衆的(Of)喜愛，站長們在(Exist)搭建網站時(Hour)也更加傾向于(At)選擇響應式網站。不(No)過，大(Big)多數站長們都認爲(For)既然響應式網站可智能根據設備屏幕大(Big)小呈現不(No)同的(Of)展示效果，那就不(No)用(Use)再對移動端的(Of)網站進行手動調整了(Got it)。其實這(This)種看法是(Yes)片面的(Of)，響應式網站雖然自身具備一(One)定的(Of)特質，但有時(Hour)PC端網站和(And)移動端網站也許無法真正匹配，爲(For)了(Got it)給用(Use)戶提供最佳的(Of)浏覽體驗，在(Exist)進行内容遷移上(Superior)時(Hour)，站長們最好稍微做出(Out)一(One)些調整。大(Big)家可能會問，這(This)要(Want)從哪裏着手？怎樣才能讓移動端網站内容呈現最佳狀态呢？在(Exist)今天這(This)篇文章中，小飛就帶您一(One)起看看網站遷移到移動端的(Of)7個(Indivual)設計技巧，這(This)些技巧可都是(Yes)基于(At)用(Use)戶在(Exist)移動設備上(Superior)使用(Use)習慣而整理出(Out)來的(Of)。

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

當我們将網站上(Superior)的(Of)内容遷移到移動設備上(Superior)時(Hour)，盡量安排每個(Indivual)屏幕完成一(One)項任務。盡管現在(Exist)的(Of)手機設計越來越貼近大(Big)屏幕，每屏隻完成一(One)項任務也是(Yes)很有必要(Want)的(Of)。這(This)是(Yes)因爲(For)，在(Exist)移動設備上(Superior)，用(Use)戶已經習慣了(Got it)同時(Hour)執行多項任務，也許他(He)們在(Exist)浏覽網站的(Of)同時(Hour)正和(And)朋友聊天（這(This)樣的(Of)案例實在(Exist)是(Yes)太多了(Got it)），這(This)決定了(Got it)移動端網站的(Of)界面必須保持簡單直觀，否則用(Use)戶無法快速獲取信息，完成與網站的(Of)交互。如何才能做到每屏隻完成一(One)項任務呢？各位站長要(Want)确保每一(One)個(Indivual)屏幕上(Superior)的(Of)所有文本、圖片、視頻等元素都是(Yes)聚焦于(At)一(One)點的(Of)，指向于(At)某個(Indivual)特定任務的(Of)，比如點擊CTA按鈕。這(This)個(Indivual)技巧聽上(Superior)去可能很簡單，但操作(Do)起來卻是(Yes)有很大(Big)難度的(Of)。

2. 精簡導航機制

用(Use)戶能否沿着我們想要(Want)的(Of)方向前進，點擊特定的(Of)按鈕，這(This)都取決于(At)網站導航模式的(Of)設計。一(One)般而言，在(Exist)大(Big)屏幕的(Of)PC端上(Superior)，網站的(Of)導航菜單可以(By)承載多個(Indivual)層級、十幾個(Indivual)或20多個(Indivual)不(No)同的(Of)菜單項；但是(Yes)在(Exist)移動端上(Superior)，考慮到屏幕大(Big)小的(Of)限制，以(By)及用(Use)戶可能的(Of)時(Hour)間和(And)耐心，導航機制最好清晰明了(Got it)、足夠精簡。這(This)意味着站長們需要(Want)确定幾個(Indivual)核心的(Of)導航菜單項，這(This)可以(By)從分析移動用(Use)戶的(Of)相關數據着手：最受用(Use)戶歡迎的(Of)是(Yes)哪幾個(Indivual)頁面？這(This)些頁面是(Yes)網站的(Of)核心内容所在(Exist)嗎？站長們還希望用(Use)戶點擊哪些内容？解決了(Got it)上(Superior)面幾個(Indivual)問題，網站的(Of)核心導航條目就基本确立了(Got it)，這(This)樣一(One)來精簡移動端導航機制也會容易得多。

3. 精簡網站内容

當網站遷移到移動端上(Superior)時(Hour)，網站上(Superior)的(Of)内容也需要(Want)删繁就簡，這(This)不(No)僅能夠讓網站内容更快爲(For)用(Use)戶所獲取，還會方便搜索引擎抓取，提高搜索引擎對網站的(Of)好感度。如何做到網站内容的(Of)精簡？舉個(Indivual)栗子來說，PC端網站的(Of)主頁放置3張大(Big)圖作(Do)幻燈片用(Use)，而移動端上(Superior)可能隻需要(Want)選擇一(One)張最重要(Want)的(Of)圖片就好了(Got it)。還有，在(Exist)移動網站上(Superior)記得選擇尺寸更加合理的(Of)圖片，也要(Want)學會放棄一(One)些不(No)匹配移動端需求的(Of)JS動效。雖然現在(Exist)很多移動設備的(Of)網速或Wifi速度足夠快，但這(This)仍可能存在(Exist)一(One)些用(Use)戶的(Of)網絡連接比較差，簡潔清晰的(Of)網頁更易快速加載出(Out)來。

4. 增大(Big)文本字号

小屏幕并不(No)意味着小文本。換句話說，正是(Yes)因爲(For)屏幕變小了(Got it)，網站文本的(Of)字體字号更應該适當增大(Big)，這(This)樣文本内容的(Of)可讀性才會更高，網站的(Of)整體閱讀體驗才能有所提升。在(Exist)移動端網站應該使用(Use)多大(Big)的(Of)字體需要(Want)各位站長根據自身實際情況确定。不(No)過，通常來說，移動端文本每行的(Of)字數應該是(Yes)PC端的(Of)一(One)半。

在(Exist)移動端上(Superior)設計排版時(Hour)要(Want)注意的(Of)事項還有很多，關于(At)更多實用(Use)的(Of)網站排版技巧可以(By)浏覽：《讓網頁文本看上(Superior)去更舒服，這(This)8個(Indivual)關鍵技巧一(One)定要(Want)記牢》。

5. 意義清晰的(Of)微文案

大(Big)家對微文案這(This)個(Indivual)概念可能有點陌生。舉個(Indivual)栗子來說，一(One)般“行爲(For)引導”按鈕上(Superior)都是(Yes)有文字的(Of)，這(This)些文字就是(Yes)微文案的(Of)一(One)種。意義清晰的(Of)微文案對整個(Indivual)網站設計的(Of)成敗有着重要(Want)影響，它不(No)僅可以(By)用(Use)來傳遞重要(Want)信息，幫助引導用(Use)戶，還可以(By)給網站添加個(Indivual)性化色彩，讓整個(Indivual)設計更加出(Out)彩。

在(Exist)移動端網站中，微文案需要(Want)足夠顯眼，幫助引導用(Use)戶完成操作(Do)。下圖就是(Yes)一(One)個(Indivual)很好的(Of)栗子，在(Exist)用(Use)戶填寫複雜的(Of)表單時(Hour)，這(This)存在(Exist)一(One)些文本提示，引導性較強的(Of)微文案能夠更好的(Of)幫助用(Use)戶一(One)次填寫好正确的(Of)内容。

6. 移除不(No)必要(Want)的(Of)特效

在(Exist)PC端網頁上(Superior)，動畫效果和(And)視差滾動常會讓網站看上(Superior)去極富魅力，但在(Exist)移動端上(Superior)情況可就大(Big)不(No)相同了(Got it)。當内容遷移到移動端網頁和(And)APP上(Superior)的(Of)時(Hour)候，網站的(Of)效率和(And)可用(Use)性始終是(Yes)第一(One)需求，用(Use)戶首要(Want)需求的(Of)是(Yes)快速無縫的(Of)加載和(And)即點即用(Use)的(Of)交互。因此，讓網站剝離掉花哨、無用(Use)的(Of)動效，這(This)更能優化用(Use)戶體驗。

另外，懸停動效也要(Want)去掉。這(This)是(Yes)因爲(For)。用(Use)戶在(Exist)移動網頁上(Superior)最主要(Want)的(Of)交互手段就是(Yes)上(Superior)手觸摸，這(This)時(Hour)懸停動效毫無用(Use)武之地。站長們在(Exist)構建移動端體驗時(Hour)最好圍繞着點擊和(And)滑動這(This)兩種交互方式，因爲(For)隻有它們才能給用(Use)戶正确的(Of)反饋。

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

當用(Use)戶通過移動設備登入響應式網站，沒有什麽比加載出(Out)來小尺寸的(Of)元素更讓人(People)覺得沮喪了(Got it)。設計移動網站就是(Yes)爲(For)了(Got it)讓移動用(Use)戶更易訪問，注意網站内容元素尺寸大(Big)小的(Of)調整。而很多時(Hour)候，在(Exist)移動端調整元素尺寸隻需要(Want)重新調整它們的(Of)位置就可以(By)完成了(Got it)：

在(Exist)PC端橫向排列的(Of)元素，可以(By)垂直排列在(Exist)移動端頁面上(Superior)；

考慮移動用(Use)戶的(Of)浏覽方式，圖片最好被切割爲(For)方形，或者和(And)手機屏幕比例相近的(Of)形狀；

文本和(And)微文案應該設計的(Of)更加簡明直觀

導航可以(By)不(No)用(Use)沿用(Use)桌面端的(Of)導航模式，可以(By)采用(Use)側邊欄或者底部導航等更适合移動端的(Of)方式；

CTA按鈕可以(By)設計地更爲(For)醒目，甚至擴展到整屏

所有的(Of)按鈕或者可點擊的(Of)元素都按照用(Use)戶的(Of)手持方式，放到手指最易于(At)觸發的(Of)位置