基于用戶體驗(yàn)的響應(yīng)式網(wǎng)站的設(shè)計與實(shí)現(xiàn)

文/劉娜娜

1 前言

網(wǎng)絡(luò)技術(shù)在近些年迅速發(fā)展，其中移動電子政務(wù)作為數(shù)字圖書館的升級產(chǎn)品被廣泛運(yùn)用于各個方面。雖然現(xiàn)在移動電子政務(wù)的功能和一些性質(zhì)都得到了很大的提高，但是還遠(yuǎn)遠(yuǎn)不足，很多方面無法滿足用戶的需求，因而用戶體驗(yàn)和移動圖書館服務(wù)就成了人們關(guān)注的熱點(diǎn)。文章在有關(guān)研究的基礎(chǔ)上活用Web設(shè)計技術(shù)來設(shè)計基于用戶體驗(yàn)的響應(yīng)式移動圖書館網(wǎng)站。

2 響應(yīng)式關(guān)鍵技術(shù)

2.1 流式布局

傳統(tǒng)的布局已經(jīng)遠(yuǎn)遠(yuǎn)不足以應(yīng)付多種多樣的終端登錄的情形，響應(yīng)式設(shè)計為了應(yīng)對這種問題就采用了流式布局的設(shè)計方法。流式布局首先把固定布局中的px單位固定寬度改變成以百分比為單位的相對寬度，利用百分比來確定長寬高的問題，然后固定一邊長度利用百分比確認(rèn)其他長度。

2.2 媒體查詢

媒體查詢作為響應(yīng)式設(shè)計的核心，是響應(yīng)式設(shè)計之所以能夠?qū)Σ煌笮〉脑O(shè)備都進(jìn)行響應(yīng)的原因。一般來說媒體查詢都是以@media作為開頭，然后再輸入表達(dá)式。同時創(chuàng)建媒體查詢的過程中必須要把媒體類型作為第一個表達(dá)式。

2.3 圖片的響應(yīng)式設(shè)計

在設(shè)計網(wǎng)站的過程中一般圖片都可以分為內(nèi)容圖片和背景圖片，其中內(nèi)容圖片具有具體的意義，其中可能有一些文字來描述，對于這些圖片的設(shè)計需要做到窗口寬度變小的同時圖像隨之百分比變小，因而不用占據(jù)太大的屏幕面積，在這一過程中可以把圖片的寬度設(shè)置成百分比寬度，讓圖片的尺寸變的靈活起來。裝飾性的圖像作為背景圖片，可以以突出重點(diǎn)為核心進(jìn)行設(shè)計。

3 響應(yīng)式設(shè)計的實(shí)現(xiàn)

3.1 移動優(yōu)先

在響應(yīng)式設(shè)計中，涉及界面應(yīng)當(dāng)優(yōu)先為小屏幕的布局進(jìn)行設(shè)計。當(dāng)設(shè)計師傾心于為小屏幕進(jìn)行設(shè)計的時候就會更多的把經(jīng)歷放在網(wǎng)站內(nèi)容的凈化上面。小屏幕是指視口寬度較小的屏幕，即屏幕上顯示的網(wǎng)站的寬度大小。設(shè)計完小屏幕的設(shè)計布局之后再按照百分比進(jìn)行放大，同時在放大的過程中會多出很多空間添加內(nèi)容，進(jìn)而進(jìn)一步改變排版。如果按照桌面尺寸進(jìn)行設(shè)計的話雖然在設(shè)計過程中設(shè)計師省力了不少，但是將其縮小之后就會出現(xiàn)很多內(nèi)容擁擠在一塊的小屏幕布局，不僅難以處理，更會給用戶帶來糟糕的使用體驗(yàn)。因而采用設(shè)計小屏幕轉(zhuǎn)化為大屏幕的選擇。

3.2 設(shè)置視口

視口是計算機(jī)或者移動終端瀏覽網(wǎng)頁時候看到的區(qū)域，視口的寬度認(rèn)為是屏幕的寬度。在訪問沒有viewport屬性的頁面的時候就會根據(jù)瀏覽器寬度來自行縮小以適應(yīng)手機(jī)屏幕寬度，常常還需要經(jīng)過自行縮放等來進(jìn)一步調(diào)節(jié)，縮放的時候也會出現(xiàn)滾動條等，這就使得瀏覽過程十分的不方便。就響應(yīng)式設(shè)計而言，就需要按照設(shè)備的屏幕大小來調(diào)節(jié)尺寸瀏覽網(wǎng)頁，因此應(yīng)當(dāng)對界面進(jìn)行設(shè)置，使瀏覽器不論屏幕尺寸多大都應(yīng)當(dāng)以全部尺寸進(jìn)行訪問，把視口寬度作為實(shí)際寬度。

3.3 導(dǎo)航變換

