網(wǎng)頁設(shè)計的流程、布局及規(guī)范分別是什么?

網(wǎng)頁設(shè)計(英文：Web Design，又稱為Web UI design)是根據(jù)企業(yè)希望向瀏覽者傳遞的信息(包括產(chǎn)品、服務(wù)、理念、文化)，進行網(wǎng)站功能策劃，然后進行的頁面設(shè)計美化工作。作為企業(yè)對外宣傳物料的其中一種，精美的網(wǎng)頁設(shè)計，對于提升企業(yè)的互聯(lián)網(wǎng)品牌形象至關(guān)重要。下面跟小編一起去看下網(wǎng)頁設(shè)計的流程、布局及規(guī)范分別是什么?

網(wǎng)頁設(shè)計的流程

1、需求調(diào)研

需要根據(jù)消費者的需求、市場的狀況、企業(yè)自身的情況等進行綜合分析，當(dāng)基本需求了解完成后，設(shè)計師查看類似的網(wǎng)站并關(guān)注他們的設(shè)計，接下來與客戶討論是否可以使用相關(guān)網(wǎng)站作為示例。

2、搜集材料

通過和與網(wǎng)站相關(guān)人員的接觸、交流確定網(wǎng)站需要的模塊，并將這些模塊在文檔中體現(xiàn)，收集網(wǎng)頁設(shè)計相關(guān)圖片、文字、視頻等資料。

3、確定網(wǎng)站主題

設(shè)計一個網(wǎng)頁，最重要的是選擇好網(wǎng)頁的主題內(nèi)容，一般都是選擇自己所需要的內(nèi)容來進行設(shè)計。需要注意的是：所選擇的設(shè)計主題一定要有自己的特色，能夠從眾多網(wǎng)頁中脫穎而出。

4、結(jié)構(gòu)規(guī)劃

在選擇好網(wǎng)頁主題后，就需要開始規(guī)劃網(wǎng)頁中的結(jié)構(gòu)了。需要清楚的是：根據(jù)網(wǎng)頁主題明確規(guī)劃目標(biāo)，合理設(shè)置網(wǎng)頁的結(jié)構(gòu)。這其中，還需要注意網(wǎng)頁中內(nèi)容的設(shè)置，要全面結(jié)合主題和頁面具體內(nèi)容規(guī)劃結(jié)構(gòu)。

5、主題元素構(gòu)建

網(wǎng)頁設(shè)計師經(jīng)常添加主題元素來豐富網(wǎng)站并使其成熟。例如，動畫讓網(wǎng)站更加生動，對用戶體驗有很好的影響，增加對平臺的信任。

6、選擇配色方案和字體

該配色方案要用在刀刃上編譯。通常，設(shè)計師會注意背景應(yīng)該具有的顏色、按鈕的顏色和其他元素。排版應(yīng)與配色方案相匹配。否則，一切看起來都像是字體和顏色的混搭。字體應(yīng)該是可讀的并且不是很不尋常。

7、使用設(shè)計工具實現(xiàn)

以頁面精美化設(shè)計為目標(biāo)，使用PS、AI等軟件，調(diào)整，使用更合理的顏色、字體、圖片、樣式進行頁面設(shè)計美化。

8、反饋與修改設(shè)計方案

根據(jù)用戶反饋，進行頁面設(shè)計調(diào)整，以達到最優(yōu)效果。

常見的網(wǎng)頁設(shè)計布局

1、"國"字型

也可以稱為"同"字型，是一些大型網(wǎng)站所喜歡的類型，即最上面是網(wǎng)站的標(biāo)題以及橫幅廣告條，接下來就是網(wǎng)站的主要內(nèi)容，左右分列一些兩小條內(nèi)容，中間是主要部分，與左右一起羅列到底，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種結(jié)構(gòu)是我們在網(wǎng)上見到的差不多最多的一種結(jié)構(gòu)類型。

2、拐角型

