在進行響應式設計過程中，Ui設計師是怎麼展開設計的？具體和平常的設計有哪些區別？

01-21

文字流式，控制項彈性，圖片等比縮放。

幹掉不需要的內容，頁面視移動端重要程度而選擇適配、不分適配或不適配。

比如36kr，首頁做了適配redesugn，其他的頁面則沒有做適配。

一般為了開發效率，會選擇手繪移動端草稿。

公司某前端的一句話對我頗有影響，「做不做響應式設計並不會增加多少代碼，不方便做不適合做只是偷懶的理由」。

【iPhone 6 / 6 Plus 出現後，如何改進工作流以實現一份設計稿支持多個尺寸？】pigtwo：移動app開發中多種設備尺寸適配問題，過去只… http://www.zhihu.com/question/25308946/answer/32240185 （

第一點引用自 @pigtwo

記之。

有一種流行的設計原則是mobile first，就是先從最窄的屏幕開始設計，所有 layout 基本都是上下排布的基礎上，再針對每一次向更寬屏幕的擴展考慮哪些內容可以從上下變成平行排布。

比如一開始在手機上設計是這樣的：

+--------------------+ | 三 | +--------------------+ | | | | | banner | | | | | +--------------------+ | | | | | content1 | | | | | +--------------------+ | | | content2 | | | | | +--------------------+ | | | | | content3 | | | | | | | +--------------------+

之後向更寬屏幕擴展時，變成了這樣：

+---------------------------------------+ | home feature about | +---------------------------------------+ | | | | | banner | | | | | +-------------------+-------------------+ | | | | | | | content1 | content2 | | | | | | | +-------------------+-------------------+ | | | content3 | | | +---------------------------------------+

具體如何操作，看 bootstrap 這些框架的文檔就知道了。

基本還沒有做過需要響應式設計的項目，不過就個人的經驗可以這樣來做：

1，關鍵節點（變化比較大的界面尺寸）輸出設計稿。

2，對關鍵節點之間的狀態處理給出說明。比如文本自適應，圖片自動縮放等等。

微軟：精通ppt的設計師做了一份牛逼的ppt，告訴dev們他們心目中的UI在操作的時候會有什麼反應。

我們當時用的是bootstrap，一般都是設計出PC圖，我自己腦補移動端的樣子，然後覺得不妥的地方再找設計商量

我覺得題主思考一下如何更好地復用以及管理你的UI元素比較好，無論從技術還是設計，響應式從來都是考驗你管理組件的能力，我也可以滾粗地一個device一套，奈我何！！！

我做過3次響應式設計的網站。

我的做法是在PS做完一版PC端網頁設計以後（其實是偷懶了，最好把窄屏的也做一下），自己把html、css和與UI交互表現相關的js寫了（一般都用現成的給自響應用的js，或者寫點jQuery的淡入或滑動之類的簡單js，難度不高）。

然後開始做窄屏部分。先在IDE里把幾個重要部分的media尺寸寫了，剩下的就在Chrome瀏覽器里修改css代碼。一邊改一邊調整瀏覽器寬度，還可以即時預覽。改到一定階段就複製一下css代碼粘回IDE。

我覺得我這種做法貌似不太正規，但感覺效率蠻高的？因為做標註和溝通時間加起來，應該也夠把上面說的那部分前端代碼寫得差不多了。而且了解html和css以後，一般也不會設計出前端無法實現的網頁。

所以我其實是在前端的階段進行了一部分設計。

沒去過互聯網公司，希望有人能告訴我這麼做會出什麼問題。