淺談響應式網頁設計構建高校門戶網站的(of)設計要(want)素

1響應式網頁的(of)概念

響應式網頁設計(Ｒesponsive Website Design)的(of)概念是(yes)有Ethan Marcotte在(exist)2010年5月所提出(out)。通俗的(of)講，就是(yes)一(one)個(indivual)網站可以(by)兼容不(No)同的(of)終端，無論我(I)們(them)的(of)用(use)戶使用(use)的(of)是(yes)筆記本、平闆還是(yes)手機，我(I)們(them)的(of)頁面都可以(by)自動切換分辨率，圖片的(of)尺寸，文字的(of)大(big)小以(by)及相關的(of)腳本功能，用(use)來(Come)适應不(No)同的(of)設備。

2響應式設計對于(At)高校門戶網站的(of)設計需求

2．1校内學生(born)的(of)用(use)戶體驗需求

随着高校的(of)不(No)斷發展，學校裏的(of)設施建設不(No)斷的(of)豐富完善。現在(exist)的(of)高校學生(born)并不(No)像以(by)前那樣寝室－教室－圖書館“三點一(one)線”式的(of)生(born)活方式了(Got it)，從前的(of)“宅男宅女”們(them)現在(exist)更樂意走出(out)寝室，到(arrive)校園的(of)咖啡廳，實驗室，學習交流空間，休閑娛樂地(land)點等各式各樣的(of)場所豐富自己的(of)校園學習生(born)活。如此一(one)來(Come)，使用(use)電腦的(of)概率大(big)大(big)地(land)減少，平闆設備的(of)使用(use)率大(big)爲(for)提高。高校的(of)學生(born)可能随時(hour)需要(want)登陸學校的(of)門戶網站去獲取學校新聞、學習資源信息、學校活動信息、學生(born)服務資訊等重要(want)信息。響應式的(of)網頁設計能夠很好的(of)解決傳統網頁“操作(do)繁瑣、重點不(No)突出(out)”的(of)弊端，在(exist)給予良好的(of)視覺體驗的(of)同時(hour)，可以(by)幫助學生(born)“更清晰，更方便，更準确”的(of)操作(do)用(use)戶體驗。

2．2高校教師的(of)用(use)戶體驗

需求高校官網中的(of)教務系統、教學管理系統、科研系統、薪酬福利、校園服務、教育心理資訊等闆塊與教師的(of)生(born)活和(and)教學息息相關，學校官網已經成爲(for)高校教師教學生(born)活中密不(No)可分的(of)一(one)部分。響應式的(of)網頁設計不(No)但可以(by)在(exist)移動設備中提高視覺效果和(and)觀看質量，還能通過其流動式的(of)彈性布局，給予教師在(exist)網頁上(superior)進行教學辦公的(of)一(one)體化操作(do)。

3響應式設計構建高校門戶網站的(of)設計要(want)素

3．1頁面的(of)布局設計

高校門戶網站的(of)設計需要(want)符合高校的(of)形象塑造，其内在(exist)設計需要(want)使代碼和(and)功能可以(by)靈活的(of)适應響應式設計的(of)需求。由于(At)PC端的(of)屏幕窗口大(big)，移動端的(of)移動窗口小。因此，高校門戶網站的(of)響應式設計不(No)是(yes)在(exist)于(At)對PC端的(of)網頁進行删減或壓縮，而是(yes)在(exist)UI界面的(of)布局上(superior)進行層次化、闆塊化的(of)移動轉變。

在(exist)網頁的(of)頭部，傳統的(of)PC端網頁更傾向于(At)橫向來(Come)設計打造導航。響應式設計針對于(At)網頁的(of)導航可進行樓層式的(of)顯示處理，我(I)們(them)得創建能夠輕易壓縮以(by)适應縱向規格的(of)導航，這(this)使原本PC端長長的(of)導航欄，在(exist)移動端中自動變小或濃縮至頂部，甚至是(yes)濃縮爲(for)“漢堡包”式的(of)按鈕點擊進行“pop up”的(of)跳出(out)式顯示以(by)及設置下拉菜單。

在(exist)網頁的(of)body部分的(of)闆塊内容，分别以(by)列爲(for)闆塊。随着屏幕的(of)變小，每一(one)列的(of)闆塊在(exist)網頁的(of)顯示中依次自動進入下一(one)欄進行顯示，故以(by)三列變兩列，兩列變一(one)列。使得每一(one)個(indivual)網頁中的(of)闆塊在(exist)移動端進行自上(superior)而下的(of)依次布局。