這種結(jié)構(gòu)與上一種其實只是形式上的區(qū)別，其實是很相近的，上面是標(biāo)題及廣告橫幅，接下來的左側(cè)是一窄列鏈接等，右列是很寬的正文，下面也是一些網(wǎng)站的輔助信息。在這種類型中，一種很常見的類型是最上面是標(biāo)題及廣告，左側(cè)是導(dǎo)航鏈接。

3、標(biāo)題正文型

這種類型即最上面是標(biāo)題或類似的一些東西，下面是正文，比如一些文章頁面或注冊頁面等就是這種類。

4、封面型

這種類型基本上是出一些網(wǎng)站的首頁，大部分為一些精美的平面設(shè)計結(jié)合一些小的動畫，放上幾個簡單的鏈接或者僅是一個"進入"的鏈接甚至直接在首頁的圖片上做鏈接而沒有任何提示。這種類型大部分是企業(yè)網(wǎng)站和個人主頁，如果說處理的好，會給人帶來賞心悅目的感覺。

5、"T"結(jié)構(gòu)布局

所謂"T"結(jié)構(gòu)布局，就是指網(wǎng)頁上邊和左邊相結(jié)合，頁面頂部為橫條網(wǎng)站標(biāo)志和廣告條，左下方為主菜單，右面顯示內(nèi)容，這是網(wǎng)頁設(shè)計中用得最廣泛的一種布局方式。在實際設(shè)計中還可以改變"T"結(jié)構(gòu)布局的形式，如左右兩欄式布局，一半是正文，另一半是形象的圖片、導(dǎo)航。或正文不等兩欄式布置，通過背景色區(qū)分，分別放置圖片和文字等。

這樣的布局有其固有的優(yōu)點，因為人的注意力主要在右下角，所以企業(yè)想要發(fā)布給用戶的信，大都能被用戶以最大可能性獲取，而且很方便，其次是頁面結(jié)構(gòu)清晰，主次分明、易于使用。缺點是規(guī)矩呆板，如果細節(jié)色彩上不注意，很容易讓人"看之無味"。

6、"口"型布局

這是一個形象的說法，指頁面上下各有一個廣告條，左邊是主菜單，右邊是友情鏈接等，中間是主要內(nèi)容。

這種布局的優(yōu)點是頁面充實、內(nèi)容豐富、信息量大，是綜合性網(wǎng)站常用的版式，特別之處是頂部中央的一排小圖標(biāo)起到了活躍氣氛的作用。缺點是頁面擁擠，不夠靈活。也有將四邊空出，只用中間的窗口型設(shè)計，例如網(wǎng)易壁紙站使用多幀形式，只有頁面中央部分可以滾動，界面類似游戲界面。使用此類版式的有多維游戲娛樂性網(wǎng)站。

7、"三"型布局

這種布局多用于國外網(wǎng)站，國內(nèi)用得不多。其特點是頁面上橫向兩條色塊，將頁面整體分割為4個部分，色塊中大多放廣告條。

8、對稱對比布局

顧名思義，它指采取左右或者上下對稱的布局，一半深色，一半淺色，一般用于設(shè)計型網(wǎng)站。其優(yōu)點是視覺沖擊力強，缺點是將兩部分有機地結(jié)合比較困難。

9、POP布局

POP源自廣告術(shù)語，指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設(shè)計中心。常用于時尚類網(wǎng)站，優(yōu)點顯而易見：漂亮吸引人，缺點是速度慢。

網(wǎng)頁設(shè)計的規(guī)范

在設(shè)計之前一定要和前端溝通我們使用的尺寸、字體、交互等，這樣有助于后期不會有誤會。

1、網(wǎng)頁尺寸

