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

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

　　第1步：信息架構(gòu)、內(nèi)容策略。

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

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

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

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

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

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

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

　　對(duì)于習(xí)慣pC環(huán)境的設(shè)計(jì)教師來說，從移動(dòng)設(shè)備上實(shí)現(xiàn)設(shè)計(jì)可能是一個(gè)挑戰(zhàn)，他們的思維和工作習(xí)慣也被迫改變。但這種變化必須適應(yīng)，因?yàn)橛脩袅?xí)慣正在改變。

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

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

　　第三步：應(yīng)對(duì)框架

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

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

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

　　用途：模塊設(shè)計(jì)

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

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

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

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

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

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

　　第5步：響應(yīng)模塊設(shè)計(jì)

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

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

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

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

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

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

　　深圳網(wǎng)站建設(shè)

http://79806.xyz/wangzhansheji/940.html 回答的一般過程是什么網(wǎng)站設(shè)計(jì)