ZICHI.NET
紫馳科技
一站式互聯(lián)網(wǎng)信息化技術(shù)服務(wù)商
PC網(wǎng)站、移動網(wǎng)站、微信網(wǎng)站、APP,四網(wǎng)合一
復(fù)雜產(chǎn)品的響應(yīng)式設(shè)計步驟
來源:互聯(lián)網(wǎng) | 作者:tpl-ceb9392 | 發(fā)布時間: 2908天前 | 4482 次瀏覽 | 分享到:
響應(yīng)式網(wǎng)頁不像傳統(tǒng)網(wǎng)頁只需考慮一種狀態(tài),不是交付一套設(shè)計稿就完事兒了,它給設(shè)計、前端和開發(fā)團隊之間的協(xié)作模式帶來新的挑戰(zhàn)。在一個復(fù)雜產(chǎn)品全面響應(yīng)式的項目里,交互每個階段該產(chǎn)出什么?交互與視覺如何協(xié)作?前端何時介入?哪些事情讓后端開發(fā)來做更合理?



接著開始設(shè)計手機端“超細長頁面”的框架(因為手機上一般是單列布局,所以頁面又細又長)。這一步開始把信息結(jié)構(gòu)設(shè)計成較粗放的框架,可以在白板或紙面上 完成。要實現(xiàn)的關(guān)鍵目標是:把這個頁面較需要呈現(xiàn)給用戶的內(nèi)容放在較重要的位置,要符合手機上的閱讀和操作習(xí)慣,盡量利用手機設(shè)備的特性。
根據(jù)手機端的框架拓展出平板和PC端框架。這是復(fù)雜產(chǎn)品實現(xiàn)響應(yīng)式設(shè)計的關(guān)鍵步驟,它是讓眾多頁面有條理地響應(yīng)起來的基礎(chǔ)。**件事情是確定響應(yīng)式模式, 即從手機到平板到PC,導(dǎo)航怎么變化,頁面布局用哪種響應(yīng)方式,根據(jù)內(nèi)容優(yōu)先級如何調(diào)整模塊順序,等等。玩客在PC端以三欄布局為主,左邊欄作為局部導(dǎo)航 或者主人信息區(qū),中間欄始終是頁面主體信息,當頁面需要關(guān)聯(lián)導(dǎo)航時統(tǒng)一放在右邊欄。
到現(xiàn)在這個階段所有頁面的響應(yīng)式開始有規(guī)則可循,下一步工作就是繼續(xù)細化規(guī)則,把框架**到具體尺寸。具體說來就是制定流體柵格系統(tǒng)

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


聲明:除原創(chuàng)內(nèi)容及特別說明之外,發(fā)布稿件文字及圖片均來自網(wǎng)絡(luò)及各大主流媒體。版權(quán)歸原作者所有。如認為內(nèi)容侵權(quán),請聯(lián)系我們刪除。