響應(yīng)式網(wǎng)站設(shè)計(jì)的一般過程是怎樣的?

響應(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)生什么?互動(dòng)和視覺如何協(xié)同工作?前端什么時(shí)候介入?什么使后端開發(fā)更合理?在第一個(gè)版本的播放器之后，我們得到了一些答案。

響應(yīng)式設(shè)計(jì)被稱為“設(shè)計(jì)”而不是“技術(shù)”，因?yàn)樗窃O(shè)計(jì)優(yōu)先的任務(wù)。需要設(shè)計(jì)一個(gè)明確的回應(yīng)的出路，不能產(chǎn)生一套設(shè)計(jì)草案后等待前端看到的情況，把它變成一個(gè)響應(yīng)性網(wǎng)站設(shè)計(jì)。因此，整個(gè)過程從交互階段開始，分為六個(gè)主要步驟。視覺、前端、開發(fā)等角色會(huì)根據(jù)情況盡快參與。

步驟1:信息架構(gòu)，內(nèi)容策略。

交互設(shè)計(jì)師根據(jù)產(chǎn)品定位和用戶分析，確定站點(diǎn)信息架構(gòu)。呈現(xiàn)信息架構(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ì)頁面和操作頁面。

步驟2:移動(dòng)框架

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

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

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

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

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

回到主題，最后一步對(duì)頁面進(jìn)行了分類，確定了每個(gè)頁面內(nèi)容的優(yōu)先級(jí)，現(xiàn)在我們分析了每種頁面類型的導(dǎo)航，主要內(nèi)容等框架結(jié)構(gòu)，最后給出了框架結(jié)構(gòu)表。從玩家的框架中可以看出，全局導(dǎo)航對(duì)于所有頁面來說都是通用的，局部導(dǎo)航只能用于列出類頁面，細(xì)節(jié)類頁面有一個(gè)“頁面所有者”信息，關(guān)聯(lián)的導(dǎo)航并不是每個(gè)頁面。

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

步驟3:響應(yīng)框架

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

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

響應(yīng)式設(shè)計(jì)是一種與前端技術(shù)緊密結(jié)合的設(shè)計(jì)理念的新興形式，鼓勵(lì)早期跨功能的溝通和協(xié)作。在與響應(yīng)框架和光柵系統(tǒng)交互之后，其他角色可以同步。前端涉及到網(wǎng)格和框架的構(gòu)建，輸出頁面基礎(chǔ)結(jié)構(gòu)。視覺同步開始探索和定義視覺風(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端開發(fā)可以充分暴露業(yè)務(wù)復(fù)雜性，所以項(xiàng)目團(tuán)隊(duì)在PC環(huán)境中的設(shè)計(jì)、開發(fā)、測試都有成熟的工具和流程，從PC端使開發(fā)過程更加順利。所以我認(rèn)為移動(dòng)優(yōu)先級(jí)是在確定內(nèi)容策略時(shí)應(yīng)該遵循的概念。具體的設(shè)計(jì)和開發(fā)流程是否移動(dòng)優(yōu)先取決于產(chǎn)品定位和項(xiàng)目組情況。

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

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

傳統(tǒng)的做法是，頁面完成后，設(shè)計(jì)師開始將視覺規(guī)范組織到前端。風(fēng)格拼貼是為了盡早的推進(jìn)工作，成為設(shè)計(jì)協(xié)作的工具。它的優(yōu)點(diǎn)是:

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

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

Step5:響應(yīng)式模塊設(shè)計(jì)

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

這時(shí)，一個(gè)站點(diǎn)響應(yīng)產(chǎn)品頁面一個(gè)接一個(gè)地出現(xiàn)了。很多人認(rèn)為響應(yīng)式設(shè)計(jì)維護(hù)成本高的原因是頁面必須同時(shí)設(shè)計(jì)多組設(shè)計(jì)稿。經(jīng)驗(yàn)告訴我們，當(dāng)我們決定設(shè)計(jì)草案和網(wǎng)格系統(tǒng)，然后擴(kuò)展其他設(shè)備的設(shè)計(jì)時(shí)，工作量比預(yù)期的要低得多。

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

最后一步是在實(shí)際設(shè)備上測試頁面效果，項(xiàng)目團(tuán)隊(duì)將討論并繼續(xù)優(yōu)化。

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

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

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