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

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

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

 

　　視覺稿

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

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

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

 

　　在瀏覽器中設(shè)計

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

　　在瀏覽器中做決定

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

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

 

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

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

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

 

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

　　讓我總結(jié)一下一些有用的工具資源，有很多工具可以幫助你設(shè)計響應(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/）