1暇检、如何理解響應式設計（RWD）
響應式網頁設計的概念最初是由Ethan?Marcotte提出产阱，從設計的角度引領我們思考：為什么一定要為每個用戶分別做一套設計方案呢？是否可以有一種設計能夠根據不同設備環(huán)境自動響應以及調整顯示块仆？特別是隨著移動互聯(lián)網的飛速發(fā)展构蹬，響應式Web設計不僅僅是關于屏幕分辨率自適應以及自動縮放的圖片等等，它更像是一種對于設計的全新思維模式 - 響應是雙方的悔据，是互動的過程庄敛，在這個過程中設計師要考慮設備的性能、Dom 節(jié)點數(shù)量科汗、屏幕的大小等等藻烤。
2、響應式產品設計
響應式設計是從產品角度來進行的設計头滔，在這個階段我們需要產品經理怖亭、交互設計師、設計師以及工程師共同介入了坤检。我們需要打破傳統(tǒng)的思維模式去思考設計依许，從純粹傳統(tǒng)的Web向移動應用過度。第一步需要有明確的信息架構缀蹄，來從最小顯示屏的移動設備做產品設計峭跳，在移動設備中拋棄更多的使用干擾，保證核心 功能的最優(yōu)體驗缺前；同時交互與設計師的介入處理如何把模塊設計的更小更有彈性蛀醉，并初步確定設計風格、設計框架等方案衅码；而工程師需要在產品經理與設計師確定的方案中進行代碼測試拯刁，充分利用不同設備獨有的特性并進行框架搭建。
在設計階段逝段，線框圖和原型圖是必須的垛玻，而好的線框圖和原型工具會讓你更加專注于交互和功能割捅。希望下面的工具能夠幫你為客戶和團隊設計出優(yōu)秀的作品。
桌面端
Axure：在功能全面強大和方便易用上盡可能做到了較好的綜合平衡帚桩。支持業(yè)務流程圖亿驾。具備一定的頁面流程圖制作能力（可用頁面快照實現(xiàn)）；具備一定PRD能力账嚎。
Mockplus：簡單易用的工作方式莫瞬；快捷方便的交互設計方式。提供多種演示預覽方式郭蕉。大量封裝組件和海量圖標素材疼邀；支持團隊協(xié)作和在線審閱。
Balsamiq：專注草圖召锈，素描風格旁振。
Web端
Proto.io：在交互設計上有突出表現(xiàn)。組涨岁、容器拐袜、滾動區(qū)的轉換有特色÷训耄可通過插件導入Sketch文件阻肿。
UXPin：在功能和便利性上有較好的平衡。具備一定的PRD能力（有“UX文檔”模板協(xié)作支持PRD）沮尿〈运可通過插件導入Sketch文件。
3畜疾、響應式設計中的界面設計
對于界面設計赴邻，在以前的設計中更多是針對桌面產品的，設計可能就是一個尺寸啡捶，每個模塊的位置比較固定姥敛，但是在響應式設計中，這些東西就改變了瞎暑，設計師需要根據產品的需要設計多個版本的設計彤敛，在這些不同的版本中，模塊A在1024的寬度下了赌，可能會是黑色背景墨榄，但是到了768下面可能會變成白色背景，實現(xiàn)了在不同寬度的不同展現(xiàn)勿她。
4袄秩、響應式設計針對媒體查詢的斷點
從傳統(tǒng)的設計角度，可以通過媒體查詢（Media Query）的方式改變網頁的布局，比如在固定的寬度下（也就是所稱作的斷點）改變布局之剧。在以往設計更習慣的思維是針對某些設備（比如桌面郭卫、平板電腦、手機）的數(shù)據來設置斷點背稼，比如1024 對應桌面贰军、768對應pad、480 對應手機雇庙，但實際上谓形，這些東西是靠不住的灶伊，因為這些屏幕尺寸會根據時代的發(fā)展不斷的變化疆前。
但是響應式設計不應該只針對某些特定大小的設備，設計過程中需要的是一個區(qū)間值聘萨，而不是將某一分辨率對應一種設備竹椒。因此在設計過程中應該根據內容的需要進行設置，設計師需要尋找一個臨界點—即當視覺效果開始不符合人們的審美或影響了內容獲取時對應的值米辐。
5胸完、響應式設計在交互上有那些不同
在響應式設計中抵皱，對于交互方式的設計需要進行更加全面的考慮睬辐。設計師不僅要考慮以前桌面用戶的使用習慣呻率，也必須兼顧不同尺寸的手持設備百宇。比如大家在PC上習慣使用的浮層在某些小尺寸的設備上就沒法使用了叙甸。而且一些響應區(qū)域小的鏈接也不方便使用手指來操作拱镐，因此設計師可以做到”求同存異”关霸。比如設計師可以根據屏幕的尺寸离熏，來決定是否使用浮層芍耘、或者增大操作區(qū)域址遇、或者”整齊劃一”。為了方面讓設計過程更加輕松斋竞，在這里特別推薦一款簡單易用的原型圖設計工具Mockplus倔约，方便快速進行原型圖的創(chuàng)建以及交互的實現(xiàn)。
