網(wǎng)站設計制作規(guī)范

我們一貫堅持，網(wǎng)站是一個工具，是給瀏覽者使用的，網(wǎng)站的一切都必須圍繞瀏覽者來展開，一切以用戶為中心。只有瀏覽者覺得好，用得好，體驗得好，那才是一個好網(wǎng)站。一個運營型的行業(yè)門戶網(wǎng)站，我們會對四個方面進行用戶體驗的策劃及設計：
一、瀏覽體驗：即網(wǎng)站的欄目和內容的體驗，包括：頁面導航、頁面速度、頁面容量、頁面結構、內容安排、內容更新、內容形式、內容呈現(xiàn)方式和路徑記錄這9個方面；
二、視覺體驗：即網(wǎng)站給用戶在視覺上的體驗，包括：整體風格、網(wǎng)站LOGO、頁面布局、頁面色彩、頁面大小、動畫效果、圖片展示、圖標使用、廣告設置和聲音設置這10個方面；
三、互動體驗：即網(wǎng)站各功能給用戶操作上的體驗，包括：會員申請、會員注冊、表單填寫、點擊提示、錯誤提示、在線問答、在線搜索、頁面效果、新開窗口和路徑設計這10個方面；
四、信任體驗：怎么通過細節(jié)提升用戶的信任體驗，包括：友情鏈接、底部信息、關于我們、聯(lián)系方式、幫助中心、網(wǎng)站備案、內容格式、內容訂閱、網(wǎng)站地圖、加入收藏、用戶登錄和論壇人氣這12個細節(jié)；
下面，我們來具體說明一下，我們在建設網(wǎng)站時，對這四類體驗的理解和制作的規(guī)范。
一、關于“信任體驗”
信任體驗，重在細節(jié)斟酌，強調穩(wěn)定性。
1、底部信息：網(wǎng)站底部信息內容是網(wǎng)站中每個頁面都共同的內容，底部信息為瀏覽者提供了很多建立信任體驗的內容，例如網(wǎng)站的建立時間、是否備案、是否經(jīng)營性網(wǎng)站、是否有網(wǎng)警標示、隱私聲明、網(wǎng)站的歸屬關系（如：xx旗下的網(wǎng)站）這部分是細節(jié)的內容，容易忽視，但它們又是最為標準化和普遍的內容，需要留心設計。
2、友情鏈接：用戶對網(wǎng)站信任的判斷不僅建立在對網(wǎng)站設計的和功能體驗的基礎上，而且還有一個對同類或者其他相關網(wǎng)站的評估上。友情鏈接的價值不僅在于搜索優(yōu)化上，也是一個網(wǎng)站用戶定位的重要體現(xiàn)，如果網(wǎng)站鏈接的都是不知名的小網(wǎng)站，用戶對它的評級也不會太高。在首頁上做友情鏈接時，數(shù)量不宜過多，要特別注重這些鏈接的分量，哪怕是做些單向鏈接（知名行業(yè)網(wǎng)站、行業(yè)協(xié)會網(wǎng)站、相關政府類網(wǎng)站），也要顯示自己的實力。
3、聯(lián)系方式：全面、詳細的聯(lián)系方式及聯(lián)系人，比較容易給瀏覽者建立踏實、信任的感覺，讓人覺得放心、有問題能夠找到人。如果網(wǎng)站的最終目的是為了客戶打電話過來咨詢，那么，需要將聯(lián)系方式表現(xiàn)得更加明顯，更加容易記住。
4、關于我們：這是一個用戶了解網(wǎng)站背景最直接途徑。也是網(wǎng)站經(jīng)營者展示自己做事態(tài)度和風格的一個途徑。網(wǎng)站經(jīng)營者必須原創(chuàng)一個自我介紹的內容，并對頁面內容做特色規(guī)劃和設計。
5、網(wǎng)站備案：備案是最基本也是必須的一道程序，有了這個，才能證明我們網(wǎng)站是的合法的。網(wǎng)站的備案眾多，不同的網(wǎng)站，需要的備案也各不相同，經(jīng)營者需要一一查看并進行申請，越完善的備案，越能杜絕意外的發(fā)生；
6、幫助中心：網(wǎng)站技術日新月異，而瀏覽者對網(wǎng)站的了解程度不同，所以設置一個內容翔實的幫助中心，或者FAQ欄目是非常必要的。千萬別想當然的認為瀏覽者對新東西一看就會，新東西總會有出問題的時候。此外，幫助中心的功能和內容豐富程度也是網(wǎng)站客戶服務意識的一種體現(xiàn)，值得重視。
7、內容訂閱：無論是用Feedsky、Rss、還是傳統(tǒng)的郵件新聞列表，設置內容訂閱，不僅僅是為了提高用戶的黏度，推動用戶再次訪問，而且也是大型網(wǎng)站和正規(guī)網(wǎng)站的重要標示，只有那些有實力和細心的網(wǎng)站才會提供定期的資訊服務；此外，通過訂閱功能，也能活躍一定的注冊用戶。
8、內容格式：內容的規(guī)范程度也是網(wǎng)站建立信任體驗的重要方面，主要體現(xiàn)在資訊類內容標準化展現(xiàn)上。一方面每條信息是否包含了來源、作者、編輯、發(fā)布時間、還有點擊量和評論。全面的輔助信息能提高該信息的可信度和權威性，進而提升網(wǎng)站的可信度。現(xiàn)在會把這幾點完全列出來的網(wǎng)站越來越少了，原因很多，但建議重視并完善；對于點擊量，設置一些數(shù)值，營造氣氛；熱門的資訊，可以用些馬甲評論一下。另一方面就是個性化細節(jié)，例如設置頁面顏色、設置字體大小、點擊直接發(fā)送到郵箱，復制頁面地址等，這些也是影響用戶體驗的重要方面。
9、論壇人氣：網(wǎng)站如果有論壇，那么一定要營造人氣很旺的氛圍，多掛幾個在線用戶，設置多些熱點內容，不然，瀏覽者很容易直接就把整個網(wǎng)站否定掉了。因此，要么不做，做了，就要將人氣帶上去，哪怕用“馬甲”每天狂灌水。
10、網(wǎng)站地圖：對web2.0的網(wǎng)站，無論網(wǎng)站規(guī)模大小，一定要做個網(wǎng)站地圖，一方面搜索引擎容易抓取到網(wǎng)站信息，而且瀏覽者使用起來也會很快了解到整站架構，又是細節(jié)，但很重要。
11、加入收藏：“加入收藏”和“設為首頁”是傳統(tǒng)網(wǎng)站設計中必有的功能，但現(xiàn)在，“設為首頁”的意義基本沒有了，而加入收藏還相當重要的，一般是在網(wǎng)站的右上方，好將加入收藏的位置放在最前面，用醒目的顏色標注。
二、關于“互動體驗”
互動體驗，重在路徑設計，強調易用性。
1、會員注冊：web2.0網(wǎng)站好設計多級注冊方式，只填寫注冊名、郵箱、密碼等就可以完成第一層次注冊，讓后再進一步吸引用戶補充內容，第一層主次，務必要流程清晰、簡潔，為用戶節(jié)省時間。更為關鍵的還在于后面，如何吸引用戶補充全面的信息？那就要讓瀏覽者明確他們補充信息的價值在哪。此外，還要注意提示用戶信息的完整程度。
2、會員申請：會員申請務必要貫穿在網(wǎng)站的每個頁面，將隨機性用戶轉變成注冊用戶是提高網(wǎng)站流量和用戶黏度的重要一環(huán)，會員申請的按鈕或者位置好設計的醒目一些。此外，會員功能的核心是權限控制，網(wǎng)站必然要有一些只有注冊用戶或者是高級用戶才能瀏覽到的內容，但還要保證展現(xiàn)給非注冊用戶的信息也具有一定的吸引力，否則，瀏覽者怎么會有動力去注冊呢？在建設之前，我們就要考慮清楚：用戶為什么要注冊？用什么吸引用戶注冊？用什么穩(wěn)定注冊用戶的定期訪問？
3、點擊提示：點擊瀏覽過的信息顏色需要顯示為不同的顏色，以區(qū)分于未閱讀內容，避免重復閱讀。對于圖片，好設置圖片標注，鼠標滾動到圖片時能顯示圖片標題。
4、表單填寫：表單填寫有多種方式，選項也可以有很多，但要將必填的選項標明清楚，而且分階段（或分頁）顯示，避免讓用戶覺得填寫是非常麻煩的事情。提交成功后，感謝提示頁面務必要精心設計，尤其應該說明，注冊后的用戶接下來要做什么，可以做什么？感謝頁面在內容和形式上要設置得個性化一些。
5、在線問答：在線問答目前有很多種形式，根據(jù)需要選擇，一般建議配合客服中心的“常見問題”“F＆Q”一起，因為很多時候，我們不能做到24小時在線回答提問，可以引導客戶先自己找答案，如果找不到答案，再聯(lián)系或者留言（不在線的話）。在線問答除了解答疑問，還可以擔當一個重要的角色：收集各種信息。這需要設置在線問答流程和話術，增加一些收集信息的問題，比如網(wǎng)站評價、滿意度詢問、改進建議等。對于用戶提出的新問題，要進行匯總分析，并將其補充到“常見問題”或“F＆Q”中。
6、錯誤提示：一定要做一個“錯誤提示頁面”，對發(fā)生錯誤的頁面給予合適的引導。因為瀏覽者對于在網(wǎng)站上遇到了錯誤頁面肯定會非常不爽，甚至會直接關閉網(wǎng)站。設計這個頁面時，要充分考慮到用戶當時的訪問心理，要有真誠的解釋說明，合適的圖片，最重要的是，給出解決方案，最后，將瀏覽者重新引向網(wǎng)站。
7、頁面效果：web2.0在技術層的特色是很多最新的技術能方便快捷地整合進來，并能很快應用到網(wǎng)站上，尤其是在頁面層的應用最為明顯，例如ajex，lightbox js等，我們互王結合本身就是“技術研發(fā)中心”的優(yōu)勢，時刻關注這些技術的應用，并不斷開發(fā)一些新的，合適的功能，應用到網(wǎng)站上，始終帶領潮流，緊跟潮流；
8、在線搜索：首先是搜索條位置的設置，最常見的位置是在右上方，資訊類網(wǎng)站一般中上方顯要位置；其次是搜索操作的設置，提供精確搜索和模糊搜索；精確搜索，是指先選擇信息的分類，例如信息欄目、作者或者信息標題等（采用下拉菜單形式），然后輸入關鍵字；模糊搜索就是直接輸入關鍵字進行搜索；默認為全文檢索；最后還要考慮搜索結果的呈現(xiàn)方式；呈現(xiàn)方式有很多細節(jié)的地方，包括搜索結果數(shù)量、信息排列的標準及方式（標題、標題加簡要內容）、關鍵詞顏色等。
9、路徑設計：說到體驗，最直接的就是用戶在網(wǎng)站上產(chǎn)生的有效點擊，每一次點擊也意味著一個新體驗的開始，而在眾多點擊之間，路徑的設計和記錄也體現(xiàn)了web2.0個性化服務的精神。每個網(wǎng)民的訪問習慣和瀏覽習慣都有所不同，第一要設計最直接有效的瀏覽路徑；第二要記錄網(wǎng)民的瀏覽路徑，便于隨時返回；第三，要試圖尋找與網(wǎng)民瀏覽路徑的匹配。
10、新開窗口：現(xiàn)在用maxthon、firefox、TT等的多線程瀏覽器的瀏覽者越來越多，所以，在進入最終頁面瀏覽時，多采用新窗口打開，方便用戶瀏覽信息，二期節(jié)省返回時間和再次查找的時間。
三、關于“視覺體驗”
視覺體驗，重在UI設計，強調舒適性。
1、網(wǎng)站LOGO：LOGO的設計水平直接體現(xiàn)了網(wǎng)站建設者的審美水平。LOGO是網(wǎng)站整體風格的主導，也是網(wǎng)站對外傳播的形象標示，對于明確的LOGO，設計師會仔細斟酌，將LOGO的特性融入到網(wǎng)站的風格中；如果沒有LOGO，需要重新設計，那么設計師會根據(jù)網(wǎng)站的定位和目標，結合行業(yè)的特色等，進行設計；一般簡潔得體的LOGO比較受瀏覽者認同。
2、整體風格：風格是指網(wǎng)站給瀏覽者的第一印象，主要體現(xiàn)在兩方面，一是網(wǎng)站質量的權衡，瀏覽者第一次看到網(wǎng)站后，首先會根據(jù)視覺的感受對網(wǎng)站有個上、中、下的心里評判，二是網(wǎng)站類型的歸屬，例如是行業(yè)資訊、品牌宣傳、網(wǎng)上貿(mào)易等。因而網(wǎng)站在設計之前，我們的策劃會先明確目標客戶群體，分析目標客戶的審美預期和審美喜好，確定網(wǎng)站的類型歸屬，然后，設計師才有針對性地進行設計；
3、頁面色彩：六個規(guī)范:網(wǎng)站必有一個主題色；協(xié)調頁面冷暖色調的搭配，不單一色調；嚴格把握主色調、輔助色的使用數(shù)量，不花俏；保持網(wǎng)站整體形象相統(tǒng)一；使用漸變色，營造色彩層次感（從上到下，從左到右……）；調節(jié)色彩的明度和亮度；
4、頁面布局：布局首先是要突出重點，主次分明，圖文并茂，聲畫全面。網(wǎng)站的有效空間是有限的，網(wǎng)站的第一屏畫面是我們設計規(guī)劃的重點，在頁面布局時還要考慮與網(wǎng)站營銷目的的結合，將最能吸引用戶的內容，通過合適的表現(xiàn)形式，放置在最重要的位置。
5、動畫效果：首先考慮的是動畫的放置位置，然后是呈現(xiàn)方式，再次是加載速度，最后也是最關鍵的是內容的表現(xiàn)形式。動畫效果是為了在第一時間吸引用戶的關注，但關注不是最終目的，而是要讓用戶接受動畫所傳達的內容。所以，在動畫表現(xiàn)形式及內容設計時，我們注重內容與動畫節(jié)奏的協(xié)調，以內容為中心制作動畫效果。
6、頁面大?。褐饕歉鶕?jù)核心用戶群來設置，這也是為什么要做用戶調查的原因之一，不同的用戶使用習慣不同，比如，據(jù)調查，30歲以上用戶，還是用800*600的居多，如果網(wǎng)站的主要用戶群是這類人，那么就必需做調整。一般情況下，大小為1024*768，并設置成為自動適應的頁面，如果無法修正，頁面主要內容以偏左設置，這樣那些使用800*600的用戶，也方便一些。
7、圖標使用：圖標的設計一定要與頁面的整體風格統(tǒng)一，其次是簡潔、明了、易懂、準確，最后可以嘗試增加一些動態(tài)、3D效果，讓圖標更有動感。
8、圖片展示：首先我們考慮的是放置圖片的位置，考慮與整體網(wǎng)站比例協(xié)調，是否符合一般用戶的瀏覽習慣；其次是選擇圖片的展示形式，現(xiàn)在圖片的展現(xiàn)形式非常多，可以采用flash、Lightbox效果等；最后還要考慮使用的圖片的大小，縮略圖的比例，是否符合網(wǎng)站的風格、是否清晰等。
9、聲音設置：網(wǎng)站的聲音一般分為兩種，一是背景音樂，屬于自動播放的聲音，不斷循環(huán)；二是點擊音樂，需要鼠標移動或點擊到特定的地方（多數(shù)用于導航）才會有聲音出現(xiàn)；對于背景音樂，除非是形象推廣類的主題網(wǎng)站，或者某些活動推廣可以設置，一般都不建議設置，而且要設置獨特的音樂而不是流行的音樂。網(wǎng)站有設置背景音樂時，還要將開關按鈕及音量控制放在顯要位置，免的瀏覽者因為厭煩，又找不到控制按鈕而立刻關掉頁面。點擊音樂，給人的感覺是靈動、活潑、時尚，我們也要根據(jù)實際的情況選擇是否采用，采用什么聲音，在哪里采用比較合適；
10、廣告設置：首先還是要考慮廣告位的選擇和內容的展現(xiàn)方式。最起碼不能讓廣告影響了瀏覽，不能讓用戶對廣告產(chǎn)生反感。有些廣告位置及表現(xiàn)形式是一般瀏覽者都認可的，例如頁面中上方的banner條，頁面兩邊的對聯(lián)廣告，頁面右下方的文字廣告等。
四、關于“瀏覽體驗”
瀏覽體驗，重在合理規(guī)劃，強調吸引性。
1、頁面速度：視頻、動畫、圖片的大量應用，對網(wǎng)站的瀏覽速度也影響巨大。而網(wǎng)頁的瀏覽速度，已經(jīng)決定了瀏覽者對這個網(wǎng)站的滿意度和再次瀏覽及幾率。所以，除了選擇一家穩(wěn)定的服務器托管商外，還要考慮以后發(fā)展，比如在瀏覽量不斷增加后，怎么應對高峰期，怎么南北互通等；
2、頁面導航：網(wǎng)站導航如同樓房的地基，是整個網(wǎng)站基礎和框架，一切內容和服務都是從導航中延伸出去。頁面導航的有兩個層次，一是形式層：即導航位置、表現(xiàn)形式（文字、圖片、flash等）等，二是內容層：即內容的分類和概括。所以，在策劃及設計導航時，我們強調動感、簡潔及清晰的表現(xiàn)形式；并會結合客戶行業(yè)的特色，規(guī)范、條理地分類各種信息；欄目名稱盡量簡短、明晰，欄目層次也盡量少，以內容為中心；
3、頁面結構：頁面結構是指放置頁面內容的框架。現(xiàn)在的網(wǎng)站越來越多，網(wǎng)站的頁面結構也基本形成了一些瀏覽者慣用、熟悉的模式。主要是“同”字型、“司”字型、“三”字型、“F”型等。我們在設計時會遵循這些基本模式，而且會在這些基礎上做創(chuàng)意創(chuàng)新，但保證不打破用戶的瀏覽預期。
4、頁面容量：主要指首頁的頁面容量，一般的企業(yè)網(wǎng)站，首頁內容不建議超過兩屏，讓用戶不用滾動鼠標就可以瀏覽到整個頁面。頁面的設計要考慮：1、頁面文字和圖片的搭配；2、不同字號、字體、顏色的搭配；3、網(wǎng)站內容與空白的搭配，避免頁面造成視覺抵制（心理學家做過實驗，人眼每秒攝入的有效字符最多只有20個，要是頁面全是細密的文字，效果就可想而知了）；
5、內容更新：主要從內容來源、更新頻率、更新數(shù)量、內容質量這幾個方面來考慮。我們更多強調如何調動用戶的積極性，讓用戶參與信息的更新，共享自己的信息；內容更新已經(jīng)不僅僅是對網(wǎng)站編輯者的考量，也是對網(wǎng)站用戶價值的衡量；頻率和數(shù)量根據(jù)實際情況來規(guī)劃；對于內容質量，主要是從原創(chuàng)、轉載、內容本身價值等方面權衡；
6、內容安排：首先突出重點內容，用大標題，大圖片塑造視覺沖擊；其次是協(xié)調內容，每一個欄目應確保足夠的信息量，避免欄目無內容情況出現(xiàn)；然后是內容形式，兼顧視頻、圖片、文字的比例和頁面協(xié)調。
7、路徑記錄：記錄用戶的瀏覽路徑，訪問記錄等，方便用戶隨時返回和查找；對一些重點欄目和頁面可以設置快速鏈接或者設置頁面底部導航，為用戶提供明確的快速入口。
8、內容形式：將信息立體化，將視頻、圖片、文字、評論都在一個頁面中展示，而且評論即時更新；對于文字部分，字體大小可以根據(jù)需要設置（一般是大中小三個選擇），可以對信息內容進行“關鍵字”標注，給“關鍵詞”設置鏈接等；信息頁面一般不超過兩屏，較長的信息采用多頁瀏覽；
9、內容呈現(xiàn)方式：考慮更方便、更完善的細節(jié)內容，包括新文章的標記、文章導讀、相關內容的推薦、還有網(wǎng)友推薦、打印頁面、E-MAIL發(fā)送給好友、復制網(wǎng)址等。

本文發(fā)布于成都網(wǎng)站建設公司創(chuàng)新互聯(lián)http://www.bm7419.com/