網站設計的技(jì)巧

網站設計的技(jì)巧

　　首先我們需要了解一(yī)下(xià)網站的頁面組成，網站一(yī)般包括以下(xià)幾部分：
　　首頁：網站的門(mén)面，如同公司的形象，特别注重設計和規劃。
　　框架頁：網站的主要結構頁面，又(yòu)稱次首頁、内頁，大型網站往往框架頁即首頁，如一(yī)些門(mén)戶網站。框架頁主要是網站内部主要欄目的首頁，講究風格的一(yī)緻性，并于主頁呼應。
　　普通(tōng)頁：網站主要的承載信息的頁面，設計要求不高(gāo)，但要求鏈接準确、文字無誤、圖文并茂，并沿襲網頁的風格。
　　彈出頁：一(yī)般用于廣告、新聞、消息、到(dào)其他網站的鏈接等等，一(yī)般用的很少。

　　通(tōng)過上(shàng)面的分析，我們可以看(kàn)出：
　　從(cóng)功能(néng)上(shàng)來看(kàn)，首頁主要承擔著(zhe)樹立企業(yè)形象（當然不僅僅是首頁）的作用，框架頁在導航方面起著(zhe)重要的作用，比如各欄目内部主要内容的介紹，都可以在框架頁中體現再進入普通(tōng)頁，讓浏覽者能(néng)夠迅速了解網站各欄目的主要内容，擇其需要而浏覽，而普通(tōng)頁則是主要的信息頁面，也是網站的最終頁面，對于大型網站，這種結構非常重要，而對于中小(xiǎo)型企業(yè)，網站規模較小(xiǎo)、頁面數量不多(duō)，有時框架頁就(jiù)起著(zhe)普通(tōng)頁的作用，至于彈出頁，建議您不是必要，最好不要用。下(xià)面詳細介紹各頁面的設計技(jì)巧：

　　一(yī)、首頁設計技(jì)巧
　　網站首頁是企業(yè)網上(shàng)的虛拟門(mén)面，在此，提醒上(shàng)網的企業(yè)注意自(zì)己門(mén)面的設計，決不能(néng)敷衍了事(shì)、馬馬虎虎。我們會(huì)經常看(kàn)到(dào)印刷精美的産品目錄或廣告，當您屢屢看(kàn)到(dào)那些印有産品目錄或廣告的精美印刷制品的時候，相(xiàng)信您或多(duō)或少會(huì)對有關的産品形成一(yī)種好感，即使您不會(huì)購買，也必然對這些産品形成一(yī)定程度的認同。而對于設計毛糙的宣傳品，您肯定會(huì)懷疑其内容的真實性，從(cóng)而對其産品或服務産生(shēng)質疑。好，現在說說網站的設計，相(xiàng)信您會(huì)同意這種說法：網站的頁面就(jiù)好比是“無紙(zhǐ)的印刷品”。既然如此，我們會(huì)因此而得出一(yī)個(gè)結論：精良和專業(yè)網站的設計，如同制作精美的印刷品，會(huì)大大刺激消費(fèi)者（訪問者）的購買欲望，反之，您公司所提供的産品或服務将不會(huì)給消費(fèi)者（訪問者）留下(xià)較好的印象。值得一(yī)提的是，除非您的企業(yè)有專業(yè)的網站規劃、設計人員(yuán)，否則您最好找專業(yè)公司或專業(yè)人員(yuán)為(wèi)您設計制作，一(yī)個(gè)優秀的專業(yè)設計人員(yuán)會(huì)很快明白(bái)您的意圖，并根據您的建站目的提出建設性的意見(jiàn)。
　　 一(yī)般來說，網站首頁的形式不外乎有兩種，一(yī)種是純粹的形象展示型，這種類型文字信息較少，圖像信息較多(duō)，通(tōng)過藝術(shù)造型和設計布局，利用一(yī)系列與公司形象和産品、服務有關的圖像、文字信息，組成一(yī)幅生(shēng)動的畫(huà)面，向浏覽者展示一(yī)種形象、一(yī)個(gè)氛圍，從(cóng)而吸引浏覽者進入浏覽。這需要設計者具有良好的設計基礎和審美能(néng)力，能(néng)夠努力挖掘企業(yè)深層的内涵，展示企業(yè)文化。這種類型的首頁在設計過程中一(yī)定要明确要以設計為(wèi)主導，通(tōng)過色彩、布局給訪問者留下(xià)深刻的印象，當然，我們不能(néng)為(wèi)了設計而設計，我們的目的是營銷，在設計過程中一(yī)定要牢記這一(yī)點！
　　 另一(yī)種是信息羅列型，一(yī)般的大、中型企業(yè)網站和門(mén)戶網站常用的方式，即在首頁中就(jiù)羅列出網站的主要内容分類、重點信息、網站導航、公司信息等等，也就(jiù)是我們上(shàng)面談到(dào)的框架頁，這種風格比較适合網站信息量大，内容豐富的網站，因為(wèi)是以展示信息為(wèi)主，這是的設計就(jiù)要在細微之處體現企業(yè)形象，建議設計人員(yuán)最好仔細閱讀(dú)企業(yè)的ＣＩ手冊，熟悉企業(yè)标志(zhì)、吉祥物(wù)、字體及用色标準，在網站的局部體現出來，往往平淡之中一(yī)個(gè)優美的符合企業(yè)特點的曲線就(jiù)能(néng)夠給人以深刻的印象，從(cóng)而将企業(yè)形象印在浏覽者的腦(nǎo)海裡(lǐ)。設計人員(yuán)在設計過程中要注意使用這些語言符号來表達一(yī)種獨特的企業(yè)信息。

