網頁設計的基本知識

由于目前所見即所得類型的工具越來越多，使用也越來越方便，所以制作網頁已經變成了一件輕松的工作，不像以前要手工編寫一行行的源代碼那樣。一般初學者經過短暫的學習就可以學會制作網頁，于是他們認為網頁制作非常簡單，就匆匆忙忙制作自己的網站，可是做出來之后與別人一比，才發現自己的網站非常粗糙，這是為什么呢？常言道：“心急吃不了熱豆腐”。建立一個網站就像蓋一幢大樓一樣，它需要一套網頁設計注意事項，有自己特定的工作流程，你只有遵循這個步驟，按部就班地一步步來，才能設計出一個滿意的網站。

Web2.0時代，體驗式營銷，體驗式網站設計開始走向主流，電子商務網站推廣到底意味著什么？具體表現在那些地方？根據建站的一點經驗和觀察，也參照了網友的一些建議，總結了體驗式網站設計的四各方面，41個關鍵體驗點，將其梳理概況，與大家分享。
 

一、體驗式網站設計的五個方面
1、視覺體驗：呈現給用戶視覺上的體驗，重在UI設計，強調舒適性。
2、瀏覽體驗：呈現給用戶欄目和內容的體驗，重在合理規劃，強調協調性。
3、信任體驗：呈現給用戶的信任體驗，重在細節斟酌，強調穩定性。
4、互動體驗：呈現給用戶操作上的體驗，重在路徑設計，強調易用性。
5、企業網站的作用

二、視覺體驗的11個關鍵體驗點
視覺體驗：呈現給用戶視覺上的體驗，重在UI設計，強調舒適性。
1. 整體風格：這是網站給用戶呈現的第一印象，主要體現在兩方面，一是網站質量的權衡，網民第一次看到網站后，首先會根據感覺對網站有個上、中、下額評判，二是網站類型的歸屬，例如是資訊型，形象型等。因而網站在設計之前，必須明確目標客戶群體，并針對目標客戶的審美喜好，進行分析，網站設計要符合目標客戶的審美預期和類型歸屬。
2. 網站LOGO：LOGO的設計水平直接體現了站長的審美水平。并且logo是網站整個風格的主導，也是網站對外傳播的形象標示，務必要仔細斟酌，不僅要簡潔得體，還要符合網站的定位和目標，最好找家設計公司，或者去toidea.com 威客一下。
3. 頁面布局：重點突出，主次分明，圖文并茂，聲畫全面。網站的有效空間是有限的，網站的第一屏畫面至關重要，頁面布局要與網站的營銷目標相結合，將最能吸引用戶的內容，通過合適的表現形式，放置在最重要的位置。
4. 頁面色彩：六個務必:網站務必要有個主題色，務必注意冷暖色調的搭配，務必注意主色調、輔助色的使用數量，務必保持網站整體形象相統一，務必注意漸變色的使用，務必恰當搭配色彩的明度和亮度。
5. 頁面大小：最好將網站設置成為自適應的頁面，如果無法修正，最好調整為1024*768，照顧到800*600用戶，頁面主要內容可以偏左設置。此外，還有一些異性的網站，務必要考慮到核心用戶群的使用習慣，可以主要從年齡上來判斷，30歲以上用戶，還是800*600居多。
6. 動畫效果：首先注意動畫的放置位置，其次是呈現方式，再次是加載速度，最后也是最關鍵的是內容的表現形式。動畫效果會在第一時間吸引用戶的關注，但關注不是目的，要讓用戶有興趣接受動畫所傳達的內容。在動畫表現形式設計時，還要注意與主畫面相協調，動畫效果節奏適中，不干擾主畫面瀏覽。
8. 平面廣告設計公司圖片展示：首要的還是圖片欄目的頁面位置，要與整體網站比例協調，符合一般用戶的瀏覽習慣；其次是圖片的展示形式，現在有很多flash的圖片代碼，還有lightbox的js也是不錯的選擇，再次是圖片內容要清晰、不變形，圖片選擇上也要符合網站的總體風格，不要太突兀。
9. 圖標使用：首要考慮與頁面整體風格統一，其次是簡潔、明了、易懂、準確，再次可以嘗試使用一些3D效果圖標。
10. 廣告位的設計：廣告設計最關鍵是要符合用戶對網站廣告的預期，不要讓用戶對廣告產生反感。有很多是網民早已認可的廣告位置和形式，例如頁面上方的banner條，頁面兩邊的對聯形式，頁面右下方的文字廣告等，這些位置都是網民們默認的廣告位，千萬不要沖擊網民的瀏覽習慣，避免干擾視線，除非你的廣告創意絕對吸引人，否則結果往往是立刻關閉廣告和網站。
11. 背景音樂：除非是活動推廣或者是形象推廣類主題網站，搞點刺激性的音樂提提神，否則千萬不要設置背景音樂，一個字，煩！就算設置背景音樂，最好將開關按鈕及音量控制放在顯要位置，免的網民因為找不到控制按鈕而立刻關掉頁面。
 