因為網(wǎng)頁尺寸與用戶屏幕相關(guān)，而用戶屏幕的種類難以統(tǒng)計。所以設(shè)計稿只能主要顧及主流用戶的分辨率，其他分辨率用適配的方式來解決。在最新版 Photoshop 網(wǎng)站 Web 預(yù)設(shè)尺寸給了一些啟示：常見尺寸(1366x768px)、大網(wǎng)頁(1920x1080px)、最小尺寸(1024x768px)、Macbook Pro13 (2560x1600px)、MacBook Pro15(2880x1800px)、iMac 27(2560x1440px)等，這些是主流尺寸，如果做網(wǎng)站時建議按主流的分辨率1920x1080px來設(shè)計，通常設(shè)計網(wǎng)站時的網(wǎng)站寬度為1920px，每個屏幕的高度約為900px。為什么是900px呢?因為1080還要減去瀏覽器頭部和底部高度，大約就是900px了。內(nèi)容安全區(qū)域為1200px (或1000px / 1400px)。以這個尺寸來設(shè)計相對標(biāo)準(zhǔn)。當(dāng)然在設(shè)計網(wǎng)頁前需要知會前端設(shè)計尺寸，因為對于適配的方式和后續(xù)配合他們更有發(fā)言權(quán)。

2、文字規(guī)范

網(wǎng)站上面的文字是通過前端工程師重新寫在代碼里的。那這種文字在瀏覽器上的渲染與系統(tǒng)和瀏覽器有關(guān)。比如在蘋果電腦上看到的文字效果和 Windows 系統(tǒng)電腦上看到的文字效果就有所不同：蘋果會對文字進行渲染，而 windows 的文字幾乎充滿了像素顆粒。按照用戶占比來說無疑 Windows 的用戶是主流，所以盡管使用蘋果電腦設(shè)計網(wǎng)頁，但是設(shè)計出來的網(wǎng)頁效果也應(yīng)該和 Windows 顯示一致。否則設(shè)計完成的設(shè)計稿，程序員無法還原成設(shè)計的樣子。另外，字號的大小也非常重要。網(wǎng)頁的顯示區(qū)域決定了文字不可以過大，在網(wǎng)站設(shè)計中文字大小一般來說是12-20像素。為什么不能比12px更小?因為如果比12像素更小的中文無法放得下復(fù)雜的筆畫了。而且奇數(shù)的文字表現(xiàn)和適配都不好做，也就是說我們必須使用偶數(shù)的字號來設(shè)計。那么總結(jié)一下：文字使用宋體、大小為12px、渲染方式選擇無。稍大一些的字體使用微軟雅黑、大小為14-20px、渲染方式選擇 Windows Lcd 或銳利。另外，英文和數(shù)字需使用 Arial字體，渲染方式選擇無。

3、圖片規(guī)范

網(wǎng)站設(shè)計中的圖片常用4(寬)：3(高)、16(寬)：9(高)、1:1等比例。具體圖片大小沒有固定要求，但整數(shù)和偶數(shù)為佳。主要是考慮到一些適配的問題。作為內(nèi)容出現(xiàn)的圖片一定需要有介紹信息和排序信息。圖片的格式有很多，比如支持多級透明的 png 格式、圖片文件很小的 jpg 格式、支持透明/不透明并且支持動畫的 gif 格式等。

4、按鈕設(shè)計

按鈕的風(fēng)格在過去的十幾年發(fā)生了很大的變化，由一開始的「斜面與浮雕」風(fēng)格過渡到后面的「擬物風(fēng)格」，現(xiàn)在更流行的是扁平風(fēng)格。如果按鈕在一張圖片中，為了不影響圖片的美觀性，會去掉填充只保留邊框，這種設(shè)計方式叫做幽靈按鈕。注意在設(shè)計按鈕時記得同時設(shè)計好按鈕的鼠標(biāo)懸停、按下狀態(tài)。

5、表單

在網(wǎng)站設(shè)計中經(jīng)常需要使用一些輸入框、下拉菜單、彈窗、單選框、復(fù)選框、編輯器等。這些都是系統(tǒng)級的控件，一般是直接調(diào)用系統(tǒng)設(shè)計的。但是系統(tǒng)設(shè)計有時不能滿足我們的要求：系統(tǒng)內(nèi)置的表單高度不夠，點擊起來不舒服;不符合網(wǎng)站整體設(shè)計的品牌感等。那么可以通過 CSS 給這些表單增加樣式，包括顏色、大小、內(nèi)外邊距等。所以遇到涉及到表單的需求時也可以進行自定義設(shè)計。

6、自適應(yīng)與響應(yīng)式網(wǎng)站