在一個完整的響應(yīng)式設(shè)計的作品中，有多種多樣的導(dǎo)航變換方法，其中切換式以及推出式的導(dǎo)航設(shè)計在默認(rèn)條件下隱藏導(dǎo)航菜單，用戶點(diǎn)擊之后菜單再彈出，同時為了使菜單具有層次感，讓導(dǎo)航展開后菜單經(jīng)過一個過渡效果下拉，這樣可以有效節(jié)省屏幕空間讓用戶看起來賞心悅目，獲得更好的使用體驗(yàn)。在具體實(shí)施過程中先在頁面添加一個切換鈕，當(dāng)點(diǎn)擊切換鈕的時候?qū)Ш讲藛胃S切換鈕一同拉出就像抽屜被拉出的過程一樣，為用戶帶來更多人性化的感覺。同時輸入代碼判斷是否為移動設(shè)備，如果是移動設(shè)備而且導(dǎo)航隱藏的時候就采用絕對定位，若不是移動設(shè)備則使用相對定位。除此之外輸入代碼確定導(dǎo)航菜單下拉速度，主要是針對低版本的Firefox以及Chorome等瀏覽器進(jìn)行處理，若不設(shè)置執(zhí)行速度的話雖然可以正常運(yùn)行網(wǎng)站，但是用戶點(diǎn)擊切換鈕的時候一大頁菜單突兀的出現(xiàn)會使人感到十分不適，因而加入對于執(zhí)行速度的處理為用戶帶來更好的使用體驗(yàn)。

4 響應(yīng)式移動圖書館中解決的重要問題

4.1 觸摸屏問題

目前移動設(shè)備上網(wǎng)的情況比較多，在開發(fā)移動圖書館的時候需要充分考慮移動終端的性質(zhì)。移動設(shè)備的主要使用方式是電容式觸摸式以及手勢，其中電容式觸摸的工作原理是測量物體觸及屏幕時候傳導(dǎo)電荷的量來工作，而多點(diǎn)觸摸是同時識別多個出點(diǎn)以使用戶做出捏合和縮放等復(fù)雜交互，而手勢包括輕劃輕點(diǎn)和轉(zhuǎn)動等等。為了提高移動用戶使用的體驗(yàn)，響應(yīng)式網(wǎng)站完全做成觸摸網(wǎng)站是一個很大的工程，但是我們可以把人們通常會點(diǎn)的模塊設(shè)計成觸摸式，即點(diǎn)擊熱區(qū)，人們常用的地方用顏色標(biāo)出不同然后設(shè)計成觸摸模式，便于用戶操作。在計算機(jī)上的懸停屬性無法應(yīng)用于觸摸屏上，因而在觸摸屏上取消此功能，把其對應(yīng)的功能修改為其他觸發(fā)方式。

4.2 瀏覽器兼容問題

大多數(shù)響應(yīng)式設(shè)計都不需要用支持媒體查詢的瀏覽器進(jìn)行，不然響應(yīng)式Web設(shè)計中的min-width等功能無法實(shí)現(xiàn)。然而對于很多老版本手機(jī)瀏覽器來說，支持這些工作并不現(xiàn)實(shí)。功能手機(jī)的話不必多做贅述，但是響應(yīng)式的Web設(shè)計面向各類手機(jī)，其中小屏幕作為優(yōu)先設(shè)計，其默認(rèn)布局中并不包含媒體查詢的功能，因此對于功能手機(jī)而言這些問題不足以影響手機(jī)性能。對于IE或者比他還早的瀏覽器來說，可以在HTML5當(dāng)中額外加入注釋，設(shè)置樣式表，從而解決不能兼容的問題，為用戶帶來更良好的使用體驗(yàn)。

4.3 性能問題

性能是用戶體驗(yàn)是否良好的一個重要影響成分，因?yàn)槠溆绊懼卮螅覀儾扇《喾N方式來提高網(wǎng)站性能。首先在設(shè)計網(wǎng)站時就考慮網(wǎng)站能夠承受的最大基線并建立有關(guān)預(yù)算，用戶如果要家在頁面就要使該頁面保存在預(yù)算中。其次對于網(wǎng)站進(jìn)行簡單優(yōu)化，創(chuàng)建簡化精靈并在必要時候使用壓縮圖像以減少加載時間。除此之外對于腳本文件確保其只在必要的時候加載，避免無效加載的情況。

5 結(jié)束語

文章對于響應(yīng)式設(shè)計進(jìn)行探索研究并以移動圖書館響應(yīng)式設(shè)計為例進(jìn)行探討得出一些結(jié)論，即響應(yīng)式設(shè)計的核心在于流式布局媒體查詢以及對于圖片的響應(yīng)式設(shè)計。

參考文獻(xiàn)

[1]陳靜.基于用戶體驗(yàn)的響應(yīng)式移動圖書館網(wǎng)站建設(shè)[J].農(nóng)業(yè)圖書情報學(xué)刊,2017,29:48-51.