響應式網站設計與傳統網站設計不同。它只需要考慮一個州。它不是設計草案的交付。它為設計，前端和開發團隊之間的協作模型帶來了新的挑戰。在復雜產品的綜合產品響應項目中，與輸出的每個階段進行交互，進行什么交互和視覺合作，以及何時前端涉及什么使后端開發成為更合理的體驗。在第一個版本的“播放器”之后，我們得到了一些答案。
響應式設計被稱為響應式“設計”而不是響應式“技術”，因為它是設計第一的工作。需要設計一個明確的響應方法然后出來，不能產生一套設計草稿并等待前端將其看成響應式網站設計。因此，整個過程從交互階段開始，分為六個主要步驟。愿景，前端和發展的角色盡早參與。
步驟1：確定內容策略的信息架構。
基于產品定位和用戶分析，交互設計者確定站點信息架構。 （有很多方法可以呈現信息架構，這不是本文的重點，不詳細）。
第2步：移動框架
讓我談談為什么第二步是首先設計移動框架。移動優先級是由Luke Wroblewski首先提出的移動互聯網浪潮中產生的概念。移動優先級并不意味著移動性更重要，并且設備在響應式設計理念中同樣重要。它指的是首先設計移動終端的經驗，原因有三：
移動電話專注于設計，迫使您找出最重要的信息。由于手機的屏幕很小，每個屏幕上顯示的內容很小;觸摸屏手機采用手指操作代替鼠標等精密設備進行操作，對操作要求較高;手機使用場景更加豐富，很多場景用戶都不耐煩，比如當你排隊看電影時，你正在手機上尋找電子票。這是一個長時間推遲但你找不到機票的車禍。
手機的許多功能使設計更加強大。手機上的語音輸入，地理位置，豐富的手勢，越來越多的傳感器，手機互動比PC更具可能性。通過手機進行設計，您可以考慮如何更早地使用這些功能。
手機正在快速增長。手機即將超越個人電腦，成為最主流的互聯網接入方式。這種趨勢是不可逆轉的。
回到主題，上一步已對頁面進行了分類并確定了每個頁面內容的優先級。現在，它分析導航的幀結構和每種類型頁面的主要內容，最后繪制一個幀結構表。從播放器框架結構可以看出，全局導航對于所有頁面都是通用的。本地導航僅適用于列表類型頁面。詳細信息頁面具有“頁面主頁”信息，并且相關導航不適用于中山做網站公司每個頁面。
然后開始在手機上設計“超薄頁面”的框架（因為手機通常是單列布局，頁面很薄很長）。此步驟首先將信息結構設計為可在白板或紙張上完成的最廣泛的框架。實現的關鍵目標是將該頁面需要呈現的內容放在最重要的位置，以符合手機上的閱讀和操作習慣，并充分利用移動設備的特性。 。
第3步：響應式框架
在所有頁面響應的這個階段，都有遵循的規則。下一步是繼續優化規則并使框架精確到特定大小。具體而言，是開發流體網格系統。流體網格系統是基于百分比的網格布局工具，具體的開發方法將在另一章[知識]中詳細描述。
響應性是設計概念與前端技術緊密結合的新興形式，盡可能早地鼓勵跨功能通信和協作。一旦響應式框架和網格系統以交互方式確定，其他角色就可以一起工作。前端開始介入以完成網格和框架構造，從而產生頁面基礎框架。視覺同步開始探索和定義視覺樣式探索，開發可視化框架，并生成樣式關鍵字和產品顏色方案。整個過程需要討論和確定幾個角色。
第4步：模塊設計
響應式框架確定頁面結構和響應模式。模塊設計過程開始改進所有信息布局和交互形式。這是交互設計人員最熟練，最耗時的工作。此過程與傳統過程沒有太大區別，但我必須提醒自己，此模塊不是為此設備設計的。它會在其他設備下引起問題嗎？
在交互以確定頁面模塊的詳細信息之后，您可以提取產品使用的控件，組件和公共模塊。現在，愿景和前端開始做與傳統流程不同的事情。 Vision根據前一時期定義的樣式設計控制組件和通用模塊的視覺效果，并將它們放入模擬頁面，我們稱之為樣式拼貼。前端實現樣式拼貼中的控件組件和通用模塊，以維護一組組件規范代碼。
傳統的方法通常是在頁面完成后，設計師開始將視覺規范組織到前端。樣式拼貼是為了使這項工作盡早完成，并將其轉化為設計協作工具。它的好處是：
2，復雜的產品總是涉及多個設計師和前端并行工作，盡早提取控制組件和公共模塊進行統一管理，是保證視覺風格一致性的有效方法。避免不同的設計人員同時設計相同的控制組件或通用模塊，減少重復開發造成的浪費。中山做網站公司它還大大降低了更新后和維護頁面的成本。例如，當您需要修改“關注”按鈕時，您只需要更改一個即可生效。
第五步：響應模塊設計
完成PC端頁面模塊細節和樣式拼貼后，剩下的工作是擴展平板電腦和手機的完整設計，前端生成所有響應式頁面代碼。在設計響應模塊時要注意的最重要的事情是使操作符合設備習慣并充分利用設備特性。
此時，一站式全站儀響應產品紛紛問世。許多人認為響應式設計維護成本高的原因是一頁必須同時設計多組設計。這種游戲體驗告訴我們，在確定了一套設計草圖和網格系統之后，我們將擴展其他設備的設計，并且工作量遠低于預期。
Step6：測試討論優化，提交開發
在進行開發之前，需要盡早識別明確的服務器響應（RESS）策略。服務器和客戶端的組合是解決響應式頁面性能問題的最合理的解決方案。哪些大圖片只需要在移動設備下輸出小尺寸圖片，哪些內容不需要設備開發輸出，這可以減少輸出數據量和開發團隊的響應能力，可以有效地控制頁面文件大小，避免頁面成為移動設備在設備上刻錄用戶流量的罪魁禍首。
測試通過后，提交頁面進入開發過程。我們在可用性和可訪問性方面總結了響應式頁面測試清單。測試點包括但不限于此。
18868949445
QQ客服
