響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的介紹

　　響應(yīng)式網(wǎng)頁(yè)是一種對(duì)于設(shè)計(jì)的全新思維模式，響應(yīng)是雙方的，是互動(dòng)的過(guò)程，在這個(gè)過(guò)程中設(shè)計(jì)師要考慮設(shè)備的性能、dom節(jié)點(diǎn)數(shù)量、屏幕的大小等。

　　1、如何理解響應(yīng)式設(shè)計(jì)(rwd)

　　響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的概念初是由ethan?marcotte提出，從設(shè)計(jì)的角度引領(lǐng)我們思考：為什么一定要為每個(gè)用戶分別做一套設(shè)計(jì)方案呢?是否可以有一種設(shè)計(jì)能夠根據(jù)不同設(shè)備環(huán)境自動(dòng)響應(yīng)以及調(diào)整顯示?特別是隨著移動(dòng)互聯(lián)網(wǎng)的飛速發(fā)展，響應(yīng)式web設(shè)計(jì)不僅僅是關(guān)于屏幕分辨率自適應(yīng)以及自動(dòng)縮放的圖片等等，它更像是一種對(duì)于設(shè)計(jì)的全新思維模式 - 響應(yīng)是雙方的，是互動(dòng)的過(guò)程，在這個(gè)過(guò)程中設(shè)計(jì)師要考慮設(shè)備的性能、dom 節(jié)點(diǎn)數(shù)量、屏幕的大小等等。

　　2、響應(yīng)式產(chǎn)品設(shè)計(jì)

　　響應(yīng)式設(shè)計(jì)是從產(chǎn)品角度來(lái)進(jìn)行的設(shè)計(jì)，在這個(gè)階段我們需要產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、設(shè)計(jì)師以及工程師共同介入了。我們需要打破傳統(tǒng)的思維模式去思考設(shè)計(jì)，從純粹傳統(tǒng)的web向移動(dòng)應(yīng)用過(guò)度。第 一步需要有明確的信息架構(gòu)，來(lái)從小顯示屏的移動(dòng)設(shè)備做產(chǎn)品設(shè)計(jì)，在移動(dòng)設(shè)備中拋棄更多的使用干擾，保 證核心 功能的 優(yōu)體驗(yàn);同時(shí)交互與設(shè)計(jì)師的介入處理如何把模塊設(shè)計(jì)的更小更有彈性，并初步確定設(shè)計(jì)風(fēng)格、設(shè)計(jì)框架等方案;而工程師需要在產(chǎn)品經(jīng)理與設(shè)計(jì)師確定的方案中進(jìn)行代碼測(cè)試，充分利用不同設(shè)備獨(dú)有的特性并進(jìn)行框架搭建。

　　在設(shè)計(jì)階段，線框圖和原型圖是必須的，而好的線框圖和原型工具會(huì)讓你更加專注于交互和功能。希望下面的工具能夠幫你為客戶和團(tuán)隊(duì)設(shè)計(jì)出的作品。

　　桌面端

　　axure：在功能強(qiáng)大和方便易用上盡可能做到了較好的綜合平衡。支持業(yè)務(wù)流程圖。具備一定的頁(yè)面流程圖制作能力(可用頁(yè)面快照實(shí)現(xiàn));具備一定prd能力。

　　mockplus：簡(jiǎn)單易用的工作方式;快捷方便的交互設(shè)計(jì)方式。提供多種演示預(yù)覽方式。大量封裝組件和海量圖標(biāo)素材;支持團(tuán)隊(duì)協(xié)作和在線審閱。

　　balsamiq：專注草圖，素描風(fēng)格。

　　web端

　　proto.io：在交互設(shè)計(jì)上有突出表現(xiàn)。組、容器、滾動(dòng)區(qū)的轉(zhuǎn)換有特色。可通過(guò)插件導(dǎo)入sketch文件。

　　uxpin：在功能和便利性上有較好的平衡。具備一定的prd能力(有“ux文檔”模板協(xié)作支持prd)?？赏ㄟ^(guò)插件導(dǎo)入sketch文件。

　　3、響應(yīng)式設(shè)計(jì)中的界面設(shè)計(jì)

　　對(duì)于界面設(shè)計(jì)，在以前的設(shè)計(jì)中更多是針對(duì)桌面產(chǎn)品的，設(shè)計(jì)可能就是一個(gè)尺寸，每個(gè)模塊的位置比較固定，但是在響應(yīng)式設(shè)計(jì)中，這些東西就改變了，設(shè)計(jì)師需要根據(jù)產(chǎn)品的需要設(shè)計(jì)多個(gè)版本的設(shè)計(jì)，在這些不同的版本中，模塊a在1024的寬度下，可能會(huì)是背景，但是到了768下面可能會(huì)變成白色背景，實(shí)現(xiàn)了在不同寬度的不同展現(xiàn)。

　　4、響應(yīng)式設(shè)計(jì)針對(duì)媒體查詢的斷點(diǎn)

　　從傳統(tǒng)的設(shè)計(jì)角度，可以通過(guò)媒體查詢(media query)的方式改變網(wǎng)頁(yè)的布局，比如在固定的寬度下(也就是所稱作的斷點(diǎn))改變布局。在以往設(shè)計(jì)更習(xí)慣的思維是針對(duì)某些設(shè)備(比如桌面、平板電腦、手機(jī))的數(shù)據(jù)來(lái)設(shè)置斷點(diǎn)，比如1024 對(duì)應(yīng)桌面、768對(duì)應(yīng)pad、480 對(duì)應(yīng)手機(jī)，但實(shí)際上，這些東西是靠不住的，因?yàn)檫@些屏幕尺寸會(huì)根據(jù)時(shí)代的發(fā)展不斷的變化。

　　但是響應(yīng)式設(shè)計(jì)不應(yīng)該只針對(duì)某些特定大小的設(shè)備，設(shè)計(jì)過(guò)程中需要的是一個(gè)區(qū)間值，而不是將某一分辨率對(duì)應(yīng)一種設(shè)備。因此在設(shè)計(jì)過(guò)程中應(yīng)該根據(jù)內(nèi)容的需要進(jìn)行設(shè)置，設(shè)計(jì)師需要尋找一個(gè)臨界點(diǎn)—即當(dāng)視覺效果開始不符合人們的審美或影響了內(nèi)容獲取時(shí)對(duì)應(yīng)的值。

　　5、響應(yīng)式設(shè)計(jì)在交互上有那些不同

　　在響應(yīng)式設(shè)計(jì)中，對(duì)于交互方式的設(shè)計(jì)需要進(jìn)行更加的考慮。設(shè)計(jì)師不僅要考慮以前桌面用戶的使用習(xí)慣，也必須兼顧不同尺寸的手持設(shè)備。比如大家在pc上習(xí)慣使用的浮層在某些小尺寸的設(shè)備上就沒法使用了。而且一些響應(yīng)區(qū)域小的鏈接也不方便使用手指來(lái)操作，因此設(shè)計(jì)師可以做到”求同存異”。比如設(shè)計(jì)師可以根據(jù)屏幕的尺寸，來(lái)決定是否使用浮層、或者增大操作區(qū)域、或者”整齊劃一”。為了方面讓設(shè)計(jì)過(guò)程更加輕松，在這里特別簡(jiǎn)單易用的原型圖設(shè)計(jì)工具mockplus，方便進(jìn)行原型圖的創(chuàng)建以及交互的實(shí)現(xiàn)。