一、網(wǎng)站設(shè)計(jì)是什么意思

網(wǎng)站設(shè)計(jì)（英文：Web site design）是將網(wǎng)站策劃案中的內(nèi)容、網(wǎng)站的主題模式，以及結(jié)合設(shè)計(jì)師的認(rèn)識(shí)通過藝術(shù)的手法表現(xiàn)出來，要能充分吸引訪問者的注意力，讓訪問者產(chǎn)生視覺上的愉悅感，因此在網(wǎng)頁創(chuàng)作的時(shí)候就必須將網(wǎng)站的整體設(shè)計(jì)與網(wǎng)頁設(shè)計(jì)的相關(guān)原理緊密結(jié)合起來。而網(wǎng)頁制作通常就是將網(wǎng)頁設(shè)計(jì)師所設(shè)計(jì)出來的設(shè)計(jì)稿，按照W3C規(guī)范用html（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）將其制作成網(wǎng)頁格式。

二、網(wǎng)站設(shè)計(jì)的理念

不同的使用對象（B端、C端）網(wǎng)站的設(shè)計(jì)理念也有所區(qū)別。B端產(chǎn)品一般架構(gòu)復(fù)雜且較定制化，以業(yè)務(wù)為導(dǎo)向。可能有很多高級功能，突出高效易用，導(dǎo)致易學(xué)性打折扣。C端產(chǎn)品一般考慮絕大部分用戶使用場景和訴求，高級功能會(huì)相對少點(diǎn)。突出易學(xué)性。

1、對B端服務(wù)用戶來說，功能齊全/高效>好用

高效是通過設(shè)計(jì)幫助用戶可以精準(zhǔn)、快速的完成目標(biāo)任務(wù)。在做B端產(chǎn)品時(shí)，由于使用的場景相當(dāng)復(fù)雜，同時(shí)選擇性可能很多，如何在復(fù)雜操作里面高效，這對于設(shè)計(jì)師來說是一個(gè)挑戰(zhàn)。提升高效可以從以下方面來處理：

(1)、功能齊全：通過齊全的功能來保證高效。

(2)、減少操作路徑：優(yōu)化用戶操作路徑，盡可能的少步驟的完成用戶要完成的操作路徑。

(3)、減少頁面跳轉(zhuǎn)：更少的頁面跳轉(zhuǎn)能增加界面的連貫性，減少用戶的操作和記憶負(fù)擔(dān)，讓用戶完成任務(wù)更具有連續(xù)性。

2、對C端服務(wù)用戶來說，易學(xué)/易用>功能齊全

易學(xué)/易用即保持了界面結(jié)構(gòu)簡單、明了、設(shè)計(jì)清晰、易理解，操作簡單，通過界面元素的表意和界面提供的線索就能讓用戶清楚的知道其操作方式。易學(xué)/易用的產(chǎn)品易于縮小新用戶和專家用戶的差距，減少用戶的認(rèn)知成功，提升用戶體驗(yàn)。提升易學(xué)易用可以從以下方面來處理：

(1)、恰當(dāng)?shù)囊龑?dǎo)：通過文字提示或浮層提示來告知用戶，使新用戶對該產(chǎn)品/新增功能一目了然。

(2)、場景指示：在相應(yīng)的場景下給予用戶一定的指示讓用戶更清晰的知道下一步操作方向。

C端產(chǎn)品需要關(guān)注用戶的使用時(shí)長、是否容易上手并順利使用。產(chǎn)品做得越好，用戶越愿意為它花時(shí)間。但在B端市場，效率才是產(chǎn)品的目標(biāo)，因?yàn)锽端產(chǎn)品的價(jià)值恰恰在于在盡量短的時(shí)間內(nèi)抓住用戶痛點(diǎn)，如果用戶需要在你產(chǎn)品上花費(fèi)很多時(shí)間，那說明你的產(chǎn)品太難用了。

