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

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

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

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

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

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

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

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

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

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

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

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

心情板和界面清單

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

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

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

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

接口目錄中的示例屏幕。

在瀏覽器中規(guī)劃

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

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

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

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

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

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

在這個階段，需求做出幾個技能決議。需求回答的問題有：

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

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

您想運用的字體是否可供購買客戶是否有高級web字體的預(yù)算，或許您是否將恢復(fù)運用可用的免費web字體

您將運用多色或單色圖標嗎整個場所的巨細會有所不同嗎接下來，您是依賴于自界說繪制的圖標，仍是依賴于已經(jīng)存在的圖標包你的圖標需求多大的尺度

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

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

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

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

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

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

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

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

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

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

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

運用款式表-模塊化CSS

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

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

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

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

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

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

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

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

網(wǎng)頁名稱：從瀏覽器進入網(wǎng)站設(shè)計的進程怎樣
分享路徑：http://www.rwnh.cn/news35/138335.html

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

廣告

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