響應式web設計不同于傳統web設計。它只需要一種心態(tài)，不需要提交一套設計草稿。它對設計、前端和開(kāi)發(fā)團隊之間的協(xié)作模型提出了新的挑戰。在一個(gè)具有復雜產(chǎn)品的完全響應的項目中，在每個(gè)交互階段應該產(chǎn)生什么樣的交互和愿景，如何協(xié)同工作，何時(shí)在前端進(jìn)行干預，以及什么使后端開(kāi)發(fā)更加合理。在播放器的**個(gè)版本之后，我們得到了一些答案。

　　響應方程設計稱(chēng)為amp；ldquo；設計amp; rdquo；代替amp；ldquo；技術(shù)amp；rdquo因為它是設計優(yōu)先級。我們需要設計一個(gè)明確的回應方式。我們不能生產(chǎn)一套設計草案，并等待前端看到它。將其轉換為響應網(wǎng)站設計。因此，整個(gè)過(guò)程從互動(dòng)階段開(kāi)始，分為六個(gè)主要步驟。視覺(jué)、前端、開(kāi)發(fā)等角色將根據情況盡快參與。

　　第1步：信息架構、內容策略。

　　互動(dòng)設計事業(yè)部根據產(chǎn)品定位和用戶(hù)分析，確定網(wǎng)站信息架構。呈現信息體系結構的方法有很多種。這不是本文的重點(diǎn)。

　　此時(shí)，您可以確定產(chǎn)品有多少頁(yè)，每個(gè)頁(yè)包含多少內容，以及內容優(yōu)先級是多少。許多產(chǎn)品包含N個(gè)多頁(yè)，并且對每個(gè)頁(yè)的響應性設計進(jìn)行一對一的考慮可能會(huì )讓人感到困惑和昂貴。因此，下一個(gè)重要步驟是分析頁(yè)面類(lèi)型并對頁(yè)面進(jìn)行分類(lèi)。例如，10多個(gè)頁(yè)面可以分為三類(lèi)：列表頁(yè)面、明細頁(yè)面和操作頁(yè)面。

　　第二步：移動(dòng)框架

　　我們先來(lái)解釋一下為什么第二步是先設計移動(dòng)的框架移動(dòng)的優(yōu)先級是移動(dòng)互聯(lián)網(wǎng)的概念，這是由LukeWroblewski移動(dòng)首先提出的優(yōu)先級并不意味著(zhù)移動(dòng)更重要。作為響應的設備設計同樣重要。它指的是優(yōu)先考慮移動(dòng)終端體驗設計，原因有三個(gè)。

　　手機關(guān)注設計，迫使你清楚地思考什么信息**重要。由于屏幕較小，每個(gè)屏幕顯示的內容較少；觸摸屏手機使用的是手指操作的復雜設備，而不是鼠標，因此操作要求更高；手機使用場(chǎng)景更加豐富，很多場(chǎng)景用戶(hù)非常不耐煩。比如，當你排隊看電影，用手機尋找電子機票時(shí)，你會(huì )立刻出現在你面前，結果，你很長(cháng)時(shí)間找不到機票。

　　手機的許多功能使設計更強大。隨著(zhù)語(yǔ)音輸入、地理定位、豐富的手勢操作和越來(lái)越多的傳感器，移動(dòng)交互比pC更有可能。從移動(dòng)電話(huà)開(kāi)始，您可以考慮如何更早地利用這些功能。

　　移動(dòng)電話(huà)發(fā)展迅速移動(dòng)電話(huà)將很快超越pC，成為**主流的互聯(lián)網(wǎng)接入方式。這種趨勢是不可逆轉的。

　　對于習慣pC環(huán)境的設計教師來(lái)說(shuō)，從移動(dòng)設備上實(shí)現設計可能是一個(gè)挑戰，他們的思維和工作習慣也被迫改變。但這種變化必須適應，因為用戶(hù)習慣正在改變。