三、網(wǎng)站設(shè)計(jì)的原則

1、以用戶為中心

在用戶界面設(shè)計(jì)中，設(shè)計(jì)師要清楚誰才是真正的使用者。要能夠站在用戶的立場和角度來考慮設(shè)計(jì)網(wǎng)頁。用戶是你終端產(chǎn)品的體驗(yàn)者，所以，在做設(shè)計(jì)時(shí)，要遵循以用戶為中心的原則。用戶不會(huì)花太多時(shí)間在同一個(gè)網(wǎng)頁，只要他找到自己所要的訊息，就會(huì)跳轉(zhuǎn)到另一個(gè)頁面繼續(xù)尋找下一個(gè)信息。網(wǎng)頁設(shè)計(jì)師要知道，用戶之間的差別很大，他們的操作習(xí)慣和能力也各有不同。不能滿足所有人的期望，也別試圖去滿足所有人的期望，因?yàn)槟鞘遣豢赡艿氖隆Ｒ龅闹荒苁亲尵W(wǎng)站使用更加方便易操作，要做到這點(diǎn)，必須了解用戶的需求，目標(biāo)和偏好以及操作習(xí)慣。

2、主題明確（設(shè)定網(wǎng)站氛圍）

網(wǎng)站要營造什么氣氛是非常重要的事情，也是設(shè)計(jì)公司常常說的「設(shè)計(jì)風(fēng)格」，網(wǎng)頁UI設(shè)計(jì)要表達(dá)出一定的意圖和要求，有明確的主題，并按照視覺心理規(guī)律和形式將主題傳達(dá)給用戶，使主題在適當(dāng)?shù)沫h(huán)境里被用戶理解和接受，從而滿足其需求。這就要求網(wǎng)頁UI設(shè)計(jì)不僅要單純、簡練、清晰和精準(zhǔn)，還需要在凸顯藝術(shù)性的同時(shí)通過視覺沖擊力來體現(xiàn)主題。

3、視覺美觀

視覺美觀是網(wǎng)頁UI設(shè)計(jì)最基本的原則。網(wǎng)頁UI設(shè)計(jì)中內(nèi)容的主次與輕重、結(jié)構(gòu)的虛實(shí)與繁簡、形體的大小以及配色等都是造成視覺美觀的重要因素。還可以結(jié)合動(dòng)畫等多媒體形式使網(wǎng)頁的視覺沖擊力表現(xiàn)得更有力度，最終呈現(xiàn)給用戶一個(gè)視覺美觀、操作方便的網(wǎng)頁界面。

4、 KISS(Keep It Simple And Stupid)原則

簡單易操作，這也是網(wǎng)頁設(shè)計(jì)基本也是重要的原則。要讓用戶覺得自己是在控制軟件，而不是感覺被軟件控制。切記網(wǎng)頁的可操作性，用戶的習(xí)慣和能力各不相同，他們不是網(wǎng)頁設(shè)計(jì)師，并不懂你們設(shè)計(jì)這個(gè)網(wǎng)頁的原理和操作方式。并且絕大數(shù)的用戶，對于電腦的使用經(jīng)驗(yàn)是很初級的，只要稍微復(fù)雜一點(diǎn)的操作就會(huì)讓他們感覺很費(fèi)力，所以網(wǎng)頁設(shè)計(jì)師需要注意的是，減少操作，減輕用戶的負(fù)擔(dān)，讓操作更加簡單。

5、一致性原則

一致的結(jié)構(gòu)設(shè)計(jì)，可以讓用戶對網(wǎng)站的形象有深刻的記憶；一致的導(dǎo)航設(shè)計(jì)，可以讓用戶迅速而又有效的進(jìn)入到網(wǎng)頁中找到自己所需要的信息；一致的操作設(shè)計(jì)，可以讓用戶快速學(xué)會(huì)整個(gè)網(wǎng)站的各種功能操作。破壞這一原則，會(huì)誤導(dǎo)用戶，并且讓網(wǎng)頁顯的雜亂無章，給人留下不好的印象。當(dāng)然，網(wǎng)站設(shè)計(jì)的一致性并不意味著一成不變，有的網(wǎng)頁在不同欄目使用不同的風(fēng)格，或者隨著時(shí)間的推移不斷的改版網(wǎng)站，會(huì)給用戶帶來新鮮的感覺。

