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

1、    響應(yīng)式設(shè)計(jì)在高校網(wǎng)站界面設(shè)計(jì)中的可行性探究    張帆摘要：高校網(wǎng)站多以學(xué)生為主要受眾群體。學(xué)生群體的信息獲取方式又以移動(dòng)智能終端為主，所以傳統(tǒng)高校網(wǎng)站設(shè)計(jì)以電腦為主要瀏覽界面的形式亟待改變。響應(yīng)式設(shè)計(jì)使高校網(wǎng)站界面設(shè)計(jì)的多設(shè)備兼容成為可能。關(guān)鍵詞：高校網(wǎng)站；響應(yīng)式設(shè)計(jì)；界面設(shè)計(jì)；移動(dòng)終端設(shè)備隨著智能移動(dòng)設(shè)備的廣泛使用，網(wǎng)站來自移動(dòng)端的瀏覽量逐漸增大。高校網(wǎng)站需要面向廣大學(xué)生，而學(xué)生群體更加依賴于手機(jī)、平板電腦等移動(dòng)終端設(shè)備，這一受眾特點(diǎn)使高校網(wǎng)站面對(duì)各類設(shè)備的兼容性要求更高。不僅如此，各類便攜式智能設(shè)備不斷推出，例如apple watch、vr

2、等等，使得網(wǎng)頁界面的尺寸產(chǎn)生了更多的變化。網(wǎng)頁界面的尺寸產(chǎn)生改變，網(wǎng)頁內(nèi)容也勢(shì)必要進(jìn)行相應(yīng)的調(diào)整。若針對(duì)如此之多的終端類型，都一一進(jìn)行相應(yīng)設(shè)計(jì)與調(diào)整，勢(shì)必要耗費(fèi)巨大的人力物力，而響應(yīng)式設(shè)計(jì)就在此時(shí)應(yīng)運(yùn)而生了。響應(yīng)式設(shè)計(jì)作為一種新的設(shè)計(jì)概念，能夠使網(wǎng)站針對(duì)不同設(shè)備環(huán)境進(jìn)行響應(yīng)和調(diào)整，實(shí)現(xiàn)一個(gè)網(wǎng)站對(duì)多種設(shè)備終端的兼容。一、響應(yīng)式網(wǎng)頁界面設(shè)計(jì)特點(diǎn)響應(yīng)式設(shè)計(jì)的提出者 ethan·marcotte 曾經(jīng)說過，響應(yīng)式設(shè)計(jì)不是“為移動(dòng)設(shè)備而設(shè)計(jì)”，它也不是“為臺(tái)式機(jī)而設(shè)計(jì)”，它是關(guān)于采用靈活的、設(shè)備無關(guān)的方法來為 web 進(jìn)行的設(shè)計(jì)。響應(yīng)式設(shè)計(jì)不是一項(xiàng)新的技術(shù)，而是對(duì)已有的多項(xiàng)技術(shù)的整合。它最初是

3、指網(wǎng)頁本身能夠自動(dòng)識(shí)別屏幕尺寸，根據(jù)其尺寸做出相應(yīng)的調(diào)整，使用戶在各種現(xiàn)實(shí)屏幕上均能實(shí)現(xiàn)對(duì)網(wǎng)頁內(nèi)容的流暢閱覽?，F(xiàn)如今響應(yīng)式設(shè)計(jì)的概念擴(kuò)展為頁面的設(shè)計(jì)與開發(fā)應(yīng)當(dāng)根據(jù)用戶的行為以及設(shè)備環(huán)境，能夠進(jìn)行自動(dòng)的響應(yīng)和相應(yīng)的調(diào)整。2014年，萬維網(wǎng)公布的html5語言，在很大程度上體現(xiàn)了響應(yīng)式設(shè)計(jì)的概念，html5的設(shè)計(jì)目的就是為了在移動(dòng)設(shè)備上支持多媒體。可以說html5的出現(xiàn)，初步肯定了響應(yīng)式設(shè)計(jì)在網(wǎng)站建設(shè)上的可實(shí)施性。二、高校網(wǎng)站發(fā)展趨勢(shì)現(xiàn)如今互聯(lián)網(wǎng)的高速發(fā)展使得高校網(wǎng)站的實(shí)用性與以往產(chǎn)生了巨大的區(qū)別。前期的網(wǎng)站更多的是承載了對(duì)高校的宣傳作用，而近年來，無紙化辦公的提倡，校內(nèi)重要信息的網(wǎng)上通知讓高校網(wǎng)

