響應式設計之所以叫響應式“設計”而不叫響應式“技術(shù)”。是因為它是一項設計先行的工作。需要設計先明確好響應方式再實現(xiàn)出來。不能出一套設計稿后等著前端看情況把它變成響應式網(wǎng)頁。所以整個流程初從交互階段開始。分成6個主要步驟。視覺、前端、開發(fā)等角色根據(jù)情況盡早介入——網(wǎng)站建設設計總監(jiān)朱先生說。

Step1：信息架構(gòu)。確定內(nèi)容策略。

根據(jù)產(chǎn)品定位和用戶分析。交互設計師確定站點信息架構(gòu)。(信息架構(gòu)呈現(xiàn)方式有很多種。這不是本文重點。不詳述)。

這時候可以明確這個產(chǎn)品有多少頁面。每個頁面包含多少內(nèi)容。內(nèi)容優(yōu)先級是什么。很多產(chǎn)品包含N多頁面。每個頁面一一考慮響應式設計容易造成混亂且成本巨大。所以下一步重要工作是分析頁面類型把頁面歸類。以玩客為例。可以把10多個頁面分成三類：列表類頁面、詳情類頁面、操作類頁面。

Step2：移動框架

先說下為什么第二步要先設計移動框架。移動優(yōu)先是移動互聯(lián)網(wǎng)浪潮下應運而生的理念。移動優(yōu)先并不是指移動更重要。響應式設計理念里設備是同等重要的。上一步已經(jīng)把頁面歸類并確定每個頁面內(nèi)容優(yōu)先級。現(xiàn)在接著分析每種類型頁面的導航、主體內(nèi)容等框架結(jié)構(gòu)。終得出一份框架結(jié)構(gòu)表。網(wǎng)站建設認為從玩客框架結(jié)構(gòu)看出。全局導航是所有頁面公共的。局部導航只有列表類頁面才有。詳情類頁面都有一個“頁面主人”信息。而關聯(lián)導航不是每個頁面都有。

接著開始設計手機端“超細長頁面”的框架(因為手機上一般是單列布局。所以頁面又細又長)。這一步開始把信息結(jié)構(gòu)設計成粗放的框架。可以在白板或紙面上完成。要實現(xiàn)的關鍵目標是：把這個頁面需要呈現(xiàn)給用戶的內(nèi)容放在重要的位置。要符合手機上的閱讀和操作習慣。盡量利用手機設備的特性。

Step3：響應式框架

根據(jù)手機端的框架拓展出平板和pC端框架。這是復雜產(chǎn)品實現(xiàn)響應式設計的關鍵步驟。它是讓眾多頁面有條理地響應起來的基礎。件事情是確定響應式模式。即從手機到平板到pC。導航怎么變化。頁面布局用哪種響應方式。根據(jù)內(nèi)容優(yōu)先級如何調(diào)整模塊順序。等等。玩客在pC端以三欄布局為主。左邊欄作為局部導航或者主人信息區(qū)。中間欄始終是頁面主體信息。當頁面需要關聯(lián)導航時統(tǒng)一放在右邊欄。

到現(xiàn)在這個階段所有頁面的響應式開始有規(guī)則可循。下一步工作就是繼續(xù)細化規(guī)則。把框架精確到具體尺寸。具體說來就是制定流體柵格系統(tǒng)。流體柵格系統(tǒng)是基于百分比的柵格布局工具。

響應式是一種設計理念與前端技術(shù)緊密結(jié)合的新興形態(tài)。鼓勵盡早進行跨職能溝通協(xié)作。交互確定響應式框架和柵格系統(tǒng)后。其他角色就可以同步開展工作了。前端開始介入完成柵格和框架搭建。產(chǎn)出頁面基礎框架。視覺同步開始探索和定義視覺風格探索。制定視覺框架。產(chǎn)出風格關鍵詞、產(chǎn)品配色方案。整個過程需要幾個角色不斷討論確定。

Step4：模塊設計

