響應式網站設計的一般過程是怎樣的?

響應式Web設計與傳統Web設計不同，它只需要一種思想狀態，而不需要交付一組設計草案。它對設計、前端和開發團隊之間的協作模式提出了新的挑戰。在一個具有復雜產品的完全響應式項目中，每個交互階段應該產生什么?互動和視覺如何協同工作?前端什么時候介入?什么使后端開發更合理?在第一個版本的播放器之后，我們得到了一些答案。

響應式設計被稱為“設計”而不是“技術”，因為它是設計優先的任務。需要設計一個明確的回應的出路，不能產生一套設計草案后等待前端看到的情況，把它變成一個響應性網站設計。因此，整個過程從交互階段開始，分為六個主要步驟。視覺、前端、開發等角色會根據情況盡快參與。

步驟1:信息架構，內容策略。

交互設計師根據產品定位和用戶分析，確定站點信息架構。呈現信息架構的方式有很多種。這不是本文的重點。

此時，您可以確定產品有多少頁，每個頁面包含多少內容，以及內容優先級是多少。許多產品包含N個多頁面，對每個頁面的響應式設計進行一對一的考慮可能會讓人感到困惑和昂貴。因此，下一個重要步驟是分析頁面類型并對頁面進行分類。例如，超過10個頁面可以分為三類:列表頁面、詳細頁面和操作頁面。

步驟2:移動框架

讓我們首先解釋為什么第二步是首先設計移動框架。移動優先級是移動互聯網的概念，這是由Luke Wroblewski首先提出的。移動優先級并不意味著移動更重要。響應設計中的設備同樣重要。它指的是優先考慮手機終端體驗的設計，原因有三。

手機專注于設計，迫使你清楚地思考什么信息是最重要的。由于屏幕小，每個屏幕呈現的內容較少;觸摸屏手機使用的是手指操作而不是鼠標操作的復雜設備，操作要求更高;手機使用場景更豐富，很多場景用戶都很不耐煩，比如當你排隊看電影，在手機上尋找電子票的時候，馬上就排到你的前面，結果很長一段時間都找不到票。

手機的許多功能使得設計更加強大。有了語音輸入、地理定位、豐富的手勢操作和越來越多的傳感器，移動交互比PC更有可能。從移動電話開始，您可以考慮如何更早地利用這些功能。

移動電話正在迅速發展。移動電話將很快超越PC，成為最主流的互聯網接入方式。這種趨勢是不可逆轉的。

對于習慣于PC環境的設計師來說，從移動設備進行設計可能是一個挑戰，思維和工作習慣被迫改變。但這種變化必須適應，因為用戶習慣正在改變。

回到主題，最后一步對頁面進行了分類，確定了每個頁面內容的優先級，現在我們分析了每種頁面類型的導航，主要內容等框架結構，最后給出了框架結構表。從玩家的框架中可以看出，全局導航對于所有頁面來說都是通用的，局部導航只能用于列出類頁面，細節類頁面有一個“頁面所有者”信息，關聯的導航并不是每個頁面。

然后我們開始為手機上的“超薄頁面”設計框架(因為手機通常是單列布局，所以頁面又細又長)。在這一步中，信息結構被設計成最廣泛的框架，可以在白板或紙上完成。關鍵是把頁面最需要呈現給用戶的內容放在最重要的位置，符合手機的閱讀和操作習慣，充分利用移動設備的特點。

步驟3:響應框架

基于手機的框架擴展平板和PC端框架。這是實現復雜產品響應式設計的關鍵步驟，也是許多頁面有序響應的基礎。首先要做的是確定響應模式，即導航從手機到平板到PC的變化，頁面布局使用的響應模式，如何根據內容優先級調整模塊順序等等。玩家在PC端以三列布局，左側作為本地導航或主信息區域，中間的欄始終是主頁信息，當頁面需要與導航相關聯時在右側欄。

在這個階段，所有頁面的響應都開始遵循規則，下一步是細化規則并細化框架到特定的大小。具體來說，就是開發流體網格系統。流體網格系統是一種基于百分比的網格布局工具，具體公式將在另一章中詳細介紹。

響應式設計是一種與前端技術緊密結合的設計理念的新興形式，鼓勵早期跨功能的溝通和協作。在與響應框架和光柵系統交互之后，其他角色可以同步。前端涉及到網格和框架的構建，輸出頁面基礎結構。視覺同步開始探索和定義視覺風格探索，開發視覺框架，輸出風格關鍵詞，產品色彩方案。整個過程需要討論和確定幾個角色。

目的:模塊設計

根據移動優先的原則，我們應該先設計移動端的模塊細節，但是我們選擇從PC端開始。由于PC端開發可以充分暴露業務復雜性，所以項目團隊在PC環境中的設計、開發、測試都有成熟的工具和流程，從PC端使開發過程更加順利。所以我認為移動優先級是在確定內容策略時應該遵循的概念。具體的設計和開發流程是否移動優先取決于產品定位和項目組情況。

響應框架定義頁面結構和響應模式，模塊設計過程開始細化所有的信息排版和交互形式，這是交互設計人員最熟練、最耗時的工作。這個過程和傳統的過程并沒有太大的區別，但是不斷的提醒自己這個模塊不是為這個設備設計的，在其他設備下會有問題嗎?

在交互式地確定頁面模塊的詳細信息之后，您可以提取產品使用的控件、組件和通用模塊。現在，愿景和前端開始做一些不同于傳統過程的事情。視覺設計控制組件和常用模塊視覺效果根據之前定義的樣式，將它們放在一個模擬頁面中，我們稱之為樣式拼貼。前端實現了樣式拼貼文稿中的控制組件和通用模塊，并統一了一組組件規范代碼的維護。

傳統的做法是，頁面完成后，設計師開始將視覺規范組織到前端。風格拼貼是為了盡早的推進工作，成為設計協作的工具。它的優點是:

1。頁面的視覺效果實際上是由控制組件和公共模塊組成的堆棧。仿真頁面與真實的控件組件和公共模塊拼貼，可以顯示產品的視覺風格。制作一個超過10頁的產品的視覺草圖既費時又費力，而且制作一個風格拼貼要容易得多。所以這是一個有效的設計工具。

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

Step5:響應式模塊設計

在pc端頁面模塊的細節和風格拼貼完成后，剩下的工作就是展開平板和手機端的完整設計稿，前端輸出所有的響應頁面代碼。在設計響應模塊時，最重要的是要使操作符合設備習慣，充分利用設備特性。

這時，一個站點響應產品頁面一個接一個地出現了。很多人認為響應式設計維護成本高的原因是頁面必須同時設計多組設計稿。經驗告訴我們，當我們決定設計草案和網格系統，然后擴展其他設備的設計時，工作量比預期的要低得多。

步驟6:測試、討論、優化、提交和開發

最后一步是在實際設備上測試頁面效果，項目團隊將討論并繼續優化。

服務器響應策略(RESS)需要在提交開發之前盡早定義。服務器與客戶端相結合是目前解決響應頁面性能問題最合理的解決方案。哪些大圖片只需要在移動設備上輸出小尺寸圖片?哪些不需要在哪些設備上開發?哪些可以減少數據輸出量?與開發團隊協作的響應性可以有效地控制頁面文件的大小，并防止頁面成為在移動設備上燃燒用戶流量的罪魁禍首。

測試通過后，將頁面提交到開發鏈接。我們從可用性和可訪問性兩個方面總結了響應性頁面測試檢查表。測試點包括但不限于內容。

深圳網站建設