恭喜你終于使領(lǐng)導(dǎo)們信服：你的下一個(gè)Web 設(shè)計(jì)項(xiàng)目需要進(jìn)行響應(yīng)式設(shè)計(jì)。雖然說(shuō)服他們相信是一件非常艱難的事情，但是你現(xiàn)在不能在榮譽(yù)上休息。現(xiàn)在項(xiàng)目最關(guān)鍵的問(wèn)題是：如何帶領(lǐng)你的團(tuán)隊(duì)去構(gòu)建響應(yīng)式設(shè)計(jì)?
響應(yīng)式簡(jiǎn)介
你可能熟悉典型的“瀑布模式”的開(kāi)發(fā)過(guò)程：從系統(tǒng)需求分析開(kāi)始，然后著手設(shè)計(jì)，接著開(kāi)始前后臺(tái)開(kāi)發(fā)，最后進(jìn)行評(píng)估并且實(shí)施。線性性質(zhì)是瀑布式開(kāi)發(fā)的主要特點(diǎn)：當(dāng)這一階段完成，下一階段緊接開(kāi)始，兩者配合的幾乎天衣無(wú)縫。“瀑布模式”開(kāi)發(fā)過(guò)程是通過(guò)設(shè)計(jì)一系列階段順序展開(kāi)的，只需朝一個(gè)單一的方向推進(jìn)工作，而不幸的是，隨著問(wèn)題的不斷積累，不得不放慢腳步，來(lái)應(yīng)付各種棘手的問(wèn)題。
“瀑布模式”開(kāi)發(fā)過(guò)程演示圖：
所謂的“響應(yīng)式Web 設(shè)計(jì)”，它是指在網(wǎng)站建設(shè)過(guò)程中，利用同一套代碼，使網(wǎng)站內(nèi)容在PC、平板電腦以及智能手機(jī)瀏覽器上都能正常的顯示。那些為了發(fā)布同樣的內(nèi)容，而創(chuàng)建 PC，mobile等多個(gè)版本的日子一去不復(fù)返了。現(xiàn)在你可通過(guò)構(gòu)建一個(gè)非常靈活的網(wǎng)站去應(yīng)付所有的運(yùn)行環(huán)境。
“響應(yīng)式”設(shè)計(jì)過(guò)程如下圖所示：
那么，為什么要使用響應(yīng)式設(shè)計(jì)而不是采取瀑布模式?瀑布模式只按照標(biāo)準(zhǔn)的桌面瀏覽器進(jìn)行設(shè)計(jì)，除此之外，幾乎沒(méi)有考慮任何其它的設(shè)計(jì)開(kāi)發(fā)環(huán)境，這是它最大的缺點(diǎn)。而敏捷的響應(yīng)式設(shè)計(jì)從一開(kāi)始就考慮到這些跨平臺(tái)問(wèn)題，從而進(jìn)行更詳細(xì)的前期框架構(gòu)圖，設(shè)計(jì)和測(cè)試，而這些工作恰恰在瀑布模式中被省略了。基于響應(yīng)式設(shè)計(jì)的網(wǎng)站一旦完成實(shí)施，將正確的呈現(xiàn)在PC、移動(dòng)設(shè)備和平板電腦上。
響應(yīng)式設(shè)計(jì)在不同設(shè)備上的效果展示圖：
既然如此，那么如何在團(tuán)隊(duì)中實(shí)施響應(yīng)式Web 設(shè)計(jì)呢?下面，我們將回顧典型的瀑布模式的開(kāi)發(fā)步驟并且說(shuō)明如何使他們變?yōu)轫憫?yīng)式設(shè)計(jì)模式。
如何實(shí)現(xiàn)響應(yīng)式Web 設(shè)計(jì) 第一步：計(jì)劃
瀑布模式開(kāi)發(fā)
在瀑布模式開(kāi)發(fā)過(guò)程中，框架圖主要由布局和小部件構(gòu)成。它們被設(shè)定為一個(gè)特定的尺寸(通常基于像素)，并且?guī)缀鯖](méi)有調(diào)整的余地。這些框架圖給出了具體的網(wǎng)格/布局的尺寸大小，但是不同的屏幕分辨率會(huì)導(dǎo)致布局發(fā)生變化，這時(shí)一切都變得毫無(wú)意義。最終，導(dǎo)航條菜單無(wú)法使用，無(wú)法進(jìn)入表單頁(yè)面，并且界面也會(huì)變得凌亂不堪。
響應(yīng)式Web 設(shè)計(jì)
解決此問(wèn)題并不困難。你需要為不同的視圖設(shè)計(jì)不同的部件，并且不要將一個(gè)頁(yè)面當(dāng)成一整“頁(yè)”。頁(yè)面不是最小的組成單元——而是滾動(dòng)條，文字內(nèi)容，表單和其他成份是組成整個(gè)頁(yè)面的最小元素。框架圖必須考慮不同的屏幕尺寸，因此布局尺寸也是不固定的。布局可以從三列變至兩列，在最小的顯示設(shè)備上(移動(dòng)智能手機(jī))，甚至可將其調(diào)整為單列顯示。
同時(shí)，你也需要改變網(wǎng)站的用戶體驗(yàn)——在小尺寸的屏幕上，要求滾動(dòng)條不僅僅是可以通過(guò)鼠標(biāo)進(jìn)行操作，而是人們用手指也能夠控制它。這樣框架圖僅僅是一個(gè)原型設(shè)計(jì)工具，而不再是模板，并且需要通過(guò)一些開(kāi)發(fā)和測(cè)試來(lái)確保其能在顯示屏上執(zhí)行。如果在這些初步測(cè)試之前開(kāi)始設(shè)計(jì)的話，一些未知的開(kāi)發(fā)問(wèn)題就會(huì)接踵而至。不管怎樣，項(xiàng)目根本的愿景必須是保持不變的，因此，保持部門之間開(kāi)放的溝通渠道是必不可少的。
第二步：設(shè)計(jì)
瀑布模式開(kāi)發(fā)
在瀑布模式開(kāi)發(fā)中，接下來(lái)將按照框架圖來(lái)進(jìn)行設(shè)計(jì)，并且通過(guò)字體、顏色、間距以及其他設(shè)計(jì)工具、手法使其變得豐富多彩而富有生機(jī)。通常情況下，設(shè)計(jì)會(huì)進(jìn)行來(lái)回的修改，并且通過(guò)設(shè)計(jì)的不斷更新，來(lái)逐步完善品牌和設(shè)計(jì)的規(guī)范。
響應(yīng)式Web 設(shè)計(jì)
為了更好的使用分配的項(xiàng)目時(shí)間和資源，響應(yīng)式的Web 設(shè)計(jì)應(yīng)該設(shè)計(jì)不同尺寸的布局和部件。響應(yīng)式的Web 設(shè)計(jì)不再使用基于像素的完美設(shè)計(jì)。我們認(rèn)為在不固定的網(wǎng)格中設(shè)計(jì)靈活的部件，設(shè)計(jì)不同尺寸的布局和部件的工作量是可控的，雖然完成可以兼容桌面瀏覽器的設(shè)計(jì)就已經(jīng)極具挑戰(zhàn)性了。
讓HTML采用在所有環(huán)境中的流體布局來(lái)提高設(shè)計(jì)品質(zhì)。不去專注于用戶的總體體驗(yàn)，而考慮每一種瀏覽器寬度是非常浪費(fèi)時(shí)間的做法。例如，需要確保在小型移動(dòng)設(shè)備上操作rotating banner的原件是快速反應(yīng)的，并且按照行業(yè)推薦的最小的44px作為標(biāo)準(zhǔn)的人類手指尖的尺寸來(lái)進(jìn)行設(shè)計(jì)。對(duì)于用戶體驗(yàn)的設(shè)計(jì)和針對(duì)所有屏幕尺寸進(jìn)行外觀設(shè)計(jì)是同等重要的。
第三步：開(kāi)發(fā)
瀑布模式開(kāi)發(fā)
在瀑布式開(kāi)發(fā)方法中，一旦客戶確認(rèn)了設(shè)計(jì)圖，接下來(lái)的前端開(kāi)發(fā)中，就會(huì)發(fā)現(xiàn)在小型屏幕中存在各種問(wèn)題。不幸的是，由于瀑布模式的線性特征，這些不可預(yù)見(jiàn)的問(wèn)題只能隨著項(xiàng)目的推進(jìn)而出現(xiàn)。
響應(yīng)式Web 設(shè)計(jì)
在敏捷的響應(yīng)式的開(kāi)發(fā)過(guò)程中，設(shè)計(jì)必須以靈活網(wǎng)格為基礎(chǔ)。需要由開(kāi)發(fā)者對(duì)部件進(jìn)行規(guī)劃和原型設(shè)計(jì)，并且在每一個(gè)階段都進(jìn)行測(cè)試。為了確保部件是可能的最小的組成單元，需要對(duì)代碼進(jìn)行優(yōu)化。因?yàn)椴考梢匀菀椎募尤氲讲季种泻蛷闹幸瞥栽谧畛醯脑O(shè)計(jì)中并沒(méi)有規(guī)劃出來(lái)。通過(guò)開(kāi)發(fā)者、設(shè)計(jì)師和策劃者之間良好的協(xié)作來(lái)規(guī)避由于必需的修改而引起的各種問(wèn)題。這樣，團(tuán)隊(duì)中的成員達(dá)成共識(shí)，就可以早點(diǎn)發(fā)現(xiàn)和解決問(wèn)題。
第4步：耐心的測(cè)試
瀑布模式開(kāi)發(fā)
在標(biāo)準(zhǔn)的瀑布模式開(kāi)發(fā)的最后階段是通過(guò)單元測(cè)試和功能測(cè)試來(lái)評(píng)估站點(diǎn)。在這個(gè)階段發(fā)現(xiàn)的問(wèn)題，可能會(huì)要求重新規(guī)劃項(xiàng)目最初的設(shè)想，甚至有時(shí)候一個(gè)新上市的設(shè)備可能對(duì)項(xiàng)目造成沉重的打擊。需求分析團(tuán)隊(duì)和設(shè)計(jì)團(tuán)隊(duì)不得不重新規(guī)劃和設(shè)計(jì)以顧及到這些變化，并且將花費(fèi)更多的時(shí)間來(lái)進(jìn)行修改。
推薦閱讀
網(wǎng)站如何突破冰點(diǎn)思維實(shí)現(xiàn)良性發(fā)展
面對(duì)面的交流更利于網(wǎng)站發(fā)展，從剛開(kāi)始的人機(jī)交流到機(jī)機(jī)交流無(wú)不是科技的進(jìn)步，而互聯(lián)網(wǎng)行業(yè)也是如此，從網(wǎng)絡(luò)的發(fā)展角度來(lái)看，讓網(wǎng)站內(nèi)容通過(guò)最合適的方式展現(xiàn)在用戶面前是非常重要的，即突破冰點(diǎn)距離讓網(wǎng)站溫柔的展>>>詳細(xì)閱讀
本文標(biāo)題：<b>與瀑布模式說(shuō)”再見(jiàn)”：5個(gè)步驟實(shí)現(xiàn)響應(yīng)式Web設(shè)計(jì)</b>
地址：http://www.geekbao.cn/a/22/20120516/60343.html
網(wǎng)友點(diǎn)評(píng)
精彩導(dǎo)讀
科技快報(bào)
品牌展示