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

1、如何理解響應式設計（RWD）

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

2、響應式產(chǎn)品設計

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

在設計階段，線(xiàn)框圖和原型圖是必須的，而好的線(xiàn)框圖和原型工具會(huì )讓你更加專(zhuān)注于交互和功能。希望下面的工具能夠幫你為客戶(hù)和團隊設計出優(yōu)秀的作品。

桌面端

Axure：在功能全面強大和方便易用上盡可能做到了較好的綜合平衡。支持業(yè)務(wù)流程圖。具備一定的頁(yè)面流程圖制作能力（可用頁(yè)面快照實(shí)現）；具備一定PRD能力。

Mockplus：簡(jiǎn)單易用的工作方式；快捷方便的交互設計方式。提供多種演示預覽方式。大量封裝組件和海量圖標素材；支持團隊協(xié)作和在線(xiàn)審閱。

Balsamiq：專(zhuān)注草圖，素描風(fēng)格。

Web端

Proto.io：在交互設計上有突出表現。組、容器、滾動(dòng)區的轉換有特色?？赏ㄟ^(guò)插件導入Sketch文件。

UXPin：在功能和便利性上有較好的平衡。具備一定的PRD能力（有“UX文檔”模板協(xié)作支持PRD）?？赏ㄟ^(guò)插件導入Sketch文件。

3、響應式設計中的界面設計

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

4、響應式設計針對媒體查詢(xún)的斷點(diǎn)

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

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

5、響應式設計在交互上有那些不同

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

文/Berry 微信公眾號：Mockplus