有些網(wǎng)站使用電腦端或者手機端甚至 iPad 去瀏覽時體驗都非常好。這就需要為了用戶體驗而進行網(wǎng)站的自適應(yīng)或響應(yīng)式布局了。響應(yīng)式與自適應(yīng)的原理是相似的，都是通過代碼檢測設(shè)備屏幕寬度，根據(jù)不同的設(shè)備加載不同的 css。

(1)、自適應(yīng)網(wǎng)站

自適應(yīng)網(wǎng)站的設(shè)計稿是一致的，但是設(shè)計稿需要考慮屏幕變小時的變化方式。比如一個網(wǎng)站的內(nèi)容有5個區(qū)塊和4個間距，那么如果寬度縮小成900時需要如何變化，這就是自適應(yīng)布局。

(2)、響應(yīng)式網(wǎng)站

響應(yīng)式網(wǎng)站則需要設(shè)計不同版本的設(shè)計稿，然后根據(jù)不同的設(shè)備提供不同的 CSS 樣式。比如判定你設(shè)備的寬度是750px，那么網(wǎng)站就知道你使用了手機來訪問，就會給你導(dǎo)入一份手機才有的樣式;如果是電腦的寬度就給你導(dǎo)入電腦的 CSS 樣式。對于設(shè)計師來說，自適應(yīng)需要考慮網(wǎng)站在不同設(shè)備寬度下的整除與排版;響應(yīng)式則需要設(shè)計電腦、平板、手機等至少三套設(shè)計稿(但這三套設(shè)計稿的內(nèi)容是一致的)。總之，自適應(yīng)和響應(yīng)式都是網(wǎng)站為了用戶體驗所適應(yīng)瀏覽設(shè)備而做出的努力。

(3)、適配的規(guī)范

手機方面：適配手機頁面時，我們一般以 iPhone 為畫布標(biāo)準(zhǔn)。原因是 iPhone 相對顯示比較清晰，并且要求較高。而且用戶占有量也很高。在適配時我們一般以750x1334px尺寸為主，然后將網(wǎng)站導(dǎo)航改變?yōu)槭謾C APP 常常使用的漢堡包+抽屜式導(dǎo)航的形式。同時網(wǎng)站里的按鈕也需要變?yōu)槭謾C APP 中我們看到的左右?guī)缀鯘M屏的按鈕，并且每個按鈕要大于88PX，方便手指的點擊。字體方面，我們要把網(wǎng)站的字體全部改為蘋方字體，并且字號設(shè)置為24PX以上，渲染方式設(shè)置成銳利。英文則需要使用 SF-UI 代替。也就是將網(wǎng)站改變成一個類 APP 的手機網(wǎng)頁，這樣才可以保證手機用戶體驗良好。如果用戶使用安卓手機，那么前端代碼則會基于設(shè)計稿的設(shè)計適度加大圖片與間距來適應(yīng)安卓屏幕。

網(wǎng)頁設(shè)計注意事項

1、設(shè)計風(fēng)格要新穎

網(wǎng)頁設(shè)計風(fēng)格要不落俗套，要重點突出一個"新"字，這個原則要求我們在設(shè)計網(wǎng)站內(nèi)容時不能照抄別人的內(nèi)容，要結(jié)合自身的實際情況創(chuàng)作出一個獨一無二的網(wǎng)站。選材要盡量做到"少"而"精",又必須突出"新"，如能堅持天天更新的話,我相信這樣的網(wǎng)頁一定會受到大家的歡迎。

2、色彩與品牌VI相符

網(wǎng)頁設(shè)計的色彩運用傾向于少而精，少代表了整體頁面的顏色使用，千萬不要做得花里胡哨;精代表了在配色的時候盡可能的協(xié)調(diào)，可根據(jù)客戶LOGO或確定的主色調(diào)，再搭配一種、兩種色彩即可，一定要讓整體頁面看起來舒服。

3、 網(wǎng)頁風(fēng)格要統(tǒng)一

