網頁設計(網站技術):設計階段,設計目標,設計流程,用戶體驗,西方設計,發展趨勢,

網頁設計（web design，又稱為Web UI design，WUI design，WUI），是根據企業希望向瀏覽者傳遞的信息（包括產品、服務、理念、文化），進行網站功能策劃，然後進行的頁面設計美化工作。作為企業對外宣傳物料的其中一種，精美的網頁設計，對於提升企業的網際網路品牌形象至關重要。

網頁設計一般分為三種大類：功能型網頁設計（服務網站&B/S軟體用戶端）、形象型網頁設計（品牌形象站）、信息型網頁設計（門戶站）。設計網頁的目的不同，應選擇不同的網頁策劃與設計方案。

網頁設計的工作目標，是通過使用更合理的顏色、字型、圖片、樣式進行頁面設計美化，在功能限定的情況下，儘可能給予用戶完美的視覺體驗。高級的網頁設計甚至會考慮到通過聲光、互動等來實現更好的視聽感受。

網頁設計主要以Adobe產品為主，常見的工具包括FW、PS、FL、DW、CDR、AI等，其中DW是代碼工具，其他是圖形圖像和FL動畫工具。還有最近幾年Adobe新出的EdgeReflow、EdgeCode、Muse。

基本介紹

中文名：網頁設計
外文名：Web Design，WUI design
相關項目：網站策劃
常用工具：PS、FL、DW、FW
域名選擇：主要有.com、.cx、.cn、.net等
設計目標：頁面精美、邏輯清晰、體驗良好

設計階段,設計目標,設計流程,用戶體驗,西方設計,發展趨勢,實戰技巧,標題設計,設計要點,注意問題,設計師,網站分類,網站格式,網頁布局,布局錯誤,排版問題,提高效率,設計誤區,工作內容,最佳化問題,技能技術,互動設計,

設計階段

網站伴隨著網路的快速發展而快速興起，作為上網的主要依託，由於人們使用網路的頻繁而變得非常的重要。由於企業需要通過網站呈現產品、服務、理念、文化，或向大眾提供某種功能服務。因此網頁設計必須首先明確設計站點的目的和用戶的需求，從而做出切實可行的設計方案。

專業的網頁設計，需要經歷以下幾個階段：

需要根據消費者的需求、市場的狀況、企業自身的情況等進行綜合分析，從而建立起行銷模型。
以業務目標為中心進行功能策劃，製作出欄目結構關係圖。
以滿足用戶體驗設計為目標，使用axure rp或同類軟體進行頁面策劃，製作出互動用例。
以頁面精美化設計為目標，使用PS、AI等軟體，調整，使用更合理的顏色、字型、圖片、樣式進行頁面設計美化。
根據用戶反饋，進行頁面設計調整，以達到最優效果。

設計目標

業務邏輯清晰，能清楚的向瀏覽者傳遞信息，瀏覽者能方便的尋找到自己想要查看的東西
用戶體驗良好，用戶在視覺上，操作上都能感到很舒適
頁面設計精美，用戶能得到美好的視覺體驗，不會為一些糟糕的細節而感到不適
建站目標明晰，網頁很好的實現了企業建站的目標，向用戶傳遞了某種信息，或展示了產品、服務、理念、文化

設計流程

主題明確

在目標明確的基礎上，完成網站的構思創意即總體設計方案。對網站的整體風格和特色作出定位，規劃網站的組織結構。

Web站點應針對所服務對象（機構或人）的不同而具有不同的形式。有些站點只提供簡潔文本信息；有些則採用多媒體表現手法，提供華麗的圖像、閃爍的燈光、複雜的頁面布置，甚至可以下載聲音和錄像片段。好的Web站點把圖形表現手法和有效的組織與通信結合起來。

為了做到主題鮮明突出，要點明確，應該使配色和圖片圍繞預定的主題；調動一切手段充分表現網站點的個性和情趣，辦出網站的特點。

充分利用已有信息，如客戶手冊．公共關係文檔．技術手冊和資料庫等。

設計思路

簡潔實用：這是非常重要的，網路特殊環境下，儘量以最高效率的方式將用戶所要想得到的信息傳送給他就是最好的，所以要去掉所有的冗餘的東西。
使用方便：同第一個是相一致的，滿足使用者的要求，網頁做得越適合使用，就越顯示出其功能美
整體性好：一個網站強調的就是一個整體，只有圍繞一個統一的目標所做的設計才是成功的。
網站形象突出：一個符合美的標準的網頁是能夠使網站的形象得到最大限度的提升的。
頁面用色協調，布局符合形式美的要求：布局有條理，充分利用美的形式，使網頁富有可欣賞性，提高檔次。當然雅俗共賞是人人都追求的。
互動式強：發揮網路的優勢，是每個使用者都參與到其中來，這樣的設計才能算成功的設計。這樣的網頁才算真正的美的設計。

版式設計

網頁設計作為一種視覺語言，特別講究編排和布局，雖然主頁的設計不等同於平面設計，但它們有許多相近之處。

版式設計通過文字圖形的空間組合，表達出和諧與美。

多頁面站點頁面的編排設計要求把頁面之間的有機聯繫反映出來，特別要求處理好頁面之間和頁面內的秩序與內容的關係。為了達到最佳的視覺表現效果，反覆推敲整體布局的合理性，使瀏覽者有一個流暢的視覺體驗。

色彩作用

色彩是藝術表現的要素之一。在網頁設計中，設計師根據和諧、均衡和重點突出的原則，將不同的色彩進行組合．搭配來構成美麗的頁面。根據色彩對人們心理的影響，合理地加以運用。如果企業有CIS（企業形象識別系統），應按照其中的VI進行色彩運用。

形式內容

為了將豐富的意義和多樣的形式組織成統一的頁面結構，形式語言必須符合頁面的內容，體現內容的豐富含義。

靈活運用對比與調和、對稱與平衡、節奏與韻律以及留白等手段，通過空間、文字、圖形之間的相互關係建立整體的均衡狀態，產生和諧的美感。

三維空間的構成

網路上的三維空間是一個假想空間，這種空間關係需藉助動靜變化．圖像的比例關係等空間因素表現出來。在頁面中，圖片、文字位置前後疊壓，或頁面位置變化所產生的視覺效果都各不相同。通過圖片、文字前後疊壓所構成的空間層次不太適合網頁設計，根據現有瀏覽器的特點，網頁設計適合比較規範、簡明的頁面，儘管這種疊壓排列能產生強節奏的空間層次，視覺效果強烈。