三、瀏覽體驗的8個關鍵體驗點、廣告策劃案例
瀏覽體驗：呈現給用戶瀏覽上的體驗，強調吸引性。
1. 頁面導航：網站導航如同樓房的地基，是整個網站基礎和框架，一切內容和服務都是從導航中延伸出去。頁面導航的設計分為兩個層次，一是形式層：體現在導航位置、表現形式（文字、圖片、flash等）等方面，二是內容層，頁面導航也是對整個網站內容框架的分類和高度概括。形式層的設計，建議參照一下韓國網站的設計風格，動感、簡潔、清晰。至于內容層，就因站而異了，分類條理最關鍵。但欄目名稱盡量簡短，欄目層次也不宜過多，兩層比較合適，但也要以內容為中心。
1.   頁面速度： web2.0，網站中增加了越來越多的視頻、動畫元素，對網站速度的要求也
越發苛刻。回想一下，這么多視頻分享網站中，為什么很多人選擇優酷？就一個速度。此外，大一點的網站再考慮一下南北互通，或者教育網的對接問題，此外選擇一家穩定的服務器托管商也至關重要。
2. 頁面容量：主要指首頁的頁面容量，除非是資訊類網站，否則網站首頁內容最好不要
超過兩屏，最好不要讓用戶再滾動鼠標就可以瀏覽到整個頁面。再就是頁面設計要考慮到文字和圖片的搭配，還有不同字號、字體、顏色的搭配，還有網站留白的設計，以免頁面造成視覺抵制，心理學家做過實驗，人眼每秒攝入的有效字符最多只有20個，要是頁面全是細密的文字，效果就可想而知了。
3.  頁面結構： 結構就是放置內容的框架，網站的頁面結構其實是有章可循的，尤其是現在
大家見的網站越來越多，自然也形成一些列默認的模式。簡單分網站主要也包括“同”字型、“司”字型、“三”字型、“F”型等頁面布局，具體隨后會撰文詳述，這里要強調的是頁面結構的創新也要基于一定的規律，千萬不要打破用戶的瀏覽預期。
4.  內容安排： 首先是突出重點內容，大標題，大圖片塑造視覺沖擊，這也是借用報紙的操
作手法，其次是內容協調，每一個欄目應確保足夠的信息量，避免欄目無內容情況出現；再次是內容形式，兼顧視頻、圖片、文字的比例和頁面協調。
5. 內容更新： 主要包括內容來源、更新頻率、更新數量、內容質量三個方面。Web2.0網站更多強調如何調動用戶的積極性，內容更新已經不僅僅是對編輯的考量，也是對網站用戶價值的衡量，對于內容質量，主要是從原創、轉載、內容本身價值等方面權衡。
6.內容形式： 現在有個立體化新聞的概念，視頻、圖片、文字、評論都在一個頁面中展示，而且再加上網民評論的即時更新，表現形式更生動。此外，對于文字部分，字體大小最好設置可調選項，對重點內容進行標注，對關鍵詞設置鏈接（seo），如果沒有廣告的考慮，最好不要設置多頁瀏覽，很影響閱讀體驗。
7. 內容呈現方式：更多的是細節的內容，包括新文章的標記、文章導讀、相關內容的推薦、還有網友推薦、打印頁面、E-MAIL發送給好友、復制網址等，現在web2.0流行的DIG功能，加入些鮮活的互動元素。
 8、路徑記錄：記錄用戶的瀏覽路徑，方便用戶隨時返回和查找，此外對一些重點欄目和頁面可以設置快速鏈接或者設置頁面底部導航，為用戶提供明確的快速入口。