按照移動優(yōu)先的原則應該先進行移動端的模塊細節(jié)設計。不過我們選擇了從pC端開始設計細節(jié)。因為pC端開發(fā)能夠充分暴露業(yè)務復雜度。項目團隊的設計、開發(fā)、測試在pC環(huán)境下?lián)碛谐墒斓墓ぞ吆土鞒?。從pC開始讓開發(fā)過程更順暢。所以個人認為移動優(yōu)先是確定內(nèi)容策略時應該遵循的理念。細節(jié)設計和開發(fā)過程是否要移動優(yōu)先。取決于產(chǎn)品定位和項目團隊情況。

響應式框架確定了頁面結(jié)構(gòu)和響應模式。模塊設計這個過程開始完善所有信息排版和交互形式。這是交互設計師熟練也是耗時的工作。這個過程與傳統(tǒng)流程沒太大區(qū)別。只是心里要不斷提醒自己。這個模塊不是只為這個設備設計。網(wǎng)站建設它在其它設備下會出問題嗎?

交互確定頁面模塊細節(jié)后可以抽取出產(chǎn)品用到的控件、組件和公共模塊?，F(xiàn)在視覺和前端開始做一件有別于傳統(tǒng)流程的事情。視覺根據(jù)前期定義的風格設計控組件和公共模塊的視覺效果。把它們拼成一個模擬的頁面。我們稱之為風格拼貼稿。前端再把風格拼貼稿里的控組件和公共模塊實現(xiàn)出來。統(tǒng)一維護一套組件規(guī)范代碼。

傳統(tǒng)的做法往往是頁面視覺定稿后設計師開始整理視覺規(guī)范標注給前端。風格拼貼稿是將這個工作盡可能提前。并變成一個設計協(xié)作利器。它的好處是：

1、一個頁面的視覺效果實際上是由一堆控組件和公共模塊組成。用真實的控組件和公共模塊拼貼的模擬頁面已經(jīng)可以呈現(xiàn)出產(chǎn)品的視覺風格。把一個產(chǎn)品10多個頁面的視覺稿全部完成定稿是非常費時費力的事情。產(chǎn)出一份風格拼貼稿則輕松得多。所以它是一個高效的設計工具。

2、復雜產(chǎn)品總是涉及多個設計師和前端并行工作。盡早地把控組件和公共模塊抽取出來統(tǒng)一管理。是保證視覺風格一致性的有效方法。避免不同設計師同時設計同一個控組件或公共模塊。減少重復開發(fā)造成的浪費。也大大降低后期更新和維護頁面的成本。比如當需要修改“關注”按鈕時只需改一個就能全站生效。

Step5：響應式模塊設計

pC端頁面模塊細節(jié)和風格拼貼稿完成后。剩下工作是拓展出平板和手機端的完整設計稿。前端產(chǎn)出全部響應式頁面代碼。進行響應式模塊設計時需要關注的仍然是讓操作符合設備習慣。充分利用設備特性。

至此。一個全站響應式產(chǎn)品的頁面就陸續(xù)出來了。很多人認為響應式設計維護成本高的理由是一個頁面要同時設計多套設計稿。玩客這次經(jīng)驗告訴我們。確定一套設計稿和柵格系統(tǒng)后再拓展出其它設備下的設計方案。工作量遠比想象中的低。

Step6：測試&討論&優(yōu)化。提交開發(fā)

離大功告成還差后一步。在真實設備下測試頁面效果。項目團隊討論并持續(xù)優(yōu)化。

在提交開發(fā)之前需要盡早明確服務端響應(RESS)的策略。服務端與客戶端結(jié)合是目前解決響應式頁面性能問題的合理方案。哪些大圖片在移動設備下只需輸出小尺寸圖片?哪些內(nèi)容在什么設備下是不需要開發(fā)輸出的?哪些可以減少輸出的數(shù)據(jù)數(shù)量?與開發(fā)團隊協(xié)作的響應式可以有效控制頁面文件大小。避免頁面成為移動設備上燒用戶流量的罪魁禍。

測試通過后提交頁面進入開發(fā)環(huán)節(jié)。我們從可用性和可訪問性兩方面總結(jié)了一份響應式頁面測試checklist。測試要點包括但不限于以下內(nèi)容。歡迎補充。

網(wǎng)站建設總結(jié)：以上流程是我們團隊做完一個全站響應式項目后集體總結(jié)得出。不管你是對響應式感興趣、正在做響應式。還是即將開始做響應式。希望對你有所幫助。