行業動态

互聯網技術發展到(dào)今天, 爲(wéi / wèi)了(le／liǎo)能夠更好地(dì / de)适應社會發展的(de)需要(yào / yāo), 人(rén)們把關注的(de)焦點放在(zài)移動互聯網技術的(de)發展。但是(shì)大(dà)多數的(de)網頁開發基本都是(shì)基于(yú)原來(lái)的(de)PC端的(de)設計模式, 呈現出(chū)的(de)頁面布局也(yě)與PC端無異, 隻是(shì)将其等比例的(de)縮小, 然而(ér)這(zhè)種網頁布局在(zài)小屏設備上(shàng)的(de)使用表現并不(bù)理想, 并且顯示分辨率低、系統平台不(bù)穩定, 針對不(bù)同的(de)系統和(hé / huò)分辨率的(de)設備分别進行圖書館網頁的(de)定制顯然是(shì)不(bù)切實際的(de), 但是(shì)随着響應式網頁設計概念的(de)提出(chū), 問題便有了(le／liǎo)新的(de)解決辦法, 可以(yǐ)爲(wéi / wèi)不(bù)同設備終端前的(de)用戶帶來(lái)良好的(de)使用體驗。對于(yú)大(dà)部分的(de)高校而(ér)言, 其校園門戶網站都是(shì)在(zài)很早之(zhī)前開發的(de), 沒有定期的(de)維護與更新, 導緻在(zài)手機等便攜式移動終端的(de)訪問體驗不(bù)理想, 現在(zài)大(dà)部門高校的(de)圖書館網頁在(zài)手機端訪問時(shí)并不(bù)能識别出(chū)手機, 仍然是(shì)以(yǐ)電腦界面的(de)頁面布局呈現, 可用性非常低, 極大(dà)的(de)降低了(le／liǎo)學生的(de)使用欲望和(hé / huò)使用頻率。畢竟, 對學生而(ér)言, 想要(yào / yāo)随時(shí)随地(dì / de)有台電腦訪問學校圖書館網站是(shì)不(bù)現實的(de), 但是(shì)幾乎每個(gè)大(dà)學生都有智能手機, 手機已經成爲(wéi / wèi)大(dà)學生最爲(wéi / wèi)依賴的(de)工具和(hé / huò)排名第一(yī / yì ／yí)位的(de)上(shàng)網設備, 所以(yǐ), 基于(yú)響應式思維設計的(de)高校圖書館網頁可以(yǐ)更加方便大(dà)學生在(zài)手機、平闆上(shàng)訪問, 爲(wéi / wèi)大(dà)學生帶來(lái)更好的(de)移動使用體驗。

一(yī / yì ／yí)、概念解讀與設計原則