網頁上常見的是頁面上、下、左、右、中位置所產生的空間關係，以及疏密的位置關係所產生的空間層次，這兩種位置關係使產生的空間層次富有彈性，同時也讓人產生輕鬆或緊迫的心理感受。

虛擬現實

人們已不滿足於HTML（標準通用標記語言下的一個套用）編制的二維Web頁面，三維世界的誘惑開始吸引更多的人，虛擬現實要在Web網上展示其迷人的風采，於是VRML語言出現了。VRML是一種面向對象的語言，它類似Web超級連結所使用的HTML語言，也是一種基於文本的語言，並可以運行在多種平台之上，只不過能夠更多地為虛擬現實環境服務。

多媒體

網路資源的優勢之一是多媒體功能。要吸引瀏覽者注意力，網頁的內容可以用三維動畫、FLASH等來表現。但要由於網路寬頻的限制，在使用多媒體的形式表現網頁的內容時不得不考慮客戶端的傳輸速度。

便於使用

如果人們看不懂或很難看懂您的網站，那么，他如何了解你的企業信息和服務項目呢？使用一些醒目的標題或文字來突出您的產品與服務。並且即使您擁有最棒的產品，如果客戶從您的網站上看不清楚您在介紹什麼或不清楚如何受益的話，他們是不會喜歡您的網站的，這對於網頁設計而言是失敗的。

導向清晰

網頁設計中導航使用超文本連結或圖片連結，使人們能夠在您的網站上自由前進或後退，而不必讓他們使用瀏覽器上的前進或後退。我們在所有的圖片上使用“ALT”標識符註明圖片名稱或解釋，以便那些不願意自動載入圖片的觀眾能夠了解圖片的含義。

快速下載時間

很多的瀏覽者不會進入需要等待5分鐘下載時間才能進入的網站，在網際網路上30秒的等待時間與我們平常10分鐘等待時間的感覺相同。因此，建議在網頁設計中儘量避免使用過多的圖片及體積過大的圖片。主要頁面的容量應確保普通瀏覽者頁面等待時間不超過10秒。

非圖形內容

在必要時適當使用動態“Gif”圖片，為減少動畫容量，套用巧妙設計的Java動畫可以用很小的容量使圖形或文字產生動態的效果。但是，由於在網際網路瀏覽的大多是一些尋找信息的人們，仍然建議您要確定您的網站將為他們提供的是有價值的內容，而不是過度的裝飾。

反饋與溝通

讓客戶明確您所能提供的產品或服務並讓他們非常方便地訂購是您獲得成功的重要因素。如果客戶在您的網站上產生了購買產品或服務的欲望，您是否能夠讓他們儘快實現嗎？是線上還是離線？

因此，如果是產品或服務介紹網站，應該有留言、電話、線上諮詢等功能或信息呈現。

在企業的Web站點上，要認真回復用戶的電子郵件和傳統的聯繫方式如信件．電話垂詢和傳真，做到有問必答。最好將用戶的用意進行分類，如售前一般了解．售後服務等，由相關部門處理，使網站訪問者感受到企業的真實存在並由此產生信任感。

測試改進

測試實際上是模擬用戶詢問網站的過程，用以發現問題並改進網頁設計。應該與用戶共同安排網站測試。

內容更新

企業Web站點建立後，要不斷更新網頁內容。站點信息的不斷更新，讓瀏覽者了解企業的發展動態和網上職務等，同時也會幫助企業建立良好的形象。

注意不要許諾你實現不了的東西，在你真正有能力處理回復之前，不要懇求用戶輸入信息或羅列一大堆自己不能及時答覆的電話號碼。如果要求訪問者自願提供其個人信息，應公布並認真履行個人隱私保承諾。

用戶體驗

1. 輸入控制項的自動聚焦和可用鍵盤切換輸入焦點

使用JavaScript實現頁面載入完成後立即自動聚焦(focus)到第一個輸入控制項。可用TAB鍵（IE預設實現）或方向鍵切換聚焦到下一個輸入控制項。

2. 可用Enter（或Ctrl+Enter）鍵提交，確保和點擊提交按鈕的效果是相同的

不要在提交按鈕上加入onClick=”…”這樣的JavaScript代碼。

3．滑鼠動作提示和回應

對用戶的滑鼠定位操作，當移動到可回響的位置上時，應給予視覺或聽覺的提示。

4．儘可能早的在客戶端完成輸入數據合法性驗證

輸入數據的合法性檢驗應該在客戶端使用JavaScript進行驗證。除非驗證只能在伺服器端完成，否則驗證工作應在最早能完成的情況下進行。

5．根據套用場景決定在表單頁面和提交後返回頁面間是否使用中間過渡頁面

根據套用場景，決定是否顯示接收表單頁面（表單頁面和提交後返回頁面間的中間過渡頁面），以及使用何種方式顯示接收表單頁面。

6．防止表單重複提交處理

對提交按鈕點擊後做變灰處理避免在網路回響較慢情況下用戶重複提交同一個表單。使用頁面過期失效避免用戶後退瀏覽重複提交表單。

7．頁面連結是打開新視窗、使用原視窗還是彈出視窗的原則

一般而言，首頁上連結可以使用target=”_blank”屬性打開新視窗，而其他頁面上的連結都應使用原視窗或彈出視窗。如果連結頁面內容相對原頁面來說不重要，是附屬性質的，可以使用彈出視窗方式。

8．儘可能少的排列可選項，儘可能少的安排操作步驟

根據用戶操作習慣安排儘可能少的操作選單選項，同時要保證儘可能少的操作步驟。

9．操作邏輯無漏洞，保證數據是操作安全的

多個頁面間的操作和同個頁面上的多個操作間的邏輯關係在設計上是安全和嚴謹的。保證不會出現不被允許的用戶操作組合，至少不會因為用戶的不適當的操作導致出錯。

西方設計

網頁設計的基本概念
在這個頁面，你會發現基本的網頁設計概念，以及如何他們可以用來提高您的項目的信息。
設計到Web相關的也有幾個原則。其中有接近，對齊，重複和對比。這四項原則的影響，如何被認為網頁。
接近
接近是指在Web頁面上的元素的元素彼此之間的關係之間的距離。這些元素包括文本，導航，標題，等等。
一般來說，併攏的元素，似乎有強大的關係網比元素相距較遠。
在合適的的插圖顯示的差異，使得接近。被放置的點遠的部分所造成的弱的布局間距寬。

發展趨勢