四、信任體驗的12個關鍵體驗點
信任體驗：呈現給用戶的信任體驗，重在細節斟酌，強調穩定性。
1、友情鏈接：對于新興網站而言，用戶對網站信任的判斷不僅建立在對網站設計的和功能體驗的基礎上，而且還有一個對同類或者其他相關網站的評估上。友情鏈接的價值不僅在于SEO上，也是一個網站用戶定位的重要體現，如果網站鏈接的都是不知名的小網站，用戶對它的評級也不會太高。首頁友情鏈接的設置不宜過多，更多的鏈接可以放置在一個單獨的友情連接頁面中，要特別注重友情連接的質量，哪怕是做些單向鏈接，也要顯示自己的實力。
2、底部信息：網站底部信息內容是網站中每個頁面都共同的內容，底部信息為網民提供了很多建立信任體驗的內容，例如網站的建立時間、是否備案、是否經營性網站、是否有網警標示、隱私聲明、網站的歸屬關系（如：xx旗下的網站）這部分雖然是細節的內容，但又是最為標準化和普遍的內容，最好留心設計。
3、關于我們：這是一個用戶了解網站背景的最直接途徑，對很多有趣的web2.0網站，對于很多喜歡刨根問底的網民，關于我們還是很重要的一個欄目，因為這是網站站長必須的一個原創內容，對關于我們欄目和內容的設計和安排，往往會體現了站長的做事態度和風格。
4、聯系方式：并不是有事找網站的時候才會關注網站的聯系方式，一般情況下，聯系方式在網站中出現的頻率也是網站自信程度的一種側面體現。聯系方式不一定非要是詳細的電話傳真，通訊地址，哪怕一個郵箱，或者是一個聯系人的姓名。對于初創網站而言，翔實或者高曝光率的聯系方式，比較容易給網民建立踏實、信任的額感覺，總之放心、負責、能找到人。如果有實力，整個400電話也成，現在400電話已經是白菜價了，但公信力還不錯，而且方便易記。
5、幫助中心：對于web2.0新興網站，尤其是功能型網站而言，最好是有一個翔實的幫助中心，或者FAQ欄目，千萬別相當然的認為網民對新東西一看就會，新東西總會有出問題的時候，再加上國內網民的背景和層次差距較大，幫助中心還是必須的。此外，幫助中心的功能和內容豐富程度也是網站客戶服務意識的一種體現，值得重視。
6、網站備案：最基本也是必須的一道程序，說啥先把網站備案搞定，至少要確認一下網站的合法地位，如果有條件和需要，最好是申請一個B字頭的經營性網站備案，此外如果涉及到視頻、新聞還要到相關部門申請一下其他備案。備案這東西，看似小事，但關鍵時刻對網站就會有致命的影響，別的不說，看看這兩個月56.com和vodone.com的差別就知道了。
7、內容格式：內容的規范程度也是網站建立信任體驗的重要方面，主要體現在資訊類內容標準化展現上。一方面每條信息是否包含了來源、作者、編輯、發布時間、還有點擊量和評論。全面的輔助信息是網站質量的主要參照，因為現在能把這幾點完全列出來的網站越來越少了，對于點擊量也可以都設置一定的初始值，但最好還是帶著。另一方面就是個性化細節，例如設置頁面顏色、設置字體大小、點擊直接發送到郵箱，復制頁面地址等。
8、內容訂閱：無論是用feedsky、rss、還是傳統的郵件新聞列表，內容訂閱的設置不僅僅是要提高用戶的黏度，推動用戶再次訪問，而且也是大型網站和正規網站的重要標示，只有那些有實力和細心的網站才會提供定期的資訊服務，其實這部分在功能上已經很晚上了，網絡中也有很多工具和服務商，只需站長每天（每周）梳理一下重要資訊即可。此外這也是盤活注冊用戶的重要一環。
9、網站地圖：對web2.0的新站，無論網站規模大小，一定要做個網站地圖，一方面搜索引擎容易抓取到網站信息，而且網民使用起來也會很快了解到整站架構，又是細節，但很重要。
10、加入收藏：加入收藏和設為首頁是傳統網站設計中必須的環節，現在而言設為首頁的意義幾乎沒有了，但加入收藏還相當重要的，一般是在網站的右上方，最好將加入收藏的位置放在最前面，用醒目的顏色標注。
11、用戶登錄：這也算是互動體驗一部分，用戶導向是web2.0設計的一個核心理念，只有用戶登陸才能享有更多的個性化服務，用戶登錄就無處不在，隨處可見，而且還要設計的方便合理，最好不要打開新的登陸頁面，具體情況各異。
12、論壇人氣：無論網站做的再花哨，如果有論壇這個欄目，打開論壇一看，沒幾個在線用戶，沒幾條熱點內容，很容易直接就把網站否定掉了，因此，論壇千萬要注意，要么不做，開設了就得注意人氣的經驗，哪怕自己每天狂灌水，也得先把網站人氣拖起來。
 