6、整體性原則

網(wǎng)站UI設(shè)計(jì)的整體性包括內(nèi)容上和形式上兩方面，網(wǎng)頁的內(nèi)容主要是指Logo、文字、圖像和動(dòng)畫等，形式是指整體版式和不同內(nèi)容的布局方式。在設(shè)計(jì)網(wǎng)頁時(shí)，強(qiáng)調(diào)頁面各組成部分的共性因素是形成整體性的常用方法。強(qiáng)調(diào)整體性更有利于用戶全面了解，并給人整體統(tǒng)一的美感。

7、網(wǎng)頁布局的合理性原則

保證頁面布局均勻：主要體現(xiàn)在欄目與欄目，色塊與色塊，圖片與文字之間的搭配協(xié)調(diào)問題。重要的信息要醒目：分清主次，重要的信息放置中心的位置。

合理的顏色搭配：顏色對人的視覺和大腦感官?zèng)_擊力是極大的，合理利用顏色，實(shí)現(xiàn)內(nèi)容與形式的協(xié)調(diào)。一個(gè)屏幕的色彩種類要少于7種，重要信息的對象選取醒目的顏色等。

圖文并茂：一個(gè)網(wǎng)頁有過多的圖像將會(huì)降低這個(gè)網(wǎng)頁的信息量，過多的文字則會(huì)顯得沉悶無生氣，理想的圖文并茂才能互相襯托，使得網(wǎng)頁變得生動(dòng)活躍又使得頁面有豐富的內(nèi)容。

8、適配性原則

用戶將使用各種設(shè)備（從智能手機(jī)到臺(tái)式機(jī)）、瀏覽器訪問您的網(wǎng)站。 因此，網(wǎng)站在不同的屏幕尺寸、瀏覽器上正確顯示是非常重要的，務(wù)必在多個(gè)瀏覽器上檢查您的網(wǎng)站，以確保一切正常顯示。

四、網(wǎng)站設(shè)計(jì)的要點(diǎn)

1、保證網(wǎng)站的導(dǎo)航設(shè)計(jì)清晰流暢

在網(wǎng)站設(shè)計(jì)中，導(dǎo)航是非常重要的，因?yàn)閷?dǎo)航就好比指南針方向標(biāo)，指引用戶去想去的地方，用戶通過網(wǎng)站的導(dǎo)航設(shè)計(jì)能迅速捕捉到重點(diǎn)和有效信息，這對提高用戶的體驗(yàn)度十分有利。導(dǎo)航的設(shè)計(jì)要讓用戶清楚的知道自己所處的位置，即使處于迷失森林中，也能清楚的知道方向，導(dǎo)航設(shè)計(jì)的按鈕雖然占據(jù)的比例小，但是其在網(wǎng)站中的作用是不容忽視的。

2、網(wǎng)頁圖片的設(shè)計(jì)和色彩搭配

為了讓圖片在網(wǎng)頁中做出好的展示，可以嘗試使用GIF動(dòng)圖，靜態(tài)頁面的展示盡量壓縮圖片，但前提是不改變圖片的形狀，這樣提高了網(wǎng)站加載頁面的速度。網(wǎng)頁設(shè)計(jì)的色彩搭配也是很重要的，網(wǎng)頁不要單獨(dú)采用一種顏色，一般都是采用一種主色調(diào)外加兩種輔助色調(diào)，網(wǎng)站的頁面看上去要和諧溫馨，簡潔，有些網(wǎng)站經(jīng)常使用各種色彩，使得網(wǎng)站看上去就像五顏六色的畫板一樣，沒有重點(diǎn)沒有特色，這讓用戶看上去感覺很不專業(yè)。

