基于用戶體驗的響應式網站的設計與實現

文/劉娜娜

1 前言

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

2 響應式關鍵技術

2.1 流式布局

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

2.2 媒體查詢

媒體查詢作為響應式設計的核心，是響應式設計之所以能夠對不同大小的設備都進行響應的原因。一般來說媒體查詢都是以@media作為開頭，然后再輸入表達式。同時創建媒體查詢的過程中必須要把媒體類型作為第一個表達式。

2.3 圖片的響應式設計

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

3 響應式設計的實現

3.1 移動優先

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

3.2 設置視口

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

3.3 導航變換

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

4 響應式移動圖書館中解決的重要問題

4.1 觸摸屏問題

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

4.2 瀏覽器兼容問題

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

4.3 性能問題

性能是用戶體驗是否良好的一個重要影響成分，因為其影響重大，我們采取多種方式來提高網站性能。首先在設計網站時就考慮網站能夠承受的最大基線并建立有關預算，用戶如果要家在頁面就要使該頁面保存在預算中。其次對于網站進行簡單優化，創建簡化精靈并在必要時候使用壓縮圖像以減少加載時間。除此之外對于腳本文件確保其只在必要的時候加載，避免無效加載的情況。

5 結束語

文章對于響應式設計進行探索研究并以移動圖書館響應式設計為例進行探討得出一些結論，即響應式設計的核心在于流式布局媒體查詢以及對于圖片的響應式設計。

參考文獻

[1]陳靜.基于用戶體驗的響應式移動圖書館網站建設[J].農業圖書情報學刊,2017,29:48-51.