響應式是(shì)一(yī / yì ／yí)種新的(de)網絡頁面設計布局方式, 其概念在(zài)2010年由伊桑·馬科特率先提出(chū), 爲(wéi / wèi)的(de)是(shì)給不(bù)同終端前的(de)用戶帶來(lái)較好的(de)移動閱讀與使用體驗。這(zhè)種設計方式的(de)理念在(zài)于(yú), 在(zài)充分考慮到(dào)用戶可能會使用的(de)設備的(de)特性, 如分辨率大(dà)小、系統差異、屏幕長寬比等, 對頁面的(de)排布與圖片的(de)大(dà)小進行集中式設計, 再根據終端特性的(de)不(bù)同, 智能的(de)選擇頁面排布方式, 呈現出(chū)極佳的(de)頁面布局效果。當然, 設計網頁時(shí)本着移動設備優先級高的(de)原則進行, 其主要(yào / yāo)表現在(zài)如下兩個(gè)方面:第一(yī / yì ／yí)個(gè)是(shì)需要(yào / yāo)更注重考慮移動設備本身的(de)特性, 鑒于(yú)不(bù)同的(de)移動設備的(de)多樣性與差異性, 需要(yào / yāo)優先照顧這(zhè)些設備的(de)顯示效果, 針對性的(de)優先設計。第二是(shì)設計時(shí)遵循漸進式的(de)設計思想, 按照設備顯示大(dà)小, 逐步優化顯示效果, 比如在(zài)較小的(de)設備上(shàng)優先突出(chū)主要(yào / yāo)的(de)内容, 忽略次要(yào / yāo)信息的(de)顯示, 随着設備尺寸的(de)增大(dà), 可以(yǐ)相應的(de)增加一(yī / yì ／yí)些信息顯示。另外, 在(zài)進行網頁設計的(de)過程中, 針對不(bù)同版本的(de)浏覽器, 需要(yào / yāo)根據其特性進行設計, 比如針對高級的(de)浏覽器可以(yǐ)相應的(de)增加頁面效果, 爲(wéi / wèi)用戶帶來(lái)更好的(de)使用體驗。總的(de)來(lái)說(shuō), 不(bù)管是(shì)面向PC端的(de)用戶還是(shì)面向移動設備的(de)用戶, 在(zài)網頁設計時(shí), 需要(yào / yāo)考慮到(dào)圖片大(dà)小的(de)自由切換、分辨率的(de)自動調節等, 這(zhè)樣做的(de)目的(de)是(shì)在(zài)不(bù)同的(de)設備上(shàng)都能很好的(de)兼容頁面, 而(ér)不(bù)存在(zài)爲(wéi / wèi)哪一(yī / yì ／yí)個(gè)設備進行單獨的(de)網頁設計這(zhè)種費事費時(shí)的(de)做法, 這(zhè)就(jiù)是(shì)響應式網頁設計的(de)優勢。

二、網頁設計的(de)核心技術

響應式網頁設計理念提出(chū)至今, 經過了(le／liǎo)幾年的(de)發展, 這(zhè)套設計理念發展的(de)已經比較成熟, 大(dà)部分的(de)主流網頁都已經跟進, 實現了(le／liǎo)對自家網站的(de)更新。目前, 人(rén)們對于(yú)其核心技術的(de)認識已經形成了(le／liǎo)共識, 設計如下所示的(de)3個(gè)内容。

(一(yī / yì ／yí)) 頁面布局設計

首先頁面的(de)呈現效果, 由于(yú)移動設備進行網頁浏覽發展時(shí)間較短, 大(dà)部分的(de)網頁布局都是(shì)直接移植PC端的(de)顯示布局, 這(zhè)對于(yú)移動設備來(lái)說(shuō), 體驗是(shì)相當不(bù)友好的(de), 不(bù)僅是(shì)體現在(zài)操作上(shàng)的(de)不(bù)方便, 而(ér)且就(jiù)顯示效果來(lái)說(shuō)也(yě)非常的(de)差, 很難讓受衆适應, 久而(ér)久之(zhī)造成了(le／liǎo)讀者在(zài)移動設備端的(de)體驗不(bù)理想。響應式網頁設計采取了(le／liǎo)流動式的(de)布局方法, 從而(ér)避免了(le／liǎo)此類問題。流動布局, 不(bù)同于(yú)一(yī / yì ／yí)般的(de)固定布局, 二者存在(zài)的(de)區别如下, 所謂固定布局, 顧名思義, 其頁面顯示的(de)左右寬度是(shì)固定的(de), 以(yǐ)px作爲(wéi / wèi)其寬度單位。流式布局則不(bù)同, 其頁面的(de)左右寬度并不(bù)會爲(wéi / wèi)固定長度而(ér)限制, 它是(shì)一(yī / yì ／yí)種相對的(de)頁面寬度, 其單位是(shì)百分比, 這(zhè)裏的(de)百分比指的(de)是(shì)頁面寬度與其所在(zài)元素的(de)比值。簡而(ér)言之(zhī), 相較于(yú)傳統固定式的(de)網頁排布, 流式布局的(de)網頁排布具備靈活性和(hé / huò)自主适應性, 其網頁布局的(de)寬度會根據屏幕的(de)大(dà)小自動的(de)做出(chū)相應的(de)改變, 保證不(bù)會發生頁面溢出(chū)的(de)現象, 極大(dà)的(de)增強了(le／liǎo)頁面元素在(zài)網頁中的(de)适應性。