你網(wǎng)頁上所有的圖像、文字，包括像背景顏色、區(qū)分線、字體、標(biāo)題、注腳什么的，要統(tǒng)一風(fēng)格，貫穿全站。這樣子讀者看起來舒服、順暢，會對你的網(wǎng)站留下一個"很專業(yè)"的印象。

4、整體頁面的層次感

用戶的眼睛喜歡有秩序的設(shè)計，如頭部包含導(dǎo)航和LOGO，特定內(nèi)容使用lightbox，三列分欄，頁腳。它有助于在內(nèi)心組織重要的信息，并引導(dǎo)用戶注意在你想讓他注意的地方。在傳統(tǒng)藝術(shù)中，新手們被教導(dǎo)色彩價值和線性透視三原則和其他藝術(shù)指導(dǎo)。在網(wǎng)頁設(shè)計中，沒有特別奉行的準(zhǔn)則，但以直觀的方式組織內(nèi)容是一條很好的經(jīng)驗規(guī)則。

5、注意實用性

做網(wǎng)站設(shè)計的時候，flash動畫是很重要的一部分，但是要注意盡量少用，小企業(yè)的網(wǎng)站設(shè)計，因為用戶來網(wǎng)站是為了尋找他們所使用的產(chǎn)品和服務(wù)的有用信息。

6、使網(wǎng)站具有交互功能

一個靜態(tài)網(wǎng)頁始終給人一種呆板的感覺，缺少一種活力和生氣。最好在網(wǎng)站上提供一些回答問題的工具以及其他具有交互性能的設(shè)計，使得訪問者能從網(wǎng)站上獲得交互的信息，從而使訪問者有一種參與網(wǎng)絡(luò)建設(shè)的新鮮感和成就感。

7、考慮瀏覽器的兼容性

當(dāng)然IE所占的市場份額越來越大，但是我們?nèi)匀恍枰紤]到firefox以及google chrome這些瀏覽器用戶。設(shè)計風(fēng)格的考慮，如色彩的搭配，圖形、線條的使用等等。要時刻為用戶著想，必須最少在幾種不同類型的瀏覽器下測試網(wǎng)站，看看兼容性如何。

8、SEO優(yōu)化布局

在網(wǎng)頁設(shè)計時對網(wǎng)站優(yōu)化進行考慮，對網(wǎng)站運營時要優(yōu)化的關(guān)鍵詞考慮在內(nèi)，同時再使用字體設(shè)計時考慮到網(wǎng)頁制作的H1、H2、H3標(biāo)簽等細節(jié)優(yōu)化，使網(wǎng)上上線后符合搜索引擎的搜索規(guī)則。

網(wǎng)頁設(shè)計常用工具

1、Adobe Photoshop

Adobe Photoshop是一種優(yōu)質(zhì)的網(wǎng)頁設(shè)計工具。它有很多選項來創(chuàng)建和編輯您的Web模板。它適用于圖像，您可以為您的網(wǎng)頁設(shè)計創(chuàng)建圖形。通過無限的顏色和漸變選項，可以制作出最佳的模板設(shè)計。它為您提供了一個空白的畫布，讓您的想象力生動。您可以按照自己的方式附加圖像，移動元素，繪制框，裁剪邊緣以及編輯模板。它適用于圖層，這使您的工作非常簡單。您可以顯示/隱藏圖層以有效管理Web設(shè)計元素。

2、Sketch

Sketch是適用于Mac設(shè)備的網(wǎng)頁設(shè)計軟件。它是專注于創(chuàng)建Web模板和設(shè)計的專業(yè)工具。它適用于矢量圖像，因此您將獲得最佳，最高分辨率的結(jié)果。工具欄和選項非常簡單。Sketch提供了創(chuàng)建和管理Web設(shè)計項目的完全靈活性。它具有鏡像功能，允許在多種設(shè)備(如手機或平板電腦)上測試您的網(wǎng)頁設(shè)計模板，可以100%確定您的網(wǎng)頁設(shè)計將如何在不同的屏幕尺寸上顯示。

3、Figma

