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

網頁設計的流程

1、需求調研

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

2、搜集材料

通過和與網站相關人員的接觸、交流確定網站需要的模塊，并將這些模塊在文檔中體現，收集網頁設計相關圖片、文字、視頻等資料。

3、確定網站主題

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

4、結構規劃

在選擇好網頁主題后，就需要開始規劃網頁中的結構了。需要清楚的是：根據網頁主題明確規劃目標，合理設置網頁的結構。這其中，還需要注意網頁中內容的設置，要全面結合主題和頁面具體內容規劃結構。

5、主題元素構建

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

6、選擇配色方案和字體

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

7、使用設計工具實現

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

8、反饋與修改設計方案

根據用戶反饋，進行頁面設計調整，以達到最優效果。

常見的網頁設計布局

1、"國"字型

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

2、拐角型

這種結構與上一種其實只是形式上的區別，其實是很相近的，上面是標題及廣告橫幅，接下來的左側是一窄列鏈接等，右列是很寬的正文，下面也是一些網站的輔助信息。在這種類型中，一種很常見的類型是最上面是標題及廣告，左側是導航鏈接。

3、標題正文型

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

4、封面型

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

5、"T"結構布局

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

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

6、"口"型布局

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

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

7、"三"型布局

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

8、對稱對比布局

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

9、POP布局

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

網頁設計的規范

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

1、網頁尺寸

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

2、文字規范

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

3、圖片規范

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

4、按鈕設計

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

5、表單

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

6、自適應與響應式網站

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

(1)、自適應網站

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

(2)、響應式網站

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

(3)、適配的規范

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

網頁設計注意事項

1、設計風格要新穎

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

2、色彩與品牌VI相符

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

3、 網頁風格要統一

你網頁上所有的圖像、文字，包括像背景顏色、區分線、字體、標題、注腳什么的，要統一風格，貫穿全站。這樣子讀者看起來舒服、順暢，會對你的網站留下一個"很專業"的印象。

4、整體頁面的層次感

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

5、注意實用性

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

6、使網站具有交互功能

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

7、考慮瀏覽器的兼容性

當然IE所占的市場份額越來越大，但是我們仍然需要考慮到firefox以及google chrome這些瀏覽器用戶。設計風格的考慮，如色彩的搭配，圖形、線條的使用等等。要時刻為用戶著想，必須最少在幾種不同類型的瀏覽器下測試網站，看看兼容性如何。

8、SEO優化布局

在網頁設計時對網站優化進行考慮，對網站運營時要優化的關鍵詞考慮在內，同時再使用字體設計時考慮到網頁制作的H1、H2、H3標簽等細節優化，使網上上線后符合搜索引擎的搜索規則。

網頁設計常用工具

1、Adobe Photoshop

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

2、Sketch

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

3、Figma

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

4、Adobe Illustrator

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

5、Adobe XD

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

6、Canva

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

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

網頁設計常見問題

1、沒有遵循網頁設計基本原則

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

2、自動彈窗設計不夠合理

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

3、對目標終端屏幕特征掌握不夠

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

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