響應(yīng)式設(shè)計(jì)被稱為響應(yīng)式“設(shè)計(jì)”而不是響應(yīng)式“技術(shù)”，因?yàn)樗窃O(shè)計(jì)第一的工作。有必要設(shè)計(jì)一個(gè)明確的響應(yīng)方法，然后實(shí)現(xiàn)它。在完成一組設(shè)計(jì)草稿后，等待前端查看并將其轉(zhuǎn)換為響應(yīng)式網(wǎng)頁(yè)。因此，整個(gè)過(guò)程從交互階段開(kāi)始，分為六個(gè)主要步驟。愿景，前端和發(fā)展的角色盡早參與。—— 沈陽(yáng)網(wǎng)站建設(shè)設(shè)計(jì)總監(jiān)朱說(shuō)。

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

基于產(chǎn)品定位和用戶分析，交互設(shè)計(jì)者確定站點(diǎn)信息架構(gòu)。 （有很多方法可以呈現(xiàn)信息架構(gòu)，這不是本文的重點(diǎn)，不詳細(xì)）。

此時(shí)，您可以知道此產(chǎn)品有多少頁(yè)面，每個(gè)頁(yè)面包含多少內(nèi)容以及內(nèi)容優(yōu)先級(jí)。許多產(chǎn)品包含超過(guò)N頁(yè)，考慮到響應(yīng)式設(shè)計(jì)，每個(gè)頁(yè)面都令人困惑且成本高昂。因此，下一個(gè)重要步驟是分析頁(yè)面類型以對(duì)頁(yè)面進(jìn)行分類。以訪客為例，您可以將10多個(gè)頁(yè)面分為三類：列表類頁(yè)面，詳細(xì)類別頁(yè)面和操作類頁(yè)面。

Step2：移動(dòng)框架

讓我談?wù)劄槭裁吹诙绞鞘紫仍O(shè)計(jì)移動(dòng)框架。移動(dòng)優(yōu)先級(jí)是移動(dòng)互聯(lián)網(wǎng)浪潮下形成的概念。移動(dòng)優(yōu)先級(jí)并不意味著移動(dòng)性更重要，并且設(shè)備在響應(yīng)式設(shè)計(jì)理念中同樣重要。在上一步驟中，頁(yè)面已被分類，并且已確定每頁(yè)的內(nèi)容優(yōu)先級(jí)。現(xiàn)在，分析每種類型頁(yè)面的導(dǎo)航框架結(jié)構(gòu)和主要內(nèi)容，最后得到框架結(jié)構(gòu)表。 沈陽(yáng)網(wǎng)站建設(shè)認(rèn)為，從播放器框架結(jié)構(gòu)來(lái)看，全局導(dǎo)航對(duì)所有頁(yè)面都是通用的，部分導(dǎo)航只在列表類頁(yè)面上可用，詳細(xì)類頁(yè)面有一個(gè)“頁(yè)面主頁(yè)”信息，相關(guān)的導(dǎo)航不是每個(gè)頁(yè)面。

然后開(kāi)始在手機(jī)上設(shè)計(jì)“超薄頁(yè)面”的框架（因?yàn)槭謾C(jī)通常是單列布局，頁(yè)面很薄很長(zhǎng)）。此步驟首先將信息結(jié)構(gòu)設(shè)計(jì)為可在白板或紙張上完成的擴(kuò)展框架。要實(shí)現(xiàn)的關(guān)鍵目標(biāo)是將該頁(yè)面需要呈現(xiàn)的內(nèi)容放在重要位置，以符合手機(jī)上的閱讀和操作習(xí)慣，并充分利用移動(dòng)設(shè)備的特性。

Step3：響應(yīng)式框架

根據(jù)移動(dòng)終端的框架擴(kuò)展平板電腦和PC端框架。這是復(fù)雜產(chǎn)品響應(yīng)式設(shè)計(jì)的關(guān)鍵步驟，它是許多頁(yè)面以結(jié)構(gòu)化方式響應(yīng)的基礎(chǔ)。問(wèn)題是確定響應(yīng)模式，即如何更改從手機(jī)到平板電腦到PC的導(dǎo)航，頁(yè)面布局使用的響應(yīng)方法，如何根據(jù)內(nèi)容優(yōu)先級(jí)調(diào)整模塊順序等等。播放器主要在PC端，具有三列布局。左列用作本地導(dǎo)航或所有者信息區(qū)域。中間列始終是頁(yè)面正文信息。當(dāng)頁(yè)面需要與導(dǎo)航相關(guān)聯(lián)時(shí)，它將統(tǒng)一放置在右列上。