　　回到主題，**后一步是對頁(yè)面進(jìn)行分類(lèi)，并確定每個(gè)頁(yè)面內容的優(yōu)先級。現在我們分析了每種頁(yè)面類(lèi)型的導航、主要內容等框架結構，**后給出了框架結構表。從播放器的框架中，我們可以看到全局導航對所有頁(yè)面都是通用的，本地導航只能用于列出類(lèi)頁(yè)面，并且有一個(gè)詳細類(lèi)頁(yè)面amp；ldquo；頁(yè)面所有者amp；rdquo；信息，關(guān)聯(lián)的導航不是每一頁(yè)。

　　然后我們開(kāi)始在手機上研究amp；ldquo；超薄頁(yè)amp；rdquo；設計框架（因為手機通常采用單列布局，頁(yè)面又細又長(cháng)）。在這一步中，信息結構是設計成**廣泛的框架，可以在白板或紙上完成。關(guān)鍵是要把**需要呈現給用戶(hù)的內容放在**重要的位置，符合手機的閱讀和操作習慣，充分利用移動(dòng)設備的特性。

　　第三步：應對框架

　　基于手機的框架擴展了平板和pC的框架，這是實(shí)現復雜產(chǎn)品響應設計的關(guān)鍵步驟，也是多個(gè)頁(yè)面有序響應的基礎。首先要確定響應模式，即從手機到平板電腦再到pC的導航變化，頁(yè)面布局的響應模式，如何根據內容優(yōu)先級調整模塊順序等。玩家在pC端用三欄布局，左邊作為本地導航或主信息區，中間一欄永遠是主頁(yè)信息，當頁(yè)面需要關(guān)聯(lián)導航時(shí)，在右邊一欄。

　　在此階段，所有頁(yè)面響應都開(kāi)始遵循規則。下一步是細化規則并將幀細化到特定大小。具體來(lái)說(shuō)，就是開(kāi)發(fā)流體網(wǎng)格系統。流體網(wǎng)格系統是一種基于百分比的網(wǎng)格布局工具，具體公式將在下一章介紹。

　　響應設計是設計概念的一種新興形式，與前端技術(shù)緊密結合，鼓勵早期的跨職能溝通和協(xié)作。在與響應框架和光柵系統交互之后，其他角色可以同步。前端包括網(wǎng)格和框架的構建，以及頁(yè)面基礎設施的輸出。視覺(jué)同步開(kāi)始探索和定義視覺(jué)風(fēng)格探索，開(kāi)發(fā)視覺(jué)框架，輸出風(fēng)格關(guān)鍵詞，產(chǎn)品配色方案。在整個(gè)過(guò)程中，需要討論和確定幾個(gè)角色。

　　用途：模塊設計

　　根據移動(dòng)優(yōu)先原則，我們應該首先設計移動(dòng)模塊的細節，但我們選擇從pC端開(kāi)始。由于pC機開(kāi)發(fā)可以充分暴露業(yè)務(wù)的復雜性，項目組擁有成熟的設計工具和流程，在pC機環(huán)境下進(jìn)行開(kāi)發(fā)和測試，使得開(kāi)發(fā)過(guò)程從pC機端更加順暢。所以我認為移動(dòng)優(yōu)先級是在確定內容策略時(shí)應該遵循的概念。具體設計和開(kāi)發(fā)過(guò)程移動(dòng)的優(yōu)先級取決于產(chǎn)品定位和項目團隊。

　　響應框架定義了頁(yè)面結構和響應模式，模塊設計流程開(kāi)始細化所有信息排版和交互表單，這是交互設計人員**熟練、**耗時(shí)的工作。這個(gè)過(guò)程和傳統的過(guò)程沒(méi)有太大區別，但不斷提醒自己，這個(gè)模塊不適合這個(gè)設備設計，其他設備下會(huì )不會(huì )有什么問(wèn)題

