恭喜你終于使領(lǐng)導(dǎo)們信服：你的下一個Web 設(shè)計項目需要進(jìn)行響應(yīng)式設(shè)計。雖然說服他們相信是一件非常艱難的事情，但是你現(xiàn)在不能在榮譽上休息�，F(xiàn)在項目最關(guān)鍵的問題是：如何帶領(lǐng)你的團(tuán)隊去構(gòu)建響應(yīng)式設(shè)計？

響應(yīng)式簡介

你可能熟悉典型的“瀑布模式”的開發(fā)過程：從系統(tǒng)需求分析開始，然后著手設(shè)計，接著開始前后臺開發(fā)，最后進(jìn)行評估并且實施。線性性質(zhì)是瀑布式開發(fā)的主要特點：當(dāng)這一階段完成，下一階段緊接開始，兩者配合的幾乎天衣無縫。“瀑布模式”開發(fā)過程是通過設(shè)計一系列階段順序展開的，只需朝一個單一的方向推進(jìn)工作，而不幸的是，隨著問題的不斷積累，不得不放慢腳步，來應(yīng)付各種棘手的問題。

“瀑布模式”開發(fā)過程演示圖：

所謂的“響應(yīng)式Web 設(shè)計”，它是指在網(wǎng)站建設(shè)過程中，利用同一套代碼，使網(wǎng)站內(nèi)容在PC、平板電腦以及智能手機(jī)瀏覽器上都能正常的顯示。那些為了發(fā)布同樣的內(nèi)容，而創(chuàng)建PC，mobile等多個版本的日子一去不復(fù)返了�，F(xiàn)在你可通過構(gòu)建一個非常靈活的網(wǎng)站去應(yīng)付所有的運行環(huán)境。

“響應(yīng)式”設(shè)計過程如下圖所示：

那么，為什么要使用響應(yīng)式設(shè)計而不是采取瀑布模式？瀑布模式只按照標(biāo)準(zhǔn)的桌面瀏覽器進(jìn)行設(shè)計，除此之外，幾乎沒有考慮任何其它的設(shè)計開發(fā)環(huán)境，這是它最大的缺點。而敏捷的響應(yīng)式設(shè)計從一開始就考慮到這些跨平臺問題，從而進(jìn)行更詳細(xì)的前期框架構(gòu)圖，設(shè)計和測試，而這些工作恰恰在瀑布模式中被省略了。基于響應(yīng)式設(shè)計的網(wǎng)站一旦完成實施，將正確的呈現(xiàn)在PC、移動設(shè)備和平板電腦上。

響應(yīng)式設(shè)計在不同設(shè)備上的效果展示圖：

 

既然如此，那么如何在團(tuán)隊中實施響應(yīng)式Web 設(shè)計呢？下面，我們將回顧典型的瀑布模式的開發(fā)步驟并且說明如何使他們變?yōu)轫憫?yīng)式設(shè)計模式。

如何實現(xiàn)響應(yīng)式Web 設(shè)計 第一步：計劃

瀑布模式開發(fā)

在瀑布模式開發(fā)過程中，框架圖主要由布局和小部件構(gòu)成。它們被設(shè)定為一個特定的尺寸（通�；�于像素），并且?guī)缀鯖]有調(diào)整的余地。這些框架圖給出了具體的網(wǎng)格/布局的尺寸大小，但是不同的屏幕分辨率會導(dǎo)致布局發(fā)生變化，這時一切都變得毫無意義。最終，導(dǎo)航條菜單無法使用，無法進(jìn)入表單頁面，并且界面也會變得凌亂不堪。

響應(yīng)式Web 設(shè)計

解決此問題并不困難。你需要為不同的視圖設(shè)計不同的部件，并且不要將一個頁面當(dāng)成一整“頁”。頁面不是最小的組成單元——而是滾動條，文字內(nèi)容，表單和其他成份是組成整個頁面的最小元素�？蚣軋D必須考慮不同的屏幕尺寸，因此布局尺寸也是不固定的。布局可以從三列變至兩列，在最小的顯示設(shè)備上（移動智能手機(jī)），甚至可將其調(diào)整為單列顯示。

同時，你也需要改變網(wǎng)站的用戶體驗——在小尺寸的屏幕上，要求滾動條不僅僅是可以通過鼠標(biāo)進(jìn)行操作，而是人們用手指也能夠控制它。這樣框架圖僅僅是一個原型設(shè)計工具，而不再是模板，并且需要通過一些開發(fā)和測試來確保其能在顯示屏上執(zhí)行。如果在這些初步測試之前開始設(shè)計的話，一些未知的開發(fā)問題就會接踵而至。不管怎樣，項目根本的愿景必須是保持不變的，因此，保持部門之間開放的溝通渠道是必不可少的。

第二步：設(shè)計

瀑布模式開發(fā)

在瀑布模式開發(fā)中，接下來將按照框架圖來進(jìn)行設(shè)計，并且通過字體、顏色、間距以及其他設(shè)計工具、手法使其變得豐富多彩而富有生機(jī)。通常情況下，設(shè)計會進(jìn)行來回的修改，并且通過設(shè)計的不斷更新，來逐步完善品牌和設(shè)計的規(guī)范。

響應(yīng)式Web 設(shè)計

