網(wǎng)頁設計是什么意思？詳解網(wǎng)頁設計的流程、布局及規(guī)范

2023-08-12 10:05:28

網(wǎng)頁設計是什么意思

一、網(wǎng)頁設計是什么意思

網(wǎng)頁設計（英文：Web Design，又稱為Web UI design）是根據(jù)企業(yè)希望向瀏覽者傳遞的信息（包括產(chǎn)品、服務、理念、文化），進行網(wǎng)站功能策劃，然后進行的頁面設計美化工作。作為企業(yè)對外宣傳物料的其中一種，精美的網(wǎng)頁設計，對于提升企業(yè)的互聯(lián)網(wǎng)品牌形象至關重要。

二、網(wǎng)頁設計的流程

1、需求調(diào)研

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

2、搜集材料

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

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

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

4、結構規(guī)劃

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

5、主題元素構建

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

6、選擇配色方案和字體

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

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

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

8、反饋與修改設計方案

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

三、常見的網(wǎng)頁設計布局

1、"國"字型

2、拐角型

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

3、標題正文型

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

4、封面型

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

5、"T"結構布局

所謂"T"結構布局，就是指網(wǎng)頁上邊和左邊相結合，頁面頂部為橫條網(wǎng)站標志和廣告條，左下方為主菜單，右面顯示內(nèi)容，這是網(wǎng)頁設計中用得最廣泛的一種布局方式。在實際設計中還可以改變"T"結構布局的形式，如左右兩欄式布局，一半是正文，另一半是形象的圖片、導航?；蛘牟坏葍蓹谑讲贾茫ㄟ^背景色區(qū)分，分別放置圖片和文字等。

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

6、"口"型布局

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

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

7、"三"型布局

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

8、對稱對比布局

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

9、POP布局

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

四、網(wǎng)頁設計的規(guī)范

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

1、網(wǎng)頁尺寸

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

2、文字規(guī)范

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

網(wǎng)頁字體設計規(guī)范

3、圖片規(guī)范

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

4、按鈕設計

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

5、表單

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

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

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

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

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

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

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

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

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

五、網(wǎng)頁設計注意事項

1、設計風格要新穎

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

2、色彩與品牌VI相符

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

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

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

4、整體頁面的層次感

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

5、注意實用性

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

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

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

7、考慮瀏覽器的兼容性

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

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

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

六、網(wǎng)頁設計常用工具

1、Adobe Photoshop

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

2、Sketch

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

3、Figma

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

4、Adobe Illustrator

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

Adobe Illustrator

5、Adobe XD

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

6、Canva

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

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

七、網(wǎng)頁設計常見問題

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

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

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

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

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

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