五、互動體驗的10個關鍵體驗點
互動體驗：呈現給用戶操作上的體驗，重在路徑設計，強調易用性。
1. 會員申請：會員申請務必要貫穿在網站的每個頁面，將隨機性用戶轉變成注冊用戶是提高網站流量和用戶黏度的重要一環，會員申請的按鈕或者位置最好設計的醒目一些。此外，會員功能的核心是權限控制，網站必然要有一些只有注冊用戶或者是高級用戶才能瀏覽到的內容，但還要保證展現給非注冊用戶的信息也具有一定的吸引力，否則，網民怎么會有動力去注冊呢？捫心自問，為什么值得注冊？用什么吸引注冊用戶？用什么穩定注冊用戶的定期訪問？
2 會員注冊：web2.0網站最好設計多級注冊方式，只填寫注冊名、郵箱、密碼等就可以完成第一層次注冊，讓后再進一步吸引用戶補充內容，第一層主次，務必要流程清晰、簡潔，為用戶節省時間。其實更為關鍵的還在于后面，如何吸引用戶補充全面的信息？這里就有一個web2.0的理念，“你分享出去的內容越多，得到的權利和尊重也會越多”，要讓網民明確他們補充信息的價值在哪？此外，還要注意提示用戶信息的完整程度。
3. 表單填寫：表單填寫有多種方式，但最好不要將所有項目分為兩個階段，必填項在第一頁，或者提供明顯的標示，千萬不要將所有項目全部列出來，用戶一定會嚇壞的。Web2.0就要人性化一點，考慮一下用戶的接受程度，簡單一點還是沒錯的。提交成功后，感謝提示頁面務必要精心設計，尤為注意應該將注冊后的用戶引向何處？是回首頁？還是個人界面？還是前一個瀏覽頁面？感謝頁面在內容和形式上最好設計的有個性一點。
4. 點擊提示：點擊瀏覽過的信息顏色需要顯示為不同的顏色，以區分于未閱讀內容，避免重復閱讀。對于圖片，最好設置圖片標注，鼠標滾動到圖片時能顯示圖片標題。
5. 錯誤提示：設置錯誤提示頁面，對錯誤頁面以合適的引導。無論是什么原因，網民只要在網站上遇到了錯誤頁面肯定會非常不爽，甚至會直接關閉網站，要充分考慮到此時用戶的訪問心理，設置一點真誠的解釋說明，最好將網民重新引向網站，或者可以設置個報錯的反饋，細心處之。
6. 在線問答：在線問答有太多中形式，從用戶的使用預期出發，既然是在線問答，消費者希望得到最快的答復，但現在的情況是，往往網站提供了很多方式的問答渠道，但往往沒有人回應，畢竟工作人員不能24小時守候啊，建議搞個小I機器人訓練一下，頂個美女客服了。還有一種誤區，認為在線問答就是解答問題，其實還有一個重要作用是收集信息，還要設置在線問答流程和話術時，務必要注意到如何了解更多的客戶信息，或者使用體會以便于后踢調整，還要定期對在線問答出現的問題進行匯總分析。
7. 在線搜索：首先是搜索條位置，最常見的位置是在右上方，資訊類網站一般中上方顯要位置；其次是搜索分類，例如按作者，按標題等設置最好設計為下拉菜單，默認為全文檢索；再次是搜索結果的呈現方式。呈現方式有很多細節的地方，包括排列的標準，方式，關鍵詞顏色區分，出現的數量。此外還要注意高級檢索和檢索選項的設計。
8. 頁面效果：web2.0在技術層的一大改進就是提供了很多又酷又炫的新技術，尤其是在頁面層的應用最為明顯，例如ajex，lightbox js等，對建議站長多關注一下流行的java代碼，選擇一些合適的潮流型技術應用一下，新、奇、炫，與時俱進啊！
9. 新開窗口：現在用maxthon、firefox等的多線程瀏覽器的網民越來越多，建議web2.0網站的設計最好多采用，新窗口打開，方便用戶返回和查找。
10. 路徑設計：說到體驗，最直接的就是用戶在網站上產生的有效點擊，每一次點擊也意味著一個新體驗的開始，而在眾多點擊之間，路徑的設計和記錄也體現了web2.0個性化服務的精神。每個網民的訪問習慣和瀏覽習慣都有所不同，第一要設計最直接有效的瀏覽路徑；第二要記錄網民的瀏覽路徑，便于隨時返回；第三，要試圖尋找與網民瀏覽路徑的匹配，這一點集中可以體現在亞馬遜的圖書瀏覽和購買流程上，大家自己來關注吧。

