2021-12-01 分類: 網(wǎng)站設(shè)計(jì)
從瀏覽器進(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)行一場巨大的騰躍,繞過它們,直接編寫代碼,在瀏覽器中構(gòu)建和調(diào)整設(shè)計(jì),并測驗(yàn)他們的設(shè)計(jì),就像它們在實(shí)時(shí)出現(xiàn)給人們相同,這些網(wǎng)站設(shè)計(jì)師他們是瘋狂的。
通常,傳統(tǒng)的網(wǎng)站設(shè)計(jì)開發(fā)進(jìn)程包括許多階段,包括計(jì)劃、內(nèi)容策略、設(shè)計(jì)、線框圖、原型、測驗(yàn)、開發(fā)、發(fā)布等等??墒?,在設(shè)計(jì)階段,是否可以有另一種辦法來生成“像素好”的呼應(yīng)式網(wǎng)站設(shè)計(jì)并徹底繞過設(shè)計(jì)東西呢
跟著響應(yīng)式設(shè)計(jì)的鼓起和各種設(shè)備(手機(jī)、平板電腦、筆記本電腦、臺(tái)式機(jī)、手表)的運(yùn)用,保持一切東西的共同性變得愈加困難——而且需求考慮更多的移動(dòng)部件,設(shè)計(jì)網(wǎng)站和界面的辦法正在發(fā)生改變。
雖然設(shè)計(jì)師沒有必要成為一名專業(yè)的程序員,但一種解決計(jì)劃是讓設(shè)計(jì)師開始直接處理驅(qū)動(dòng)網(wǎng)站的代碼。那些只需求一點(diǎn)HTML和CSS就可以編寫代碼的設(shè)計(jì)師會(huì)發(fā)現(xiàn)自己對任何團(tuán)隊(duì)來說都是一筆巨大的財(cái)富,而且總體上具有巨大的優(yōu)勢。
為什么當(dāng)涉及到一個(gè)響應(yīng)式網(wǎng)站設(shè)計(jì)項(xiàng)意圖一切復(fù)雜性時(shí),設(shè)計(jì)師通常沒有時(shí)刻創(chuàng)立一個(gè)跨過10個(gè)不同分辨率和視圖端口的組件(比方一個(gè)頁眉或頁腳)的靜態(tài)設(shè)計(jì)。即便只為最流行的設(shè)備設(shè)計(jì),他們依然需求考慮4-5個(gè)屏幕,具有不同的長寬比、屏幕密度和屏幕尺度。至少可以說,這不是一個(gè)小使命。
首要用紙和筆解決網(wǎng)站設(shè)計(jì)的難題
讓咱們探索一個(gè)不同的網(wǎng)站設(shè)計(jì)辦法和設(shè)計(jì)進(jìn)程,第一階段從客戶問卷開始,從業(yè)務(wù)視點(diǎn)、目標(biāo)受眾、轉(zhuǎn)換策略、各種功能希望等方面問詢一般項(xiàng)目目標(biāo)。這是在實(shí)際設(shè)計(jì)階段啟動(dòng)之前完結(jié)的,意圖是更好地了解客戶的需求和整個(gè)項(xiàng)目,并進(jìn)步整個(gè)項(xiàng)意圖功率。
下一步是寫一個(gè)項(xiàng)目綱要,以承認(rèn)綱要已被了解,當(dāng)你在一個(gè)你或許沒有太多經(jīng)歷或?qū)I(yè)知識(shí)的利基領(lǐng)域作業(yè)時(shí),這是很有協(xié)助的。將其稱為功用標(biāo)準(zhǔn),但技能性較差。
這有助于界說術(shù)語、關(guān)鍵字和流程,根據(jù)項(xiàng)意圖復(fù)雜性,最好執(zhí)行幾個(gè)場景和用戶流——通常是登錄流、搜索和導(dǎo)航站點(diǎn),或許是電子商務(wù)網(wǎng)站的“添加到購物車”和結(jié)帳流程。
線框圖和原型設(shè)計(jì)
原型是網(wǎng)站設(shè)計(jì)進(jìn)程的下一個(gè)階段,構(gòu)建快速線框圖來討論頁面布局、功用以及站點(diǎn)頁面在不同設(shè)備上的外觀是一個(gè)杰出的開端,構(gòu)建幾十個(gè)不同模板和組件的線框圖并不需求太多時(shí)刻??梢赃\(yùn)用這些東西創(chuàng)立一個(gè)簡略的網(wǎng)站原型,根據(jù)項(xiàng)意圖復(fù)雜性,可以運(yùn)用InVision、adobeXD、Balsamiq、Moqups或axure等原型東西。
心情板和界面清單
下一步是構(gòu)建一個(gè)心情板:設(shè)計(jì)師、客戶和其他涉眾或許喜愛其他網(wǎng)站上的內(nèi)容的集合——布局、外觀、色彩或字體、圖標(biāo)、圖像等等。這將有助于界說網(wǎng)站的整體外觀和感覺。假如客戶有一個(gè)品牌風(fēng)格的攻略,它應(yīng)該考慮并納入到新的網(wǎng)站設(shè)計(jì)。
一旦各種工件得到同意——線框圖、原型、模型、心情板等等——做一個(gè)界面清單是一個(gè)好主意。
“接口目錄是組成接口的各個(gè)部分的歸納集合?!薄祭隆じチ_斯特
假如從零開始進(jìn)行響應(yīng)式web設(shè)計(jì),那么首要要寫下項(xiàng)意圖一切組件和元素。一個(gè)無序的列表就可以了,而且絕比照沒有好。例如表格、按鈕、圖像、排版、媒體、表單、導(dǎo)航、組件等。
接口目錄中的示例屏幕。
在瀏覽器中規(guī)劃
“在瀏覽器中進(jìn)行設(shè)計(jì)”是一個(gè)跟著響應(yīng)式web設(shè)計(jì)的鼓起而流行起來的術(shù)語,為了將花在像Sketch這樣的設(shè)計(jì)程序上的時(shí)刻最小化,設(shè)計(jì)師們被要求將設(shè)計(jì)階段轉(zhuǎn)移到瀏覽器中,并利用CSS進(jìn)行布局和款式化。這種網(wǎng)站設(shè)計(jì)方法被證明是更有用的,由于它省去了許多步驟。
經(jīng)過關(guān)注HTML模型,并運(yùn)用CSS測驗(yàn)“瀏覽器內(nèi)”的設(shè)計(jì)思維,通??梢怨?jié)省在其他設(shè)計(jì)東西(如Sketch)中創(chuàng)立頁面靜態(tài)模型的時(shí)刻。關(guān)于設(shè)計(jì)人員來說,找到一個(gè)好的代碼編輯器并想出一個(gè)好的瀏覽器改寫辦法是一個(gè)好主意,這樣他們就可以看到實(shí)時(shí)的改變。例如,SublimeText和Codekit就是一個(gè)很好的組合。
HTML和CSS雖然是結(jié)構(gòu)化的,但它們迫使您考慮形式,并對您進(jìn)行檢查。在構(gòu)建可以輕松復(fù)制、復(fù)制和填充動(dòng)態(tài)數(shù)據(jù)一同保持相同結(jié)構(gòu)的HTML組件時(shí),考慮模塊化更簡單。假如您想創(chuàng)立一個(gè)特定的修改,您必須顯式地針對該元素,或許添加另一個(gè)CSS類。
當(dāng)您設(shè)計(jì)標(biāo)題款式時(shí),除非它們被覆蓋,不然它們在整個(gè)站點(diǎn)中是共同的,其他元素也是如此。這種類型的思維迫使您標(biāo)準(zhǔn)化,將公共元素分組在一同,盡或許重用已經(jīng)具有款式的元素,最重要的是,保持一切內(nèi)容模塊化。
經(jīng)過一個(gè)CSS聲明,您可以更改按鈕上的填充以取得更好的接觸目標(biāo),并可以直接在移動(dòng)電話、平板電腦和桌面上進(jìn)行測驗(yàn)。這在Photoshop或Sketch中并不簡單做到,由于其他元素在布局中彼此不知道,而且每次調(diào)整巨細(xì)時(shí)都必須重新組織對象。
想嘗試不同的標(biāo)題配色計(jì)劃嗎只需幾行CSS代碼,就可以立即在一切HTML模板、一切設(shè)備和屏幕上看到更改。當(dāng)您有20個(gè)靜態(tài)模型時(shí),這種靈活性是不簡單模擬的。當(dāng)然,您可以在Sketch或adobeXD中運(yùn)用“符號(hào)”來表明可重用組件,但它們不如CSS那么通用。
在這個(gè)階段,需求做出幾個(gè)技能決議。需求回答的問題有:
你會(huì)運(yùn)用CSS預(yù)處理器嗎
您將為布局運(yùn)用哪種類型的響應(yīng)網(wǎng)格
您想運(yùn)用的字體是否可供購買客戶是否有高級(jí)web字體的預(yù)算,或許您是否將恢復(fù)運(yùn)用可用的免費(fèi)web字體
您將運(yùn)用多色或單色圖標(biāo)嗎整個(gè)場所的巨細(xì)會(huì)有所不同嗎接下來,您是依賴于自界說繪制的圖標(biāo),仍是依賴于已經(jīng)存在的圖標(biāo)包你的圖標(biāo)需求多大的尺度
經(jīng)過調(diào)整幾行CSS,可以在一切設(shè)備和屏幕上立即看到更改。
字體和響應(yīng)式網(wǎng)頁設(shè)計(jì)的費(fèi)事
為響應(yīng)性web設(shè)計(jì)項(xiàng)目選擇字體或許具有挑戰(zhàn)性,有許多或許性和圈套。由于該設(shè)計(jì)將在瀏覽器中運(yùn)用,所以這里是試用它們的好場所。字體的可讀功可以根據(jù)巨細(xì)、重量、色彩和出現(xiàn)而改變,因而經(jīng)過直接在瀏覽器中嘗試字體,設(shè)計(jì)人員可以保證事情看起來是正確的,而且達(dá)到了預(yù)期的效果。
有許多在線東西用于選擇和測驗(yàn)字體以及嘗試字體組合,在Typetester和Typecast上可以找到來自不同服務(wù)和鑄造廠的不同字體并進(jìn)行測驗(yàn)。當(dāng)運(yùn)用特定的字體訂閱服務(wù)(如Typekit或fonts.com)時(shí),設(shè)計(jì)人員可以直接生成字體并在頁面模板上進(jìn)行測驗(yàn)。運(yùn)用新字體生成Typekit包既簡略又快速,您可以很簡單地看到特定字體將怎么影響web頁面的功能。
契合品牌風(fēng)格的圖標(biāo)
假如繪制自界說圖標(biāo),則需求界說巨細(xì)、網(wǎng)格和款式。例如,在Illustrator中,每個(gè)畫板都代表一個(gè)圖標(biāo)。圖標(biāo)可以很簡單地從Illustrator導(dǎo)出為SVG或PNG,稍后可以經(jīng)過Icomoon等服務(wù)將其轉(zhuǎn)換為圖標(biāo)字體。引薦運(yùn)用向量圖標(biāo)(SVG),由于向量是獨(dú)立于分辨率的,所以不需求考慮它們在高清(視網(wǎng)膜)屏幕上的顯示辦法。
款式攻略和CSS保持網(wǎng)站規(guī)劃進(jìn)程的檢查
即便咱們在瀏覽器中進(jìn)行設(shè)計(jì),有幾十個(gè)模板和組件,咱們也或許會(huì)忘掉在哪里運(yùn)用某些東西,以及以什么辦法運(yùn)用。將一切組件構(gòu)建一個(gè)款式攻略作為一個(gè)中心存儲(chǔ)庫是一個(gè)好主意。經(jīng)過將UI組件和元素組合到web頁面中,可以從這個(gè)款式攻略構(gòu)建特定的頁面模板。
UI組件可以是分頁、產(chǎn)品列表、圖片庫、形式窗口、表單元素等,并用作模板的構(gòu)建塊。在測驗(yàn)構(gòu)建特定UI組件時(shí),將一切東西都放在一個(gè)地方非常便利。
運(yùn)用CSS,最好將組件款式分離到獨(dú)自的文件中。例如,分頁款式將在_pagination中。scss是_form中的表單元素。一切這些文件將與其他文件(變量、mixin等)一同包含在一個(gè)scss文件中。
雖然風(fēng)格scss或許由幾十個(gè)“小文件”組成,當(dāng)幾個(gè)人在同一個(gè)項(xiàng)目中作業(yè)時(shí),假如一切內(nèi)容都被分割成更小的塊,那么盯梢更改(無論是否運(yùn)用源代碼操控)就會(huì)更簡單。在網(wǎng)站設(shè)計(jì)項(xiàng)目投入生產(chǎn)后,持續(xù)維護(hù)風(fēng)格攻略是很重要的,由于團(tuán)隊(duì)需求盯梢每個(gè)網(wǎng)站組件。
運(yùn)用款式表-模塊化CSS
從開發(fā)的視點(diǎn)來看,有許多辦法可以編寫模塊化CSS。最著名的是SMaCSS(可伸縮的CSS模塊化體系結(jié)構(gòu))、BEM(塊、元素、修飾符)和OOCSS(面向?qū)ο蟮腃SS)。即便您最終開發(fā)了自己的辦法,也有相當(dāng)多的東西需求學(xué)習(xí)。此刻,您應(yīng)該具有一個(gè)很好的UI組件和web頁面集合,這將使您可以輕松地構(gòu)建新的web頁面。您可以復(fù)制和張貼款式攻略中的元素,并根據(jù)需求重新排列它們。
由于一切東西都是模塊化的,所以您不用擔(dān)心規(guī)劃和代碼的共同性;可是不要忘掉,假如在系統(tǒng)范圍內(nèi)調(diào)整UI組件,則需求運(yùn)用更改更新款式攻略(或添加新組件)。為了保持一切有序,最好運(yùn)用某種模板/自動(dòng)化辦法來處理web頁面,比方Gulp或Grunt。
運(yùn)用谷歌Chrome中的元素檢查器在瀏覽器中檢查CSS和代碼。
下一步是什么在瀏覽器中進(jìn)行設(shè)計(jì)
現(xiàn)在您有了一個(gè)UI組件的中心存儲(chǔ)庫,每個(gè)元素都被文檔化,而且web頁面都是由這些組件構(gòu)建的。從現(xiàn)在開始,設(shè)計(jì)師很或許不再需求翻開他們喜愛的設(shè)計(jì)東西,由于大部分“設(shè)計(jì)”將直接在代碼中完結(jié),并在瀏覽器中預(yù)覽。
不確定詳細(xì)的更改將怎么影響設(shè)計(jì)現(xiàn)在,您可以一同在不同的設(shè)備和瀏覽器上預(yù)覽您的設(shè)計(jì),以檢查標(biāo)題上的字體更改,或更改按鈕的巨細(xì)和色彩將怎么影響設(shè)計(jì)。
當(dāng)運(yùn)用自界說web字體時(shí),添加更多的字體權(quán)重將怎么影響頁面加載功能咱們可以運(yùn)用WebPageTest之類的服務(wù)來測驗(yàn)正在進(jìn)行的web頁面功能,并根據(jù)實(shí)際成果做出正確的決議計(jì)劃。咱們絕對不能在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í),看起來令人驚奇的東西或許不那么令人滿意。正確的設(shè)計(jì)師應(yīng)該在人人都能在瀏覽器中看到的環(huán)境中構(gòu)建和測驗(yàn)web設(shè)計(jì)。
文章題目:從瀏覽器進(jìn)入網(wǎng)站設(shè)計(jì)的進(jìn)程怎樣
URL地址:http://redsoil1982.com.cn/news/138335.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容