(二) 針對不(bù)同設備的(de)響應方式

對于(yú)響應式網頁設計而(ér)言, 其核心的(de)技術之(zhī)一(yī / yì ／yí)是(shì)在(zài)不(bù)同設備中做出(chū)的(de)相應差别式響應。基于(yú)響應式設計的(de)網頁, 其自身會進行設備屏幕寬度的(de)自動檢測, 根據檢測到(dào)的(de)屏幕寬度數據, 會加載預設的(de)CSS文件。而(ér)加載響應的(de)CSS文件, 就(jiù)會使其調用相應的(de)網頁排版方式。通常, 對于(yú)CSS文件的(de)加載, 可以(yǐ)通過HTML标簽進行加載, 也(yě)可以(yǐ)通過已有的(de)CSS進行加載, 可以(yǐ)根據需求選擇, 需要(yào / yāo)注意的(de)是(shì), 即使是(shì)在(zài)同一(yī / yì ／yí)CSS文件裏面, 也(yě)存在(zài)着不(bù)同的(de)CSS規則, 會依據設備的(de)不(bù)同分辨率選取不(bù)同的(de)規則, 這(zhè)些規則會改變網頁的(de)呈現方式與呈現效果, 比如網頁的(de)背景色等。由于(yú)移動設備的(de)尺寸大(dà)小、分辨率和(hé / huò)長寬比的(de)形式要(yào / yāo)比電腦端更爲(wéi / wèi)豐富, 所以(yǐ), 需要(yào / yāo)的(de)網頁排版布局的(de)風格也(yě)會更多, 如果網頁能夠很好的(de)識别每種設備的(de)特性。然後調用相應的(de)文件來(lái)進行匹配, 使得在(zài)相應屏幕上(shàng)的(de)内容呈現效果盡可能達到(dào)在(zài)PC上(shàng)一(yī / yì ／yí)樣的(de)使用效果。

(三) 圖片處理

對于(yú)一(yī / yì ／yí)個(gè)網站而(ér)言, 不(bù)能局限于(yú)單純的(de)文字内容, 通常也(yě)會包含形形色色的(de)圖片。在(zài)傳統的(de)PC上(shàng), 由于(yú)早先都是(shì)作爲(wéi / wèi)唯一(yī / yì ／yí)優化對象, 因此設計者認爲(wéi / wèi)傳統的(de)界面已經能夠滿足受衆的(de)需要(yào / yāo), 但是(shì)随着移動互聯網的(de)發展, 移動閱讀設備出(chū)現, 其屏幕尺寸小的(de)屬性使得網頁的(de)顯示效果大(dà)打折扣, 一(yī / yì ／yí)些網站爲(wéi / wèi)了(le／liǎo)盡可能的(de)減少大(dà)幅圖片對小屏設備顯示面積, 通常會相應的(de)縮小圖片的(de)大(dà)小, 甚至是(shì)直接将CSS文件的(de)屬性設置爲(wéi / wèi)空, 實現圖片的(de)隐藏。從表層進行分析, 其已經達到(dào)了(le／liǎo)理想的(de)效果, 而(ér)深入探究發現, 雖然圖片被縮小甚至是(shì)隐藏, 但是(shì)經過處理的(de)圖片在(zài)加載的(de)過程中并不(bù)會相應的(de)縮小或是(shì)消失, 仍舊按照原始文件大(dà)小下載, 不(bù)會節省時(shí)間, 更不(bù)會節省流量。目前關于(yú)這(zhè)個(gè)問題尚未形成最佳的(de)解決方案, 一(yī / yì ／yí)般的(de)做法是(shì)優先加載頁面, 然就(jiù)根據加載好的(de)頁面布局來(lái)确定圖片加載的(de)具體排布方式, 比如哪邊的(de)圖片可以(yǐ)加載, 哪邊的(de)不(bù)需要(yào / yāo)加載, 當然, 鑒于(yú)頁面加載的(de)過程中可能會形成斷點, 通常可以(yǐ)在(zài)斷點的(de)位置加載圖片。但是(shì), 視頻的(de)處理問題上(shàng), 與圖片的(de)處理方式不(bù)同, 在(zài)小屏幕上(shàng)播放視頻的(de)體驗不(bù)佳, 往往隻會在(zài)小屏幕上(shàng)提供視頻的(de)鏈接, 這(zhè)樣就(jiù)不(bù)會對頁面加載造成壓力, 而(ér)在(zài)大(dà)屏幕上(shàng)就(jiù)可以(yǐ)按比例縮放。