4、站的實(shí)用性與點(diǎn)擊量與日俱增。數(shù)據(jù)顯示，提供這些點(diǎn)擊量的至少有一半是由校內(nèi)師生。校內(nèi)學(xué)生可以通過高校網(wǎng)站進(jìn)行選課、查詢成績(jī)、預(yù)繳學(xué)費(fèi)等操作。校內(nèi)教師可以通過高校網(wǎng)站進(jìn)行課表查詢、調(diào)停課、登入學(xué)生成績(jī)、審閱學(xué)生論文、甚至申報(bào)科研項(xiàng)目等操作?？梢娋W(wǎng)絡(luò)辦公在高校網(wǎng)站上已經(jīng)得以實(shí)現(xiàn)。不僅僅是電腦端，高校網(wǎng)站來自移動(dòng)端的點(diǎn)擊也大幅度增加。單就學(xué)生在網(wǎng)上繳納學(xué)費(fèi)一項(xiàng)來說。可移動(dòng)支付端的普及使得人們幾乎不再隨身攜帶現(xiàn)金，各類買賣平臺(tái)也均開通了移動(dòng)支付端的付費(fèi)通道。學(xué)生們更愿意也更習(xí)慣用移動(dòng)設(shè)備完成支付行為，而很多高校網(wǎng)站還不能實(shí)現(xiàn)流暢的移動(dòng)端繳費(fèi)操作。這就使得網(wǎng)站的實(shí)用性大打折扣。所以高校網(wǎng)站與移動(dòng)端的結(jié)合，

5、在操作及功能上的與時(shí)俱進(jìn)就顯得尤為重要。三、高校網(wǎng)站響應(yīng)式設(shè)計(jì)的可行性現(xiàn)代社會(huì)是一個(gè)信息爆炸的高效率社會(huì)，前一秒發(fā)出的新聞很快就被下一秒爆炸式的消息所掩蓋，人們對(duì)信息的瀏覽也越來越趨向于碎片化。自從智能手機(jī)開始普及，人們的信息閱讀行為從最早的看報(bào)、看電視、點(diǎn)擊電腦網(wǎng)站集中瀏覽，轉(zhuǎn)變?yōu)楝F(xiàn)在的隨時(shí)隨地片段式閱讀。例如利用等公交的時(shí)間，乘坐地鐵的時(shí)間，吃飯時(shí)間，甚至是走路的時(shí)間進(jìn)行信息瀏覽。移動(dòng)智能終端無疑是形成這一現(xiàn)象的頭號(hào)功臣。這種信息瀏覽模式，趨向于年輕化。也就是說高校網(wǎng)站的重要受眾大學(xué)生群體，是碎片化瀏覽信息的主要人群。他們幾乎手機(jī)不離手，手機(jī)閱讀甚至成為了他們獲取信息的主要方式。高校網(wǎng)站若

6、要真正成為具有使用價(jià)值的網(wǎng)站，就不能忽略受眾群體當(dāng)前最迫切的需求實(shí)現(xiàn)在移動(dòng)端的流暢使用。在當(dāng)今科技高速發(fā)展的狀態(tài)下，實(shí)現(xiàn)針對(duì)某一種移動(dòng)端的流暢閱覽并不難，這也是如今app泛濫的原因。但近兩年多移動(dòng)終端的出現(xiàn)又對(duì)網(wǎng)站的兼容性提出了更高的要求。這就使得高校網(wǎng)站若要實(shí)現(xiàn)移動(dòng)端使用，不再僅僅是制作出一個(gè)相關(guān)app就能達(dá)到要求的。況且app在后期維護(hù)和更新上將會(huì)耗損巨大的人力物力。響應(yīng)式設(shè)計(jì)無疑給這一困境解了圍。它適用于多種終端的優(yōu)良特性使得它被越來越廣泛使用。通過對(duì)響應(yīng)式網(wǎng)站的技術(shù)操作，網(wǎng)頁本身能夠在幾乎維持原貌的基礎(chǔ)上在多尺寸顯示器上瀏覽。bootstrap框架的出現(xiàn)，讓網(wǎng)站界面在響應(yīng)式狀態(tài)下的再設(shè)