在網頁設計中，總是有傾向的特定技術來觀察，或跟蹤的網頁設計師加強的趨勢。這裡有專有和開源和免費的技術專用的支持者。然而，近些年來，又增加自由和開放源碼技術，包括由W3C和WHATWG進行監控和批准，監督和實施增加。

趨勢可以發現，不僅在看在時尚領域的使用的技術，如網站和匹配的標誌是清晰的喜好確定。著名的藝術字Web 2.0至今的重要作用的幫助。

網頁設計是一個不斷更新換代、推陳出新的行業，它要求設計師們必須隨時把握最新的設計趨勢，從而確保自己不被這個行業所淘汰。2013年，網頁設計主要流行回響式設計、扁平化設計、無限滾動、單頁、固定標頭、大膽的顏色、更少的按鈕和更大的網頁寬度。

實戰技巧

網頁技術更新很快，一個網站的界面設計壽命僅僅2-3年而已。不管是垃圾還是精品，都沒有所謂的經典，經典只存在於是哪個首次成功創新性的套用。一個閉門造車者做出的東西，是遠遠趕不上綜合借鑑者的。網頁設計不同於其他藝術，在模仿加創新的網頁設計領域當中，即便是完全自己設計的，也是沿用了人們已經認同的大部分用戶習慣，而且這種沿襲的痕跡是非常明顯的！還有哪個設計者敢腆著臉說，這都是我自己的原創設計？對於業界來說，經典只是個理念和象徵！

設計環境

不可否認，國區域網路頁設計環境還停留在初級的認知階段，也就是說，絕大多數人不知道網路的真正的可用之處，你去做一個業務的時候，不得不去做大量的說服教育工作。以乙方的身份去說服甲方，以專業角度去教育非專業人士，結果是可想而知的。也正是這種全體社會普遍的低認知水平，導致了大量網路垃圾的產生。

企業客戶所在行業往往有其特定的設計需求，特別是對於企業網站建設當中的配色，除了應根據企業的VI標準色，以及客戶自身的喜好進行配色分析外，同時不能忽略整個行業對於顏色上的‘慣例’。那么，企業網站在設計和製作當中，到底有哪一些配色規則需要設計師遵循呢？

1、行業避忌的顏色

某些行業的企業客戶，對於網站整體顏色的要求涉及到具體的顏色避忌，例如金融、投資類的企業網站，應儘量避免綠色，或相近顏色的使用。這是因為，綠色在金融投資行業當中代表的是低迷，不景氣，下滑等負面的元素，因此即便企業宣揚的是環保、低碳等企業文化，也是不能輕易予以使用。

2、特徵選色

企業客戶在不同的發展階段，對於網站設計的配色需求並不一樣。在企業初創階段，企業建站的目的是打造品牌網路形象，開拓客戶資源，這時候的企業客戶更多的是關注自身的個性化，如何才能凸顯企業的特質，如何才能在行業當中顯示其獨有的特性，這是初建網站的企業客戶所重點關注的內容；在企業形成規模，進行品牌提升階段，企業建設網站或進行改版的目的是重塑品牌網路形象，打造更為專業、沉穩和可持續發展的品牌理念和文化，這時候的企業客戶更多的是考慮如何將企業的品牌內涵與行業相融合，在配色的選擇上更傾向於穩重、包容，能夠適應各種場合需要的配色。

好的網頁設計師

1、內容和功能決定表現形式和界面設計

常常拿到的任務是一張小紙條，上面兩句話，叫你去做一個網站設計。有的人看看紙條就去設計頁面了，憑兩句話，你就可以為客戶做一個頁面設計，以我7、8年的設計經驗，我都不敢去做，你真是我的偶像啊！

做網頁設計，你需要了解客戶的東西很多：

（1）建設網站的目的；

（2）欄目規劃及每個欄目的表現形式和功能要求；

（3）網站主體色調、客戶性別喜好、聯繫方式、舊版網址、偏好網址；

（4）根據行業和客戶要求，哪些要著重表現；

（5）是否分期建設、考慮後期的兼容性；

（6）客戶是否有強烈建設網站的欲望；

（7）你是否能在精神意識上控制住客戶；

（8）面對你未接觸的技術知識，你有底嗎；

（9）網站類型。

等等

當你把這些內容都了解清楚的時候，在你的大腦中就已經對這個網站有了全面而形象的定位，這時才是放手去做界面設計的時候。

2、界面弱化

一個好的界面設計它的界面是弱化的，它突出的是功能，著重體現的是網站業提供給使用者主要是什麼。這就涉及到瀏覽順序、功能分區等等。

要讓訪客在0.5秒內就能把握網站的行業性質，1秒內就知道該從哪個地方開始使用這個網站，能點一次的，絕不點第二次。當然上面說的是大多數功能性網站，對於宣傳展示性網站，諸如加特效的或Flash網站，可能就不得不花哨一些，但不能太過分。網站不是卡通片，在效率越來越高，社會心理越來越浮躁的中國，人們的耐心越來越小，心理承受能力越來越低。效果可以體現意境，點到為止。

3、模組化和可修改性強

模組化不僅可以提高重用性，也能統一網站風格，還可以降低程式開發的強度。這裡就涉及一些尺寸、模數、寬容度、命名規範等等知識了，不再冗述。

無論是架構還是模組或圖片，都要考慮可修改性強。舉個簡單的例子，圖示、按鈕等，很多人喜歡製作圖片，N個按鈕就是N張圖片。如果只做3-5類按鈕的背景圖片，然後用在網頁代碼里打上文字，那么修改起來就簡單了，讓程式設計師自己改字就可以了。然而網頁顯示的字型是帶有鋸齒的，一般既能清晰又保證美觀的字型字號有幾類：

4、分析能力遠比創意來的重要

設計界動輒就大談什麼“創意”，我要說的是，還沒有搞清目的意義內容，還沒在技術製作上臻於完善的基礎上，用創意和特效來迷惑客戶和訪客是可恥的。一個網頁設計者的分析能力遠比創意來的重要。

結尾，經驗

1、網頁配色基本概念

（1）白紙黑字是永遠的主題，誰都說不出不好來。

（2）網頁最常用流行色

·藍色

·綠色

·橙色

·暗紅

（3）顏色的忌諱

·忌髒

·忌純

·忌跳

·忌花

·忌粉

·藍色忌純，綠色忌黃，紅色忌艷。

（4）幾種固定搭配

·藍白橙

·綠白藍

·橙白紅

·暗紅黑

2、網頁設計理念

（1）內容決定形式

先把內容充實上，再分區塊，再定色調，再處理細節。

