從瀏覽器進(jìn)入網(wǎng)站設(shè)計(jì)的進(jìn)程怎樣

在大多數(shù)情況下，設(shè)計(jì)師依然運(yùn)用傳統(tǒng)的設(shè)計(jì)東西在網(wǎng)站設(shè)計(jì)進(jìn)程中創(chuàng)立靜態(tài)屏幕模型。但有些設(shè)計(jì)師卻正在進(jìn)行一場(chǎng)巨大的騰躍，繞過(guò)它們，直接編寫(xiě)代碼，在瀏覽器中構(gòu)建和調(diào)整設(shè)計(jì)，并測(cè)驗(yàn)他們的設(shè)計(jì)，就像它們?cè)趯?shí)時(shí)出現(xiàn)給人們相同，這些網(wǎng)站設(shè)計(jì)師他們是瘋狂的。

通常，傳統(tǒng)的網(wǎng)站設(shè)計(jì)開(kāi)發(fā)進(jìn)程包括許多階段，包括計(jì)劃、內(nèi)容策略、設(shè)計(jì)、線框圖、原型、測(cè)驗(yàn)、開(kāi)發(fā)、發(fā)布等等。可是，在設(shè)計(jì)階段，是否可以有另一種辦法來(lái)生成“像素好”的呼應(yīng)式網(wǎng)站設(shè)計(jì)并徹底繞過(guò)設(shè)計(jì)東西呢

跟著響應(yīng)式設(shè)計(jì)的鼓起和各種設(shè)備(手機(jī)、平板電腦、筆記本電腦、臺(tái)式機(jī)、手表)的運(yùn)用，保持一切東西的共同性變得愈加困難——而且需求考慮更多的移動(dòng)部件，設(shè)計(jì)網(wǎng)站和界面的辦法正在發(fā)生改變。

雖然設(shè)計(jì)師沒(méi)有必要成為一名專(zhuān)業(yè)的程序員，但一種解決計(jì)劃是讓設(shè)計(jì)師開(kāi)始直接處理驅(qū)動(dòng)網(wǎng)站的代碼。那些只需求一點(diǎn)HTML和CSS就可以編寫(xiě)代碼的設(shè)計(jì)師會(huì)發(fā)現(xiàn)自己對(duì)任何團(tuán)隊(duì)來(lái)說(shuō)都是一筆巨大的財(cái)富，而且總體上具有巨大的優(yōu)勢(shì)。

為什么當(dāng)涉及到一個(gè)響應(yīng)式網(wǎng)站設(shè)計(jì)項(xiàng)意圖一切復(fù)雜性時(shí)，設(shè)計(jì)師通常沒(méi)有時(shí)刻創(chuàng)立一個(gè)跨過(guò)10個(gè)不同分辨率和視圖端口的組件(比方一個(gè)頁(yè)眉或頁(yè)腳)的靜態(tài)設(shè)計(jì)。即便只為最流行的設(shè)備設(shè)計(jì)，他們依然需求考慮4-5個(gè)屏幕，具有不同的長(zhǎng)寬比、屏幕密度和屏幕尺度。至少可以說(shuō)，這不是一個(gè)小使命。

首要用紙和筆解決網(wǎng)站設(shè)計(jì)的難題

讓咱們探索一個(gè)不同的網(wǎng)站設(shè)計(jì)辦法和設(shè)計(jì)進(jìn)程，第一階段從客戶(hù)問(wèn)卷開(kāi)始，從業(yè)務(wù)視點(diǎn)、目標(biāo)受眾、轉(zhuǎn)換策略、各種功能希望等方面問(wèn)詢(xún)一般項(xiàng)目目標(biāo)。這是在實(shí)際設(shè)計(jì)階段啟動(dòng)之前完結(jié)的，意圖是更好地了解客戶(hù)的需求和整個(gè)項(xiàng)目，并進(jìn)步整個(gè)項(xiàng)意圖功率。

下一步是寫(xiě)一個(gè)項(xiàng)目綱要，以承認(rèn)綱要已被了解，當(dāng)你在一個(gè)你或許沒(méi)有太多經(jīng)歷或?qū)I(yè)知識(shí)的利基領(lǐng)域作業(yè)時(shí)，這是很有協(xié)助的。將其稱(chēng)為功用標(biāo)準(zhǔn)，但技能性較差。

這有助于界說(shuō)術(shù)語(yǔ)、關(guān)鍵字和流程，根據(jù)項(xiàng)意圖復(fù)雜性，最好執(zhí)行幾個(gè)場(chǎng)景和用戶(hù)流——通常是登錄流、搜索和導(dǎo)航站點(diǎn)，或許是電子商務(wù)網(wǎng)站的“添加到購(gòu)物車(chē)”和結(jié)帳流程。