7、計(jì)變的非常簡(jiǎn)單。越來越高的需求與越來越簡(jiǎn)易的技術(shù)操作使得高校網(wǎng)站的響應(yīng)式設(shè)計(jì)不再是一個(gè)難題。四、高校網(wǎng)站響應(yīng)式界面設(shè)計(jì)的具體辦法對(duì)各大高校來說，官方門戶網(wǎng)站是其非常重要的形象展示渠道。網(wǎng)站界面上的主要圖片、圖形、信息等起到了對(duì)高校的宣傳作用。學(xué)校的歷史底蘊(yùn)，校風(fēng)校訓(xùn)等在其網(wǎng)站上展露無疑。受眾通過對(duì)高校網(wǎng)站的點(diǎn)擊瀏覽，形成對(duì)該高校的初步印象，這些印象甚至能夠進(jìn)而對(duì)學(xué)校生源、社會(huì)聲望產(chǎn)生不同程度影響。因此，高校網(wǎng)站在進(jìn)行響應(yīng)式設(shè)計(jì)時(shí)既要滿足實(shí)用功能，又要實(shí)現(xiàn)審美價(jià)值。在高校網(wǎng)站版式設(shè)計(jì)上應(yīng)更趨于簡(jiǎn)潔化和彈性化。使用流式布局，讓界面不再類似于一張張位圖文件，使用固定的像素值，而是設(shè)置成為百分比。這樣

8、網(wǎng)頁將不再局限于屏幕的寬度尺寸，流式布局能夠讓界面根據(jù)屏幕尺寸自動(dòng)更改顯示大小，而界面本身并不會(huì)因此出現(xiàn)變形或顯示不全的狀況。為了適應(yīng)流式布局，網(wǎng)站界面也注定要?jiǎng)h繁就簡(jiǎn)，盡量以簡(jiǎn)潔清晰的形式展示高校信息和文化。在高校網(wǎng)站的裝飾風(fēng)格上，可采用扁平化設(shè)計(jì)風(fēng)格。所謂扁平化，就是指圖形減少立體感、減少裝飾紋樣或肌理，以比較純粹的方式展現(xiàn)形狀本身。這種設(shè)計(jì)風(fēng)格與流式布局的設(shè)計(jì)要求較為契合，也能較好的統(tǒng)一網(wǎng)頁界面的整體風(fēng)格。當(dāng)版式與風(fēng)格都趨向于簡(jiǎn)潔的狀態(tài)下，界面設(shè)計(jì)的獨(dú)特性就顯得尤為重要了。在響應(yīng)式設(shè)計(jì)大環(huán)境下，為了體現(xiàn)高校網(wǎng)站自身的不同，細(xì)節(jié)的考究和創(chuàng)新就顯得尤為重要。例如界面整體顏色的搭配可以較為活潑，或使用高校標(biāo)志中的專有色。導(dǎo)航欄的設(shè)計(jì)在響應(yīng)式界面當(dāng)中的設(shè)計(jì)方式較為靈活，同一頁面面對(duì)不同終端可制作多種導(dǎo)航效果。同時(shí)為了活躍版面，等待或刷新界面可以適當(dāng)加入高校特有圖形，以增加網(wǎng)站界面的裝飾美感。結(jié)語移動(dòng)化瀏覽是網(wǎng)絡(luò)發(fā)展的必然趨勢(shì)，甚至在近幾年看來，人們已經(jīng)開始不僅僅滿足于智能設(shè)備的可移動(dòng)，還要求設(shè)備的便攜性，