（2）先整體，後局部，最後回歸到整體。

全局考慮，把能填上的都填上，占位置。然後定基調，分模組設計。最後調整不滿意的幾個局部細節。

（3）功能決定設計方向

看網站的用途，決定設計思路.商業性的就要突出贏利目的；政府型的就要突出形象和權威性的文章；教育性的，就要突出師資和課程。

總結∶網站設計應簡潔，明了。從用戶體驗度出發設計。

設計收費制度

每一種不同的產品，設計的方式也就不一樣，每一個代運營團隊必須要有一個實力較強的設計師，要對產品的背景圖片進行設計、要給產品拍照、做後期的圖像處理。每一種產品的不同，難度和方式就會不同。例如我們的做的產品是珠寶，那么設計師就要考慮怎么拍照才能拍出最好的效果，才能體現出珠寶的高貴，並且以什麼形式展示為最好，這些都是設計師需要考慮的難題。所以產品的難度是決定收費的一個項目。

標題設計

在設計網頁標題時，應注意同時兼顧對用戶的注意力，以及對搜尋引擎檢索的需要。這一原則在實際操作中可通過三個方面來體現，這三個方面也可以被認為是網頁標題設計的一般規律：

一、網頁標題不宜過短或者過長

一般來說6-10個漢字比較理想，最好不要超過30個漢字。網頁標題字數過少可能包含不了有效關鍵字，字數過多不僅搜尋引擎無法正確識別標題中的核心關鍵字，而且也讓用戶難以對網頁標題（尤其是首頁標題，代表了網站名稱）形成深刻印象，也不便於其他網站連結。

二、網頁標題應概括網頁的核心內容

當用戶通過搜尋引擎檢索時，在檢索結果頁面中的內容一般是網頁標題（加連結）和網頁摘要信息，要引起用戶的關注，網頁標題發揮了很大的作用，如果網頁標題和頁面摘要信息有較大的相關性，摘要信息對網頁標題將發揮進一步的補充作用，從而引起用戶對該網頁信息點擊行為的發生（也就意味著搜尋引擎推廣發揮了作用）。另外，當網頁標題被其他網站或者本網站其他欄目/網頁連結時，一個概括了網頁核心內容的標題有助於用戶判斷是否點擊該網頁標題連結。

三、網頁標題中應含有豐富的關鍵字

考慮到搜尋引擎行銷的特點，搜尋引擎對網頁標題中所包含的關鍵字具有較高的權重，儘量讓網頁標題中含有用戶檢索所使用的關鍵字。以網站首頁設計為例，一般來說首頁標題就是網站的名稱或者公司名稱，但是考慮到有些名稱中可能無法包含公司/網站的核心業務，也就是說沒有核心關鍵字，這時通常採用“核心關鍵字+公司名/品排名”的方式來作為網站首頁標題。開頭所列舉的某網路行銷服務商網站首頁標題實例，其實也是採用這種方式來設計網頁標題，只不過由於羅列了太多的“核心關鍵字”，反而沒有了核心。

做美工看起來並不是一件容易的事情。首先，要對整個站點和企業有個大致的了解。例如：某些企業喜歡藍色的主調，你不可能去做個紅色的主調，這樣完全違背客戶的主要意願，如果百度的標誌改成五顏六色的，相信大家也不會認可的。站長的職責是規劃網站結構。同樣也需要有一定的審美觀。下面介紹了幾款常用的繪圖工具和基本知識。

設計要點

網頁設計的兩大要點是：整體風格和色彩搭配。

確定網站整體風格

在這裡，我提供給大家一些參考經驗：

1．將你的標誌logo，儘可能的放在每個頁面上最突出的位置。

2．突出你的標準色彩。

3．總結一句能反映貴站精髓的宣傳標語！

4．相同類型的圖像採用相同效果，比如說標題字都採用陰影效果，那么在網站中出現的所有標題字的陰影效果的設定應該是完全一致的！

網站的整體風格及其創意設計是最難以學習的，難就難在沒有一個固定的模式可以參照和模仿。給你一個主題，任何兩人都不可能設計出完全一樣的網站。

R、G、B就是Red、Green、Blue（紅，綠，藍）三種顏色，RGB模式就是由這三種顏色為基色進行疊加而模擬出大自然色彩的色彩組合模式。我們日常用的彩色電腦顯示器、彩色電視機等的色彩都使用這種模式。

1、矢量圖

矢量圖又叫做向量圖，是用一系列計算機指令來描述和記錄一幅圖，一幅圖可以解為一系列由點、線、面等到組成的子圖，它所記錄的是對象的幾何形狀、線條粗細和色彩等。生成的矢量圖檔案存儲量很小，特別適用於文字設計、圖案設計、版式設計、標誌設計、計算機輔助設計（CAD）、工藝美術設計、插圖等。矢量圖只能表示有規律的線條組成的圖形，如工程圖、三維造型或藝術字等；常見的矢量圖處理軟體有CoreIDRAW、AutoCAD、Illustrator和FreeHand等。

2、點陣圖

點陣圖又叫點陣圖或像素圖，計算機螢幕上的圖你是由螢幕上的發光點（即像素）構成的，每個點用二進制數據來描述其顏色與亮度等信息，這些點是離散的，類似於點陣。點陣圖在放大到一定限度時會發現它是由一個個小方格組成的，這些小方格被稱為像素點，一個像素是圖像中最小的圖像元素。也就是我們俗稱的馬賽克。

bmp：是未經過壓縮的用點陣來表示的真彩圖片,占用磁碟空間較大

gif：是經過壓縮的,只能表示256種顏色,占用磁碟空間小,常用來演示色彩單一的成塊的卡通圖案,GIF還有一種可以表示連續的動畫。

png：是fireworks的圖片格式

jpg：也稱為jpeg,是有損壓縮格式但是它表示的顏色比較豐富,一般用來顯示真彩的照片或圖案。

作為設計者和客戶（這裡指各站長），如果事先沒有明文協定的話設計者有權不提供源檔案。

VI是Visual Identity的縮寫，中文譯為“企業視覺識別”。VI是CI計畫的靜態識別符號，是企業理念視覺化傳達的載體，因此它項目最多，效果最為直接。VI作為視覺識別，它是外在表現，固然需要具有美感，但VI必須是MI的體現，直接反映企業的理念。因此VI設計包含這樣一些原則：即充分傳達企業理念、人性原則、民族性原則、簡潔抽象及動態原則、員工參與原則、法律原則、藝術性原則和個性原則。

