網(wǎng)頁設(shè)計(jì)構(gòu)建高校門戶網(wǎng)站設(shè)計(jì)研究

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

2、頁的概念 響應(yīng)式網(wǎng)頁設(shè)計(jì)(esponsiveWebsiteDesign)的概念是有EthanMarcotte在2010年5月所提出。通俗的講，就是一個(gè)網(wǎng)站可以兼容不同的終端，無論我們的用戶使用的是筆記本、平板還是手機(jī)，我們的頁面都可以自動切換分辨率，圖片的尺寸，文字的大小以及相關(guān)的腳本功能，用來適應(yīng)不同的設(shè)備。 2響應(yīng)式設(shè)計(jì)對于高校門戶網(wǎng)站的設(shè)計(jì)需求 21校內(nèi)學(xué)生的用戶體驗(yàn)需求隨著高校的不斷發(fā)展，學(xué)校里的設(shè)施建設(shè)不斷的豐富完善?，F(xiàn)在的高校學(xué)生并不像以前那樣寢室教室圖書館“三點(diǎn)一線”式的生活方式了，從前的“宅男宅女”們現(xiàn)在更樂意走出寢室，到校園的咖啡廳，實(shí)驗(yàn)室，學(xué)習(xí)交流空間，休閑娛樂地點(diǎn)等各式各

3、樣的場所豐富自己的校園學(xué)習(xí)生活。如此一來，使用電腦的概率大大地減少，平板設(shè)備的使用率大為提高。高校的學(xué)生可能隨時(shí)需要登陸學(xué)校的門戶網(wǎng)站去獲取學(xué)校新聞、學(xué)習(xí)資源信息、學(xué)?；顒有畔ⅰW(xué)生服務(wù)資訊等重要信息。響應(yīng)式的網(wǎng)頁設(shè)計(jì)能夠很好的解決傳統(tǒng)網(wǎng)頁“操作繁瑣、重點(diǎn)不突出”的弊端，在給予良好的視覺體驗(yàn)的同時(shí)，可以幫助學(xué)生“更清晰，更方便，更準(zhǔn)確”的操作用戶體驗(yàn)。 22高校教師的用戶體驗(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)頁設(shè)計(jì)不但可以在移動設(shè)備中提高視覺效果和觀看

4、質(zhì)量，還能通過其流動式的彈性布局，給予教師在網(wǎng)頁上進(jìn)行教學(xué)辦公的一體化操作。 3響應(yīng)式設(shè)計(jì)構(gòu)建高校門戶網(wǎng)站的設(shè)計(jì)要素 31頁面的布局設(shè)計(jì)高校門戶網(wǎng)站的設(shè)計(jì)需要符合高校的形象塑造，其內(nèi)在設(shè)計(jì)需要使代碼和功能可以靈活的適應(yīng)響應(yīng)式設(shè)計(jì)的需求。由于PC端的屏幕窗口大，移動端的移動窗口小。因此，高校門戶網(wǎng)站的響應(yīng)式設(shè)計(jì)不是在于對PC端的網(wǎng)頁進(jìn)行刪減或壓縮，而是在UI界面的布局上進(jìn)行層次化、板塊化的移動轉(zhuǎn)變。在網(wǎng)頁的頭部，傳統(tǒng)的PC端網(wǎng)頁更傾向于橫向來設(shè)計(jì)打造導(dǎo)航。響應(yīng)式設(shè)計(jì)針對于網(wǎng)頁的導(dǎo)航可進(jìn)行樓層式的顯示處理，我們得創(chuàng)建能夠輕易壓縮以適應(yīng)縱向規(guī)格的導(dǎo)航，這使原本PC端長長的導(dǎo)航欄，在移動端中自動變小或