線框圖和原型設(shè)計(jì)

原型是網(wǎng)站設(shè)計(jì)進(jìn)程的下一個(gè)階段，構(gòu)建快速線框圖來(lái)討論頁(yè)面布局、功用以及站點(diǎn)頁(yè)面在不同設(shè)備上的外觀是一個(gè)杰出的開(kāi)端，構(gòu)建幾十個(gè)不同模板和組件的線框圖并不需求太多時(shí)刻。可以運(yùn)用這些東西創(chuàng)立一個(gè)簡(jiǎn)略的網(wǎng)站原型，根據(jù)項(xiàng)意圖復(fù)雜性，可以運(yùn)用InVision、adobeXD、Balsamiq、Moqups或axure等原型東西。

心情板和界面清單

下一步是構(gòu)建一個(gè)心情板：設(shè)計(jì)師、客戶(hù)和其他涉眾或許喜愛(ài)其他網(wǎng)站上的內(nèi)容的集合——布局、外觀、色彩或字體、圖標(biāo)、圖像等等。這將有助于界說(shuō)網(wǎng)站的整體外觀和感覺(jué)。假如客戶(hù)有一個(gè)品牌風(fēng)格的攻略，它應(yīng)該考慮并納入到新的網(wǎng)站設(shè)計(jì)。

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

“接口目錄是組成接口的各個(gè)部分的歸納集合。”——布拉德·弗羅斯特

假如從零開(kāi)始進(jìn)行響應(yīng)式web設(shè)計(jì)，那么首要要寫(xiě)下項(xiàng)意圖一切組件和元素。一個(gè)無(wú)序的列表就可以了，而且絕比照沒(méi)有好。例如表格、按鈕、圖像、排版、媒體、表單、導(dǎo)航、組件等。

接口目錄中的示例屏幕。

在瀏覽器中規(guī)劃

“在瀏覽器中進(jìn)行設(shè)計(jì)”是一個(gè)跟著響應(yīng)式web設(shè)計(jì)的鼓起而流行起來(lái)的術(shù)語(yǔ)，為了將花在像Sketch這樣的設(shè)計(jì)程序上的時(shí)刻最小化，設(shè)計(jì)師們被要求將設(shè)計(jì)階段轉(zhuǎn)移到瀏覽器中，并利用CSS進(jìn)行布局和款式化。這種網(wǎng)站設(shè)計(jì)方法被證明是更有用的，由于它省去了許多步驟。

經(jīng)過(guò)關(guān)注HTML模型，并運(yùn)用CSS測(cè)驗(yàn)“瀏覽器內(nèi)”的設(shè)計(jì)思維，通常可以節(jié)省在其他設(shè)計(jì)東西(如Sketch)中創(chuàng)立頁(yè)面靜態(tài)模型的時(shí)刻。關(guān)于設(shè)計(jì)人員來(lái)說(shuō)，找到一個(gè)好的代碼編輯器并想出一個(gè)好的瀏覽器改寫(xiě)辦法是一個(gè)好主意，這樣他們就可以看到實(shí)時(shí)的改變。例如，SublimeText和Codekit就是一個(gè)很好的組合。

HTML和CSS雖然是結(jié)構(gòu)化的，但它們迫使您考慮形式，并對(duì)您進(jìn)行檢查。在構(gòu)建可以輕松復(fù)制、復(fù)制和填充動(dòng)態(tài)數(shù)據(jù)一同保持相同結(jié)構(gòu)的HTML組件時(shí)，考慮模塊化更簡(jiǎn)單。假如您想創(chuàng)立一個(gè)特定的修改，您必須顯式地針對(duì)該元素，或許添加另一個(gè)CSS類(lèi)。

當(dāng)您設(shè)計(jì)標(biāo)題款式時(shí)，除非它們被覆蓋，不然它們?cè)谡麄€(gè)站點(diǎn)中是共同的，其他元素也是如此。這種類(lèi)型的思維迫使您標(biāo)準(zhǔn)化，將公共元素分組在一同，盡或許重用已經(jīng)具有款式的元素，最重要的是，保持一切內(nèi)容模塊化。

經(jīng)過(guò)一個(gè)CSS聲明，您可以更改按鈕上的填充以取得更好的接觸目標(biāo)，并可以直接在移動(dòng)電話、平板電腦和桌面上進(jìn)行測(cè)驗(yàn)。這在Photoshop或Sketch中并不簡(jiǎn)單做到，由于其他元素在布局中彼此不知道，而且每次調(diào)整巨細(xì)時(shí)都必須重新組織對(duì)象。

