大多數(shù)時候，設(shè)計師在創(chuàng)作網(wǎng)站設(shè)計過程中仍然會使用傳統(tǒng)的設(shè)計工具來創(chuàng)建靜態(tài)的屏幕模型。但是一些設(shè)計師卻做了一個巨大的飛躍，繞過了它們，直接在瀏覽器中編寫代碼，構(gòu)建和調(diào)整設(shè)計，并實時測試他們的設(shè)計。

通常，傳統(tǒng)的網(wǎng)站開發(fā)過程包括許多階段，包括規(guī)劃、內(nèi)容策略、設(shè)計、線框圖、原型設(shè)計、測試、開發(fā)、發(fā)布等等。但是在設(shè)計階段，是否有另一種方法可以產(chǎn)生"像素完美"的響應(yīng)式網(wǎng)站設(shè)計，并完全繞過設(shè)計工具？

隨著響應(yīng)式設(shè)計的興起和各種設(shè)備的使用（手機、平板電腦、筆記本電腦、臺式機、手表），保持所有東西的一致性變得更加困難——而且考慮到更多可移動的部件，設(shè)計網(wǎng)站和界面的方法正在改變。

雖然設(shè)計師沒有必要成為一個專業(yè)的編碼人員，一個解決方案是設(shè)計師開始直接與驅(qū)動網(wǎng)站的代碼工作。那些只會用一點點Html和CSS編寫代碼的設(shè)計師會發(fā)現(xiàn)自己對于任何團隊來說都是一筆巨大的財富，并且總體上擁有巨大的優(yōu)勢。

為什么？當(dāng)參與一個復(fù)雜的響應(yīng)式網(wǎng)站設(shè)計項目時，設(shè)計師通常沒有時間在10個不同的分辨率和視圖中創(chuàng)建一個組件的靜態(tài)設(shè)計（比如一個頁眉或頁腳）。即使只針對最流行的設(shè)備進行設(shè)計，他們?nèi)匀恍枰紤]4-5個屏幕的不同長寬比、屏幕密度和屏幕尺寸。至少可以說，這是一項艱巨的任務(wù)。

1、先用紙和筆解決網(wǎng)站設(shè)計的難題

讓我們探索一種不同的網(wǎng)站設(shè)計方法和規(guī)劃過程。

第一個階段從客戶調(diào)查表開始，詢問從業(yè)務(wù)角度、目標(biāo)受眾、轉(zhuǎn)換策略、各種性能期望等方面的一般項目目標(biāo)。這是在實際設(shè)計階段開始之前完成的，以更好地理解客戶的需求和項目的整體，并在整個過程中更加高效。

下一步是寫一個項目大綱，以確認(rèn)概要被理解了。當(dāng)您在一個您可能沒有太多經(jīng)驗或?qū)I(yè)知識的利基領(lǐng)域工作時，這是很有幫助的。可以稱之為功能性規(guī)范，但技術(shù)性較差。

這有助于定義術(shù)語、關(guān)鍵字和流程。根據(jù)項目的復(fù)雜性，最好做幾個場景和用戶流程——通常是入站流程、搜索和導(dǎo)航站點，或者"加入購物車"流程和結(jié)帳流程（如果是電子商務(wù)網(wǎng)站的話）。

2、線框圖和原型設(shè)計

原型設(shè)計是網(wǎng)站設(shè)計過程的下一個階段，建立快速線框圖來討論頁面布局、功能以及網(wǎng)站頁面在不同設(shè)備上的外觀是一個很好的開始。構(gòu)建不同模板和組件的線框圖并不需要花費很多時間。根據(jù)項目的復(fù)雜性，可以使用InVision、Adobe XD、Balsamiq、Moqups或Axure等原型工具創(chuàng)建一個簡單的網(wǎng)站原型。

3、情緒板和界面清單

下一步是創(chuàng)建一個情緒板：設(shè)計師、客戶和其他利益相關(guān)者可能喜歡其他網(wǎng)站的東西的集合——布局、外觀和感覺、顏色或字體、圖標(biāo)、圖像，等等。這將有助于定義站點的總體外觀和感覺。如果客戶有一個品牌風(fēng)格指南，它應(yīng)該被考慮并納入到新的網(wǎng)站設(shè)計中。

一旦各種工件得到認(rèn)可——線框圖、原型、模型、情緒板等等——做一個界面清單是個好主意。

如果要從頭開始做響應(yīng)式web設(shè)計，那么首先要寫下所有的組件和元素，項目將從這些開始。一個無序的列表也可以，而且肯定比什么都沒有強。例如表格、按鈕、圖像、排版、媒體、表單、導(dǎo)航、組件等。

