響應式設計在高校網(wǎng)站界面設計中的可行性探究

張帆

摘要：高校網(wǎng)站多以學生為主要受眾群體。學生群體的信息獲取方式又以移動智能終端為主，所以傳統(tǒng)高校網(wǎng)站設計以電腦為主要瀏覽界面的形式亟待改變。響應式設計使高校網(wǎng)站界面設計的多設備兼容成為可能。

關鍵詞：高校網(wǎng)站；響應式設計；界面設計；移動終端設備

隨著智能移動設備的廣泛使用，網(wǎng)站來自移動端的瀏覽量逐漸增大。高校網(wǎng)站需要面向廣大學生，而學生群體更加依賴于手機、平板電腦等移動終端設備，這一受眾特點使高校網(wǎng)站面對各類設備的兼容性要求更高。不僅如此，各類便攜式智能設備不斷推出，例如APPLE WATCH、VR等等，使得網(wǎng)頁界面的尺寸產(chǎn)生了更多的變化。網(wǎng)頁界面的尺寸產(chǎn)生改變，網(wǎng)頁內(nèi)容也勢必要進行相應的調(diào)整。若針對如此之多的終端類型，都一一進行相應設計與調(diào)整，勢必要耗費巨大的人力物力，而響應式設計就在此時應運而生了。響應式設計作為一種新的設計概念，能夠使網(wǎng)站針對不同設備環(huán)境進行響應和調(diào)整，實現(xiàn)一個網(wǎng)站對多種設備終端的兼容。

一、響應式網(wǎng)頁界面設計特點

響應式設計的提出者 Ethan·Marcotte 曾經(jīng)說過，響應式設計不是“為移動設備而設計”，它也不是“為臺式機而設計”，它是關于采用靈活的、設備無關的方法來為 Web 進行的設計。響應式設計不是一項新的技術，而是對已有的多項技術的整合。它最初是指網(wǎng)頁本身能夠自動識別屏幕尺寸，根據(jù)其尺寸做出相應的調(diào)整，使用戶在各種現(xiàn)實屏幕上均能實現(xiàn)對網(wǎng)頁內(nèi)容的流暢閱覽。現(xiàn)如今響應式設計的概念擴展為頁面的設計與開發(fā)應當根據(jù)用戶的行為以及設備環(huán)境，能夠進行自動的響應和相應的調(diào)整。2014年，萬維網(wǎng)公布的HTML5語言，在很大程度上體現(xiàn)了響應式設計的概念，HTML5的設計目的就是為了在移動設備上支持多媒體。可以說HTML5的出現(xiàn)，初步肯定了響應式設計在網(wǎng)站建設上的可實施性。

二、高校網(wǎng)站發(fā)展趨勢

現(xiàn)如今互聯(lián)網(wǎng)的高速發(fā)展使得高校網(wǎng)站的實用性與以往產(chǎn)生了巨大的區(qū)別。前期的網(wǎng)站更多的是承載了對高校的宣傳作用，而近年來，無紙化辦公的提倡，校內(nèi)重要信息的網(wǎng)上通知讓高校網(wǎng)站的實用性與點擊量與日俱增。數(shù)據(jù)顯示，提供這些點擊量的至少有一半是由校內(nèi)師生。校內(nèi)學生可以通過高校網(wǎng)站進行選課、查詢成績、預繳學費等操作。校內(nèi)教師可以通過高校網(wǎng)站進行課表查詢、調(diào)停課、登入學生成績、審閱學生論文、甚至申報科研項目等操作。可見網(wǎng)絡辦公在高校網(wǎng)站上已經(jīng)得以實現(xiàn)。

不僅僅是電腦端，高校網(wǎng)站來自移動端的點擊也大幅度增加。單就學生在網(wǎng)上繳納學費一項來說。可移動支付端的普及使得人們幾乎不再隨身攜帶現(xiàn)金，各類買賣平臺也均開通了移動支付端的付費通道。學生們更愿意也更習慣用移動設備完成支付行為，而很多高校網(wǎng)站還不能實現(xiàn)流暢的移動端繳費操作。這就使得網(wǎng)站的實用性大打折扣。所以高校網(wǎng)站與移動端的結合，在操作及功能上的與時俱進就顯得尤為重要。

三、高校網(wǎng)站響應式設計的可行性