想嘗試不同的標(biāo)題配色計(jì)劃嗎只需幾行CSS代碼，就可以立即在一切HTML模板、一切設(shè)備和屏幕上看到更改。當(dāng)您有20個(gè)靜態(tài)模型時(shí)，這種靈活性是不簡(jiǎn)單模擬的。當(dāng)然，您可以在Sketch或adobeXD中運(yùn)用“符號(hào)”來(lái)表明可重用組件，但它們不如CSS那么通用。

在這個(gè)階段，需求做出幾個(gè)技能決議。需求回答的問(wèn)題有：

你會(huì)運(yùn)用CSS預(yù)處理器嗎

您將為布局運(yùn)用哪種類(lèi)型的響應(yīng)網(wǎng)格

您想運(yùn)用的字體是否可供購(gòu)買(mǎi)客戶(hù)是否有高級(jí)web字體的預(yù)算，或許您是否將恢復(fù)運(yùn)用可用的免費(fèi)web字體

您將運(yùn)用多色或單色圖標(biāo)嗎整個(gè)場(chǎng)所的巨細(xì)會(huì)有所不同嗎接下來(lái)，您是依賴(lài)于自界說(shuō)繪制的圖標(biāo)，仍是依賴(lài)于已經(jīng)存在的圖標(biāo)包你的圖標(biāo)需求多大的尺度

經(jīng)過(guò)調(diào)整幾行CSS，可以在一切設(shè)備和屏幕上立即看到更改。

字體和響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的費(fèi)事

為響應(yīng)性web設(shè)計(jì)項(xiàng)目選擇字體或許具有挑戰(zhàn)性，有許多或許性和圈套。由于該設(shè)計(jì)將在瀏覽器中運(yùn)用，所以這里是試用它們的好場(chǎng)所。字體的可讀功可以根據(jù)巨細(xì)、重量、色彩和出現(xiàn)而改變，因而經(jīng)過(guò)直接在瀏覽器中嘗試字體，設(shè)計(jì)人員可以保證事情看起來(lái)是正確的，而且達(dá)到了預(yù)期的效果。

有許多在線東西用于選擇和測(cè)驗(yàn)字體以及嘗試字體組合，在Typetester和Typecast上可以找到來(lái)自不同服務(wù)和鑄造廠的不同字體并進(jìn)行測(cè)驗(yàn)。當(dāng)運(yùn)用特定的字體訂閱服務(wù)(如Typekit或fonts.com)時(shí)，設(shè)計(jì)人員可以直接生成字體并在頁(yè)面模板上進(jìn)行測(cè)驗(yàn)。運(yùn)用新字體生成Typekit包既簡(jiǎn)略又快速，您可以很簡(jiǎn)單地看到特定字體將怎么影響web頁(yè)面的功能。

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

假如繪制自界說(shuō)圖標(biāo)，則需求界說(shuō)巨細(xì)、網(wǎng)格和款式。例如，在Illustrator中，每個(gè)畫(huà)板都代表一個(gè)圖標(biāo)。圖標(biāo)可以很簡(jiǎn)單地從Illustrator導(dǎo)出為SVG或PNG，稍后可以經(jīng)過(guò)Icomoon等服務(wù)將其轉(zhuǎn)換為圖標(biāo)字體。引薦運(yùn)用向量圖標(biāo)(SVG)，由于向量是獨(dú)立于分辨率的，所以不需求考慮它們?cè)诟咔?視網(wǎng)膜)屏幕上的顯示辦法。

款式攻略和CSS保持網(wǎng)站規(guī)劃進(jìn)程的檢查

即便咱們?cè)跒g覽器中進(jìn)行設(shè)計(jì)，有幾十個(gè)模板和組件，咱們也或許會(huì)忘掉在哪里運(yùn)用某些東西，以及以什么辦法運(yùn)用。將一切組件構(gòu)建一個(gè)款式攻略作為一個(gè)中心存儲(chǔ)庫(kù)是一個(gè)好主意。經(jīng)過(guò)將UI組件和元素組合到web頁(yè)面中，可以從這個(gè)款式攻略構(gòu)建特定的頁(yè)面模板。

UI組件可以是分頁(yè)、產(chǎn)品列表、圖片庫(kù)、形式窗口、表單元素等，并用作模板的構(gòu)建塊。在測(cè)驗(yàn)構(gòu)建特定UI組件時(shí)，將一切東西都放在一個(gè)地方非常便利。

