網頁設計構建高校門戶網站設計研究

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

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

關鍵詞:響應式網頁;高校門戶網站;設計要素

1響應式網頁的概念

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

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

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

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

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

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

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

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

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

4結束語

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

參考文獻:

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

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

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

作者:胡兆威 單位:江西工業職業技術學院