界面清單中的一個示例屏幕

4、在瀏覽器中設(shè)計

"在瀏覽器中進行設(shè)計"是一個隨著響應(yīng)式web設(shè)計的興起而流行起來的術(shù)語。為了盡量減少花在像Sketch這樣的設(shè)計程序上的時間，設(shè)計師們將設(shè)計階段轉(zhuǎn)移到瀏覽器中，并使用CSS進行布局和樣式設(shè)計。這種網(wǎng)站設(shè)計方法被證明是更有效的，因為它削減了很多步驟。

通過專注于HTML模型，以及用CSS在"瀏覽器內(nèi)"測試設(shè)計理念，通常在其他設(shè)計工具（如Sketch）中創(chuàng)建頁面靜態(tài)模型的時間就可以節(jié)省下來。對于設(shè)計人員來說，最好找一個好的代碼編輯器，并提供一個好的瀏覽器刷新方法，這樣他們就可以實時看到更改。例如，Sublime Text和Codekit就是一個很好的組合。

HTML和CSS雖然是結(jié)構(gòu)化的，但它們迫使您考慮模式并加以控制。在構(gòu)建可輕松復(fù)制、復(fù)制和填充動態(tài)數(shù)據(jù)、同時保持相同結(jié)構(gòu)的HTML組件時，考慮模塊化更容易。如果您想要創(chuàng)建一個特定的修改，您必須顯式地針對該元素，或者添加另一個CSS類。

當(dāng)您設(shè)計標(biāo)題時，除非它們被覆蓋，否則它們將在整個網(wǎng)站上保持一致。其他元素也是如此。這種思維方式迫使您標(biāo)準(zhǔn)化、將公共元素組合在一起、盡可能多地重用已經(jīng)設(shè)計好的元素，最重要的是，使一切都保持模塊化。

通過單個CSS聲明，您可以更改按鈕的填充以獲得更好的觸摸目標(biāo)，并直接在移動電話、平板電腦和桌面上進行測試。這在Photoshop或素描中是不容易做到的，因為其他元素在布局中是不知道彼此的，并且您必須在每次調(diào)整物體大小時重新組織對象。

想嘗試不同的標(biāo)題配色方案？通過使用幾行CSS代碼，可以在所有設(shè)備和屏幕上立即看到所有HTML模板上的更改。當(dāng)您有20個靜態(tài)模型時，這種靈活性是不容易模仿的。當(dāng)然，您可以在Sketch或adobexd中使用"符號"來實現(xiàn)可重用組件，但它們沒有CSS那么通用。

在此階段，需要做出幾個技術(shù)決策。需要回答的問題有：

您會使用CSS預(yù)處理器嗎？（推薦）

您會在布局中使用什么類型的響應(yīng)式網(wǎng)格？

您想使用的字體是否可供購買？客戶是否有購買優(yōu)質(zhì)網(wǎng)絡(luò)字體的預(yù)算，或者您是否會重新使用可用的免費網(wǎng)絡(luò)字體？

您會使用多色還是單色圖標(biāo)？整個場地的大小會不同嗎？接下來，您是依賴自定義繪制的圖標(biāo)，還是依賴現(xiàn)有的圖標(biāo)包？您的圖標(biāo)需要適應(yīng)什么大?。?/p>

通過調(diào)整幾行CSS，在所有設(shè)備和屏幕上都可以立即看到更改

5、字體和響應(yīng)性網(wǎng)頁設(shè)計的問題

為響應(yīng)性網(wǎng)頁設(shè)計項目選擇字體是具有挑戰(zhàn)性的。有許多可能性，也有許多陷阱。由于該設(shè)計將在瀏覽器中使用，這是嘗試它們的最佳地方。字體的可讀性會因大小、重量、顏色和呈現(xiàn)方式的不同而有所不同，因此通過直接在瀏覽器中嘗試字體，設(shè)計人員可以確保事情看起來是正確的，并且達(dá)到了預(yù)期的效果。

有許多在線工具用于選擇和測試字體以及嘗試字體組合，在Typetester和Typecast不同的字體從各種服務(wù)和鑄造廠可以找到和測試。當(dāng)使用特定的字體訂閱服務(wù)（如Typekit或Fonts.com）時，設(shè)計師可以直接生成字體并在他們的頁面模板上進行測試。生成帶有新字體的Typekit包既簡單又快速，您可以很容易地看到特定字體如何影響web頁面的性能。

6、符合品牌風(fēng)格的圖標(biāo)