看看其他網站是怎么描述網頁設計的基本知識：包括什么是網站定位

一、確定網站主題

網站主題就是你建立的網站所要包含的主要內容，一個網站必須要有一個明確的主題。特別是對于個人網站，你不可能像綜合網站那樣做得內容大而全，包羅萬象。你沒有這個能力，也沒這個精力，所以必須要找準一個自己最感興趣內容，做深、做透，辦出自己的特色，這樣才能給用戶留下深刻的印象。網站的主題無定則，只要是你感興趣的，任何內容都可以，但主題要鮮明，在你的主題范圍內內容做到大而全、精而深。

二、搜集材料

明確了網站的主題以后，你就要圍繞主題開始搜集材料了。常言道：“巧婦難為無米之炊”。要想讓自己的網站有血有肉，能夠吸引住用戶，你就要盡量搜集材料，搜集得材料越多，以后制作網站就越容易。材料既可以從圖書、報紙、光盤、多媒體上得來，也可以從互聯網上搜集，然后把搜集的材料去粗取精，去偽存真，作為自己制作網頁的素材。

三、規劃網站

一個網站設計得成功與否，很大程度上決定于設計者的規劃水平，規劃網站就像設計師設計大樓一樣，圖紙設計好了，才能建成一座漂亮的樓房。網站規劃包含的內容很多，如網站的結構、欄目的設置、網站的風格、顏色搭配、版面布局、文字圖片的運用等，你只有在制作網頁之前把這些方面都考慮到了，才能在制作時駕輕就熟，胸有成竹。也只有如此制作出來的網頁才能有個性、有特色，具有吸引力。如何規劃網站的每一項具體內容，我們在下面會有詳細介紹。 四、選擇合適的制作工具

