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

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

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

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

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

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

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

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

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

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

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

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

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

4結(jié)束語

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

參考文獻:

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

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

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

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