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

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

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

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

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

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

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

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

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

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

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

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

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

4結(jié)束語(yǔ)

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

參考文獻(xiàn):

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

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

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

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