盡管選擇什么樣的工具并不會影響你設計網頁的好壞，但是一款功能強大、使用簡單的軟件往往可以起到事半功倍的效果。網頁制作涉及的工具比較多，首先就是網頁制作工具了，目前大多數網民選用的都是所見即所得的編輯工具，這其中的優秀者當然是Dreamweaver和Frontpage了，如果是初學者，Frontpage2000是首選。除此之外，還有圖片編輯工具，如Photoshop、Photoimpact等；動畫制作工具，如Flash、Cool 3d、Gif Animator等；還有網頁特效工具，如有聲有色等，網上有許多這方面的軟件，你可以根據需要靈活運用。

五、制作網頁

材料有了，工具也選好了，下面就需要按照規劃一步步地把自己的想法變成現實了，這是一個復雜而細致的過程，一定要按照先大后小、先簡單后復雜來進行制作。所謂先大后小，就是說在制作網頁時，先把大的結構設計好，然后再逐步完善小的結構設計。所謂先簡單后復雜，就是先設計出簡單的內容，然后再設計復雜的內容，以便出現問題時好修改。在制作網頁時要多靈活運用模板，這樣可以大大提高制作效率。

六、上傳測試

網頁制作完畢，最后要發布到Web服務器上，才能夠讓全世界的朋友觀看，現在上傳的工具有很多，有些網頁制作工具本身就帶有FTP功能，利用這些FTP工具，你可以很方便地把網站發布到自己申請的主頁存放服務器上。網站上傳以后，你要在瀏覽器中打開自己的網站，逐頁逐個鏈接的進行測試，發現問題，及時修改，然后再上傳測試。全部測試完畢就可以把你的網址告訴給朋友，讓他們來瀏覽。

七、推廣宣傳

網頁做好之后，還要不斷地進行宣傳，這樣才能讓更多的朋友認識它，提高網站的訪問率和知名度。推廣的方法有很多，例如到搜索引擎上注冊、與別的網站交換鏈接、加入廣告鏈等。

八、維護更新

網站要注意經常維護更新內容，保持內容的新鮮，不要一做好就放在那兒不變了，只有不斷地給它補充新的內容，才能夠吸引住瀏覽者
★要想學做網頁，首先得了解制作網頁的工具。

制作網頁主要有以下一些工具

Frontpage：office自帶的一個工具，操作簡單，實用，學起來比較輕松，功能不咋地，我不太喜歡。

Dreamweaver：這是網頁三劍客之一，專門制作網頁的工具，可以自動將網頁生成代碼，是普通網頁制作者的首選工具，界面簡單，實用功能比較強大。建議初學者選用。

另外一個工具就是代碼編輯工具，例如寫字本、EditPlus等，這些工具主要編輯asp等動態網頁。

此外還有一些網絡編程工具，javascript、java編輯器等。

網頁制作也是一個比較吃香的行業，要真正做一個好的網站，還必須有良好的設計功底。所以還得學很多邊緣性的軟件，例如photoshop、flash等。

大型的網站往往還需要數據庫的支持，所以還得懂數據庫。sql、甲骨文等。

總之，掌握好網頁制作，能獨立完成一個網站的制作工作，那就不要考慮吃飯問題。隨便混就好了！

祝你成功。
★你可以結合 Dreamwaver 和 Photoshop 來制作網頁。

建議使用網頁制作三劍客Dreamweawer+Firework+Flash 或使用Frontpage