為了更好的使用分配的項目時間和資源，響應(yīng)式的Web 設(shè)計應(yīng)該設(shè)計不同尺寸的布局和部件。響應(yīng)式的Web 設(shè)計不再使用基于像素的完美設(shè)計。我們認(rèn)為在不固定的網(wǎng)格中設(shè)計靈活的部件，設(shè)計不同尺寸的布局和部件的工作量是可控的，雖然完成可以兼容桌面瀏覽器的設(shè)計就已經(jīng)極具挑戰(zhàn)性了。

讓HTML采用在所有環(huán)境中的流體布局來提高設(shè)計品質(zhì)。不去專注于用戶的總體體驗，而考慮每一種瀏覽器寬度是非常浪費時間的做法。例如，需要確保在小型移動設(shè)備上操作rotating banner的原件是快速反應(yīng)的，并且按照行業(yè)推薦的最小的44px作為標(biāo)準(zhǔn)的人類手指尖的尺寸來進(jìn)行設(shè)計。對于用戶體驗的設(shè)計和針對所有屏幕尺寸進(jìn)行外觀設(shè)計是同等重要的。

第三步：開發(fā)

瀑布模式開發(fā)

在瀑布式開發(fā)方法中，一旦客戶確認(rèn)了設(shè)計圖，接下來的前端開發(fā)中，就會發(fā)現(xiàn)在小型屏幕中存在各種問題。不幸的是，由于瀑布模式的線性特征，這些不可預(yù)見的問題只能隨著項目的推進(jìn)而出現(xiàn)。

響應(yīng)式Web 設(shè)計

在敏捷的響應(yīng)式的開發(fā)過程中，設(shè)計必須以靈活網(wǎng)格為基礎(chǔ)。需要由開發(fā)者對部件進(jìn)行規(guī)劃和原型設(shè)計，并且在每一個階段都進(jìn)行測試。為了確保部件是可能的最小的組成單元，需要對代碼進(jìn)行優(yōu)化。因為部件可以容易的加入到布局中和從中移除，所以在最初的設(shè)計中并沒有規(guī)劃出來。通過開發(fā)者、設(shè)計師和策劃者之間良好的協(xié)作來規(guī)避由于必需的修改而引起的各種問題。這樣，團(tuán)隊中的成員達(dá)成共識，就可以早點發(fā)現(xiàn)和解決問題。

第4步：耐心的測試

瀑布模式開發(fā)

在標(biāo)準(zhǔn)的瀑布模式開發(fā)的最后階段是通過單元測試和功能測試來評估站點。在這個階段發(fā)現(xiàn)的問題，可能會要求重新規(guī)劃項目最初的設(shè)想，甚至有時候一個新上市的設(shè)備可能對項目造成沉重的打擊。需求分析團(tuán)隊和設(shè)計團(tuán)隊不得不重新規(guī)劃和設(shè)計以顧及到這些變化，并且將花費更多的時間來進(jìn)行修改。

響應(yīng)式Web 設(shè)計

在響應(yīng)式開發(fā)過程中，每一個階段都會在多種瀏覽器和不同尺寸屏幕中進(jìn)行測試，因此問題可盡早發(fā)現(xiàn)。這樣也可發(fā)現(xiàn)某種移動環(huán)境與框架圖不匹配的問題，以及了解該設(shè)計在不同平臺上的性能。響應(yīng)式Web設(shè)計會盡早的完成項目原型，讓客戶更早的檢查成果以實現(xiàn)雙贏。

第五步：盡早發(fā)現(xiàn)問題，盡早解決

瀑布模式開發(fā)

傳統(tǒng)的瀑布式開發(fā)過程中，沒有通過設(shè)計和界面迭代的過程。瀑布式開發(fā)忽略項目建設(shè)過程中的小細(xì)節(jié)，從而引起一些問題并與客戶期望相沖突。雖然通過不斷的及時與客戶溝通，最終問題解決了，但是這些糟糕決策的嚴(yán)重性卻仍未察覺。

響應(yīng)式Web 設(shè)計

響應(yīng)式解決方法，在取得同樣進(jìn)展的同時，采用動態(tài)代碼向客戶展示每一步的實現(xiàn)過程。這樣，這些早期的工作有利于推動下階段工作，并且可以在截至日期之前進(jìn)行關(guān)鍵的修改。

總結(jié)

采用敏捷的響應(yīng)式Web設(shè)計，可以將你從瀑布模式中解放出來。它將簡化你的設(shè)計和開發(fā)工作，讓你的工作更有效率，并在所有可能的平臺上最大化宣傳你的品牌形象。真正的挑戰(zhàn)是跳出瀑布式開發(fā)模式而成為一個響應(yīng)式設(shè)計團(tuán)隊。但只要按照以上的五個步驟去做，你就會與瀑布模式說“bye, bye”，而對響應(yīng)式Web 設(shè)計說“hello”。

客座作者Travis Sheppard是BGT Partners的技術(shù)副總裁。BGT在2010,2011,2012被《廣告時代》評為15個最好的工作地方之一。它為全球的企業(yè)提供互動營銷和技術(shù)解決方案，以幫助企業(yè)加強(qiáng)品牌宣傳，挖掘更多的合作伙伴和進(jìn)行業(yè)務(wù)變革。

原文出處：Bye, Bye Waterfall: 5 Steps to Implement Responsive Web Design

文章來源：webapptrend.com

標(biāo)簽： Web設(shè)計 響應(yīng)式Web設(shè)計 瀑布布局 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。