3．2頁面的(of)設計模式

顯示網頁的(of)設備與網頁本身的(of)内容是(yes)構建響應式設計的(of)重點。基于(At)設備和(and)内容優先，是(yes)響應式設計的(of)兩種基本模式。由于(At)之前的(of)傳統網頁基本上(superior)都是(yes)在(exist)PC端進行顯示，因此，傳統網頁中基本上(superior)都是(yes)采用(use)基于(At)設備的(of)模式，因爲(for)當時(hour)屏幕種類較少，且有标準屏幕之說。設計師無需考慮顯示網頁的(of)寬度變化，所有的(of)網頁頁面都是(yes)固定的(of)寬度，顯示在(exist)PC端的(of)屏幕内。如今，标準屏幕已經不(No)複存在(exist)。因此，内容優先是(yes)一(one)種不(No)錯的(of)選擇。在(exist)構建江西省高校門戶網頁中，采用(use)内容優先這(this)一(one)模式，對于(At)提高用(use)戶體驗來(Come)說，是(yes)極其有利的(of)。

3．3流式布局

爲(for)了(Got it)實現頁面的(of)靈活設計，匹配網頁在(exist)不(No)同的(of)視口中完美顯示，需要(want)使用(use)靈活的(of)百分比布局，其也被稱之爲(for)“流式布局”。這(this)樣才能讓網站頁面根據視口大(big)小在(exist)不(No)同的(of)設備或者是(yes)顯示空間之間靈活伸縮修正樣式。而“流式布局”的(of)構建就是(yes)将固定像素寬度(width)轉換對應的(of)百分比寬度。由于(At)網頁在(exist)PC端中的(of)顯示空間很大(big)，移動端中的(of)顯示相對較小。因此，網頁的(of)文字和(and)圖片在(exist)響應式頁面中的(of)顯示會根據屏幕大(big)小的(of)不(No)同進行相對應的(of)顯示變化。由于(At)移動端的(of)屏幕窗口較小，圖片和(and)文字在(exist)傳統PC端“大(big)融合”式的(of)布局，在(exist)移動端會在(exist)單獨的(of)一(one)欄中以(by)“鋪滿”的(of)方式顯現出(out)來(Come)，在(exist)CSS中針對于(At)img的(of)max寬度設置爲(for)100%這(this)可以(by)實現網頁的(of)圖片随着流動布局相應縮放。

3．4圖片與文字的(of)選擇和(and)處理

網頁的(of)内容主要(want)是(yes)以(by)文字、圖片、視頻三種形式展示的(of)。圖片和(and)文字在(exist)網頁設計中是(yes)至關重要(want)的(of)，由于(At)響應式設計需要(want)匹配不(No)同的(of)屏幕設備。因此，與傳統的(of)僅展現在(exist)PC端的(of)傳統網頁設計不(No)同，在(exist)響應式設計網頁中，随着移動端設備屏幕的(of)變小，圖片和(and)文字也會相應的(of)進行等比縮放，變得更小。圖片與文字會随着屏幕的(of)變化而改變他(he)們(them)的(of)形狀與展現方式。在(exist)文字的(of)選擇中，我(I)們(them)得選用(use)不(No)同标題尺寸和(and)多種文字大(big)小。在(exist)圖片的(of)選擇中，确保窗口尺寸變化時(hour)，大(big)幅攝影圖片不(No)會有任何裁切，保證圖片的(of)加載速度快以(by)及清晰的(of)分辨率。

4結束語

随着響應式網頁設計的(of)興起，主流網站都已經借助響應式進行網頁的(of)設計。面對高校門戶網站這(this)一(one)特殊的(of)設計對象，我(I)們(them)必須對症下藥，具有針對性的(of)去解決一(one)些在(exist)響應式網頁中設計上(superior)的(of)不(No)足。俗話說:“文無第一(one)，武無第二”，響應式的(of)網頁在(exist)設計上(superior)的(of)要(want)求會越來(Come)越高，咱們(them)必須在(exist)網頁設計中不(No)斷的(of)總結經驗，歸納要(want)素，才能使響應式的(of)網頁設計越來(Come)越優化。