CI是Corporate Identity的縮寫，中文譯為“企業形象”。CI計畫，是指企業有目的、有計畫、戰略性地創造出所希望的自身形象，由此提高企業的社會知名度，最終得到自己最適合的經營環境。

而logo只是網站或企業一個標誌。

網頁色彩搭配

1．用一種色彩。這裡是指先選定一種色彩，然後調整透明度或者飽和度，這樣的頁面看起來色彩統一，有層次感。

2．用兩種色彩。先選定一種色彩，然後選擇它的對比色。

3．用一個色系。簡單的說就是用一個感覺的色彩，例如淡藍，淡黃，淡綠；或者土黃，土灰，土藍。

在網頁配色中，還要切記一些誤區：

1．不要將所有顏色都用到，儘量控制在三至五種色彩以內。

2．背景和前文的對比儘量要大(絕對不要用花紋繁複的圖案作背景)，以便突出主要文字內容。

網頁設計工具

圖像處理設計：

adobe PhotoShop（外語簡稱：PS、其程式圖示便是它的外語簡稱）是一個由Adobe Systems開發和發行的圖像處理軟體。 Adobe Photoshop有兩個發行版本：標準版Adobe Photoshop和擴展版Adobe Photoshop Extended，擴展版除包含標準版所有功能之外，還增加了3D處理功能、動畫圖形編輯功能和高級圖像分析功能。 Adobe只支持Windows作業系統和Mac OS作業系統版本的Photoshop ，但Linux作業系統用戶可以通過使用Wine來運行Photoshop CS6。
Fireworks，跟Photoshop一樣都是圖像處理軟體，但Fireworks偏向於對網頁的處理。
StylePix（單位：Hornil）跟PhotoShop一樣都是圖象處理軟體，可以處理光柵及矢量圖形。

動畫設計：

Adobe Flash，前稱Macromedia Flash，外語簡稱Flash，前身FutureSplash，既指Adobe Flash Professional多媒體創作程式，也指Adobe Flash Player。

網頁代碼編輯器：

Adobe Dreamweave（前稱Macromedia Dreamweaver）用於編輯HTML、ASP、JSP、PHP、CSS、XML、JS的頁面製作工具；是Adobe公司的著名網站開發工具。它使用所見即所得的接口，亦有HTML編輯的功能。有支持Mac和Windows兩個系統的版本。
Amaya（單位：全球資訊網聯盟）用於編輯HTML、CSS、數學標記語言、可縮放矢量圖形的工具。

注意問題

當你在INTERNET這個信息的海洋中盡情遨遊時，會發現許許多多內容豐富、創意新穎、設計獨特的個人網頁，不知道你見到這樣漂亮可人的網頁是否有點心動。一旦你具備了上網的條件，又萌發了製作主頁的念頭，那么就應該注意網頁設計時應考慮哪些方面的問題，包括網站功能和以及訪問者需要什麼。你的整個設計都應該圍繞這些方面來進行。下面筆者就自己在實踐操作中的使用體會來談談網頁設計時應該考慮哪些問題，希望能給初建網站的用戶帶來一定的作用。

1、頁面內容要新穎

網頁內容的選擇要不落俗套，要重點突出一個“新”字，這個原則要求我們在設計網站內容時不能照抄別人的內容，要結合自身的實際情況創作出一個獨一無二的網站。放眼望去，網上的許多個人主頁簡直就是"雜貨店"，內容包羅萬象,題材千篇一律，人人都是"軟體下載",個個都有"網路導航"，從頭到尾找不出一絲“鮮”意。所以，我們在設計網頁時，要把功夫下在選材上。選材要儘量做到“少”而“精”,又必須突出“新”，如能堅持天天更新的話,我相信這樣的網頁一定會受到大家的歡迎。

2、網頁命名要簡潔

由於一個網站不可能就是由一個網頁組成，它有許多子頁面，為了能使這些頁面有效地被連線起來，用戶最後能給這些頁面起一些有代表性的而且簡潔易記的網頁名稱。這樣既會有助於你以後方便管理網頁，在向搜尋引擎提交你的網頁時更容易被別人索引到。在給網頁命名時，最好使用自己常用的或符合頁面內容的小寫英文字母，這直接關係到頁面上的連線。

3、要及時更新網頁

網頁製作好後，不能說萬事大吉了，其實事後的工作量更大。因為網頁製作是一時的，而維護更新的工作是每天都要做的。要及時把網頁上已經作廢的連線應該立即刪除掉，比如用戶無意中點擊了頁面中的一個連線，在苦苦的等待之後，換來的是無法訪問的結果，那么他們會對你的網頁大失所望，可能以後再也不會光顧你的網頁了。若不能及時更新，也最好在主頁上發布信息，告訴前來訪問的朋友，因有特殊情況需要離開一段時間，未能及時更新主頁，希望各位見諒，這樣就能給人一種對別人負責的感覺，同時能得到網友的信任。

4、注意視覺效果

設計Web頁面時，一定要用1024*768的解析度來分別觀察。許多瀏覽器使用1024*768的解析度，儘管在1280*1024高解析度下一些Web頁面看上去很具吸引力，但在1024*768的模式下可能會黯然失色。作一點小小的努力，設計一個在不同解析度下都能正常顯示的網頁

5、隨時注意網站升級

時刻注意網站的運行狀況。性能很好的主機隨著訪問人數的增加，可能會運行緩慢。但是，如果你不想失去訪問者的話，一定要仔細計畫好你的升級計畫。

6、網頁內容要易讀

網站設計最重要的訣竅，恐怕就是你的網頁要易讀。這就意味著，你必須花點心思來規劃文字與背景顏色的搭配方案。注意不要使背景的顏色沖淡了文字的視覺效果，別用花里胡哨的色彩組合，讓人看起你的網頁來很費勁。一般來說，淺色背景下的深色文字為佳。這個要點要求你最好別把文字的規格設得太小、也不能太大。文字太小，人家讀起來難受；文字太大，或者文字視覺效果變化頻繁，像是衝著人大喊大叫，看起來不舒服。另外，最好讓文本左對齊，而不是居中。按當代中文的閱讀習慣，文本大都居左的。當然，標題一般應該居中，因為這符合讀者的閱讀習慣。

7、善用表格來布局

不要把一個網站的內容象作報告似的一二三四地羅列出來，要注意多用表格把網站內容的層次性和空間性突出顯示出來，使人一眼就能看出你的網站重點突出，結構分明。

8、少用特殊字型

