從瀏覽器進入網站設計的進程怎樣

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

通常，傳統的網站設計開發進程包括許多階段，包括計劃、內容策略、設計、線框圖、原型、測驗、開發、發布等等。可是，在設計階段，是否可以有另一種辦法來生成“像素好”的呼應式網站設計并徹底繞過設計東西呢

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

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

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

首要用紙和筆解決網站設計的難題

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

下一步是寫一個項目綱要，以承認綱要已被了解，當你在一個你或許沒有太多經歷或專業知識的利基領域作業時，這是很有協助的。將其稱為功用標準，但技能性較差。

這有助于界說術語、關鍵字和流程，根據項意圖復雜性，最好執行幾個場景和用戶流——通常是登錄流、搜索和導航站點，或許是電子商務網站的“添加到購物車”和結帳流程。

線框圖和原型設計

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

心情板和界面清單

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

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

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

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

接口目錄中的示例屏幕。

在瀏覽器中規劃

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

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

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

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

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

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

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

你會運用CSS預處理器嗎

您將為布局運用哪種類型的響應網格

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

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

經過調整幾行CSS，可以在一切設備和屏幕上立即看到更改。

字體和響應式網頁設計的費事

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

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

契合品牌風格的圖標

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

款式攻略和CSS保持網站規劃進程的檢查

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

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

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

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

運用款式表-模塊化CSS

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

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

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

下一步是什么在瀏覽器中進行設計

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

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

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

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

文章題目：從瀏覽器進入網站設計的進程怎樣
URL地址：http://www.kartarina.com/news/138335.html

網站建設、網絡推廣公司-創新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有網站設計等

廣告

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