在所有頁(yè)面響應(yīng)的這個(gè)階段，都有遵循的規(guī)則。下一步是繼續(xù)優(yōu)化規(guī)則并使框架精確到特定大小。具體而言，是開(kāi)發(fā)流體網(wǎng)格系統(tǒng)。流體網(wǎng)格系統(tǒng)是基于百分比的網(wǎng)格布局工具。

響應(yīng)性是設(shè)計(jì)概念與前端技術(shù)緊密結(jié)合的新興形式，盡可能早地鼓勵(lì)跨功能通信和協(xié)作。一旦響應(yīng)式框架和網(wǎng)格系統(tǒng)以交互方式確定，其他角色就可以一起工作。前端開(kāi)始介入以完成網(wǎng)格和框架構(gòu)造，從而產(chǎn)生頁(yè)面基礎(chǔ)框架。視覺(jué)同步開(kāi)始探索和定義視覺(jué)樣式探索，開(kāi)發(fā)可視化框架，并生成樣式關(guān)鍵字和產(chǎn)品顏色方案。整個(gè)過(guò)程需要討論和確定幾個(gè)角色。

Step4：模塊設(shè)計(jì)

根據(jù)移動(dòng)優(yōu)先原則，首先應(yīng)該進(jìn)行移動(dòng)終端的模塊設(shè)計(jì)，但我們選擇從PC端設(shè)計(jì)細(xì)節(jié)。由于PC端開(kāi)發(fā)可以充分暴露業(yè)務(wù)復(fù)雜性，項(xiàng)目團(tuán)隊(duì)的設(shè)計(jì)，開(kāi)發(fā)和測(cè)試在PC環(huán)境中擁有成熟的工具和流程，并且PC的開(kāi)發(fā)過(guò)程更加順暢。因此，個(gè)人認(rèn)為移動(dòng)優(yōu)先級(jí)是確定內(nèi)容策略時(shí)應(yīng)遵循的概念。是否應(yīng)首先移動(dòng)細(xì)節(jié)設(shè)計(jì)和開(kāi)發(fā)過(guò)程取決于產(chǎn)品定位和項(xiàng)目團(tuán)隊(duì)情況。

響應(yīng)式框架確定頁(yè)面結(jié)構(gòu)和響應(yīng)模式。模塊設(shè)計(jì)過(guò)程開(kāi)始改進(jìn)所有信息布局和交互形式。對(duì)于交互設(shè)計(jì)者來(lái)說(shuō)，這是一項(xiàng)熟練且耗時(shí)的任務(wù)。這個(gè)過(guò)程與傳統(tǒng)的過(guò)程沒(méi)什么不同，但我必須提醒自己，這個(gè)模塊不僅僅是為這個(gè)設(shè)備設(shè)計(jì)的，沈陽(yáng)網(wǎng)站建設(shè)在其他設(shè)備下會(huì)有問(wèn)題嗎？

在交互以確定頁(yè)面模塊的詳細(xì)信息之后，您可以提取產(chǎn)品使用的控件，組件和公共模塊。現(xiàn)在，愿景和前端開(kāi)始做與傳統(tǒng)流程不同的事情。 Vision根據(jù)前一時(shí)期定義的樣式設(shè)計(jì)控制組件和通用模塊的視覺(jué)效果，并將它們放入模擬頁(yè)面，我們稱之為樣式拼貼。前端實(shí)現(xiàn)樣式拼貼中的控件組件和通用模塊，以維護(hù)一組組件規(guī)范代碼。

傳統(tǒng)的方法通常是在頁(yè)面完成后，設(shè)計(jì)師開(kāi)始將視覺(jué)規(guī)范組織到前端。樣式拼貼是為了使這項(xiàng)工作盡早完成，并將其轉(zhuǎn)化為設(shè)計(jì)協(xié)作工具。它的好處是：

