我很好地解釋了為什么引導(dǎo)客戶很重要，現(xiàn)在我要告訴你設(shè)計(jì)響應(yīng)式網(wǎng)站的最佳方法。
 

　　你可能會(huì)理解你的開發(fā)和編碼，在應(yīng)對響應(yīng)式網(wǎng)站時(shí)，每個(gè)人的工作流程都是不同的。這本身就很好，因?yàn)檫@意味著我們總能產(chǎn)生新的工作方式。
 

　別擔(dān)心，我將給你一些設(shè)計(jì)響應(yīng)式網(wǎng)站的建議，在結(jié)合上一篇響應(yīng)式網(wǎng)站設(shè)計(jì)的一些建議（一）的內(nèi)容，你應(yīng)該可以很容易地付諸行動(dòng)。你可以選擇使用它們，并在你認(rèn)為合適的時(shí)候組合應(yīng)用它們。嘗試各種不同的方式來設(shè)計(jì)響應(yīng)性網(wǎng)站，看一看哪些方法最適合你。
 

 

　　視覺稿

　　在Photoshop（或其他任一款設(shè)計(jì)軟件）中為靜態(tài)寬度的站點(diǎn)創(chuàng)建一系列視覺稿曾經(jīng)是大多數(shù)設(shè)計(jì)師設(shè)計(jì)網(wǎng)站的方式，對一些設(shè)計(jì)師來說，現(xiàn)在仍然使用這一工作流程。如果你喜歡使用圖形設(shè)計(jì)軟件來設(shè)計(jì)網(wǎng)站的視覺稿，這確實(shí)很好。
 

　　但不要試圖為每一個(gè)分辨率或?qū)挾仍O(shè)計(jì)一個(gè)視覺稿，大量的視覺稿會(huì)讓你抓狂。相反，回想一下有關(guān)線框圖的技術(shù)文章?？紤]一下我們是如何看待這些線框圖的內(nèi)容流的，以及我們是如何決定將所有內(nèi)容布局在設(shè)計(jì)稿上的。試著將它們轉(zhuǎn)換到你的設(shè)計(jì)中，并考慮當(dāng)屏幕大小改變時(shí)，這些元素將如何流動(dòng)和移動(dòng)。
 

　　內(nèi)容的變化將是重要的,可以創(chuàng)建幾個(gè)不同尺寸范圍內(nèi)的展示模型。但對一些其他變化,例如文本編輯區(qū)域,我認(rèn)為最好保持為初始的編碼原型。如果你喜歡為每個(gè)主要階段設(shè)計(jì)一個(gè)模型，那么無論如何，請繼續(xù)，只要你知道這將增加到你的項(xiàng)目時(shí)間。
 

 

　　在瀏覽器中設(shè)計(jì)

　　你可能聽說過在過去圍繞著瀏覽器設(shè)計(jì)的爭論。在瀏覽器中設(shè)計(jì)是指你從一個(gè)線框圖階段直接進(jìn)入瀏覽器開始設(shè)計(jì)階段，而不是使用任何圖形軟件設(shè)計(jì)視覺稿。如果你使用很多在線工具來幫助你創(chuàng)建你的設(shè)計(jì)層級元素，這也可以很好地工作。然而，許多設(shè)計(jì)師會(huì)認(rèn)為在瀏覽器中進(jìn)行設(shè)計(jì)很困難，這是因?yàn)樗麄冇X得這么做限制了他們的創(chuàng)造力，讓他們更難想出有創(chuàng)意的、獨(dú)特的、視覺上令人興奮的構(gòu)思。但作為一名開發(fā)人員，你很可能非常喜歡使用代碼，因此樂于在瀏覽器中嘗試進(jìn)行設(shè)計(jì)，并看看會(huì)得到什么結(jié)果。
 

　　在瀏覽器中做決定

　　這可能是我個(gè)人最喜歡的。在瀏覽器中做決定意味著你可以在圖形設(shè)計(jì)軟件和瀏覽器中做同時(shí)工作。就我個(gè)人而言，我認(rèn)為你想要得到一個(gè)更好的設(shè)計(jì)結(jié)果，必須將它放置在瀏覽器中進(jìn)行驗(yàn)證。視覺稿在圖形設(shè)計(jì)軟件中的呈現(xiàn)方式總是與在瀏覽器中的呈現(xiàn)方式有些不同，在瀏覽器中驗(yàn)證創(chuàng)建原型和并快速迭代階段效果要好得多。
 

　　混合使用圖形設(shè)計(jì)軟件和瀏覽器的工作意味著你可以為你的設(shè)計(jì)和你必須做出的決策提供很大的靈活性。雖然在圖形軟件中可以做出許多重大的創(chuàng)造性決策，但瀏覽器是你最終選擇的產(chǎn)出環(huán)境。
 

 

　　內(nèi)容為先，電腦端為先或是移動(dòng)端為先？

　　首先，如果你還沒有從上文中學(xué)到什么-先開始你的設(shè)計(jì)工作吧。這意味著你要確保你使用的是真實(shí)的內(nèi)容和你設(shè)計(jì)的網(wǎng)站上要使用的內(nèi)容。
 

　　其次，你是在移動(dòng)設(shè)備上工作(從更小的布局開始)還是在桌面自頂向下(從全寬的桌面布局開始)完全取決于你自己。網(wǎng)上有很多相關(guān)爭論，但實(shí)際上這是你自己的決定。如果你覺得從更大的尺寸到更小的尺寸更有創(chuàng)意，即使你以相反的方式建造網(wǎng)站，那也沒關(guān)系。
 

 

　　一些有用的響應(yīng)式設(shè)計(jì)工具

　　讓我總結(jié)一下一些有用的工具資源，有很多工具可以幫助你設(shè)計(jì)響應(yīng)式網(wǎng)站，看看吧：
 

　　網(wǎng)格

　　·Gridset（http://www.gridsetapp.com/）
 

　　·ZURB Foundation（https://foundation.zurb.com/）
 

　　·Inuit.css（https://github.com/inuitcss）
 

　　字體

　　·Typecast（http://typecast.com/）
 

　　·Typekit（https://fonts.adobe.com/?ref=tk.com）
 

　　樣式指南和樣式庫

　　·Styletil.es（http://styletil.es/）
 

　　·Brad Frost’s Pattern Lab（http://pattern-lab.info/）