5、濃縮至頂部，甚至是濃縮為“漢堡包”式的按鈕點(diǎn)擊進(jìn)行“popup”的跳出式顯示以及設(shè)置下拉菜單。在網(wǎng)頁的body部分的板塊內(nèi)容，分別以列為板塊。隨著屏幕的變小，每一列的板塊在網(wǎng)頁的顯示中依次自動進(jìn)入下一欄進(jìn)行顯示，故以三列變兩列，兩列變一列。使得每一個(gè)網(wǎng)頁中的板塊在移動端進(jìn)行自上而下的依次布局。 32頁面的設(shè)計(jì)模式顯示網(wǎng)頁的設(shè)備與網(wǎng)頁本身的內(nèi)容是構(gòu)建響應(yīng)式設(shè)計(jì)的重點(diǎn)?；谠O(shè)備和內(nèi)容優(yōu)先，是響應(yīng)式設(shè)計(jì)的兩種基本模式。由于之前的傳統(tǒng)網(wǎng)頁基本上都是在PC端進(jìn)行顯示，因此，傳統(tǒng)網(wǎng)頁中基本上都是采用基于設(shè)備的模式，因?yàn)楫?dāng)時(shí)屏幕種類較少，且有標(biāo)準(zhǔn)屏幕之說。設(shè)計(jì)師無需考慮顯示網(wǎng)頁的寬度變化，所有的網(wǎng)頁頁面都是

6、固定的寬度，顯示在PC端的屏幕內(nèi)。如今，標(biāo)準(zhǔn)屏幕已經(jīng)不復(fù)存在。因此，內(nèi)容優(yōu)先是一種不錯(cuò)的選擇。在構(gòu)建江西省高校門戶網(wǎng)頁中，采用內(nèi)容優(yōu)先這一模式，對于提高用戶體驗(yàn)來說，是極其有利的。 33流式布局為了實(shí)現(xiàn)頁面的靈活設(shè)計(jì)，匹配網(wǎng)頁在不同的視口中完美顯示，需要使用靈活的百分比布局，其也被稱之為“流式布局”。這樣才能讓網(wǎng)站頁面根據(jù)視口大小在不同的設(shè)備或者是顯示空間之間靈活伸縮修正樣式。而“流式布局”的構(gòu)建就是將固定像素寬度(width)轉(zhuǎn)換對應(yīng)的百分比寬度。由于網(wǎng)頁在PC端中的顯示空間很大，移動端中的顯示相對較小。因此，網(wǎng)頁的文字和圖片在響應(yīng)式頁面中的顯示會根據(jù)屏幕大小的不同進(jìn)行相對應(yīng)的顯示變化。由于

7、移動端的屏幕窗口較小，圖片和文字在傳統(tǒng)PC端“大融合”式的布局，在移動端會在單獨(dú)的一欄中以“鋪滿”的方式顯現(xiàn)出來，在CSS中針對于img的max寬度設(shè)置為100%這可以實(shí)現(xiàn)網(wǎng)頁的圖片隨著流動布局相應(yīng)縮放。 34圖片與文字的選擇和處理網(wǎng)頁的內(nèi)容主要是以文字、圖片、視頻三種形式展示的。圖片和文字在網(wǎng)頁設(shè)計(jì)中是至關(guān)重要的，由于響應(yīng)式設(shè)計(jì)需要匹配不同的屏幕設(shè)備。因此，與傳統(tǒng)的僅展現(xiàn)在PC端的傳統(tǒng)網(wǎng)頁設(shè)計(jì)不同，在響應(yīng)式設(shè)計(jì)網(wǎng)頁中，隨著移動端設(shè)備屏幕的變小，圖片和文字也會相應(yīng)的進(jìn)行等比縮放，變得更小。圖片與文字會隨著屏幕的變化而改變他們的形狀與展現(xiàn)方式。在文字的選擇中，我們得選用不同標(biāo)題尺寸和多種文字大小。在圖片的選擇中，確保窗口尺寸變化時(shí)，大幅攝影圖片不會有任何裁切，保證圖片的加載速度快以及清晰的分辨率。 4結(jié)束語 隨著響應(yīng)式網(wǎng)頁設(shè)計(jì)的興起，主流網(wǎng)站都已經(jīng)借助響應(yīng)式進(jìn)行網(wǎng)頁的設(shè)計(jì)。面對高校門戶網(wǎng)站這一特殊的設(shè)計(jì)對象，我們必須對癥下藥，具有針對性的去解決一些在響應(yīng)式網(wǎng)頁中設(shè)計(jì)上的不足。俗話說:“文無第一，武無第二”，響應(yīng)式的網(wǎng)頁在設(shè)計(jì)上的要求會越來越高，咱們必須在網(wǎng)頁設(shè)計(jì)中不斷的總結(jié)經(jīng)驗(yàn)，歸納要素，才能使響應(yīng)式的網(wǎng)頁設(shè)計(jì)越來越優(yōu)化。 參考文獻(xiàn): 1曹世雄淺析響應(yīng)式在高校網(wǎng)站網(wǎng)頁