3、整齊有序的排版

在網(wǎng)站設(shè)計(jì)中，排版也是相當(dāng)重要，比如用戶來到一個(gè)排版整齊有序的網(wǎng)站和來到一個(gè)排版很亂的網(wǎng)站用戶的體驗(yàn)和心情是不一樣的。在網(wǎng)頁中，要確保文字的字體字號保持一致，網(wǎng)頁設(shè)計(jì)的按鈕盡量符合用戶的瀏覽習(xí)慣。

4、網(wǎng)站文字編排

網(wǎng)站不是圖就是文，圖片就是一張圖，但文字沒那么簡單，文字需要編排，需要注意的事項(xiàng)：文字字距、行距、字體大小、文字字?jǐn)?shù)、標(biāo)題顏色、靠左靠右靠中、標(biāo)點(diǎn)符號、換行字?jǐn)?shù)、文字段落留白、編排一致性…，光是文字編排得好，就會(huì)有好的設(shè)計(jì)呈現(xiàn)，文字多的網(wǎng)站更應(yīng)該重視文字編排。

有些網(wǎng)站文章每一行的字?jǐn)?shù)都很寬，中文字?jǐn)?shù)都超過50個(gè)字以上，字?jǐn)?shù)超過人類的可視角，看完一行要換到下一行會(huì)對不準(zhǔn)，這就是符合人類閱讀的設(shè)計(jì)，控制單行在45～55個(gè)中文換行是較容易閱讀的換行字?jǐn)?shù)。

文章的行距太擠，會(huì)難以閱讀，最好的行距是字高的30%~50%之間。字體大小的使用也不是越大越好，字號過大有粗糙感，文字大小應(yīng)該要依據(jù)網(wǎng)站特性適時(shí)的微調(diào)通用的字體。

5、瀏覽器的兼容性

目前市場上，各種瀏覽器有很多，每個(gè)用戶對瀏覽器都有自己的偏好，所以對網(wǎng)頁的設(shè)計(jì)要求對常用的一些瀏覽器兼容，比如常用的IE瀏覽器，360瀏覽器，搜狗瀏覽器等這些常用的瀏覽器，網(wǎng)站設(shè)計(jì)至少對這些常用瀏覽器兼容。

6、對搜索引擎友好

現(xiàn)在很多網(wǎng)站的流量客戶有大部分都是通過搜索引擎而來的，所以網(wǎng)站的設(shè)計(jì)要對搜索引擎友好，網(wǎng)站的欄目結(jié)構(gòu)簡單清晰明了，網(wǎng)頁沒有太多的flash動(dòng)畫，多媒體功能，所以網(wǎng)站需要隨時(shí)進(jìn)行優(yōu)化，這樣有利于搜索引擎的蜘蛛的抓取和爬行。讓網(wǎng)站的關(guān)鍵詞獲得好的排名。

五、網(wǎng)站設(shè)計(jì)流程

1、需求調(diào)研

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

2、搜集材料

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

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

設(shè)計(jì)一個(gè)網(wǎng)站的頁面，最重要的是選擇好網(wǎng)站的主題內(nèi)容，一般都是選擇自己所需要的內(nèi)容來進(jìn)行設(shè)計(jì)。需要注意的是：所選擇的設(shè)計(jì)主題一定要有自己的特色，能夠從眾多網(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ì)師經(jīng)常添加主題元素來豐富網(wǎng)站并使其成熟。例如，動(dòng)畫讓網(wǎng)站更加生動(dòng)，對用戶體驗(yàn)有很好的影響，增加對平臺(tái)的信任。

6、選擇配色方案和字體

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

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

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

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

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

六、網(wǎng)站設(shè)計(jì)規(guī)范（PC網(wǎng)站）

