web設計經驗<一> 提高移動設備響應式設計的8個建議

第一篇： 提高移動設備響應式設計的8個建議

1、直觀性和易用性

在使用移動設備時，對於雜亂、複雜或者不直觀的設計形成的混亂不佳的用戶體驗通常用戶是沒什麼耐心的，這對於雙方來講都不是好事。設計師和開發人員必定要牢記，在移動web環境中，動力是一個很關鍵的因素，漫長的響應時間加上雜亂的界面再加上不給力的移動設備（雖然最新的移動設備通常都很給力，可是若是在同時運行着10個遊戲外加開着聊天軟件另外網速也很差的狀況下呢）就沒法保證達到「通常性」的web體驗，所以直觀性具備很重要的做用。

直觀不表明空白、醜或者亂，其是指不論簡約仍是高級的設計都必須簡單明確易用，一眼就知道能幹什麼。每項交互都必須有明確的目的，必須開門見山，全部沒用或者不過重要的操做都不該該出如今正常的響應式環境中。

2、常規體驗與響應式體驗對比

在對移動設備進行編程時，必定要意識到常規瀏覽體驗與移動端瀏覽體驗之間的區別。針對移動設備的網站應該是大型網站的縮略彙總，不該包含不重要或者「二等」的操做，以避免讓你的網站的主要用途被湮沒。優秀的移動體驗不該當讓你以爲和平時訪問的網站同樣，其應該採用通過針對性優化的圖形。其應當側重於用戶的想法：用戶爲何要在移動設備上是用你的網站、其最終的目的是什麼等等。這樣才能讓你按部就班的以合乎邏輯的順序構思出一系列不一樣使用場景。

考慮到移動用戶在使用你網站時的特殊需求，你須要爲他們提供高效的數據輸入和圖形瀏覽方式。

3、分享並應用數據

在A/B測試服務被推向大衆時，每一個網站都曾有機會在沒有直接交互的狀況下經過了解用戶行爲打開完善網站的大門。如今，咱們須要把這同一套原則再應用到更注重移動端的web上來。在這方面，Google Analytics Mobile Reports等不少工具都能帶來幫助。經過分析GA提供的數據能夠對網站的可用性進行測試和深刻了解。GA提供的數據不只限於訪客訪問網站所使用的設備資料，起還能夠告訴你受衆所使用設備的屏幕分辨率和經常使用瀏覽器等等。Google Analytics這一好用並且免費的功能能夠幫助你更好地瞭解常規的用戶及其行爲。

得到更多數據可讓你更輕鬆地打造出流暢的體驗，由於你的目標不是泛泛的、未知的受衆，而是特定的受衆。更多數據可以讓你更有針對性，從而更輕鬆地知足終端用戶的所有需求。

4、考慮特定狀況

擁有數據資料在大多數狀況下都能給你帶來很大幫助，可以讓你在知足受衆需求時更加有的放矢，以便爲移動用戶打造出近乎完美的體驗。尋找目標用戶的方法多種多樣，可是在尋找某個特定的受衆羣體時，咱們就不能太過泛泛，由於每一個小羣體都有本身獨特的需求和要求。

5、電子商務

響應式電子商務網站可能算是最受關注、建設最費力的種類了，由於這類網站的體驗會直接影響店鋪的收入和成功與否。無疑，移動端電子商務對於全部店鋪或零售商來講都是不容錯過的機會，據統計，2013年移動用戶在這一方面的消費高達140億美圓。

考慮到移動端購物的人與普通的網絡買家不一樣，對於電子商務響應式web設計，有幾項針對性的技巧。下面是幾個須要你考慮的事項：

1）鑑於移動電子商務的性質，衝動購物是其所獨有的特性。相比傳統的臺式電腦，在小屏幕上引起衝動購物的可能性更高。

2）隨性購物對於移動端來講就再也不隨性了。一個流暢易用的平臺可以讓用戶輕鬆點擊幾下就能看到商品，也就是說用戶不會在不一樣的店鋪裏隨意逛來逛去。這樣就有很大可能提升銷售量。在一個只有5英寸的小屏幕上，沒有空間也沒有時間讓用戶比較貨品和價格。

3）用戶的決策是你賴以生存的關鍵。你能夠開展各類營銷計劃、玩心理學技巧來促使買家買你的商品，但不要忘了，無論你作什麼，根本目的就是促成用戶的決策。分析、決定、實施，但一切的一切都不能忘了用戶體驗和用戶行爲。

5、響應式模式

考慮到響應式設計的特性，這一類網站一般都以網格系統爲基礎構建，或者以彙總內容爲模式構建。由於需求的不一樣，不一樣的網站之間區別很大，但大多數狀況下網站的設計模式能夠分類爲下面幾種：大部份內容流動顯示、縱列顯示、佈局可篩選、微縮和屏幕外顯示。這些是主要的佈局設計分類，但你的設計中也能夠對部分模塊進行微調。

考慮到移動設備對錶單、圖形、視頻和相似的媒體文件或格式的處理有所不一樣，你應當針對具體狀況具體分析。這裏有幾個工具資源能夠幫助你輕鬆應對這一過程。

6、工具

Apptimize (移動端 A/B 測試)

Apptimize可提供強大的分析工具做爲完整移動端A/B測試的最佳解決方案，其可對iOS和安卓平臺進行測試，其中還提供一個免費的演示計劃可供使用。

7、響應式架構模型

下面是幾個可用於爲網站架構在不一樣屏幕尺寸下建立模型的在線工具。這些模型雖然方便，但不要過於依賴它們，由於其沒法提供精確的設備響應狀況。

Responsinator

8、響應式設計測試

Responsive Test

響應式網站搭建工具：

這些工具與上面的略有不一樣，由於網站搭建工具的用途是將Photoshop設計轉變爲完整的可工做響應式web模板。你可使用下列產品經過媒體查詢斷點和精確CSS佈局快速開始響應式設計並打造高保真度的原型。