雖然你可以在你的HTML中使用特殊的字型，但是，你不可能預測你的訪問者在他們的計算機上將看到什麼。在你的計算機里看起來相當好的頁面，在另一個不同的平台上看起來可能非常糟糕。一些網站設計員喜歡使用來定義特性，這雖然允許你使用特殊的字型，但是仍需要一些變通的方法，以免你所選擇的字型在訪問者的計算機上不能顯示。級聯風格表CSS有助於解決這些問題，但是只有最新版的瀏覽器才支持CSS。

9、多學習和使用超文本標記語言（標準通用標記語言下的一個套用）

為了成功地設計網站，你必須理解HTML（標準通用標記語言下的一個套用）是如何工作的。大多數的網站設計者建議網路新手應從有關HTML的書中去尋找答案，用Notepad製作網頁。因為用HTML設計網站，可以控制設計的整個過程。但是，如果你僅僅是網站設計的新手，你應該尋找一個允許修改HTML的軟體包。HomeSite4是一個很好的Web設計工具。在設計過程中，HomeSite4能幫助你學習HTML。它還允許你切換到所見即所得的模式，以便你在把網站傳送到Web之前，預覽你的網站。

10、儘量少用Java程式

不要大幅度地使用的Java程式，能夠用javascript替代效果的則儘量不要使用java。因為來講java的運行速度實在慢的讓人無法忍受，往往使瀏覽者沒有耐心等頁面全部顯示出來，這樣你的精心設計便毫無效果啦。

11、少放網站地圖

許多設計者把他們的網站地圖放在網站上，這種做法，卻是弊大於利。絕大部分的訪問者上網是尋找一些特別的信息，他們對於你的網站是如何工作的，並沒有興趣。如果你覺得你的網站需要地圖，那很可能是需要改進你的導航和工具條。

12、要為圖片附加注釋文字

給每個圖形加上文字的說明，在出現之前就可以看到相關內容，尤其是導航按鈕和大圖片更應如此。這樣一來，用戶在訪問你的站點時就有一種親切感覺，認為你心細，比較善解人意，時時刻刻為他人著想，相信你的好心會有好報的。

13、做個網站介紹

一個簡單明了的網站介紹，不僅能讓別人對你的網站能夠提供些什麼有個了解，引發共鳴或是表達你的誠意，常常最能打動讀者，而且還能使訪問者能快速找到想要的東西。但是，許多設計者都沒有這樣做。有效的導航條和搜尋工具使人們很容易找到有用的信息，這對訪問者很重要。告訴訪問者你所提供的正是他們想要的信息。

14、考慮瀏覽器的兼容性

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

15、不宜多用閃爍文字

有的設計者想通過閃爍的文字來引起訪問者的注意是可以被人理解的，但一個頁面中最多不能有三處閃爍文字，太多了給用戶一種眼花繚亂的感覺，反而會影響用戶去訪問該網站的其他內容，正所謂“物極必反”也。

16、每個頁面都要有導航按鈕

應當避免強迫用戶使用工具列中的向前和向後按鈕。你的設計應當使用戶能夠很快地找到他們所要的東西。絕大多數好的站點在每一頁同樣的位置上都有相同的導航條，使瀏覽者能夠從每一頁上訪問網站的任何部分。

17、避免長文本頁面

在一個站點上有許多只有文本的冗長頁面，是令人乏味的，人們為了閱讀這些長文本，不得不使用卷滾條，從而也浪費了用戶在網上衝浪的時間。如果你有大量的基於文本的文檔，應當以Adobe Acrobat格式的檔案形式來放置，以便你的訪問者能離線閱讀，從而節省寶貴的時間。

18、網頁風格要統一

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

19、動畫最多只用一個

大家都喜歡用GIF動畫來裝飾網頁，它的確很吸引人，但我們在選擇時，是否能確定必須用GIF動畫，如果答否，那么就選擇靜止的圖片，因為它的容量要小得多。同樣的尺寸的LOGO，GIF動畫的容量有5K，而靜止LOGO的只有3K。雖然只有2K之差，但多起來，就會影響下載的速度，所以，如果有些不是必須的，就選擇最小的。

20、善用圖像

用戶在網上四處漫遊，你必須設法吸引和維護他們對你的主頁的注意力。全球資訊網的其中一個最重大資源是其多媒體能力，所以我們無論如何要善加利用。主頁上最好有醒目的圖像、新穎的畫面、美觀的字款，使其別具特色，令人過目不忘。圖像的內容應有一定的實際作用，切忌虛飾浮誇。注意圖畫可以彌補文字之不足，但並不能夠完全取代文字。很多用戶把瀏覽軟體設定為略去圖像，以求節省時間他們只看文字。因此，製作主頁時，必須注意將圖像所連線的重要信息或聯接其他頁面的指示用文字重複表達幾次，同時要注意避免使用過大的圖像，如果不得不放置大的圖像在網站上，就最好使用Thumbnails軟體，把圖像的縮小版本的預覽效果顯示出來，這樣用戶就不必浪費金錢和時間去下載他們根本不想看的大圖像。

21、網站導航要清晰

所有的超連結應清晰無誤地向讀者標識出來，所有導航性質的設定，像圖像按鈕，都要有清晰的標識，讓人看得明白，千萬別光顧視覺效果是熱鬧的，而讓人家不知東西南北。連結文本的顏色最好用約定俗成的：未訪問的，藍色；點擊過的，紫色或栗色。總之，文本連結一定要和頁面的其他文字有所區分，給讀者清楚的導向。

22、最好不用記數器

由於計數器也是由程式設計成的，顯示計數器的過程其實就是在執行一個程式的過程，它需要占用用戶寶貴的上網時間，況且大多數瀏覽者認為計數器毫無意義，它們很容易被做假，瀏覽者也不想看廣告。因此筆者建議不要輕易考慮在你的網站上放置一個醒目的點擊記數器。你設計網站是為了給訪問者提供服務，而不是推銷你自己認為重要的東西。如果你顯示你的網站是多么受歡迎，你最好提供一個連結，顯示訪問日誌。

23、不能忽視錯別字

一個好的網站對設計的每一個細節都不會放過，哪怕是一個微小的拼寫錯誤都是絕對不能出現的。但是遺憾的是，許多設計者都缺少這種技能。確保你拼寫正確，並且格外注意平常容易誤寫的錯別字，要時時刻刻保持一種嚴謹的科學態度。

24、不要用框架

