從瀏覽器了解響應(yīng)式網(wǎng)站設(shè)計過程
大多數(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è)計。
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請訪問:網(wǎng)站技術(shù)