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

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

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

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

Step2：移動框架

讓我談談為什么第二步是首先設計移動框架。移動優(yōu)先級是移動互聯(lián)網(wǎng)浪潮下形成的概念。移動優(yōu)先級并不意味著移動性更重要，并且設備在響應式設計理念中同樣重要。在上一步驟中，頁面已被分類，并且已確定每頁的內(nèi)容優(yōu)先級?，F(xiàn)在，分析每種類型頁面的導航框架結構和主要內(nèi)容，最后得到框架結構表。 沈陽網(wǎng)站建設認為，從播放器框架結構來看，全局導航對所有頁面都是通用的，部分導航只在列表類頁面上可用，詳細類頁面有一個“頁面主頁”信息，相關的導航不是每個頁面。

然后開始在手機上設計“超薄頁面”的框架（因為手機通常是單列布局，頁面很薄很長）。此步驟首先將信息結構設計為可在白板或紙張上完成的擴展框架。要實現(xiàn)的關鍵目標是將該頁面需要呈現(xiàn)的內(nèi)容放在重要位置，以符合手機上的閱讀和操作習慣，并充分利用移動設備的特性。

Step3：響應式框架

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

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

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

Step4：模塊設計

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

響應式框架確定頁面結構和響應模式。模塊設計過程開始改進所有信息布局和交互形式。對于交互設計者來說，這是一項熟練且耗時的任務。這個過程與傳統(tǒng)的過程沒什么不同，但我必須提醒自己，這個模塊不僅僅是為這個設備設計的，沈陽網(wǎng)站建設在其他設備下會有問題嗎？

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

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

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

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

Step5：響應式模塊設計

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

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

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

游戲完成后的一步，在真實設備下測試頁面效果，項目團隊討論并繼續(xù)優(yōu)化。

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

測試通過后，提交頁面進入開發(fā)過程。我們在可用性和可訪問性方面總結了一個響應式頁面測試清單。測試點包括但不限于以下內(nèi)容。歡迎添加。

沈陽網(wǎng)站建設摘要：上述過程是我們團隊在完成全站點響應項目后的集體摘要。無論您對響應，響應或響應感興趣，我都希望能幫到您。