1.頁(yè)面的視覺(jué)效果實(shí)際上由一堆控件組件和公共模塊組成。實(shí)際控制組件的模擬頁(yè)面和公共模塊拼貼可以呈現(xiàn)產(chǎn)品的視覺(jué)風(fēng)格。最終確定超過(guò)10頁(yè)產(chǎn)品的視覺(jué)草稿是非常耗時(shí)且勞動(dòng)密集的，并且生成樣式拼貼更容易。所以它是一種高效的設(shè)計(jì)工具。

2，復(fù)雜的產(chǎn)品總是涉及多個(gè)設(shè)計(jì)師和前端并行工作，盡早提取控制組件和公共模塊進(jìn)行統(tǒng)一管理，是保證視覺(jué)風(fēng)格一致性的有效方法。避免不同的設(shè)計(jì)人員同時(shí)設(shè)計(jì)相同的控制組件或通用模塊，減少重復(fù)開(kāi)發(fā)造成的浪費(fèi)。它還大大降低了更新后和維護(hù)頁(yè)面的成本。例如，當(dāng)您需要修改“關(guān)注”按鈕時(shí)，您只需要更改一個(gè)即可生效。

Step5：響應(yīng)式模塊設(shè)計(jì)

完成PC端頁(yè)面模塊細(xì)節(jié)和樣式拼貼后，剩下的工作是擴(kuò)展平板電腦和手機(jī)的完整設(shè)計(jì)，前端生成所有響應(yīng)式頁(yè)面代碼。需要注意響應(yīng)模塊的設(shè)計(jì)是使操作符合設(shè)備習(xí)慣并充分利用設(shè)備特性。

此時(shí)，一站式全站儀響應(yīng)產(chǎn)品紛紛問(wèn)世。許多人認(rèn)為響應(yīng)式設(shè)計(jì)維護(hù)成本高的原因是一頁(yè)必須同時(shí)設(shè)計(jì)多組設(shè)計(jì)。這種游戲體驗(yàn)告訴我們，在確定了一套設(shè)計(jì)草圖和網(wǎng)格系統(tǒng)之后，我們將擴(kuò)展其他設(shè)備的設(shè)計(jì)，并且工作量遠(yuǎn)低于預(yù)期。

Step6：測(cè)試&討論&優(yōu)化，提交開(kāi)發(fā)

游戲完成后的一步，在真實(shí)設(shè)備下測(cè)試頁(yè)面效果，項(xiàng)目團(tuán)隊(duì)討論并繼續(xù)優(yōu)化。

在進(jìn)行開(kāi)發(fā)之前，需要盡早識(shí)別明確的服務(wù)器響應(yīng)（RESS）策略。服務(wù)器和客戶端的組合是解決響應(yīng)式頁(yè)面性能問(wèn)題的合理解決方案。哪些大圖片只需要在移動(dòng)設(shè)備下輸出小尺寸圖片？什么內(nèi)容不需要在什么設(shè)備下開(kāi)發(fā)輸出？哪個(gè)可以減少輸出數(shù)據(jù)量？與開(kāi)發(fā)團(tuán)隊(duì)的響應(yīng)能夠有效地控制頁(yè)面文件大小，并避免Pages成為在移動(dòng)設(shè)備上刻錄用戶流量的罪魁禍?zhǔn)住?

測(cè)試通過(guò)后，提交頁(yè)面進(jìn)入開(kāi)發(fā)過(guò)程。我們?cè)诳捎眯院涂稍L問(wèn)性方面總結(jié)了一個(gè)響應(yīng)式頁(yè)面測(cè)試清單。測(cè)試點(diǎn)包括但不限于以下內(nèi)容。歡迎添加。

沈陽(yáng)網(wǎng)站建設(shè)摘要：上述過(guò)程是我們團(tuán)隊(duì)在完成全站點(diǎn)響應(yīng)項(xiàng)目后的集體摘要。無(wú)論您對(duì)響應(yīng)，響應(yīng)或響應(yīng)感興趣，我都希望能幫到您。