2014-11-6 藍(lán)藍(lán)設(shè)計(jì)的小編
現(xiàn)在，對(duì)于任何種類(lèi)的網(wǎng)站開(kāi)發(fā)來(lái)說(shuō)，響應(yīng)式Web設(shè)計(jì)都不能再局限于紙上談兵，其是開(kāi)發(fā)階段的一個(gè)關(guān)鍵步驟。作為設(shè)計(jì)師和開(kāi)發(fā)人員，我們必須要了解有效響應(yīng)式設(shè)計(jì)的重要性以及其在保證優(yōu)秀終端用戶(hù)體驗(yàn)方面的作用。
隨著web向著移動(dòng)端逐步發(fā)展，現(xiàn)在響應(yīng)能力對(duì)于網(wǎng)站來(lái)說(shuō)已經(jīng)必不可少。很多人沒(méi)能在移動(dòng)用戶(hù)興起時(shí)抓住時(shí)機(jī)進(jìn)行順應(yīng)潮流，因此現(xiàn)在難以保證網(wǎng)站在移動(dòng)設(shè)備上的體驗(yàn)流暢性。
我們必須承認(rèn)，移動(dòng)設(shè)備已經(jīng)徹底改變了我們使用web的方式。2013年開(kāi)展的一項(xiàng)調(diào)查顯示，多達(dá)百分之73的用戶(hù)會(huì)通過(guò)移動(dòng)設(shè)備瀏覽網(wǎng)絡(luò)，因此，一個(gè)正常、好用的響應(yīng)式web設(shè)計(jì)可以說(shuō)是不可或缺的。
響應(yīng)式web設(shè)計(jì)現(xiàn)在連潮流都算不上，而應(yīng)該說(shuō)是理所當(dāng)然。但現(xiàn)在仍然存在著很多瑕疵可能會(huì)讓體驗(yàn)無(wú)法達(dá)到舒適的程度，這也是為什么我們今天要探討幾項(xiàng)能夠幫助你實(shí)現(xiàn)完美體驗(yàn)的方法和趨勢(shì)。
直觀性和易用性
在使用移動(dòng)設(shè)備時(shí)，對(duì)于雜亂、復(fù)雜或者不直觀的設(shè)計(jì)造成的混亂不佳的用戶(hù)體驗(yàn)一般用戶(hù)是沒(méi)什么耐心的，這對(duì)于雙方來(lái)說(shuō)都不是好事。設(shè)計(jì)師和開(kāi)發(fā)人員一定要牢記，在移動(dòng)web環(huán)境中，動(dòng)力是一個(gè)很關(guān)鍵的因素，漫長(zhǎng)的響應(yīng)時(shí)間加上雜亂的界面再加上不給力的移動(dòng)設(shè)備（雖然的移動(dòng)設(shè)備一般都很給力，但是如果在同時(shí)運(yùn)行著10個(gè)游戲外加開(kāi)著聊天軟件另外網(wǎng)速也不好的情況下呢）就無(wú)法保證達(dá)到“一般性”的web體驗(yàn)，因此直觀性具有很重要的作用。
直觀不代表空白、丑或者亂，其是指不論簡(jiǎn)約還是高級(jí)的設(shè)計(jì)都必須簡(jiǎn)單明確易用，一眼就知道能干什么。每項(xiàng)交互都必須有明確的目的，必須開(kāi)門(mén)見(jiàn)山，所有沒(méi)用或者不太重要的操作都不應(yīng)該出現(xiàn)在正常的響應(yīng)式環(huán)境中。
常規(guī)體驗(yàn)與響應(yīng)式體驗(yàn)對(duì)比
在對(duì)移動(dòng)設(shè)備進(jìn)行編程時(shí)，一定要意識(shí)到常規(guī)瀏覽體驗(yàn)與移動(dòng)端瀏覽體驗(yàn)之間的區(qū)別。針對(duì)移動(dòng)設(shè)備的網(wǎng)站應(yīng)該是大型網(wǎng)站的縮略匯總，不應(yīng)包含不重要或者“二等”的操作，以免讓你的網(wǎng)站的主要用途被湮沒(méi)。優(yōu)秀的移動(dòng)體驗(yàn)不應(yīng)當(dāng)讓你覺(jué)得和平時(shí)訪問(wèn)的網(wǎng)站一樣，其應(yīng)該采用經(jīng)過(guò)針對(duì)性?xún)?yōu)化的圖形。其應(yīng)當(dāng)側(cè)重于用戶(hù)的想法：用戶(hù)為什么要在移動(dòng)設(shè)備上是用你的網(wǎng)站、其最終的目的是什么等等。這樣才能讓你循序漸進(jìn)的以合乎邏輯的順序構(gòu)思出一系列不同使用場(chǎng)景。
考慮到移動(dòng)用戶(hù)在使用你網(wǎng)站時(shí)的特殊需求，你需要為他們提供的數(shù)據(jù)輸入和圖形瀏覽方式。
分享并應(yīng)用數(shù)據(jù)
在A/B測(cè)試服務(wù)被推向大眾時(shí)，每個(gè)網(wǎng)站都曾有機(jī)會(huì)在沒(méi)有直接交互的情況下通過(guò)了解用戶(hù)行為打開(kāi)完善網(wǎng)站的大門(mén)。現(xiàn)在，我們需要把這同一套原則再應(yīng)用到更注重移動(dòng)端的web上來(lái)。在這方面，Google Analytics Mobile Reports等很多工具都能帶來(lái)幫助。通過(guò)分析GA提供的數(shù)據(jù)可以對(duì)網(wǎng)站的可用性進(jìn)行測(cè)試和深入了解。GA提供的數(shù)據(jù)不僅限于訪客訪問(wèn)網(wǎng)站所使用的設(shè)備資料，起還可以告訴你受眾所使用設(shè)備的屏幕分辨率和常用瀏覽器等等。Google Analytics這一好用而且免費(fèi)的功能可以幫助你更好地了解常規(guī)的用戶(hù)及其行為。
獲得更多數(shù)據(jù)可以讓你更輕松地打造出流暢的體驗(yàn)，因?yàn)槟愕哪繕?biāo)不是泛泛的、未知的受眾，而是特定的受眾。更多數(shù)據(jù)能夠讓你更有針對(duì)性，從而更輕松地滿足終端用戶(hù)的全部需求。
考慮特定情況
擁有數(shù)據(jù)資料在大多數(shù)情況下都能給你帶來(lái)很大幫助，能夠讓你在滿足受眾需求時(shí)更加有的放矢，以便為移動(dòng)用戶(hù)打造出近乎完美的體驗(yàn)。尋找目標(biāo)用戶(hù)的方法多種多樣，但是在尋找某個(gè)特定的受眾群體時(shí)，我們就不能太過(guò)泛泛，因?yàn)槊總€(gè)小群體都有自己獨(dú)特的需求和要求。
電子商務(wù)：
響應(yīng)式電子商務(wù)網(wǎng)站可能算是最受關(guān)注、建設(shè)最費(fèi)力的種類(lèi)了，因?yàn)檫@類(lèi)網(wǎng)站的體驗(yàn)會(huì)直接影響店鋪的收入和成功與否。無(wú)疑，移動(dòng)端電子商務(wù)對(duì)于所有店鋪或零售商來(lái)說(shuō)都是不容錯(cuò)過(guò)的機(jī)會(huì)，據(jù)統(tǒng)計(jì)，2013年移動(dòng)用戶(hù)在這一方面的消費(fèi)高達(dá)140億美元。
考慮到移動(dòng)端購(gòu)物的人與普通的網(wǎng)絡(luò)買(mǎi)家不同，對(duì)于電子商務(wù)響應(yīng)式web設(shè)計(jì)，有幾項(xiàng)針對(duì)性的技巧。下面是幾個(gè)需要你考慮的事項(xiàng)：
·鑒于移動(dòng)電子商務(wù)的性質(zhì)，沖動(dòng)購(gòu)物是其所獨(dú)有的特性。相比傳統(tǒng)的臺(tái)式電腦，在小屏幕上引發(fā)沖動(dòng)購(gòu)物的可能性更高。
·隨性購(gòu)物對(duì)于移動(dòng)端來(lái)說(shuō)就不再隨性了。一個(gè)流暢易用的平臺(tái)能夠讓用戶(hù)輕松點(diǎn)擊幾下就能看到商品，也就是說(shuō)用戶(hù)不會(huì)在不同的店鋪里隨意逛來(lái)逛去。這樣就有很大可能提高銷(xiāo)售量。在一個(gè)只有5英寸的小屏幕上，沒(méi)有空間也沒(méi)有時(shí)間讓用戶(hù)比較貨品和價(jià)格。
·用戶(hù)的決策是你賴(lài)以生存的關(guān)鍵。你可以開(kāi)展各種營(yíng)銷(xiāo)計(jì)劃、玩心理學(xué)技巧來(lái)促使買(mǎi)家買(mǎi)你的商品，但不要忘了，不管你做什么，根本目的就是促成用戶(hù)的決策。分析、決定、實(shí)施，但一切的一切都不能忘了用戶(hù)體驗(yàn)和用戶(hù)行為。
響應(yīng)式模式
考慮到響應(yīng)式設(shè)計(jì)的特性，這一類(lèi)網(wǎng)站通常都以網(wǎng)格系統(tǒng)為基礎(chǔ)構(gòu)建，或者以匯總內(nèi)容為模式構(gòu)建。因?yàn)樾枨蟮牟煌?，不同的網(wǎng)站之間區(qū)別很大，但大多數(shù)情況下網(wǎng)站的設(shè)計(jì)模式可以分類(lèi)為下面幾種：大部分內(nèi)容流動(dòng)顯示、縱列顯示、布局可篩選、微縮和屏幕外顯示。這些是主要的布局設(shè)計(jì)分類(lèi)，但你的設(shè)計(jì)中也可以對(duì)部分模塊進(jìn)行微調(diào)。
考慮到移動(dòng)設(shè)備對(duì)表單、圖形、視頻和類(lèi)似的媒體文件或格式的處理有所不同，你應(yīng)當(dāng)針對(duì)具體情況具體分析。這里有幾個(gè)工具資源可以幫助你輕松應(yīng)對(duì)這一過(guò)程。
工具
Apptimize (移動(dòng)端 A/B 測(cè)試)
Apptimize可提供強(qiáng)大的分析工具作為完整移動(dòng)端A/B測(cè)試的最佳解決方案，其可對(duì)iOS和安卓平臺(tái)進(jìn)行測(cè)試，其中還提供一個(gè)免費(fèi)的演示計(jì)劃可供使用。
響應(yīng)式架構(gòu)模型：
下面是幾個(gè)可用于為網(wǎng)站架構(gòu)在不同屏幕尺寸下創(chuàng)建模型的在線工具。這些模型雖然方便，但不要過(guò)于依賴(lài)它們，因?yàn)槠錈o(wú)法提供的設(shè)備響應(yīng)情況。
Responsinator
響應(yīng)式設(shè)計(jì)測(cè)試：
Responsive Test
響應(yīng)式網(wǎng)站搭建工具：
這些工具與上面的略有不同，因?yàn)榫W(wǎng)站搭建工具的用途是將Photoshop設(shè)計(jì)轉(zhuǎn)變?yōu)橥暾目晒ぷ黜憫?yīng)式web模板。你可以使用下列產(chǎn)品通過(guò)媒體查詢(xún)斷點(diǎn)和CSS布局快速開(kāi)始響應(yīng)式設(shè)計(jì)并打造高保真度的原型。
Webflow
Adobe Reflow
Macaw
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com