回答的一般過程是什么網(wǎng)站設(shè)計
響應(yīng)式web設(shè)計不同于傳統(tǒng)web設(shè)計。它只需要一種心態(tài)，不需要提交一套設(shè)計草稿。它對設(shè)計、前端和開發(fā)團(tuán)隊之間的協(xié)作模型提出了新的挑戰(zhàn)。在一個具有復(fù)雜產(chǎn)品的完全響應(yīng)的項目中，在每個交互階段應(yīng)該產(chǎn)生什么樣的交互和愿景，如何協(xié)同工作，何時在前端進(jìn)行干預(yù)，以及什么使后端開發(fā)更加合理。在播放器的**個版本之后，我們得到了一些答案。
響應(yīng)方程設(shè)計稱為amp；ldquo；設(shè)計amp; rdquo；代替amp；ldquo；技術(shù)amp；rdquo因為它是設(shè)計優(yōu)先級。我們需要設(shè)計一個明確的回應(yīng)方式。我們不能生產(chǎn)一套設(shè)計草案，并等待前端看到它。將其轉(zhuǎn)換為響應(yīng)網(wǎng)站設(shè)計。因此，整個過程從互動階段開始，分為六個主要步驟。視覺、前端、開發(fā)等角色將根據(jù)情況盡快參與。
第1步：信息架構(gòu)、內(nèi)容策略。
互動設(shè)計事業(yè)部根據(jù)產(chǎn)品定位和用戶分析，確定網(wǎng)站信息架構(gòu)。呈現(xiàn)信息體系結(jié)構(gòu)的方法有很多種。這不是本文的重點。
此時，您可以確定產(chǎn)品有多少頁，每個頁包含多少內(nèi)容，以及內(nèi)容優(yōu)先級是多少。許多產(chǎn)品包含N個多頁，并且對每個頁的響應(yīng)性設(shè)計進(jìn)行一對一的考慮可能會讓人感到困惑和昂貴。因此，下一個重要步驟是分析頁面類型并對頁面進(jìn)行分類。例如，10多個頁面可以分為三類：列表頁面、明細(xì)頁面和操作頁面。
第二步：移動框架
我們先來解釋一下為什么第二步是先設(shè)計移動的框架移動的優(yōu)先級是移動互聯(lián)網(wǎng)的概念，這是由LukeWroblewski移動首先提出的優(yōu)先級并不意味著移動更重要。作為響應(yīng)的設(shè)備設(shè)計同樣重要。它指的是優(yōu)先考慮移動終端體驗設(shè)計，原因有三個。
手機(jī)關(guān)注設(shè)計，迫使你清楚地思考什么信息**重要。由于屏幕較小，每個屏幕顯示的內(nèi)容較少；觸摸屏手機(jī)使用的是手指操作的復(fù)雜設(shè)備，而不是鼠標(biāo)，因此操作要求更高；手機(jī)使用場景更加豐富，很多場景用戶非常不耐煩。比如，當(dāng)你排隊看電影，用手機(jī)尋找電子機(jī)票時，你會立刻出現(xiàn)在你面前，結(jié)果，你很長時間找不到機(jī)票。
手機(jī)的許多功能使設(shè)計更強(qiáng)大。隨著語音輸入、地理定位、豐富的手勢操作和越來越多的傳感器，移動交互比pC更有可能。從移動電話開始，您可以考慮如何更早地利用這些功能。
移動電話發(fā)展迅速移動電話將很快超越pC，成為**主流的互聯(lián)網(wǎng)接入方式。這種趨勢是不可逆轉(zhuǎn)的。
對于習(xí)慣pC環(huán)境的設(shè)計教師來說，從移動設(shè)備上實現(xiàn)設(shè)計可能是一個挑戰(zhàn)，他們的思維和工作習(xí)慣也被迫改變。但這種變化必須適應(yīng)，因為用戶習(xí)慣正在改變。
回到主題，**后一步是對頁面進(jìn)行分類，并確定每個頁面內(nèi)容的優(yōu)先級?，F(xiàn)在我們分析了每種頁面類型的導(dǎo)航、主要內(nèi)容等框架結(jié)構(gòu)，**后給出了框架結(jié)構(gòu)表。從播放器的框架中，我們可以看到全局導(dǎo)航對所有頁面都是通用的，本地導(dǎo)航只能用于列出類頁面，并且有一個詳細(xì)類頁面amp；ldquo；頁面所有者amp；rdquo；信息，關(guān)聯(lián)的導(dǎo)航不是每一頁。
然后我們開始在手機(jī)上研究amp；ldquo；超薄頁amp；rdquo；設(shè)計框架（因為手機(jī)通常采用單列布局，頁面又細(xì)又長）。在這一步中，信息結(jié)構(gòu)是設(shè)計成**廣泛的框架，可以在白板或紙上完成。關(guān)鍵是要把**需要呈現(xiàn)給用戶的內(nèi)容放在**重要的位置，符合手機(jī)的閱讀和操作習(xí)慣，充分利用移動設(shè)備的特性。
第三步：應(yīng)對框架
基于手機(jī)的框架擴(kuò)展了平板和pC的框架，這是實現(xiàn)復(fù)雜產(chǎn)品響應(yīng)設(shè)計的關(guān)鍵步驟，也是多個頁面有序響應(yīng)的基礎(chǔ)。首先要確定響應(yīng)模式，即從手機(jī)到平板電腦再到pC的導(dǎo)航變化，頁面布局的響應(yīng)模式，如何根據(jù)內(nèi)容優(yōu)先級調(diào)整模塊順序等。玩家在pC端用三欄布局，左邊作為本地導(dǎo)航或主信息區(qū)，中間一欄永遠(yuǎn)是主頁信息，當(dāng)頁面需要關(guān)聯(lián)導(dǎo)航時，在右邊一欄。
在此階段，所有頁面響應(yīng)都開始遵循規(guī)則。下一步是細(xì)化規(guī)則并將幀細(xì)化到特定大小。具體來說，就是開發(fā)流體網(wǎng)格系統(tǒng)。流體網(wǎng)格系統(tǒng)是一種基于百分比的網(wǎng)格布局工具，具體公式將在下一章介紹。
響應(yīng)設(shè)計是設(shè)計概念的一種新興形式，與前端技術(shù)緊密結(jié)合，鼓勵早期的跨職能溝通和協(xié)作。在與響應(yīng)框架和光柵系統(tǒng)交互之后，其他角色可以同步。前端包括網(wǎng)格和框架的構(gòu)建，以及頁面基礎(chǔ)設(shè)施的輸出。視覺同步開始探索和定義視覺風(fēng)格探索，開發(fā)視覺框架，輸出風(fēng)格關(guān)鍵詞，產(chǎn)品配色方案。在整個過程中，需要討論和確定幾個角色。
用途：模塊設(shè)計
根據(jù)移動優(yōu)先原則，我們應(yīng)該首先設(shè)計移動模塊的細(xì)節(jié)，但我們選擇從pC端開始。由于pC機(jī)開發(fā)可以充分暴露業(yè)務(wù)的復(fù)雜性，項目組擁有成熟的設(shè)計工具和流程，在pC機(jī)環(huán)境下進(jìn)行開發(fā)和測試，使得開發(fā)過程從pC機(jī)端更加順暢。所以我認(rèn)為移動優(yōu)先級是在確定內(nèi)容策略時應(yīng)該遵循的概念。具體設(shè)計和開發(fā)過程移動的優(yōu)先級取決于產(chǎn)品定位和項目團(tuán)隊。
響應(yīng)框架定義了頁面結(jié)構(gòu)和響應(yīng)模式，模塊設(shè)計流程開始細(xì)化所有信息排版和交互表單，這是交互設(shè)計人員**熟練、**耗時的工作。這個過程和傳統(tǒng)的過程沒有太大區(qū)別，但不斷提醒自己，這個模塊不適合這個設(shè)備設(shè)計，其他設(shè)備下會不會有什么問題
以交互方式確定頁面模塊的詳細(xì)信息后，可以提取產(chǎn)品使用的控件、組件和公共模塊。現(xiàn)在，遠(yuǎn)景和前端開始做一些不同于傳統(tǒng)流程的事情。視覺設(shè)計控件組件和常用模塊根據(jù)前面定義的視覺效果樣式，把它們放在一個模擬頁面中，我們稱之為拼貼樣式。前端實現(xiàn)了風(fēng)格拼貼手稿中的控制組件和通用模塊，并統(tǒng)一維護(hù)了一套組件規(guī)范代碼。
傳統(tǒng)上，頁面完成后，設(shè)計部門開始將視覺規(guī)范組織到前端。風(fēng)格拼貼是為了促進(jìn)作品盡快成為設(shè)計協(xié)作的工具。其優(yōu)點如下：
1.頁面的視覺效果實際上是一堆控制組件和公共模塊。模擬頁面將折疊，其中包含真實的控制組件和公共模塊，以顯示產(chǎn)品的視覺樣式。制作一個10頁以上的產(chǎn)品的視覺草圖既費時又費力，而且制作一個風(fēng)格拼貼要容易得多。所以這是一個有效的設(shè)計工具。
2.復(fù)雜產(chǎn)品總是涉及多個設(shè)計工程師與前端并行工作。盡快提取控制元件和通用模塊，統(tǒng)一管理是一種有效的方法。避免不同設(shè)計人員設(shè)計同時設(shè)計同一控制元件或通用模塊，減少重復(fù)開發(fā)造成的浪費。它還大大降低了以后更新和維護(hù)頁面的成本，例如，當(dāng)您需要修改時amp；ldquo；注意amp；rdquo；按鈕，您只需要更改一個按鈕就可以對整個站點產(chǎn)生影響。
第5步：響應(yīng)模塊設(shè)計
pC頁面模塊的細(xì)節(jié)和樣式拼貼完成后，剩下的工作是展開平板電腦和移動終端的完整設(shè)計草稿，前端輸出所有響應(yīng)頁面代碼。在設(shè)計響應(yīng)模塊中，**重要的是使操作符合設(shè)備習(xí)慣，充分利用設(shè)備特性。
此時，一個網(wǎng)站回復(fù)產(chǎn)品頁面相繼出現(xiàn)。許多人認(rèn)為responsive設(shè)計維護(hù)成本高的原因是頁面必須同時有多個設(shè)計草稿。經(jīng)驗告訴我們，當(dāng)我們決定設(shè)計起草和網(wǎng)格系統(tǒng)，然后擴(kuò)展設(shè)計其他設(shè)備時，工作量遠(yuǎn)低于預(yù)期。
步驟6：測試、討論、優(yōu)化、提交和開發(fā)
**后一步是在實際設(shè)備上測試頁面效果，項目組將討論并繼續(xù)優(yōu)化。
在進(jìn)行開發(fā)之前，需要盡早定義服務(wù)器響應(yīng)策略（RESS）。服務(wù)器端和客戶端的結(jié)合是解決響應(yīng)頁面性能問題的**合理方案。哪些大圖片只需要在移動設(shè)備上輸出小尺寸的圖片，哪些不需要在哪些設(shè)備上開發(fā)，這樣可以減少數(shù)據(jù)輸出量，開發(fā)團(tuán)隊的響應(yīng)能力可以有效控制頁面文件的大小，并防止頁面成為燒掉移動設(shè)備上用戶流量的罪魁禍?zhǔn)住?/p>
通過測試后，將頁面提交到開發(fā)鏈接。我們總結(jié)了可用性和可訪問性方面的響應(yīng)性頁面測試清單。測試點包括但不限于內(nèi)容。
http://m.ezekroy.com/wangzhansheji/940.html 回答的一般過程是什么網(wǎng)站設(shè)計