　　二、風格保持一(yī)緻—内頁設計技(jì)巧
　　如何保持網站風格的一(yī)緻，是進行内頁設計過程中考慮的重要方面，根據我的經驗，您可以嘗試以下(xià)幾種設計方式：
　　1、結構的一(yī)緻性：我們知道，網站的統一(yī)性在網站營銷中占重要地位，而網站結構是網站風格統一(yī)的重要手段，包括網站布局、文字排版、裝飾性元素出現的位置、導航的統一(yī)、圖片的位置等等，到(dào)國(guó)外著名的電(diàn)子商務網站浏覽，你會(huì)發現這些網站結構驚奇的一(yī)緻性，所不同的是色彩或内容，在結構的一(yī)緻性中，我們要強調網站标志(zhì)性元素的一(yī)緻性，即網站或公司名稱、網站或企業(yè)标志(zhì)、導航及輔助導航的形式及位置、公司聯系信息等，這種方式是目前網站普遍采用的結構，一(yī)方面減少設計、開(kāi)發的工(gōng)作量，同時更有利于以後的網站維護與更新。
　　 2、色彩的一(yī)緻性：方式是保持站點主體色彩的一(yī)緻，隻改變局部色塊，優點是一(yī)個(gè)獨特色彩的網站會(huì)給人留下(xià)很深刻的印象，因為(wèi)人的視覺對色彩要比布局更敏感，更容易在大腦(nǎo)中形成記憶符号。在色彩的一(yī)緻性中，我們強調的是如果企業(yè)有自(zì)身的CI形象，最好在互聯網中沿襲這個(gè)形象，給觀衆網上(shàng)網下(xià)一(yī)緻的感覺，更有利于企業(yè)形象的樹立。一(yī)個(gè)建議是選取一(yī)兩種主要色彩，幾種輔助色彩。
　　 3、利用導航取得統一(yī)：導航是網站的一(yī)項重要組成部分，一(yī)個(gè)出色的富有企業(yè)特性的導航将會(huì)給人留下(xià)深刻的印象，比如将标志(zhì)的形态寓于導航之中，或将導航設計在整個(gè)網站布局之中等等不一(yī)而足，花點力氣在導航上(shàng)，也會(huì)設計出一(yī)個(gè)出色的站點。
　　  4、特别元素的一(yī)緻性：在網站設計中，個(gè)别具有特色的元素（如标志(zhì)、象征圖形、局部設計等）重複出現，也會(huì)給訪問者留下(xià)深刻印象。比如網站結構在某一(yī)點上(shàng)的變化，由直線變為(wèi)圓弧、暗(àn)色點綴的亮色、色彩中的補色等等。
　　 5、利用圖像取得統一(yī)： 網頁中的圖像在使用上(shàng)一(yī)定要甚之又(yòu)甚，尤其是一(yī)些動畫(huà)，網頁中充斥著(zhe)各種可有可無的動畫(huà)，而這些動畫(huà)根本與本企業(yè)内容無關！認真檢查網頁中的動畫(huà)，将沒用的删掉！這裡(lǐ)我們所說的利用圖像取得統一(yī)，決不是在每頁中放(fàng)置幾個(gè)動畫(huà)！而是作為(wèi)網站結構一(yī)部分的局部圖像，根據網頁内容的不同，配以相(xiàng)應的圖像或動畫(huà)，從(cóng)而給浏覽者形成頁面的連續性。
　　 6、利用背景取得統一(yī)：從(cóng)技(jì)術(shù)上(shàng)而言，網頁背景包括背景色和背景圖像兩種，一(yī)般來說，我們并不提倡使用背景圖像，而使用背景色或色塊。原因很明顯，第一(yī)，下(xià)載速度，背景色的下(xià)載速度忽略不計，而背景圖像就(jiù)得根據圖像字節大小(xiǎo)下(xià)載了，這裡(lǐ)需要說明的是，如果你的背景圖像比較深，那麽最好将背景色置為(wèi)深色調（默認的背景色是白(bái)色），這樣在等待浏覽器(qì)下(xià)載背景圖片的時候前面的淺色文字可以很容易閱讀(dú)，因為(wèi)如果有背景色，浏覽器(qì)先将其下(xià)載，然後下(xià)載背景圖片；第二，顯示效果，經常看(kàn)到(dào)國(guó)内一(yī)些網站設有背景圖像，或者是公司的廠房、辦公大樓，或者是産品圖片，甚至是某某人物(wù)的照(zhào)片，使得前面的文字很難辨認！給人一(yī)種很不舒服的感覺，讓人無法停留。在此，提醒您注意：有效利用背景取得網站統一(yī)和專業(yè)化的方法有以下(xià)幾種：
第一(yī)，認識到(dào)并不是所有的圖片都可以作為(wèi)背景，在考慮設置網站背景圖像的時請您注意；
第二，加強與前景的明暗(àn)對比，即要麽淡化背景，隐隐約約可以看(kàn)到(dào)即可，要麽加深背景，而将前面的文字亮化。
　　 那麽什麽适合網頁背景呢(ne)？一(yī)個(gè)好的建議是将公司的标志(zhì)、象征性的簡單圖片作為(wèi)背景，并将其淡化，使浏覽者在閱讀(dú)網站内容的同時不經意記下(xià)公司的标志(zhì)。曾經一(yī)個(gè)網站的背景設計給我留下(xià)深刻的印象：單色背景中一(yī)個(gè)網站标志(zhì)的居中放(fàng)大淡化，前面元素中也不斷重複這個(gè)标志(zhì)：如提交按紐形狀刻意設計成标志(zhì)的形式等等，在整個(gè)頁面中形成特有元素在大小(xiǎo)、明暗(àn)及位置的呼應，很好地塑造了網站的特有形象。

