導語：網(wǎng)頁設計構(gòu)建高校門戶網(wǎng)站設計研究一文來源于網(wǎng)友上傳，不代表本站觀點，若需要原創(chuàng)文章可咨詢客服老師，歡迎參考。

摘要:隨著科學技術(shù)和計算機互聯(lián)網(wǎng)技術(shù)的一步步發(fā)展，為了滿足我們生活中的便利和需要，像平板電腦、手機等新興的電子產(chǎn)品逐漸的普及于我們的日常生活當中。對于廣大的師生群體而言，他們似乎更樂意于使用便攜的移動端設備從網(wǎng)絡中獲取自己所需的學校信息。由于我們傳統(tǒng)的網(wǎng)頁設計都是基于大屏幕的PC端口來設計的，這種設計并不能隨著設備窗口尺寸大小的改變而改變。而響應式網(wǎng)頁的設計可以識別屏幕的大小，自動做出相對應的頁面調(diào)整，實現(xiàn)了一個網(wǎng)站對于多種設備的兼容，越來越多的高校門戶網(wǎng)站在使用響應式網(wǎng)頁設計，為師生帶來更好的用戶體驗。

關(guān)鍵詞:響應式網(wǎng)頁;高校門戶網(wǎng)站;設計要素

1響應式網(wǎng)頁的概念

響應式網(wǎng)頁設計(ResponsiveWebsiteDesign)的概念是有EthanMarcotte在2010年5月所提出。通俗的講，就是一個網(wǎng)站可以兼容不同的終端，無論我們的用戶使用的是筆記本、平板還是手機，我們的頁面都可以自動切換分辨率，圖片的尺寸，文字的大小以及相關(guān)的腳本功能，用來適應不同的設備。

2響應式設計對于高校門戶網(wǎng)站的設計需求

2．1校內(nèi)學生的用戶體驗需求隨著高校的不斷發(fā)展，學校里的設施建設不斷的豐富完善。現(xiàn)在的高校學生并不像以前那樣寢室－教室－圖書館“三點一線”式的生活方式了，從前的“宅男宅女”們現(xiàn)在更樂意走出寢室，到校園的咖啡廳，實驗室，學習交流空間，休閑娛樂地點等各式各樣的場所豐富自己的校園學習生活。如此一來，使用電腦的概率大大地減少，平板設備的使用率大為提高。高校的學生可能隨時需要登陸學校的門戶網(wǎng)站去獲取學校新聞、學習資源信息、學校活動信息、學生服務資訊等重要信息。響應式的網(wǎng)頁設計能夠很好的解決傳統(tǒng)網(wǎng)頁“操作繁瑣、重點不突出”的弊端，在給予良好的視覺體驗的同時，可以幫助學生“更清晰，更方便，更準確”的操作用戶體驗。

2．2高校教師的用戶體驗需求高校官網(wǎng)中的教務系統(tǒng)、教學管理系統(tǒng)、科研系統(tǒng)、薪酬福利、校園服務、教育心理資訊等板塊與教師的生活和教學息息相關(guān)，學校官網(wǎng)已經(jīng)成為高校教師教學生活中密不可分的一部分。響應式的網(wǎng)頁設計不但可以在移動設備中提高視覺效果和觀看質(zhì)量，還能通過其流動式的彈性布局，給予教師在網(wǎng)頁上進行教學辦公的一體化操作。

3響應式設計構(gòu)建高校門戶網(wǎng)站的設計要素

3．1頁面的布局設計高校門戶網(wǎng)站的設計需要符合高校的形象塑造，其內(nèi)在設計需要使代碼和功能可以靈活的適應響應式設計的需求。由于PC端的屏幕窗口大，移動端的移動窗口小。因此，高校門戶網(wǎng)站的響應式設計不是在于對PC端的網(wǎng)頁進行刪減或壓縮，而是在UI界面的布局上進行層次化、板塊化的移動轉(zhuǎn)變。在網(wǎng)頁的頭部，傳統(tǒng)的PC端網(wǎng)頁更傾向于橫向來設計打造導航。響應式設計針對于網(wǎng)頁的導航可進行樓層式的顯示處理，我們得創(chuàng)建能夠輕易壓縮以適應縱向規(guī)格的導航，這使原本PC端長長的導航欄，在移動端中自動變小或濃縮至頂部，甚至是濃縮為“漢堡包”式的按鈕點擊進行“popup”的跳出式顯示以及設置下拉菜單。在網(wǎng)頁的body部分的板塊內(nèi)容，分別以列為板塊。隨著屏幕的變小，每一列的板塊在網(wǎng)頁的顯示中依次自動進入下一欄進行顯示，故以三列變兩列，兩列變一列。使得每一個網(wǎng)頁中的板塊在移動端進行自上而下的依次布局。