現(xiàn)代社會是一個信息爆炸的高效率社會，前一秒發(fā)出的新聞很快就被下一秒爆炸式的消息所掩蓋，人們對信息的瀏覽也越來越趨向于碎片化。自從智能手機開始普及，人們的信息閱讀行為從最早的看報、看電視、點擊電腦網(wǎng)站集中瀏覽，轉(zhuǎn)變?yōu)楝F(xiàn)在的隨時隨地片段式閱讀。例如利用等公交的時間，乘坐地鐵的時間，吃飯時間，甚至是走路的時間進行信息瀏覽。移動智能終端無疑是形成這一現(xiàn)象的頭號功臣。這種信息瀏覽模式，趨向于年輕化。也就是說高校網(wǎng)站的重要受眾大學生群體，是碎片化瀏覽信息的主要人群。他們幾乎手機不離手，手機閱讀甚至成為了他們獲取信息的主要方式。高校網(wǎng)站若要真正成為具有使用價值的網(wǎng)站，就不能忽略受眾群體當前最迫切的需求——實現(xiàn)在移動端的流暢使用。

在當今科技高速發(fā)展的狀態(tài)下，實現(xiàn)針對某一種移動端的流暢閱覽并不難，這也是如今APP泛濫的原因。但近兩年多移動終端的出現(xiàn)又對網(wǎng)站的兼容性提出了更高的要求。這就使得高校網(wǎng)站若要實現(xiàn)移動端使用，不再僅僅是制作出一個相關APP就能達到要求的。況且APP在后期維護和更新上將會耗損巨大的人力物力。

響應式設計無疑給這一困境解了圍。它適用于多種終端的優(yōu)良特性使得它被越來越廣泛使用。通過對響應式網(wǎng)站的技術操作，網(wǎng)頁本身能夠在幾乎維持原貌的基礎上在多尺寸顯示器上瀏覽。Bootstrap框架的出現(xiàn)，讓網(wǎng)站界面在響應式狀態(tài)下的再設計變的非常簡單。越來越高的需求與越來越簡易的技術操作使得高校網(wǎng)站的響應式設計不再是一個難題。

四、高校網(wǎng)站響應式界面設計的具體辦法

對各大高校來說，官方門戶網(wǎng)站是其非常重要的形象展示渠道。網(wǎng)站界面上的主要圖片、圖形、信息等起到了對高校的宣傳作用。學校的歷史底蘊，校風校訓等在其網(wǎng)站上展露無疑。受眾通過對高校網(wǎng)站的點擊瀏覽，形成對該高校的初步印象，這些印象甚至能夠進而對學校生源、社會聲望產(chǎn)生不同程度影響。因此，高校網(wǎng)站在進行響應式設計時既要滿足實用功能，又要實現(xiàn)審美價值。

在高校網(wǎng)站版式設計上應更趨于簡潔化和彈性化。使用流式布局，讓界面不再類似于一張張位圖文件，使用固定的像素值，而是設置成為百分比。這樣網(wǎng)頁將不再局限于屏幕的寬度尺寸，流式布局能夠讓界面根據(jù)屏幕尺寸自動更改顯示大小，而界面本身并不會因此出現(xiàn)變形或顯示不全的狀況。為了適應流式布局，網(wǎng)站界面也注定要刪繁就簡，盡量以簡潔清晰的形式展示高校信息和文化。

在高校網(wǎng)站的裝飾風格上，可采用扁平化設計風格。所謂扁平化，就是指圖形減少立體感、減少裝飾紋樣或肌理，以比較純粹的方式展現(xiàn)形狀本身。這種設計風格與流式布局的設計要求較為契合，也能較好的統(tǒng)一網(wǎng)頁界面的整體風格。

當版式與風格都趨向于簡潔的狀態(tài)下，界面設計的獨特性就顯得尤為重要了。在響應式設計大環(huán)境下，為了體現(xiàn)高校網(wǎng)站自身的不同，細節(jié)的考究和創(chuàng)新就顯得尤為重要。例如界面整體顏色的搭配可以較為活潑，或使用高校標志中的專有色。導航欄的設計在響應式界面當中的設計方式較為靈活，同一頁面面對不同終端可制作多種導航效果。同時為了活躍版面，等待或刷新界面可以適當加入高校特有圖形，以增加網(wǎng)站界面的裝飾美感。

結語

移動化瀏覽是網(wǎng)絡發(fā)展的必然趨勢，甚至在近幾年看來，人們已經(jīng)開始不僅僅滿足于智能設備的可移動，還要求設備的便攜性，即隨時隨地都能夠瀏覽到自己所需要的信息。探討響應式設計在高校網(wǎng)站界面設計上的可行性，相當于是在探討高校與時代共同進步，共同發(fā)展的課題。讓更多的受眾以更便捷的方式了解高校校園文化，讓高校網(wǎng)站以一種全新的面貌為受眾提供真正便捷的具有實用價值的服務。