Figma是一個多用戶網(wǎng)頁設(shè)計軟件。它允許您與設(shè)計團隊聯(lián)系以使用相同的Web模板。它是與客戶共享項目并在模板設(shè)計上進行實時更改的智能工具。Figma將網(wǎng)頁設(shè)計提升到一個全新的水平，它的編輯面板中包含字體，顏色和其他設(shè)置。用于創(chuàng)建圖標(biāo)或完整的Web模板時，工具和選項非常棒。

4、Adobe Illustrator

Adobe Illustrator 提供了一個完美的像素級設(shè)計環(huán)境，您可以在其中創(chuàng)建靈活且流暢的 Web 元素。它為您提供了創(chuàng)建清爽利落的 Web 布局所需的一切，包括矢量圖形、響應(yīng)式媒體圖標(biāo)、可伸縮組件、CSS 生成、SVG 導(dǎo)出、線框以及可重復(fù)使用的符號。

5、Adobe XD

adobe家打造的一款集頁面設(shè)計和交互原型為一體的設(shè)計工具，支持多人在線實時協(xié)作功能。另外在兼容性上優(yōu)勢最大，能跟全家桶產(chǎn)品進行聯(lián)動;但是在資源和功能這兩方面相對于前面兩款就比較弱勢了。

6、Canva

Canva是一款免費的設(shè)計工具。它不能被認為是一個成熟的網(wǎng)頁設(shè)計軟件，但你可以使用Canva創(chuàng)建有趣和有吸引力的設(shè)計來支持你的網(wǎng)頁模板。它非常適合構(gòu)建可以添加到Web設(shè)計中的圖像。

它配備了數(shù)百個模板，使您的工作更輕松。如果您沒有任何設(shè)計技能，可以使用Canva中的模板，輕松地為您的Web模板構(gòu)建具有專業(yè)外觀的圖像。

網(wǎng)頁設(shè)計常見問題

1、沒有遵循網(wǎng)頁設(shè)計基本原則

在移動終端網(wǎng)頁設(shè)計環(huán)節(jié)要積極體現(xiàn)精簡原則，在頁面設(shè)計中要盡量做到重點突出、精簡，這樣的設(shè)計才能更好的滿足用戶的個性化要求，提升網(wǎng)頁瀏覽的便捷性和畫面感，給用戶帶來不同的視覺體驗。然而，當(dāng)前在移動終端網(wǎng)頁設(shè)計的過程中相關(guān)人員沒有嚴(yán)格按照標(biāo)準(zhǔn)流程進行設(shè)計，設(shè)計重點不突出，不夠精簡，手機屏幕尺寸偏大，這給用戶造成了諸多不便，網(wǎng)頁瀏覽起來不方便，網(wǎng)頁相應(yīng)內(nèi)容不夠簡明扼要。

2、自動彈窗設(shè)計不夠合理

用戶在網(wǎng)頁瀏覽的過程中，網(wǎng)頁自動彈窗，用戶等待時間過長，從而導(dǎo)致了流量消耗過多，這使得用戶的滿意度降低，不利于移動終端網(wǎng)頁設(shè)計工作的更好發(fā)展。

3、對目標(biāo)終端屏幕特征掌握不夠

在移動終端網(wǎng)頁設(shè)計的過程中相關(guān)人員一定要積極了解目標(biāo)終端屏幕特征。然而在實際工作中，設(shè)計人員卻沒有做到這點，對目標(biāo)終端屏幕特征的了解不夠，頁面渲染效果受到瀏覽器像素寬度的影響。多數(shù)用戶都經(jīng)常使用豎屏手機，而平板電腦是橫屏使用的，因此，實際設(shè)計中由于沒有考慮到這點，導(dǎo)致了用戶頁面的渲染效果受到了一定影響，對分辨率范圍的劃分不夠合理，沒有考慮到移動終端不同，相應(yīng)的屏幕分辨率就會不同。

在網(wǎng)頁設(shè)計中，色彩的搭配、文字的變化、圖片的處理等是設(shè)計過程必須考慮的，但設(shè)計師在網(wǎng)頁設(shè)計時不要忽略了SEO的一些細節(jié)，從而進一步提升網(wǎng)頁設(shè)計的用戶體驗度。