三、網頁設計過程中的(de)阻礙與難點

在(zài)很大(dà)程度上(shàng), 響應式網頁設計解決了(le／liǎo)傳統網頁設計在(zài)移動設備上(shàng)的(de)顯示兼容性問題。由于(yú)響應式設計理念的(de)提出(chū), 很多原本隻能在(zài)電腦上(shàng)才能實現的(de)功能和(hé / huò)高效的(de)交互方式, 現在(zài)可以(yǐ)很方便的(de)在(zài)手機端實現。事實表明, 很多高校的(de)圖書館網頁設計上(shàng)都采用響應式網頁設計的(de)方式, 并且反饋的(de)效果也(yě)很不(bù)錯, 由此可以(yǐ)看出(chū), 響應式設計網頁在(zài)相當長的(de)一(yī / yì ／yí)段時(shí)間内都會是(shì)最佳的(de)網頁設計方式。即便如此, 響應式網頁設計在(zài)實際的(de)開發過程中還是(shì)暴露出(chū)了(le／liǎo)一(yī / yì ／yí)些問題, 在(zài)一(yī / yì ／yí)定程度上(shàng)阻礙了(le／liǎo)它的(de)發展, 如何較好的(de)解決這(zhè)些問題顯得非常重要(yào / yāo), 它将決定其以(yǐ)後的(de)發展态勢。以(yǐ)下羅列存在(zài)的(de)一(yī / yì ／yí)些常見問題。

(一(yī / yì ／yí)) 時(shí)間成本投入的(de)增加

傳統的(de)網頁設計, 由于(yú)專門針對的(de)是(shì)大(dà)屏的(de)電腦設備, 可以(yǐ)很好的(de)顯示内容, 網頁設計的(de)主要(yào / yāo)内容都被直接呈現在(zài)頁面, 在(zài)系統内部不(bù)存在(zài)一(yī / yì ／yí)些隐形的(de)設計, 但是(shì)響應式網頁設計不(bù)同, 它是(shì)爲(wéi / wèi)了(le／liǎo)解決多設備的(de)兼容性問題、分辨率、小屏優化問題, 所以(yǐ)設計的(de)工作量非常大(dà), 常常一(yī / yì ／yí)個(gè)界面需要(yào / yāo)設計多種排布格式以(yǐ)便在(zài)實際應用中可以(yǐ)随着設備的(de)改變做出(chū)相應的(de)呈現。雖然在(zài)一(yī / yì ／yí)個(gè)設備上(shàng)并不(bù)會全部用到(dào), 但是(shì)都必須将其設計好并儲存在(zài)網站的(de)内部, 而(ér)這(zhè)看似額外的(de)設計必然會增加初期的(de)項目時(shí)間投入。據統計, 在(zài)一(yī / yì ／yí)個(gè)響應式的(de)網頁設計項目中, 初期所耗費的(de)成本投入超過了(le／liǎo)總成本的(de)10%-20%。對于(yú)高校的(de)圖書館而(ér)言, 由于(yú)其本身的(de)學術特殊性, 爲(wéi / wèi)了(le／liǎo)盡可能的(de)構建最前沿的(de)技術基地(dì / de), 往往需要(yào / yāo)花費更大(dà)的(de)精力才能達到(dào)目的(de), 而(ér)這(zhè)一(yī / yì ／yí)切都會增加成本和(hé / huò)時(shí)間的(de)投入, 延長開發周期與維護難度。

