中企云安
www.techlu.cn
一站式互聯網信息化服務專家
PC網站、移動網站、微信網站、APP，四網合一
復雜產品的響應式設計步驟
來源:
|
作者:中企云安
|
發布時間: 2165天前
|
4041 次瀏覽
|
分享到:
響應式網頁不像傳統網頁只需考慮一種狀態，不是交付一套設計稿就完事兒了，它給設計、前端和開發團隊之間的協作模式帶來新的挑戰。在一個復雜產品全面響應式的項目里，交互每個階段該產出什么?交互與視覺如何協作?前端何時介入?哪些事情讓后端開發來做更合理?
接著開始設計手機端“超細長頁面”的框架(因為手機上一般是單列布局，所以頁面又細又長)。這一步開始把信息結構設計成較粗放的框架，可以在白板或紙面上 完成。要實現的關鍵目標是：把這個頁面較需要呈現給用戶的內容放在較重要的位置，要符合手機上的閱讀和操作習慣，盡量利用手機設備的特性。
根據手機端的框架拓展出平板和PC端框架。這是復雜產品實現響應式設計的關鍵步驟，它是讓眾多頁面有條理地響應起來的基礎。**件事情是確定響應式模式， 即從手機到平板到PC，導航怎么變化，頁面布局用哪種響應方式，根據內容優先級如何調整模塊順序，等等。玩客在PC端以三欄布局為主，左邊欄作為局部導航 或者主人信息區，中間欄始終是頁面主體信息，當頁面需要關聯導航時統一放在右邊欄。
到現在這個階段所有頁面的響應式開始有規則可循，下一步工作就是繼續細化規則，把框架細化到具體尺寸。具體說來就是制定流體柵格系統
響應式是一種設計理念與前端技術緊密結合的新興形態，鼓勵盡早進行跨職能溝通協作。交互確定響應式框架和柵格系統后，其他角色就可以同步開展工作 了。前端開始介入完成柵格和框架搭建，產出頁面基礎框架。視覺同步開始探索和定義視覺風格探索，制定視覺框架，產出風格關鍵詞、產品配色方案。整個過程需 要幾個角色不斷討論確定。