首頁
全力介紹
設計案例
全力服務
合作客戶
聯系全力
網頁設計：深圳網頁設計和網頁設計百科
網頁設計（web design，又稱為Web UI design，WUI design，WUI），是根據企業希望向瀏覽者傳遞的信息（包括產品、服務、理念、文化），進行網站功能策劃，然后進行的頁面設計美化工作。作為企業對
一、什么是網頁設計
網頁設計（web design，又稱為Web UI design，WUI design，WUI），是根據企業希望向瀏覽者傳遞的信息（包括產品、服務、理念、文化），進行網站功能策劃，然后進行的頁面設計美化工作。作為企業對外宣傳物料的其中一種，精美的網頁設計，對于提升企業的互聯網品牌形象至關重要。
網頁設計一般分為三種大類：功能型網頁設計（服務網站&B/S軟件用戶端）、形象型網頁設計（品牌形象站）、信息型網頁設計（門戶站）。設計網頁的目的不同，應選擇不同的網頁策劃與設計方案。
網頁設計的工作目標，是通過使用更合理的顏色、字體、圖片、樣式進行頁面設計美化，在功能限定的情況下，盡可能給予用戶完美的視覺體驗。高級的網頁設計甚至會考慮到通過聲光、交互等來實現更好的視聽感受。
二、網頁設計的目標
1、業務邏輯清晰，能清楚的向瀏覽者傳遞信息，瀏覽者能方便的尋找到自己想要查看的東西。
2、用戶體驗良好，用戶在視覺上，操作上都能感到很舒適。
3、頁面設計精美，用戶能得到美好的視覺體驗，不會為一些糟糕的細節而感到不適。
4、建站目標明晰，網頁很好的實現了企業建站的目標，向用戶傳遞了某種信息，或展示了產品、服務、理念、文化。
三、網站設計的流程
1、主題明確
在目標明確的基礎上，完成網站的構思創意即總體設計方案。對網站的整體風格和特色作出定位，規劃網站的組織結構。
為了做到主題鮮明突出，要點明確，應該使配色和圖片圍繞預定的主題；調動一切手段充分表現網站點的個性和情趣，辦出網站的特點。充分利用已有信息，如客戶手冊．公共關系文檔．技術手冊和數據庫等。
2、設計要求
（1）簡潔實用：網絡特殊環境下，盡量以最高效率的方式將用戶所要想得到的信息傳送給他就是最好的，所以要去掉所有的冗余的東西。
（2）使用方便：同第一個是相一致的，滿足使用者的要求，網頁做得越適合使用，就越顯示出其功能美。
（3）整體性好：一個網站強調的就是一個整體，只有圍繞一個統一的目標所做的設計才是成功的。
（4）網站形象突出：一個符合美的標準的網頁是能夠使網站的形象得到最大限度的提升的。
（5）頁面用色協調，布局符合形式美的要求：布局有條理，充分利用美的形式，使網頁富有可欣賞性，提高檔次。當然雅俗共賞是人人都追求的。
（6）交互式強：發揮網絡的優勢，是每個使用者都參與到其中來，這樣的設計才能算成功的設計。這樣的網頁才算真正的美的設計。
3、版式設計
網頁設計作為一種視覺語言，特別講究編排和布局，雖然主頁的設計不等同于平面設計，但它們有許多相近之處。
版式設計通過文字圖形的空間組合，表達出和諧與美。
多頁面站點頁面的編排設計要求把頁面之間的有機聯系反映出來，特別要求處理好頁面之間和頁面內的秩序與內容的關系。為了達到最佳的視覺表現效果，反復推敲整體布局的合理性，使瀏覽者有一個流暢的視覺體驗。
4、色彩作用
色彩是藝術表現的要素之一。在網頁設計中，設計師根據和諧、均衡和重點突出的原則，將不同的色彩進行組合．搭配來構成美麗的頁面。 根據色彩對人們心理的影響，合理地加以運用。如果企業有CIS（企業形象識別系統），應按照其中的VI進行色彩運用。
5、形式內容
為了將豐富的意義和多樣的形式組織成統一的頁面結構，形式語言必須符合頁面的內容，體現內容的豐富含義。
靈活運用對比與調和、對稱與平衡、節奏與韻律以及留白等手段，通過空間、文字、圖形之間的相互關系建立整體的均衡狀態，產生和諧的美感。
6、便于使用
如果人們看不懂或很難看懂您的網站，那么，他如何了解你的企業信息和服務項目呢？使用一些醒目的標題或文字來突出您的產品與服務。并且即使您擁有最棒的產品，如果客戶從您的網站上看不清楚您在介紹什么或不清楚如何受益的話，他們是不會喜歡您的網站的，這對于網頁設計而言是失敗的。
7、導向清晰
網頁設計中導航使用超文本鏈接或圖片鏈接，使人們能夠在您的網站上自由前進或后退，而不必讓他們使用瀏覽器上的前進或后退。我們在所有的圖片上使用“ALT”標識符注明圖片名稱或解釋，以便那些不愿意自動加載圖片的觀眾能夠了解圖片的含義。
四、網頁設計中的配色規則
1、行業避忌的顏色
某些行業的企業客戶，對于網站整體顏色的要求涉及到具體的顏色避忌，例如金融、投資類的企業網站，應盡量避免綠色，或相近顏色的使用。這是因為，綠色在金融投資行業當中代表的是低迷，不景氣，下滑等負面的元素，因此即便企業宣揚的是環保、低碳等企業文化，也是不能輕易予以使用。
2、特征選色
企業客戶在不同的發展階段，對于網站設計的配色需求并不一樣。在企業初創階段，企業建站的目的是打造品牌網絡形象，開拓客戶資源，這時候的企業客戶更多的是關注自身的個性化，如何才能凸顯企業的特質，如何才能在行業當中顯示其獨有的特性，這是初建網站的企業客戶所重點關注的內容；在企業形成規模，進行品牌提升階段，企業建設網站或進行改版的目的是重塑品牌網絡形象，打造更為專業、沉穩和可持續發展的品牌理念和文化，這時候的企業客戶更多的是考慮如何將企業的品牌內涵與行業相融合，在配色的選擇上更傾向于穩重、包容，能夠適應各種場合需要的配色。
五、網頁設計理念
1、內容決定形式
先把內容充實上，再分區塊，再定色調，再處理細節。
2、先整體，后局部，最后回歸到整體
全局考慮，把能填上的都填上，占位置。然后定基調，分模塊設計。最后調整不滿意的幾個局部細節。
3、功能決定設計方向
看網站的用途，決定設計思路.商業性的就要突出贏利目的；政府型的就要突出形象和權威性的文章；教育性的，就要突出師資和課程。
總結：網站設計應簡潔，明了。從用戶體驗度出發設計
六、網頁標題設計
在設計網頁標題時，應注意同時兼顧對用戶的注意力，以及對搜索引擎檢索的需要。這一原則在實際操作中可通過三個方面來體現，這三個方面也可以被認為是網頁標題設計的一般規律：
1、網頁標題不宜過短或者過長
一般來說6-10個漢字比較理想，最好不要超過30個漢字。網頁標題字數過少可能包含不了有效關鍵詞，字數過多不僅搜索引擎無法正確識別標題中的核心關鍵詞，而且也讓用戶難以對網頁標題（尤其是首頁標題，代表了網站名稱）形成深刻印象，也不便于其他網站鏈接。
2、網頁標題應概括網頁的核心內容
當用戶通過搜索引擎檢索時，在檢索結果頁面中的內容一般是網頁標題（加鏈接）和網頁摘要信息，要引起用戶的關注，網頁標題發揮了很大的作用，如果網頁標題和頁面摘要信息有較大的相關性，摘要信息對網頁標題將發揮進一步的補充作用，從而引起用戶對該網頁信息點擊行為的發生（也就意味著搜索引擎推廣發揮了作用）。另外，當網頁標題被其他網站或者本網站其他欄目/網頁鏈接時，一個概括了網頁核心內容的標題有助于用戶判斷是否點擊該網頁標題鏈接。
3、網頁標題中應含有豐富的關鍵詞
考慮到搜索引擎營銷的特點，搜索引擎對網頁標題中所包含的關鍵詞具有較高的權重，盡量讓網頁標題中含有用戶檢索所使用的關鍵詞。以網站首頁設計為例，一般來說首頁標題就是網站的名稱或者公司名稱，但是考慮到有些名稱中可能無法包含公司/網站的核心業務，也就是說沒有核心關鍵詞，這時通常采用“核心關鍵詞+公司名/品排名”的方式來作為網站首頁標題。開頭所列舉的某網絡營銷服務商網站首頁標題實例，其實也是采用這種方式來設計網頁標題，只不過由于羅列了太多的“核心關鍵詞”，反而沒有了核心。
做美工看起來并不是一件容易的事情。首先，要對整個站點和企業有個大致的了解。例如：某些企業喜歡藍色的主調，你不可能去做個紅色的主調，這樣完全違背客戶的主要意愿，如果百度的標志改成五顏六色的，相信大家也不會認可的。站長的職責是規劃網站結構。同樣也需要有一定的審美觀。
七、網站設計的兩大要點
網頁設計的兩大要點是：整體風格和色彩搭配。
（一）確定網站整體風格
在這里，我提供給大家一些參考經驗：
1、將你的標志logo，盡可能的放在每個頁面上最突出的位置。
2、突出你的標準色彩。
3、總結一句能反映貴站精髓的宣傳標語！
4、相同類型的圖像采用相同效果，比如說標題字都采用陰影效果，那么在網站中出現的所有標題字的陰影效果的設置應該是完全一致的！
網站的整體風格及其創意設計是最難以學習的，難就難在沒有一個固定的模式可以參照和模仿。給你一個主題，任何兩人都不可能設計出完全一樣的網站。
VI是Visual Identity的縮寫，中文譯為“企業視覺識別”。VI是CI計劃的靜態識別符號，是企業理念視覺化傳達的載體，因此它項目最多，效果最為直接。VI作為視覺識別，它是外在表現，固然需要具有美感，但VI必須是MI的體現，直接反映企業的理念。因此VI設計包含這樣一些原則：即充分傳達企業理念、人性原則、民族性原則、簡潔抽象及動態原則、員工參與原則、法律原則、藝術性原則和個性原則。
CI是Corporate Identity的縮寫，中文譯為“企業形象”。CI計劃，是指企業有目的、有計劃、戰略性地創造出所希望的自身形象，由此提高企業的社會知名度，最終得到自己最適合的經營環境。
（二）、網頁色彩搭配
1、的頁面看起來色彩統一，有層次感。
2、用兩種色彩。先選定一種色彩，然后選擇它的對比色。
3、用一個色系。簡單的說就是用一個感覺的色彩，例如淡藍，淡黃，淡綠；或者土黃，土灰，土藍。
在網頁配色中，還要切記一些誤區：
1、不要將所有顏色都用到，盡量控制在三至五種色彩以內。
2、背景和前文的對比盡量要大(絕對不要用花紋繁復的圖案作背景)，以便突出主要文字內容。
八、網頁設計中應注意問題
1、頁面內容要新穎
網頁內容的選擇要不落俗套，要重點突出一個“新”字，這個原則要求我們在設計網站內容時不能照抄別人的內容，要結合自身的實際情況創作出一個獨一無二的網站。我們在設計網頁時，要把功夫下在選材上。選材要盡量做到“少”而“精”,又必須突出“新”，如能堅持天天更新的話,我相信這樣的網頁一定會受到大家的歡迎。
2、網頁命名要簡潔
由于一個網站不可能就是由一個網頁組成，它有許多子頁面，為了能使這些頁面有效地被連接起來，用戶最好能給這些頁面起一些有代表性的而且簡潔易記的網頁名稱。這樣既會有助于你以后方便管理網頁，在向搜索引擎提交你的網頁時更容易被別人索引到。在給網頁命名時，最好使用自己常用的或符合頁面內容的小寫英文字母，這直接關系到頁面上的連接。
3、要及時更新網頁
網頁制作好后，不能說萬事大吉了，其實事后的工作量更大。因為網頁制作是一時的，而維護更新的工作是每天都要做的。要及時把網頁上已經作廢的連接應該立即刪除掉，比如用戶無意中點擊了頁面中的一個連接，在苦苦的等待之后，換來的是無法訪問的結果，那么他們會對你的網頁大失所望，可能以后再也不會光顧你的網頁了。若不能及時更新，也最好在主頁上發布信息，告訴前來訪問的朋友，因有特殊情況需要離開一段時間，未能及時更新主頁，希望各位見諒，這樣就能給人一種對別人負責的感覺，同時能得到網友的信任。
4、注意視覺效果
設計Web頁面時，一定要用1024*768的分辨率來分別觀察。許多瀏覽器使用1024*768的分辨率，盡管在1280*1024高分辨率下一 些Web頁面看上去很具吸引力，但在1024*768的模式下可能會黯然失色。作一點小小的努力，設計一個在不同分辨率下都能正常顯示的網頁。
5、隨時注意網站升級
時刻注意網站的運行狀況。性能很好的主機隨著訪問人數的增加，可能會運行緩慢。但是，如果你不想失去訪問者的話，一定要仔細計劃好你的升級計劃。
6、網頁內容要易讀
注意不要使背景的顏色沖淡了文字的視覺效果，別用花里胡哨的色彩組合，讓人看起你的網頁來很費勁。一般來說，淺色背景下的深色文字為佳 。這個要點要求你最好別把文字的規格設得太小、也不能太大。文字太小，人家讀起來難受；文字太大，或者文字視覺效果變化頻繁，像是沖著人大喊大叫，看起來不舒服。另外，最好讓文本左對齊，而不是居中。按當代中文的閱讀習慣，文本大都居左的。當然，標題一般應該居中，因為這符合讀者的閱讀習慣。
7、善用表格來布局
不要把一個網站的內容象作報告似的一二三四地羅列出來，要注意多用表格把網站內容的層次性和空間性突出顯示出來，使人一眼就能看出你的網站重點突出，結構分明。
8、少用特殊字體
雖然你可以在你的HTML中使用特殊的字體，但是，你不可能預測你的訪問者在他們的計算機上將看到什么。在你的計算機里看起來相當好的頁面，在另一個不同的平臺上看起來可能非常糟糕。一些網站設計員喜歡使用來定義特性，這雖然允許你使用特殊的字體，但是仍需要一些變通的方法，以免你所選擇的字體在訪問者的計算機上不能顯示。級聯風格表CSS有助于解決這些問題，但是只有最新版的瀏覽器才支持CSS。
9、要為圖片附加注釋文字
給每個圖形加上文字的說明，在出現之前就可以看到相關內容，尤其是導航按鈕和大圖片更應如此。這樣一來，用戶在訪問你的站點時就有一種親切感覺，認為你心細，比較善解人意，時時刻刻為他人著想，相信你的好心會有好報的。
10、做個網站介紹
一個簡單明了的網站介紹，不僅能讓別人對你的網站能夠提供些什么有個了解，引發共鳴或是表達你的誠意，常常最能打動讀者，而且還能使訪問者能快速找到想要的東西。但是，許多設計者都沒有這樣做。有效的導航條和搜索工具使人們很容易找到有用的信息，這對訪問者很重要。告訴訪問者你所提供的正是他們想要的信息。
11、不宜多用閃爍文字
有的設計者想通過閃爍的文字來引起訪問者的注意是可以被人理解的，但一個頁面中最多不能有三處閃爍文字，太多了給用戶一種眼花繚亂的感覺，反而會影響用戶去訪問該網站的其他內容，正所謂“物極必反”也。
12、每個頁面都要有導航按鈕
應當避免強迫用戶使用工具欄中的向前和向后按鈕。你的設計應當使用戶能夠很快地找到他們所要的東西。絕大多數好的站點在每一頁同樣的位置上都有相同的導航條，使瀏覽者能夠從每一頁上訪問網站的任何部分。
13、避免長文本頁面
在一個站點上有許多只有文本的冗長頁面，是令人乏味的，人們為了閱讀這些長文本，不得不使用卷滾條，從而也浪費了用戶在網上沖浪的時間。如果你有大量的基于文本的文檔，應當以Adobe Acrobat格式的文件形式來放置，以便你的訪問者能離線閱讀，從而節省寶貴的時間。
14、 網頁風格要統一
你網頁上所有的圖像、文字，包括像背景顏色、區分線、字體、標題、注腳什么的，要統一風格，貫穿全站。這樣子讀者看起來舒服、順暢，會對你的網站留下一個“很專業”的印象。
15、動畫最多只用一個
大家都喜歡用GIF動畫來裝飾網頁，它的確很吸引人，但我們在選擇時，是否能確定必須用GIF動畫，如果答否，那么就選擇靜止的圖片，因為它的容量要小得多。
16、善用圖像
用戶在網上四處漫游，你必須設法吸引和維護他們對你的主頁的注意力。萬維網的其中一個最重大資源是其多媒體能力，所以我們無論如何要善加利用。主頁上最好有醒目的圖像、新穎的畫面、美觀的字款，使其別具特色，令人過目不忘。圖像的內容應有一定的實際作用，切忌虛飾浮夸。注意圖畫可以彌補文字之不足，但并不能夠完全取代文字。
17、網站導航要清晰
所有的超鏈接應清晰無誤地向讀者標識出來，所有導航性質的設置，像圖像按鈕，都要有清晰的標識，讓人看得明白，千萬別光顧視覺效果是熱鬧的，而讓人家不知東西南北。鏈接文本的顏色最好用約定俗成的：未訪問的，藍色；點擊過的，紫色或栗色。總之，文本鏈接一定要和頁面的其他文字有所區分，給讀者清楚的導向 。
18、不能忽視錯別字
一個好的網站對設計的每一個細節都不會放過，哪怕是一個微小的拼寫錯誤都是絕對不能出現的。確保你拼寫正確，并且格外注意平常容易誤寫的錯別字，要時時刻刻保持一種嚴謹的科學態度。
九、網站分類
企業網站主要為了外界了解企業自身、樹立良好企業形象、并適當提供一定服務的網站。根據行業特性的差別，以及企業的建站目的和主要目標群體的不同，大致可以把企業網站分為：
1、基本信息型
主要面向客戶、業界人士或者普通瀏覽者，以介紹企業的基本資料、幫助樹立企業形象為主；也可以適當提供行業內的新聞或者知識信息。這種類型網站通常也被形象的比喻為企業的"web catalog"。
2、電子商務型
主要面向供應商、客戶或者企業產品（服務）的消費群體，以提供某種直屬于企業業務范圍的服務或交易、或者為業務服務的服務或者交易為主；這樣的電子商務網站建設可以說是正處于電子商務化的一個中間階段，由于行業特色和企業投入的深度廣度的不同，其電子商務化程度可能處于從比較初級的服務支持、產品列表到比較高級的網上支付的其中某一階段。通常這種類型可以形象的稱為"網上xx企業"。例如，網上銀行、網上酒店等。
3、多媒體廣告型
主要面向客戶或者企業產品（服務）的消費群體，以宣傳企業的核心品牌形象或者主要產品（服務）為主。這種類型無論從目的上還是實際表現手法上相對于普通網站而言更像一個平面廣告或者電視廣告，因此用"多媒體廣告"來稱呼這種類型的網站更貼切一點。
十、網站格式
1、靜態網頁
靜態網頁多數為單一的超文本標記語言檔案。現今不少網站建設皆傾向把動態網頁靜態化,從而令搜尋引擎最佳化。
2、動態網頁
動態網頁的內容隨著用戶的輸入和互動而有所不同,或者隨著用戶、時間、數據修正等而改變。網頁上的內容也可以由用戶通過使用客戶端描述語言(JavaScript、JScript、Actionscript)來改變。
十一、網頁布局
1、“國”字型
也可以稱為“同”字型，是一些大型網站所喜歡的類型，即最上面是網站的標題以及橫幅廣告條，接下來就是網站的主要內容，左右分列一些兩小條內容，中間是主要部分，與左右一起羅列到底，最下面是網站的一些基本信息、聯系方式、版權聲明等。這種結構是我們在網上見到的差不多最多的一種結構類型。
2、拐角型
這種結構與上一種其實只是形式上的區別，其實是很相近的，上面是標題及廣告橫幅，接下來的左側是一窄列鏈接等，右列是很寬的正文，下面也是一些網站的輔助信息。在這種類型中，一種很常見的類型是最上面是標題及廣告，左側是導航鏈接。
3、標題正文型
這種類型即最上面是標題或類似的一些東西，下面是正文，比如一些文章頁面或注冊頁面等就是這種類。
4、封面型
這種類型基本上是出一些網站的首頁，大部分為一些精美的平面設計結合一些小的動畫，放上幾個簡單的鏈接或者僅是一個“進入”的鏈接甚至直接在首頁的圖片上做鏈接而沒有任何提示。這種類型大部分是企業網站和個人主頁，如果說處理的好，會給人帶來賞心悅目的感覺。
5、“T”結構布局
所謂“T”結構布局，就是指網頁上邊和左邊相結合，頁面頂部為橫條網站標志和廣告條，左下方為主菜單，右面顯示內容，這是網頁設計中用得最廣泛的一種布局方式。在實際設計中還可以改變“T”結構布局的形式，如左右兩欄式布局，一半是正文，另一半是形象的圖片、導航。或正文不等兩欄式布置，通過背景色區分，分別放置圖片和文字等。
這樣的布局有其固有的優點，因為人的注意力主要在右下角，所以企業想要發布給用戶的信，大都能被用戶以最大可能性獲取，而且很方便，其次是頁面結構清晰，主次分明、易于使用。缺點是規矩呆板，如果細節色彩上不注意，很容易讓人“看之無味”。
6、“口”型布局
這是一個形象的說法，指頁面上下各有一個廣告條，左邊是主菜單，右邊是友情鏈接等，中間是主要內容。
這種布局的優點是頁面充實、內容豐富、信息量大，是綜合性網站常用的版式，特別之處是頂部中央的一排小圖標起到了活躍氣氛的作用。缺點是頁面擁擠，不夠靈活。也有將四邊空出，只用中間的窗口型設計，例如網易壁紙站使用多幀形式，只有頁面中央部分可以滾動，界面類似游戲界面。使用此類版式的有多維游戲娛樂性網站。
7、“三”型布局
這種布局多用于國外網站，國內用得不多。其特點是頁面上橫向兩條色塊，將頁面整體分割為4個部分，色塊中大多放廣告條。
8、 對稱對比布局
顧名思義，它指采取左右或者上下對稱的布局，一半深色，一半淺色，一般用于設計型網站。其優點是視覺沖擊力強，缺點是將兩部分有機地結合比較困難。
9、POP布局
POP源自廣告術語，指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設計中心。常用于時尚類網站，優點顯而易見：漂亮吸引人，缺點是速度慢。
