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

Step1：信息架構。確定內容策略。

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

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

Step2：移動框架

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

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

Step3：響應式框架

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

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

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

Step4：模塊設計

按照移動優先的原則應該先進行移動端的模塊細節設計。不過我們選擇了從pC端開始設計細節。因為pC端開發能夠充分暴露業務復雜度。項目團隊的設計、開發、測試在pC環境下擁有成熟的工具和流程。從pC開始讓開發過程更順暢。所以個人認為移動優先是確定內容策略時應該遵循的理念。細節設計和開發過程是否要移動優先。取決于產品定位和項目團隊情況。

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

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

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

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

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

Step5：響應式模塊設計

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

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

Step6：測試&討論&優化。提交開發

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

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

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

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

當前文章：網站建設說說有復雜產品需求的網站如何做響應式
文章位置：http://m.kartarina.com/news24/294074.html

成都網站建設公司_創新互聯，為您提供動態網站、面包屑導航、網站內鏈、App設計、搜索引擎優化、網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