1、網(wǎng)站頁面尺寸

制作網(wǎng)頁時(shí)我們選用的分辨率是 72 像素/英寸，使用的畫布尺寸 1920px * 1080px。但并不代表我們可以在整個(gè)畫布上作圖。網(wǎng)頁的布局主要有兩種：居中布局和左右布局。布局不一樣使設(shè)計(jì)的空間也不相同。

2、網(wǎng)頁文字

網(wǎng)頁中字體也是有使用規(guī)范的，我們這里考慮主流的 PC 端屏幕尺寸（1920px*1080px分辨率）。

網(wǎng)頁字體設(shè)計(jì)規(guī)范

(1)、字體

中文建議使用微軟雅黑，英文建議使用arial，最多使用三種混搭，優(yōu)先使用各操作系統(tǒng)默認(rèn)的字體，如果指定其他字體，要注意版權(quán)問題。

(2)、字號

整站文字字號大小在12px ~ 36px 區(qū)間，要使用偶數(shù)字號。正文字號大小建議在12px ~ 18px 之間，12px 適用于日期、版權(quán)等注釋性內(nèi)容；14px 適用于非突出性的普通正文內(nèi)容；16px 或 18px 適用于突出性的標(biāo)題內(nèi)容。導(dǎo)航欄字體：14px ~ 18px 區(qū)間。層次的區(qū)別，可以改變字體顏色或加粗來體現(xiàn)。

(3)、間距

相鄰兩個(gè)文字的間距，其實(shí)不需要太過介意，除了特殊的需求之外，都可以使用默認(rèn)數(shù)值的間距。行間距一般是字體大小的 1.5 ~ 2 倍，段間距一般是字體大小的 2 ~ 2.5 倍。

(4)、顏色

主文字顏色，建議使用公司品牌的 VI（視覺識(shí)別 Visual Identity）顏色，可提高公司網(wǎng)站與公司 VI 之間的關(guān)聯(lián)，增加可辨識(shí)性和記憶性。正文字體顏色可在#000000 ~ #666666 之間的顏色，輔助性、注釋類的文字可用#999999 等比較淺的顏色。

3、網(wǎng)頁留白

(1)、8倍數(shù)原則

利用 8 的倍數(shù)來規(guī)定頁面中元素（按鈕、輸入框、圖片等）的尺寸及各自間距的大小。即任何需要自定義的長、寬，margin  和 padding 都應(yīng)該是 8 的倍數(shù)。

很多人雖然理解要用原則約束尺寸，但還是會(huì)產(chǎn)生疑問，為什么是 8，不是 6、10 或者其他數(shù)字？

據(jù)統(tǒng)計(jì)，使用中后臺(tái)系統(tǒng)的用戶的主流分辨率主要為 1920、1440 和 1366，個(gè)別系統(tǒng)還存在 1280 的顯示設(shè)備。主流的屏幕尺寸大部分都是 8 的整數(shù)倍數(shù)。即使某些屏幕邊長像素不是 8 的倍數(shù)，在設(shè)計(jì)中仍然可以盡量做到自定義元素的長、marging，以及 padding 都是 8 的倍數(shù)來維持設(shè)計(jì)的一致性。

(2)、間距一致性

田字形布局時(shí)，中間十字間距要一致。上下、左右要對稱統(tǒng)一。特殊情況下，「豎」可以比「橫」寬（符合中國傳統(tǒng)美學(xué)）。

(3)、組件留白

表格的外邊間距用 16px，其他組件 8px。

4、顏色規(guī)范

(1)、顏色特性

不同行業(yè)一般有自己行業(yè)的色彩。例如：金融行業(yè)網(wǎng)站一般紅色或者金黃色，環(huán)保行業(yè)網(wǎng)站大多喜歡綠色，企業(yè)展示網(wǎng)站普遍用藍(lán)色，具體也參考企業(yè)VI手冊。