　　三、色彩搭配
　　網頁中最難處理的也就(jiù)是色彩搭配的問題了。如何運用最簡單的色彩表達最豐富的含義，體現企業(yè)形象是網頁設計人員(yuán)需要不斷學習、探索的課題。如何進行色彩搭配是一(yī)門(mén)學問，下(xià)面的一(yī)些方法是我在實踐過程中的體會(huì)，希望能(néng)夠為(wèi)您起到(dào)一(yī)定的參考作用。
　　1、運用相(xiàng)同色系色彩：所謂相(xiàng)同色系，是指幾種色彩在360°色相(xiàng)環上(shàng)位置十分相(xiàng)近，大約在45°左右或同一(yī)色彩不同明度的幾種色彩，如：，這種搭配的優點是易于使網頁色彩趨于一(yī)緻，對于網頁設計新手有很好的借鑒作用，這種用色方式容易塑造網頁和諧統一(yī)的氛圍，缺點是容易造成頁面的單調，因此往往利用局部加入對比色來增加變化，如局部對比色彩的圖片等。這種方法不失為(wèi)一(yī)種設計的好方法。
　　2、運用對比色或互補色：所謂對比色，是指色相(xiàng)環相(xiàng)距較遠(yuǎn)，大約在100°左右，視覺效果鮮亮、強烈，而互補色則是色相(xiàng)環上(shàng)相(xiàng)距最遠(yuǎn)的連種色彩，即相(xiàng)距180°，其對比關系最強烈、最富有刺激性，往往使畫(huà)面十分突出，如：，這種用色方式容易塑造活潑、韻動的網頁效果，特别适合體現輕松、積極的素材的網站，缺點是容易造成色彩的花，使用中注意色彩使用的度。
　　值得注意的是，以上(shàng)兩種用色方式在實際應用中要注意主體色彩的運用，即以一(yī)種或兩種色彩為(wèi)主，其它色彩為(wèi)輔，不要幾種色彩等量使用，以免造成色彩的混亂。
　　3、使用過渡色：過渡色能(néng)夠神奇地将幾種不協調的色彩統一(yī)起來，在網頁中合理地使用過渡色能(néng)夠使你的色彩搭配技(jì)術(shù)更上(shàng)一(yī)層樓。過渡色包括幾種形式：兩種色彩的中間色調、單色中混入黑(hēi)、白(bái)、灰進行調和以及單色中混入相(xiàng)同色彩進行調和等等，您可以自(zì)己嘗試調配，在以後的更新中，我會(huì)專題介紹如何使用過渡色。

　　四、版面布局
　　一(yī)般來說，企業(yè)網站首頁的布局比較靈活，著(zhe)重設計，這裡(lǐ)我所說的布局主要是指内頁的版面布局。中、小(xiǎo)型企業(yè)網站的内頁布局一(yī)般比較簡單，即内頁的一(yī)欄式版面布局，從(cóng)排版布局的角度而言，我們還(hái)可以設計成等分兩欄式、三欄式、多(duō)欄式，不等分兩欄式、三欄式、多(duō)欄式等等，但因為(wèi)浏覽器(qì)寬幅有限，一(yī)般不宜設計成三欄以上(shàng)的布局。
　　在版面布局中主要是考慮導航、必要信息與正文之間的布局關系。比較多(duō)的情況是采用頂部放(fàng)置必要的信息，如公司名稱、标志(zhì)、廣告條以及導航條，或将導航條放(fàng)在左側而右側是正文等等，這樣的布局結構清晰、易于使用。當然，您也可以嘗試這些布局的變化形式，如：左右兩欄式布局，一(yī)半是正文，另一(yī)半是形象的圖片、導航；或正文不等兩欄式布置，通(tōng)過背景色區分，分别放(fàng)置圖片和文字等等。在設計中注意多(duō)吸取好的網站設計的精髓。