3．2頁面的設計模式顯示網(wǎng)頁的設備與網(wǎng)頁本身的內(nèi)容是構(gòu)建響應式設計的重點?；谠O備和內(nèi)容優(yōu)先，是響應式設計的兩種基本模式。由于之前的傳統(tǒng)網(wǎng)頁基本上都是在PC端進行顯示，因此，傳統(tǒng)網(wǎng)頁中基本上都是采用基于設備的模式，因為當時屏幕種類較少，且有標準屏幕之說。設計師無需考慮顯示網(wǎng)頁的寬度變化，所有的網(wǎng)頁頁面都是固定的寬度，顯示在PC端的屏幕內(nèi)。如今，標準屏幕已經(jīng)不復存在。因此，內(nèi)容優(yōu)先是一種不錯的選擇。在構(gòu)建江西省高校門戶網(wǎng)頁中，采用內(nèi)容優(yōu)先這一模式，對于提高用戶體驗來說，是極其有利的。

3．3流式布局為了實現(xiàn)頁面的靈活設計，匹配網(wǎng)頁在不同的視口中完美顯示，需要使用靈活的百分比布局，其也被稱之為“流式布局”。這樣才能讓網(wǎng)站頁面根據(jù)視口大小在不同的設備或者是顯示空間之間靈活伸縮修正樣式。而“流式布局”的構(gòu)建就是將固定像素寬度(width)轉(zhuǎn)換對應的百分比寬度。由于網(wǎng)頁在PC端中的顯示空間很大，移動端中的顯示相對較小。因此，網(wǎng)頁的文字和圖片在響應式頁面中的顯示會根據(jù)屏幕大小的不同進行相對應的顯示變化。由于移動端的屏幕窗口較小，圖片和文字在傳統(tǒng)PC端“大融合”式的布局，在移動端會在單獨的一欄中以“鋪滿”的方式顯現(xiàn)出來，在CSS中針對于img的max寬度設置為100%這可以實現(xiàn)網(wǎng)頁的圖片隨著流動布局相應縮放。

3．4圖片與文字的選擇和處理網(wǎng)頁的內(nèi)容主要是以文字、圖片、視頻三種形式展示的。圖片和文字在網(wǎng)頁設計中是至關(guān)重要的，由于響應式設計需要匹配不同的屏幕設備。因此，與傳統(tǒng)的僅展現(xiàn)在PC端的傳統(tǒng)網(wǎng)頁設計不同，在響應式設計網(wǎng)頁中，隨著移動端設備屏幕的變小，圖片和文字也會相應的進行等比縮放，變得更小。圖片與文字會隨著屏幕的變化而改變他們的形狀與展現(xiàn)方式。在文字的選擇中，我們得選用不同標題尺寸和多種文字大小。在圖片的選擇中，確保窗口尺寸變化時，大幅攝影圖片不會有任何裁切，保證圖片的加載速度快以及清晰的分辨率。

4結(jié)束語

隨著響應式網(wǎng)頁設計的興起，主流網(wǎng)站都已經(jīng)借助響應式進行網(wǎng)頁的設計。面對高校門戶網(wǎng)站這一特殊的設計對象，我們必須對癥下藥，具有針對性的去解決一些在響應式網(wǎng)頁中設計上的不足。俗話說:“文無第一，武無第二”，響應式的網(wǎng)頁在設計上的要求會越來越高，咱們必須在網(wǎng)頁設計中不斷的總結(jié)經(jīng)驗，歸納要素，才能使響應式的網(wǎng)頁設計越來越優(yōu)化。

參考文獻:

［1］曹世雄．淺析響應式在高校網(wǎng)站網(wǎng)頁設計中的應用．

［2］汪玉瓊．淺析響應式趨勢下網(wǎng)頁界面設計的變化．

［3］黃莉婷．響應式網(wǎng)頁設計在伯樂相馬網(wǎng)的應用．

作者:胡兆威 單位:江西工業(yè)職業(yè)技術(shù)學院