(2)、背景色

背景色一般采用清淡素雅的色彩，避免采用復(fù)雜的圖片作為背景色，同時(shí)背景色要與文字的色彩對比強(qiáng)烈一些。

(3)、色彩數(shù)量

一般控制在 3 ~ 4 種色彩以內(nèi)，通過調(diào)整色彩的各種屬性來產(chǎn)生變化。常用的網(wǎng)頁設(shè)計(jì)配色：同色系、鄰近色、類似色、中差色、對比色。

5、圖片規(guī)范

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

七、不同類型網(wǎng)站設(shè)計(jì)的特點(diǎn)

1、營銷型網(wǎng)站建設(shè)

企業(yè)營銷型網(wǎng)站建設(shè)是現(xiàn)在中國很多企業(yè)都比較喜歡的一種網(wǎng)站建設(shè)方案，特別受到了中小型企業(yè)的喜愛，這些企業(yè)品牌知名度不是很高，沒有雄厚的資金和實(shí)力在網(wǎng)絡(luò)上進(jìn)行全方位的宣傳推廣，所以制作網(wǎng)頁主要還是以銷售產(chǎn)品為主要目的，這種網(wǎng)站建設(shè)主要內(nèi)容是產(chǎn)品，通過對產(chǎn)品的網(wǎng)絡(luò)包裝，打造網(wǎng)絡(luò)營銷的氛圍，得到用戶的信任度，并且達(dá)到推廣和銷售的目的。此類網(wǎng)站特點(diǎn)是咨詢量較多，所以配備24小時(shí)可聯(lián)系的客服分外重要，客戶及時(shí)了解到自己需要的信息，公司能及時(shí)為客戶解答才能獲得客戶的好感。

2、企業(yè)官網(wǎng)類

企業(yè)官網(wǎng)一般包括首頁、產(chǎn)品或服務(wù)介紹、團(tuán)隊(duì)介紹、關(guān)于我們等。企業(yè)建設(shè)官網(wǎng)的目的不管是宣傳企業(yè)形象還是介紹產(chǎn)品服務(wù)，都應(yīng)將網(wǎng)站開發(fā)設(shè)計(jì)得高端大氣、符合企業(yè)文化和價(jià)值觀，讓消費(fèi)者認(rèn)同企業(yè)和產(chǎn)品。

3、電商商城類

平臺(tái)為每個(gè)店鋪提供了固定的模板，在模板內(nèi)店鋪可以進(jìn)行自定義裝飾，此時(shí)，網(wǎng)站開發(fā)設(shè)計(jì)師如何發(fā)揮主觀能動(dòng)性，為店鋪吸引更多流量、促成跟多交易顯得尤為重要。

4、視頻類網(wǎng)站

愛奇藝、騰訊視頻、優(yōu)酷都屬于視頻類網(wǎng)站開發(fā)。隨著移動(dòng)網(wǎng)絡(luò)的發(fā)展，視頻類網(wǎng)站開發(fā)的用戶數(shù)量不斷增加，用戶黏性極高，此類網(wǎng)站在設(shè)計(jì)制作時(shí)觀看區(qū)域要足夠大，背景顏色盡量選擇暗色，以免亮色刺激眼睛影響觀看體驗(yàn)。

5、產(chǎn)品類網(wǎng)站

企業(yè)為了單獨(dú)宣傳某類產(chǎn)品而專門建設(shè)的網(wǎng)站開發(fā)。此類網(wǎng)站能更加詳細(xì)地介紹產(chǎn)品性能優(yōu)勢、增加用戶體驗(yàn)感，闡釋產(chǎn)品極精細(xì)的一面。

6、門戶類網(wǎng)站

門戶類網(wǎng)站開發(fā)的特點(diǎn)是大而全，包羅萬象，新浪、搜狐、網(wǎng)易等都屬于門戶類網(wǎng)站，門戶類網(wǎng)站的門檻極高，對網(wǎng)站開發(fā)設(shè)計(jì)制作水平的要求也更加精細(xì)全。