如果繪制自定義圖標(biāo)，則需要定義大小、網(wǎng)格和樣式。例如，在Illustrator中，每個畫板代表一個圖標(biāo)。圖標(biāo)可以很容易地從Illustrator導(dǎo)出為SVG或PNG，之后可以通過Icomoon等服務(wù)轉(zhuǎn)換為圖標(biāo)字體。建議使用矢量圖標(biāo)（SVG），因為矢量是獨立于分辨率的，所以不需要考慮它們在高清（視網(wǎng)膜）屏幕上如何顯示。

7、一個風(fēng)格指南和CSS，以保持網(wǎng)站設(shè)計過程中的檢查

即使我們在瀏覽器中設(shè)計，使用幾十個模板和組件，我們也可能會丟失在哪里使用的東西，以及以什么方式使用的東西。將所有組件的styleguide構(gòu)建為一個中央存儲庫是一個好主意。通過將UI組件和元素組合到web頁面中，將根據(jù)這個樣式指南構(gòu)建特定的頁面模板。

UI組件可以是分頁、產(chǎn)品列表、圖片庫、模態(tài)窗口、表單元素等，并用作模板的構(gòu)建塊。在測試構(gòu)建特定UI組件時，將所有內(nèi)容放在一個地方非常方便。

風(fēng)格指南范例由Miklos Philips

使用CSS，將組件樣式分離到單獨的文件中是一種最佳實踐。例如，分頁樣式將在_pagination中。scss， _form中的表單元素。和所有這些文件將包括在一個scss文件與其他文件（變量、mixin等）。

雖然風(fēng)格。scss可能由幾十個"小文件"組成，當(dāng)幾個人在同一個項目上工作時，如果所有的東西都被分割成更小的塊，那么跟蹤變更就會更容易（不管是否使用源代碼控制）。在網(wǎng)站設(shè)計項目投入生產(chǎn)后，繼續(xù)維護風(fēng)格指南是很重要的，因為團隊需要跟蹤網(wǎng)站的每個組件。

8、使用樣式表——模塊化的CSS

從開發(fā)的角度來看，有很多方法可以編寫模塊化的CSS。最著名的是SMACSS （CSS的可擴展和模塊化架構(gòu)）、BEM（塊、元素、修飾符）和OOCSS（面向?qū)ο蟮腃SS）。即使您最終開發(fā)出自己的方法，也有相當(dāng)多的東西需要學(xué)習(xí)。此時，您應(yīng)該擁有一個很好的UI組件和web頁面集合，這將使您能夠輕松地構(gòu)建新的web頁面。您可以從樣式指南中復(fù)制和粘貼元素，并根據(jù)需要重新排列它們。

因為所有的東西都是模塊化的，您不必?fù)?dān)心設(shè)計和代碼的一致性；但是不要忘記，如果您在系統(tǒng)范圍內(nèi)調(diào)整UI組件，則需要使用更改更新樣式指南（或添加新組件）。為了使一切都有組織，最好使用某種模板/自動化方法來處理web頁面，如Gulp或Grunt。

在瀏覽器中使用元素檢查器檢查CSS和代碼。

9、接下來是什么？在瀏覽器中設(shè)計

現(xiàn)在，您有了一個包含UI組件、文檔化的每個元素和從這些組件構(gòu)建的web頁面的中央存儲庫。從現(xiàn)在開始，設(shè)計人員很可能不再需要打開他們最喜歡的設(shè)計工具，因為大多數(shù)"設(shè)計"將直接在代碼中完成，并在瀏覽器中預(yù)覽。

不太確定一個特定的變化將如何影響設(shè)計？現(xiàn)在您可以在不同的設(shè)備和瀏覽器上同時預(yù)覽您的設(shè)計，看看標(biāo)題上的字體是如何變化的，或者改變按鈕的大小和顏色會對設(shè)計產(chǎn)生怎樣的影響。

在使用自定義web字體時，添加更多字體權(quán)重會如何影響頁面加載性能？我們可以使用像WebPageTest這樣的服務(wù)來測試正在進行中的web頁面性能，并對實際結(jié)果做出明智的決定。我們絕對不能用Photoshop或Sketch來做。

在網(wǎng)站設(shè)計過程中，使用HTML和CSS以及在瀏覽器中工作可能并不適合每個設(shè)計師。但如果設(shè)計師真的關(guān)心他們的作品在各種設(shè)備和屏幕尺寸上的外觀，他們需要確保每次都是完美的。一些看起來令人驚嘆的靜態(tài)設(shè)計模型在移動設(shè)備的web瀏覽器中可能看起來不太理想。明智的設(shè)計師理應(yīng)在每個人都能在瀏覽器中看到的環(huán)境中構(gòu)建和測試web設(shè)計。