與記數器一樣，框架在網頁上越來越流行。在大多數網站上，在螢幕的左邊有一個框架。但是設計者立刻就發現，在使用框架時產生了許多的問題。使用框架時如果沒有17英寸的顯示屏幾乎不可能顯示整個網站。框架也使得網站內個人主頁不能夠成為書籤。也許更重要的是，搜尋引擎常常被框架混淆，從而不能列出你的網站。

25、使用著名的外掛程式

如果網站上有聲音或視頻，要保證使用者通過使用某個知名的外掛程式，能夠聽到或看到。如果訪問者沒有所要求的外掛程式，將不得不到其它站點去下載，這樣訪問者有可能就不會返回了。許多站點使用QuickTime、RealPlay和 Shockwave外掛程式。因為，許多訪問者並不願意浪費很多時間和金錢去下載可能僅使用一次的外掛程式。

26、使網站具有互動功能

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

設計師

第一部分（美術部分）

結構素描、光影素描、速寫、設計素描、戶外寫生

色彩原理、色彩配色、設計色彩、色調小稿訓練、色彩長期作業

第二部分（靜態網頁）

Dreamweaver：網頁布局、製作；Html&Css簡介；網站管理與維護、上傳與下載；案例分析

Fireworks：美工設計、網頁配色；CI、LOGO、Banner的製作；常見網頁動畫製作、網頁布局

Flash或者Animate(代替Flash的一款軟體)：經典網頁動畫、廣告、片頭、賀卡設計與分析；MTV製作、互動式網站簡介

Photoshop：Photoshop操作基礎、圖像最佳化處理、經典實例分析與製作、gif動畫、廣告gif圖片

Illustrator：廣告招牌製作、燈箱廣告、服裝廣告設計、企業徽標設計、名片設計

第三部分（動態網頁）

HTML（標準通用標記語言下的一個套用）、CSS樣式、IIS、C#語言、asp動態、Asp. net動態、PHP動態、CGI動態、jsp動態、SQLServer資料庫、Access資料庫、MySQL資料庫、JavaScript、Flash8.0高級編程、網站籌劃、網站推廣、電子購物車、ChatRoom、BBS製作。註：此部分基本上是程式設計師工作，並不是網頁設計師所要學會的。

第四部分（網頁美工）

三大構成：平面構成、色彩構成、立體構成

Photoshop美工及網頁配色、排版設計、網站框架美工設計、網頁logo網頁設計、banner設計；

Illustrator網頁設計、網頁字型設計、網頁規劃設計

網站分類

企業網站主要為了外界了解企業自身、樹立良好企業形象、並適當提供一定服務的網站。根據行業特性的差別，以及企業的建站目的和主要目標群體的不同，大致可以把企業網站分為：

基本信息型

主要面向客戶、業界人士或者普通瀏覽者，以介紹企業的基本資料、幫助樹立企業形象為主；也可以適當提供行業內的新聞或者知識信息。這種類型網站通常也被形象的比喻為企業的"web catalog"。

電子商務型

主要面向供應商、客戶或者企業產品（服務）的消費群體，以提供某種直屬於企業業務範圍的服務或交易、或者為業務服務的服務或者交易為主；這樣的電子商務網站建設可以說是正處於電子商務化的一個中間階段，由於行業特色和企業投入的深度廣度的不同，其電子商務化程度可能處於從比較初級的服務支持、產品列表到比較高級的網上支付的其中某一階段。通常這種類型可以形象的稱為"網上xx企業"。例如，網上銀行、網上酒店等。

多媒體廣告型

主要面向客戶或者企業產品（服務）的消費群體，以宣傳企業的核心品牌形象或者主要產品（服務）為主。這種類型無論從目的上還是實際表現手法上相對於普通網站而言更像一個平面廣告或者電視廣告，因此用"多媒體廣告"來稱呼這種類型的網站更貼切一點。

網站格式

靜態網頁

靜態網頁多數為單一的超文本標記語言檔案。現今不少網站建設皆傾向把動態網頁靜態化,從而令搜尋引擎最佳化。

動態網頁

動態網頁的內容隨著用戶的輸入和互動而有所不同,或者隨著用戶、時間、數據修正等而改變。網頁上的內容也可以由用戶通過使用客戶端描述語言(JavaScript、JScript、Actionscript)來改變。

網頁布局

網頁可以說是網站構成的基本元素。當我們輕點滑鼠，在網海中遨遊，一副副精彩的網頁會呈現在我們面前，那么，網頁的精彩與否的因素是什麼呢？色彩的搭配、文字的變化、圖片的處理等，這些當然是不可忽略的因素，除了這些，還有一個非常重要的因素——網頁的布局。下面，我們就有關網頁布局談論一下。

1、“國”字型

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

2、拐角型

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

3、標題正文型

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

4、封面型

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

5、“T”結構布局

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

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

6、“口”型布局

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

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

7、“三”型布局

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

8、對稱對比布局

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

9、POP布局

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

布局錯誤

1、導航選單使用圖片、flash

2、不恰當地使用圖片

3、內容里特殊字型的運用

4、新視窗打開

5、無實際意義的特效

6、內容滾動

7、用戶難以獲取自己想要的內容

8、檔案名稱命名不規範

9、長篇文章未設定分頁

10、顏色搭配錯誤，網頁難於閱讀

11、沒有返回指向

12、顯眼的點擊計數器

13、使用框架

14、不恰當地使用聲音

15、兼容性不佳

17、急於發布網站。

排版問題

1、字間距太擠或太寬

2、行距太小或太大

3、段距太少或太多

4、每行字數太多或太少

提高效率

最好的方法莫過於模組化，此前國內少有真正優秀的網頁模板，PSD吧專注設計多年，擁有一批高水準的設計師，PSD吧公開下載頂尖設計檔次的模板，並授權用於商業，可大大提高網頁設計的效率。

另外，像來自美國，風靡亞洲的怪獸模板網站，其網站上的網站模板設計具有很高的水平。怪獸模板開發了很多CMS網站模板包括joomla，WordPress，magento，drupal，mambo等,以及設計精美的ZenCart，magento，oscommerce網店系統等目前市場上最流行各種類型各種行業的網站模板。

設計誤區

一、不重視域名和空間

不少企業在進行網頁設計時的時候，不注重域名和空間的穩定性，隨便找個域名和空間來註冊。一個空間可以存放很多網站，一旦其中一個網站被降權或被K那將影響到其他的網站，選擇好的、有保障的供應商非常重要。

二、注重外觀不注重實用