八、網(wǎng)站設(shè)計(jì)注意事項(xiàng)

1、導(dǎo)航菜單忌用圖片、flash

導(dǎo)航菜單使用圖片、flash當(dāng)然比純文本來得好看一些，但是搜索引擎并不認(rèn)識(shí)你的圖片和flash。如果你非要使用漂亮的圖片來做導(dǎo)航的話，可以使用背景替換的方法。建議做一個(gè)導(dǎo)航菜單鏈接的xml文提交到搜索引擎。

2、不恰當(dāng)?shù)厥褂脠D片

為了網(wǎng)頁美觀，經(jīng)常會(huì)到處貼滿圖片，這樣做是不正確的，與內(nèi)容無關(guān)的圖片能少就少吧。我們可以把這些圖片做成容器的背景。

3、內(nèi)容里特殊字體的運(yùn)用

楷體很漂亮，草書也不遜色于宋體。但是不是所有人的電腦都安裝有這些字體。如果使用這些特殊字體的話，在別人的電腦里看到的網(wǎng)頁將會(huì)是不堪入目。

4、無實(shí)際意義的特效

避免使用炫耀的技巧，這些特效對你的網(wǎng)頁沒有任何實(shí)際意義。

5、用戶難以獲取自己想要的內(nèi)容

如果一個(gè)用戶訪問你的網(wǎng)站跟走入迷宮一樣，會(huì)有什么后果？聽說過3次點(diǎn)擊規(guī)則嗎?對于小型網(wǎng)站，在你的主頁上，沒有任何一條信息，需要點(diǎn)擊次數(shù)超過3次的。對于大型網(wǎng)站，使用導(dǎo)航和工具條來改善操作。

6、顏色搭配錯(cuò)誤，網(wǎng)頁難于閱讀

如無必要，你應(yīng)當(dāng)堅(jiān)持使用白色的背景和黑色的文本，另外還應(yīng)當(dāng)堅(jiān)持使用通用字體。

7、不留空白

注意留空白。不要用圖像、文本和不必要的動(dòng)畫gifs來充斥網(wǎng)頁，即使有足夠的空間，在設(shè)計(jì)時(shí)也應(yīng)該避免使用。

九、網(wǎng)站設(shè)計(jì)常用工具

1、Adobe Photoshop

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

2、Sketch

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

3、Figma

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

4、Adobe Illustrator

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

Adobe Illustrator

5、Adobe XD

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

6、Canva

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

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

十、網(wǎng)站設(shè)計(jì)與網(wǎng)頁設(shè)計(jì)的區(qū)別

網(wǎng)頁設(shè)計(jì)：更側(cè)重于單個(gè)頁面的視覺和布局設(shè)計(jì)。

網(wǎng)站設(shè)計(jì)：具有更強(qiáng)的整體性和系統(tǒng)性，考慮整個(gè)網(wǎng)站的結(jié)構(gòu)、各個(gè)頁面之間的關(guān)系、一致的品牌體驗(yàn)以及復(fù)雜的功能邏輯?？梢哉f，網(wǎng)站設(shè)計(jì)包含了網(wǎng)頁設(shè)計(jì)。

最后總結(jié)

優(yōu)化猩SEO：網(wǎng)站設(shè)計(jì)在國內(nèi)發(fā)展已有20多年，很多企業(yè)也建有公司的品牌網(wǎng)站，但很多企業(yè)在網(wǎng)站建設(shè)方面僅是完成了網(wǎng)站發(fā)布而已，網(wǎng)站設(shè)計(jì)完全沒有體現(xiàn)出公司的互聯(lián)網(wǎng)形象，高質(zhì)量的網(wǎng)站設(shè)計(jì)在國內(nèi)還有很長的路要走。

修改于2026-01-05