(二) 需要(yào / yāo)針對移動觸屏設備進行優化

在(zài)開發一(yī / yì ／yí)些移動端的(de)網站, 尤其在(zài)開發諸如手機或者平闆電腦等小屏設備的(de)網頁時(shí), 需要(yào / yāo)充分考慮便捷性。傳統的(de)鍵鼠操作可以(yǐ)很容易實現的(de)操作轉到(dào)這(zhè)些小屏設備上(shàng)是(shì)隻能依靠其觸屏功能來(lái)實現, 但是(shì)由于(yú)觸屏可以(yǐ)提供的(de)交互方式極爲(wéi / wèi)有限。原先依靠鍵鼠可以(yǐ)輕易實現的(de)操作在(zài)觸屏上(shàng)就(jiù)會變得繁雜, 低效, 甚至有一(yī / yì ／yí)些特殊的(de)功能靠觸屏可能都無法實現, 就(jiù)比如電腦端的(de)懸停功能, 在(zài)觸屏上(shàng)暫時(shí)不(bù)能實現。爲(wéi / wèi)了(le／liǎo)實現同樣的(de)功能, 在(zài)觸屏設備上(shàng)據需要(yào / yāo)花費更多的(de)心思來(lái)設計并實現。所謂的(de)響應式網頁設計, 更多的(de)工作或者說(shuō)設計的(de)重心其實是(shì)在(zài)針對小屏觸摸設備的(de)優化, 如果其網頁在(zài)移動端設備上(shàng)能有比肩電腦端的(de)交互體驗, 由此可以(yǐ)看出(chū)網頁設計非常成功。

(三) 浏覽器的(de)版本兼容性存在(zài)問題

在(zài)實際的(de)使用中, 我們漸漸發現, 傳統的(de)浏覽器對于(yú)基于(yú)響應式設計的(de)網頁并不(bù)友好。在(zài)IE8代之(zhī)前的(de)浏覽器上(shàng)都是(shì)不(bù)支持打開響應式設計網站的(de), 究其原因在(zài)于(yú)響應式網頁需要(yào / yāo)用到(dào)的(de)媒體查詢由CSS3實現, 而(ér)在(zài)IE8之(zhī)前, 是(shì)不(bù)支持此項功能。要(yào / yāo)想實現此功能, 隻有進行系統升級。當然, 也(yě)可以(yǐ)通過加載一(yī / yì ／yí)些特殊文件解決。事實上(shàng), 我們經常會發現, 利用現在(zài)的(de)浏覽器去登陸高校的(de)一(yī / yì ／yí)些網頁, 或多或少存在(zài)一(yī / yì ／yí)些兼容性問題, 比如無法輸入内容, 無法顯示内容, 無法觸發功能按鍵等等, 需要(yào / yāo)一(yī / yì ／yí)系列繁雜的(de)設置方式才能在(zài)現在(zài)的(de)浏覽器上(shàng)正常的(de)使用高校的(de)網站。即便如此, 很多高校依然沒有意識到(dào)如何更新自己的(de)網站, 而(ér)是(shì)通過修改浏覽器的(de)一(yī / yì ／yí)些隐形設定, 來(lái)實現對高校門戶網站的(de)兼容。