很多企業在進行網頁設計時，網站注重網站外觀是否漂亮，有的網頁為追求漂亮，用了大量的flash，實際上flash不利於百度蜘蛛的抓取，不利於企業開展網路行銷，建議企業在進行網頁設計時的時候，不僅要重視它的外觀是否漂亮，還要注意網頁是否迎合搜尋引擎的喜好。

三、網站維護的缺乏

很多企業把網頁建好以後就不管不問了，有的網頁成年累月沒有更新內容，這樣百度就無法收錄對於企業來說，必須找一些專業人士進行網頁內容更新。

工作內容

1 、負責對網站整體表現風格的定位，對用戶視覺感受的整體把握；

2、進行網頁的具體設計製作；

3、產品目錄的平面設計；

4、各類活動的廣告設計；

5、協助開發人員頁面設計等工作。

6、協助SEO人員完成搜尋引擎規範的網頁。

好處

首要，是做到用戶價值上的簡單。在中心用戶價值上只保存最重要的一項，其他都可以先捨去。這樣做最大的優點是用戶可以很簡單了解你所要表達的價值。就好像談到查找引擎用戶就很自然地想到百度。

最佳化問題

框架結構

有些搜尋引擎(如FAST)是不支持框架結構的，他們的“蜘蛛”程式無法閱讀這樣的網頁。

頁面結構

DIV+CSS是網頁美工必須了解和掌握的一門技術，網際網路是屬於web2.0的時代，主流的網站都採用DIV+CSS結構。

DIV+CSS即是樣式和數據分離，利於搜尋引擎讀懂網站頁面，提高網頁收錄數量，最主要是方便管理和維護網站。

圖像區塊

除AltaVista、Google和Northern Light(現已停止公共搜尋服務)明確支持圖像區塊連結外，其他引擎是不支持它的。當“蜘蛛”程式遇到這種結構時，往往會感到茫然不知所措。因此儘量不要設定Image Map連結。

特效連結

我們經常看到有些網站為導航連結加上了特效，如點擊某個項目會展開下層連結等。這些效果一般通過Java Script實現，視覺上非常新穎，但在“蜘蛛”程式的眼裡則沒那么誘人，相反它無法解讀這種連結。為了讓搜尋引擎順利檢索到你的網頁，建議還是犧牲掉一些花哨的東西。

FLASH

雖然FLASH製作的網頁視覺效果較好，但搜尋引擎對此卻不太感冒，個案表明這一類的網站很難被百度搜尋引擎索引。明智的做法是提供FLASH和非FLASH網頁兩種選擇，這樣即增加了網頁的觀賞性，又照顧到了搜尋引擎的情緒。

加密網頁

除非你不希望搜尋引擎檢索你的網頁，否則不要給你的網頁加密。

網頁容量

包括圖像在內的網頁位元組數最好不要超過50K。體型龐大的網頁下載速度慢，不僅會讓普通訪問者等得心急如焚，有時也會使“蜘蛛”程式感到不耐煩。

技能技術

活版印刷

通常，一個成功的網站只有很少的字型是類似的款式，而不是使用的字型。最好的網站應該使用無襯線和無襯線字型，而不是兩者的結合。印刷術的網站也應該小心使用的字型，好的設計會加入一些類似的字型，而不是一個範圍內型面。大多數瀏覽器都能識別特定數量的安全字型，這樣設計主要是利用以避免併發症的發生。

字型下載後在CSS3字型模組，並一直在Safari 3.1，Opera 10和Mozilla的火狐3.5實現。隨後的興趣增加，以及在Web版式使用的字型下載。

大多數網站上的布局包括空格符文，成段，也避免了中心對齊的文本。

代碼質量

當創建一個網站，它是很好的做法，以符合標準。這包括代碼中的錯誤，代碼為更好的布局，以及確保你的ID和類的正確識別。這通常是通過描述指定元件做什麼。不符合標準的網站無法使用或容易出錯的，標準可以涉及到正確的頁面布局的可讀性，以及確保適當地關閉了編碼元素。通過W3C驗證，只能當一個正確的!DOCTYPE聲明，這是用來突出顯示代碼中的錯誤。系統識別錯誤和不符合網頁設計標準。然後，此信息可以由用戶糾正。

視覺設計

良好的視覺設計網站上的標識，其目標市場。這可以是一個年齡組或特定的文化鏈，因此，設計人員應了解其客群的趨勢。設計人員也應該明白他們設計的，這意味著一個企業網站不應該被設計成一個社交媒體網站，例如相同類型的網站。設計師還應該了解僱主或商業網站代表，以確保他們被描繪毫不遜色。美學或一個網站的整體設計不應該與內容相衝突，使其更容易為用戶瀏覽，可以找到所需的信息或產品等。

顏色設計

在HTML 4.01版本中，確定了16種顏色的英語名稱：

顏色	實名	16進制	顏色	實名	16進制	顏色	實名	16進制	顏色	實名	16進制
黑色	black	#000000	銀灰色	silver	#c0c0c0	栗色	maroon	#800000	紅色	red	#ff0000
深藍色	navy	#000080	藍色	blue	#0000ff	紫色	purple	#800080	品紅色	fuchsia	#ff00ff
綠色	green	#008000	淺綠色	lime	#00ff00	橄欖色	olive	#808000	黃色	yellow	#ffff00
墨綠色	teal	#008080	青色	aqua	#00ffff	灰色	gray	#808080	白色	white	#ffffff

在CSS 2.1版本中，增加了1種顏色英文名稱：

顏色	實名	16進制
橙色	orange	#ffa500

互動設計

對於網站來說，好的互動設計對網頁設計的整體起著至關重要的作用，一個好的互動不僅能大大提升頁面整體的設計效果，增強頁面的“活躍度”，還能有效提高用戶體驗，“禁止”單調的操作流程，使得不論是品牌形象的輸出，還是產品、文化的表現都能最大化的呈現並傳達到相關的客群。

專業的互動設計師，在一個理想化產品設計的過程中，有一些是屬於必須的輸出物，有一些屬於最好有（推薦）的輸出物，還有一些屬於可有可無的輸出物。同時，根據項目的實際情況和參與角色的分工情況，存在一些互動設計師可能需要負責的輸出物，互動設計師的專業度能通過以下的關鍵輸出物衡量：

A.FRD目標確認文檔

B.競爭分析報告

C.頭腦風暴產出物

D.項目初期用戶調研報告

E.核心設計點調研及分析報告

F.專家評審報告和評估報告

G.原型測試報告

H.互動流程圖及詳細說明文檔

I.頁面線框圖

J.核心設計點說明文檔

K.跟蹤分析報

網頁設計(網站技術)