運(yùn)用CSS，最好將組件款式分離到獨(dú)自的文件中。例如，分頁(yè)款式將在_pagination中。scss是_form中的表單元素。一切這些文件將與其他文件(變量、mixin等)一同包含在一個(gè)scss文件中。

雖然風(fēng)格scss或許由幾十個(gè)“小文件”組成，當(dāng)幾個(gè)人在同一個(gè)項(xiàng)目中作業(yè)時(shí)，假如一切內(nèi)容都被分割成更小的塊，那么盯梢更改(無(wú)論是否運(yùn)用源代碼操控)就會(huì)更簡(jiǎn)單。在網(wǎng)站設(shè)計(jì)項(xiàng)目投入生產(chǎn)后，持續(xù)維護(hù)風(fēng)格攻略是很重要的，由于團(tuán)隊(duì)需求盯梢每個(gè)網(wǎng)站組件。

運(yùn)用款式表-模塊化CSS

從開(kāi)發(fā)的視點(diǎn)來(lái)看，有許多辦法可以編寫(xiě)模塊化CSS。最著名的是SMaCSS(可伸縮的CSS模塊化體系結(jié)構(gòu))、BEM(塊、元素、修飾符)和OOCSS(面向?qū)ο蟮腃SS)。即便您最終開(kāi)發(fā)了自己的辦法，也有相當(dāng)多的東西需求學(xué)習(xí)。此刻，您應(yīng)該具有一個(gè)很好的UI組件和web頁(yè)面集合，這將使您可以輕松地構(gòu)建新的web頁(yè)面。您可以復(fù)制和張貼款式攻略中的元素，并根據(jù)需求重新排列它們。

由于一切東西都是模塊化的，所以您不用擔(dān)心規(guī)劃和代碼的共同性;可是不要忘掉，假如在系統(tǒng)范圍內(nèi)調(diào)整UI組件，則需求運(yùn)用更改更新款式攻略(或添加新組件)。為了保持一切有序，最好運(yùn)用某種模板/自動(dòng)化辦法來(lái)處理web頁(yè)面，比方Gulp或Grunt。

運(yùn)用谷歌Chrome中的元素檢查器在瀏覽器中檢查CSS和代碼。

下一步是什么在瀏覽器中進(jìn)行設(shè)計(jì)

現(xiàn)在您有了一個(gè)UI組件的中心存儲(chǔ)庫(kù)，每個(gè)元素都被文檔化，而且web頁(yè)面都是由這些組件構(gòu)建的。從現(xiàn)在開(kāi)始，設(shè)計(jì)師很或許不再需求翻開(kāi)他們喜愛(ài)的設(shè)計(jì)東西，由于大部分“設(shè)計(jì)”將直接在代碼中完結(jié)，并在瀏覽器中預(yù)覽。

不確定詳細(xì)的更改將怎么影響設(shè)計(jì)現(xiàn)在，您可以一同在不同的設(shè)備和瀏覽器上預(yù)覽您的設(shè)計(jì)，以檢查標(biāo)題上的字體更改，或更改按鈕的巨細(xì)和色彩將怎么影響設(shè)計(jì)。

當(dāng)運(yùn)用自界說(shuō)web字體時(shí)，添加更多的字體權(quán)重將怎么影響頁(yè)面加載功能咱們可以運(yùn)用WebPageTest之類(lèi)的服務(wù)來(lái)測(cè)驗(yàn)正在進(jìn)行的web頁(yè)面功能，并根據(jù)實(shí)際成果做出正確的決議計(jì)劃。咱們絕對(duì)不能在ps或素描中做到這一點(diǎn)。

運(yùn)用HTML和CSS，并在瀏覽器中作業(yè)或許不是每個(gè)設(shè)計(jì)師在網(wǎng)站設(shè)計(jì)進(jìn)程中。但假如設(shè)計(jì)師真的在意他們的作品在各種設(shè)備和屏幕巨細(xì)上的效果，他們需求保證每次都是好的。當(dāng)在移動(dòng)設(shè)備上的web瀏覽器中檢查靜態(tài)設(shè)計(jì)模型時(shí)，看起來(lái)令人驚奇的東西或許不那么令人滿(mǎn)意。正確的設(shè)計(jì)師應(yīng)該在人人都能在瀏覽器中看到的環(huán)境中構(gòu)建和測(cè)驗(yàn)web設(shè)計(jì)。

網(wǎng)頁(yè)名稱(chēng)：從瀏覽器進(jìn)入網(wǎng)站設(shè)計(jì)的進(jìn)程怎樣
分享路徑：http://m.js-pz168.com/news35/138335.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專(zhuān)注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司；服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)