【正文】 網(wǎng)頁設(shè)計(jì) 網(wǎng)頁設(shè)計(jì)――網(wǎng)站是企業(yè)向用戶和網(wǎng)民提供信息 (包括產(chǎn)品和服務(wù) )的一種方式 ,是企業(yè)開展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺(tái)，離開網(wǎng)站 (或者只是利用第三方網(wǎng)站 )去談電子商務(wù)是不可能的。企業(yè)的網(wǎng)址被稱為 網(wǎng)絡(luò)商標(biāo) ，也是企業(yè)無形資產(chǎn)的組成部分，而網(wǎng)站是 INTERNET 上宣傳和反映企業(yè)形象和文化的重要窗口。 目錄 網(wǎng)頁設(shè)計(jì)的要點(diǎn)是設(shè)計(jì)第一而技術(shù)其次在設(shè)計(jì)規(guī)劃時(shí)我們會(huì)考慮：網(wǎng)頁設(shè)計(jì)現(xiàn)狀以及實(shí)戰(zhàn)技巧網(wǎng)頁設(shè)計(jì)的要點(diǎn)成為一名網(wǎng)頁設(shè)計(jì)師你要學(xué)會(huì)如何快速成長為一名厲害的網(wǎng)頁設(shè)計(jì)師網(wǎng)頁設(shè)計(jì)師如何找工作 ?網(wǎng)頁設(shè)計(jì)與搜索引擎的優(yōu)化問題框架結(jié)構(gòu) (Frame Sets)頁面結(jié)構(gòu) (div css)DIV CSS 結(jié)構(gòu)。圖象區(qū)塊 (Image Maps)特效鏈接 FLASH 加密網(wǎng)頁網(wǎng)頁容量網(wǎng)頁設(shè)計(jì)布局如何提高網(wǎng)頁設(shè)計(jì)效率：網(wǎng)站設(shè)計(jì)工作內(nèi)容同名圖書網(wǎng)頁設(shè)計(jì)的要點(diǎn)是設(shè)計(jì)第一而技術(shù)其次企業(yè)網(wǎng)站設(shè)計(jì)顯得極為重要，下面是一些網(wǎng)站設(shè)計(jì)中應(yīng)注意的原則。一、明確建 立網(wǎng)站的目標(biāo)和用戶需求 Web 站點(diǎn)的設(shè)計(jì)是展現(xiàn)企業(yè)形象、介紹產(chǎn)品和服務(wù)、體現(xiàn)企業(yè)發(fā)展戰(zhàn)略的重要途徑，因此我們必須明確設(shè)計(jì)站點(diǎn)的目的和用戶需求，從而做出切實(shí)可行的設(shè)計(jì)計(jì)劃。我們會(huì)根據(jù)消費(fèi)者的需求、市場的狀況、企業(yè)自身的情況等進(jìn)行綜合分析，以 消費(fèi)者 (customer)為中心，而不是以 美術(shù) 為中心進(jìn)行設(shè)計(jì)規(guī)劃。在設(shè)計(jì)規(guī)劃時(shí)我們會(huì)考慮：建設(shè)網(wǎng)站的目的是什么 ?為誰提供服務(wù)和產(chǎn)品 ?企業(yè)能提供什么樣的產(chǎn)品和服務(wù) ?網(wǎng)站的目的消費(fèi)者和受眾的特點(diǎn)是什么 ?企業(yè)產(chǎn)品和服務(wù)適合什么樣的表現(xiàn)方式 (風(fēng)格 )?二、網(wǎng)頁設(shè)計(jì)總體方案主題鮮 明在目標(biāo)明確的基礎(chǔ)上，完成網(wǎng)站的構(gòu)思創(chuàng)意即總體設(shè)計(jì)方案。對網(wǎng)站的整體風(fēng)格和特色作出定位，規(guī)劃網(wǎng)站的組織結(jié)構(gòu)。 Web 站點(diǎn)應(yīng)針對所服務(wù)對象(機(jī)構(gòu)或人 )的不同而具有不同的形式。有些站點(diǎn)只提供簡潔文本信息；有些則采用多媒體表現(xiàn)手法，提供華麗的圖像、閃爍的燈光、復(fù)雜的頁面布置，甚至可以下載聲音和錄像片段。好的 Web 站點(diǎn)把圖形表現(xiàn)手法和有效的組織與通信結(jié)合起來。為了做到主題鮮明突出，要點(diǎn)明確，我們將按照客戶的要求，以簡單明確的語言和畫面體現(xiàn)站點(diǎn)的主題；調(diào)動(dòng)一切手段充分表現(xiàn)網(wǎng)站點(diǎn)的個(gè)性和情趣，辦出網(wǎng)站的特點(diǎn)。 Web 站點(diǎn)主 頁應(yīng)具備的基本成分包括：頁頭：準(zhǔn)確無誤地標(biāo)識(shí)你的站點(diǎn)和企業(yè)標(biāo)志； Email 地址：用來接收用戶垂詢；聯(lián)系信息：如普通郵件地址或電話；版權(quán)信息：聲明版權(quán)所有者等。充分利用已有信息，如客戶手冊 .公共關(guān)系文檔 .技術(shù)手冊和數(shù)據(jù)庫等。三、網(wǎng)站的版式設(shè)計(jì)網(wǎng)頁設(shè)計(jì)作為一種視覺語言，特別講究編排和布局，雖然主頁的設(shè)計(jì)不等同于平面設(shè)計(jì)，但它們有許多相近之處。版式設(shè)計(jì)通過文字圖形的空間組合，表達(dá)出和諧與美。多頁面站點(diǎn)頁面的編排設(shè)計(jì)要求把頁面之間的有機(jī)聯(lián)系反映出來，特別要處理好頁面之間和頁面內(nèi)的秩序與內(nèi)容的關(guān)系。為了達(dá)到最佳的視覺 表現(xiàn)效果，我們將反復(fù)推敲整體布局的合理性，使瀏覽者有一個(gè)流暢的視覺體驗(yàn)。四、色彩在網(wǎng)頁設(shè)計(jì)中的作用色彩是藝術(shù)表現(xiàn)的要素之一。在網(wǎng)頁設(shè)計(jì)中，我們的設(shè)計(jì)師根據(jù)和諧、均衡和重點(diǎn)突出的原則，將不同的色彩進(jìn)行組合 .搭配來構(gòu)成美麗的頁面。根據(jù)色彩對人們心理的影響，合理地加以運(yùn)用。如果您的企業(yè)有CIS(企業(yè)形象識(shí)別系統(tǒng) )，我們將按照其中的 VI 進(jìn)行色彩運(yùn)用。五、網(wǎng)頁設(shè)計(jì)形式與內(nèi)容相統(tǒng)一為了將豐富的意義和多樣的形式組織成統(tǒng)一的頁面結(jié)構(gòu)，形式語言必須符合頁面的內(nèi)容，體現(xiàn)內(nèi)容的豐富含義。靈活運(yùn)用對比與調(diào)和、對稱與平衡、節(jié)奏與韻律 以及留白等手段，通過空間、文字、圖形之間的相互關(guān)系建立整體的均衡狀態(tài)，產(chǎn)生和諧的美感。如對稱原則在頁面設(shè)計(jì)中，它的均衡有時(shí)會(huì)使頁面顯得呆板，但如果加入一些富有動(dòng)感的文字、圖案，或采用夸張的手法來表現(xiàn)內(nèi)容往往會(huì)達(dá)到比較好的效果。點(diǎn)、線、面作為視覺語言中的基本元素，巧妙地互相穿插、互相襯托、互相補(bǔ)充構(gòu)成最佳的頁面效果，充分表達(dá)完美的設(shè)計(jì)意境。六、三維空間的構(gòu)成和虛擬現(xiàn)實(shí)網(wǎng)絡(luò)上的三維空間是一個(gè)假想空間，這種空間關(guān)系需借助動(dòng)靜變化 .圖像的比例關(guān)系等空間因素表現(xiàn)出來。在頁面中，圖片、文字位置前后疊壓，或頁面位置變化所 產(chǎn)生的視覺效果都各不相同。通過圖片、文字前后疊壓所構(gòu)成的空間層次不太適合網(wǎng)頁設(shè)計(jì)，根據(jù)現(xiàn)有瀏覽器的特點(diǎn)，網(wǎng)頁設(shè)計(jì)適合比較規(guī)范、簡明的頁面，盡管這種疊壓排列能產(chǎn)生強(qiáng)節(jié)奏的空間層次，視覺效果強(qiáng)烈。網(wǎng)頁上常見的是頁面上、下、左、右、中位置所產(chǎn)生的空間關(guān)系，以及疏密的位置關(guān)系所產(chǎn)生的空間層次，這兩種位置關(guān)系使產(chǎn)生的空間層次富有彈性，同時(shí)也讓人產(chǎn)生輕松或緊迫的心理感受。現(xiàn)在，人們已不滿足于 HTML 語言編制的二維 Web 頁面，三維世界的誘惑開始吸引更多的人，虛擬現(xiàn)實(shí)要在 Web 網(wǎng)上展示其迷人的風(fēng)采，于是 VRML 語言出現(xiàn)了。 VRML 是一種面向?qū)ο蟮恼Z言，它類似 Web 超級(jí)鏈接所使用的 HTML語言，也是一種基于文本的語言，并可以運(yùn)行在多種平臺(tái)之上，只不過能夠更多地為虛擬現(xiàn)實(shí)環(huán)境服務(wù)。七、網(wǎng)頁設(shè)計(jì)中多媒體功能的利用網(wǎng)絡(luò)資源的優(yōu)勢之一是多媒體功能。要吸引瀏覽者注意力，網(wǎng)頁的內(nèi)容可以用三維動(dòng)畫、 FLASH等來表現(xiàn)。但要由于網(wǎng)絡(luò)寬帶的限制，在使用多媒體的形式表現(xiàn)網(wǎng)頁的內(nèi)容時(shí)不得不考慮客戶端的傳輸速度。八。結(jié)構(gòu)清晰并且便于使用。如果人們看不懂或很難看懂您的網(wǎng)站，那么，他如何了解你的企業(yè)和服務(wù)呢 ?使用一些醒目的標(biāo)題或文字來突出您的產(chǎn)品與服務(wù)。 并且即使您擁有最棒的產(chǎn)品，如果客戶從您的網(wǎng)站上不清楚您在介紹什么或不清楚如何受益的話，他們是不會(huì)喜歡您的網(wǎng)站的，這就是網(wǎng)頁設(shè)計(jì)的失敗。九。導(dǎo)向清晰。網(wǎng)頁設(shè)計(jì)中導(dǎo)航使用超文本鏈接或圖片鏈接，使人們能夠在您的網(wǎng)站上自由前進(jìn)或后退，而不會(huì)讓他們使用瀏覽器上的前進(jìn)或后退。我們在所有的圖片上使用 ALT標(biāo)識(shí)符注明圖片名稱或解釋，以便那些不愿意自動(dòng)加載圖片的觀眾能夠了解圖片的含義。十。快速的下載時(shí)間。很多的瀏覽者不會(huì)進(jìn)入需要等待 5 分鐘下載時(shí)間才能進(jìn)入的網(wǎng)站，在互聯(lián)網(wǎng)上 30 秒的等待時(shí)間與我們平常 10 分鐘等待時(shí)間的感覺相 同。因此，我們會(huì)建議您在網(wǎng)頁設(shè)計(jì)中盡量避免使用過多的圖片及體積過大的圖片。我們通常會(huì)與客戶合作，將主要頁面的容量控制在 50K 以內(nèi)，平均 30K 左右，確保普通瀏覽者頁面等待時(shí)間不超過 10 秒。十一。非圖形的內(nèi)容。我們在必要時(shí)適當(dāng)使用動(dòng)態(tài) Gif圖片，為減少動(dòng)畫容量，應(yīng)用巧妙設(shè)計(jì)的 Java 動(dòng)畫可以用很小的容量使圖形或文字產(chǎn)生動(dòng)態(tài)的效果。但是，由于在互聯(lián)網(wǎng)瀏覽的大多是一些尋找信息的人們，我們?nèi)匀唤ㄗh您要確定您的網(wǎng)站將為他們提供的是有價(jià)值的內(nèi)容，而不是過度的裝飾。十二。方便的反饋及訂購程序。讓客戶明確您所能提供的產(chǎn)品 或服務(wù)并讓他們非常方便地訂購是您獲得成功的重要因素。如果客戶在您的網(wǎng)站上產(chǎn)生了購買產(chǎn)品或服務(wù)的欲望，您是否能夠讓他們盡快實(shí)現(xiàn)嗎 ?是在線還是離線 ?十三、網(wǎng)站測試和改進(jìn)測試實(shí)際上是模擬用戶詢問網(wǎng)站的過程，用以發(fā)現(xiàn)問題并改進(jìn)網(wǎng)頁設(shè)計(jì)。我們通常與用戶共同安排網(wǎng)站測試。網(wǎng)頁設(shè)計(jì)現(xiàn)狀以及實(shí)戰(zhàn)技巧 (一 )垃圾還是經(jīng)典網(wǎng)頁技術(shù)更新很快，一個(gè)網(wǎng)站的界面設(shè)計(jì)壽命僅僅 23 年而已。不管是垃圾還是精品，都沒有所謂的經(jīng)典。經(jīng)典只存在于是哪個(gè)首次成功創(chuàng)新性的應(yīng)用。一個(gè)閉門造車者做出的東西，是遠(yuǎn)遠(yuǎn)趕不上綜合借鑒者的。網(wǎng)頁設(shè)計(jì)不同于其他藝術(shù) ，在模仿加創(chuàng)新的網(wǎng)頁設(shè)計(jì)領(lǐng)域當(dāng)中，即便是完全自己設(shè)計(jì)的，也是沿用了人們已經(jīng)認(rèn)同的大部分用戶習(xí)慣，而且這種沿襲的痕跡時(shí)非常的明顯！還有那個(gè)設(shè)計(jì)者敢腆著臉說，這都是我自己的原創(chuàng)設(shè)計(jì) ?對于業(yè)界來說，經(jīng)典只是個(gè)理念和象征！ (二 )國內(nèi)網(wǎng)頁設(shè)計(jì)環(huán)境不可否認(rèn)，國內(nèi)網(wǎng)頁設(shè)計(jì)環(huán)境目前還停留在初級(jí)的認(rèn)知階段，也就是說，絕大多數(shù)人不知道網(wǎng)絡(luò)的真正的可用之處，你去做一個(gè)業(yè)務(wù)的時(shí)候，不得不去做大量的說服教育工作。以乙方的身份去說服甲方，以專業(yè)角度去教育非專業(yè)認(rèn)識(shí)，結(jié)果是可想而知的。也正是這種全體社會(huì)普遍的低認(rèn)知水平，導(dǎo)致了大量網(wǎng)絡(luò)垃 圾的產(chǎn)生。舉個(gè)簡單的例子，看看 阿里巴巴 中文和英文兩個(gè)版本的頁面。中文版主色是橙色 (與標(biāo)志色統(tǒng)一 )，英文版是極不協(xié)調(diào)的藍(lán)橙 (具有很明顯的生湊效果 )。為啥中文版是橙色，呵呵，不要以為哪是為了和標(biāo)志統(tǒng)一，其實(shí)那時(shí)國內(nèi)最常用的商業(yè)色。橙色代表什么 ?肉色，淫欲。商業(yè)是性質(zhì) ?貪婪、拜金。對于社會(huì)主義初級(jí)階段群眾的普遍思想來說，橙色就是最突出的體現(xiàn)，它不僅僅是網(wǎng)頁首選商業(yè)色，它還體現(xiàn)了當(dāng)今社會(huì)經(jīng)濟(jì)發(fā)展條件下的 浮躁 和 糜爛 ，它還說明了 低認(rèn)知水平 的國人，需要用這個(gè)刺激的顏色，去宣教引領(lǐng)他們被動(dòng)接受。為啥英文版是 藍(lán)橙 ?因?yàn)檠笕艘烟幱诎l(fā)達(dá)社會(huì)，他們首先需要的不是 宣教引領(lǐng) ，而是 功能 。一個(gè)弱化的界面更能強(qiáng)化顯示功能，使人方便使用。較刺激熱烈的顏色，會(huì)引起洋人的反感，所以用的淺藍(lán)灰色。那么為什么又會(huì)出現(xiàn)極不協(xié)調(diào)的橙色捏 ?原因有二，一是要與標(biāo)志顏色統(tǒng)一，二是中英文要有傳承，所以出了這末個(gè)一半是火焰一半世海水的結(jié)果。 (三 )什么是好的網(wǎng)頁設(shè)計(jì)(1)內(nèi)容和功能決定表現(xiàn)形式和界面設(shè)計(jì)常常拿到的任務(wù)是一張小紙條，上面兩句話，叫你去做一個(gè)網(wǎng)站設(shè)計(jì)。有的人看看紙條就去設(shè)計(jì)頁面了憑，憑兩句話，你就可以為客戶做一個(gè)頁面設(shè)計(jì)，以我 8 年的設(shè)計(jì)經(jīng)驗(yàn)，我都不敢去做，你真是我的偶像阿！做網(wǎng)頁設(shè)計(jì)，你需要了解客戶的東西很多： 建站目的 欄目規(guī)劃及每個(gè)欄目的表現(xiàn)形式及功能要求 主色、客戶性別喜好、聯(lián)系方式、舊版網(wǎng)址、偏好網(wǎng)址 根據(jù)行業(yè)和客戶要求，那些要著重表現(xiàn) 是否分期建設(shè)、考慮后期的兼容性 客戶是否有強(qiáng)烈的建站欲望 你是否能在精神意識(shí)上控制住客戶 面對你未接觸的技術(shù)知識(shí)，你有底嗎 ? .當(dāng)你把這些內(nèi)容都了解清除了時(shí)候，你的大腦中就已經(jīng)給這個(gè)網(wǎng)站有個(gè)全面而形象的定位了，這時(shí)才是有的放矢去做界面設(shè)計(jì)的時(shí)候了。 (2)界面弱 化一個(gè)好的界面設(shè)計(jì)它的界面時(shí)弱化的，它突出的是功能，著重體現(xiàn)的是網(wǎng)站業(yè)提供給使用者是主要什么。這就涉及到瀏覽順序、功能分區(qū)等等。要讓訪客在 內(nèi)就能把握網(wǎng)站的行業(yè)性質(zhì)， 1 秒內(nèi)就知道該從哪個(gè)地方開始使用這個(gè)網(wǎng)站，能點(diǎn)一次的，絕不點(diǎn)第二次。當(dāng)然上面說的