　　以交互方式確定頁(yè)面模塊的詳細信息后，可以提取產(chǎn)品使用的控件、組件和公共模塊。現在，遠景和前端開(kāi)始做一些不同于傳統流程的事情。視覺(jué)設計控件組件和常用模塊根據前面定義的視覺(jué)效果樣式，把它們放在一個(gè)模擬頁(yè)面中，我們稱(chēng)之為拼貼樣式。前端實(shí)現了風(fēng)格拼貼手稿中的控制組件和通用模塊，并統一維護了一套組件規范代碼。

　　傳統上，頁(yè)面完成后，設計部門(mén)開(kāi)始將視覺(jué)規范組織到前端。風(fēng)格拼貼是為了促進(jìn)作品盡快成為設計協(xié)作的工具。其優(yōu)點(diǎn)如下：

　　1.頁(yè)面的視覺(jué)效果實(shí)際上是一堆控制組件和公共模塊。模擬頁(yè)面將折疊，其中包含真實(shí)的控制組件和公共模塊，以顯示產(chǎn)品的視覺(jué)樣式。制作一個(gè)10頁(yè)以上的產(chǎn)品的視覺(jué)草圖既費時(shí)又費力，而且制作一個(gè)風(fēng)格拼貼要容易得多。所以這是一個(gè)有效的設計工具。

　　2.復雜產(chǎn)品總是涉及多個(gè)設計工程師與前端并行工作。盡快提取控制元件和通用模塊，統一管理是一種有效的方法。避免不同設計人員設計同時(shí)設計同一控制元件或通用模塊，減少重復開(kāi)發(fā)造成的浪費。它還大大降低了以后更新和維護頁(yè)面的成本，例如，當您需要修改時(shí)amp；ldquo；注意amp；rdquo；按鈕，您只需要更改一個(gè)按鈕就可以對整個(gè)站點(diǎn)產(chǎn)生影響。

　　第5步：響應模塊設計

　　pC頁(yè)面模塊的細節和樣式拼貼完成后，剩下的工作是展開(kāi)平板電腦和移動(dòng)終端的完整設計草稿，前端輸出所有響應頁(yè)面代碼。在設計響應模塊中，**重要的是使操作符合設備習慣，充分利用設備特性。

　　此時(shí)，一個(gè)網(wǎng)站回復產(chǎn)品頁(yè)面相繼出現。許多人認為responsive設計維護成本高的原因是頁(yè)面必須同時(shí)有多個(gè)設計草稿。經(jīng)驗告訴我們，當我們決定設計起草和網(wǎng)格系統，然后擴展設計其他設備時(shí)，工作量遠低于預期。

　　步驟6：測試、討論、優(yōu)化、提交和開(kāi)發(fā)

　　**后一步是在實(shí)際設備上測試頁(yè)面效果，項目組將討論并繼續優(yōu)化。

　　在進(jìn)行開(kāi)發(fā)之前，需要盡早定義服務(wù)器響應策略（RESS）。服務(wù)器端和客戶(hù)端的結合是解決響應頁(yè)面性能問(wèn)題的**合理方案。哪些大圖片只需要在移動(dòng)設備上輸出小尺寸的圖片，哪些不需要在哪些設備上開(kāi)發(fā)，這樣可以減少數據輸出量，開(kāi)發(fā)團隊的響應能力可以有效控制頁(yè)面文件的大小，并防止頁(yè)面成為燒掉移動(dòng)設備上用戶(hù)流量的罪魁禍首。

　　通過(guò)測試后，將頁(yè)面提交到開(kāi)發(fā)鏈接。我們總結了可用性和可訪(fǎng)問(wèn)性方面的響應性頁(yè)面測試清單。測試點(diǎn)包括但不限于內容。

　　深圳網(wǎng)站建設

http://ezekroy.com/wangzhansheji/940.html 回答的一般過(guò)程是什么網(wǎng)站設計