網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)

網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)PAGE1PAGE24網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)網(wǎng)頁設(shè)計(jì)的作用在于展示企業(yè)形象，并協(xié)助、指導(dǎo)用戶順利完成訪問目標(biāo)及任務(wù)流程。網(wǎng)站的外觀設(shè)計(jì)是對網(wǎng)站易用性進(jìn)行評價(jià)的重要指標(biāo)之一?！毒W(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)》探討網(wǎng)站外觀與界面設(shè)計(jì)的用戶易用性。由網(wǎng)頁設(shè)計(jì)師通過大量案例闡述影響用戶體驗(yàn)的網(wǎng)頁設(shè)計(jì)問題。涉及用戶需求分析、網(wǎng)站整體風(fēng)格和品牌形象、“實(shí)用”與“美觀”的平衡點(diǎn)、網(wǎng)站導(dǎo)航設(shè)計(jì)、網(wǎng)站界面布局、網(wǎng)站視覺元素設(shè)計(jì)等網(wǎng)頁設(shè)計(jì)主題。如果您的網(wǎng)站需要第三方介入進(jìn)行用戶體驗(yàn)評估并提供解決方案，請聯(lián)系信息化運(yùn)營專家（）。網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第1頁。網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第1頁。目錄HYPERLINK1．HYPERLINK試著去了解用戶HYPERLINKHYPERLINK3HYPERLINK2．HYPERLINK網(wǎng)站整體風(fēng)格和品牌形象HYPERLINKHYPERLINK3HYPERLINK2.1HYPERLINK風(fēng)格要突出企業(yè)HYPERLINK/HYPERLINK產(chǎn)品的個(gè)性氣質(zhì)HYPERLINKHYPERLINK4HYPERLINK2.2HYPERLINK網(wǎng)站風(fēng)格要符合品牌視覺形象HYPERLINKHYPERLINK5HYPERLINK3．“HYPERLINK實(shí)用HYPERLINK”HYPERLINK與HYPERLINK“HYPERLINK美觀HYPERLINK”HYPERLINK的平衡點(diǎn)HYPERLINKHYPERLINK6HYPERLINK3.1HYPERLINK網(wǎng)站設(shè)計(jì)少點(diǎn)花俏HYPERLINK，HYPERLINK多些實(shí)用HYPERLINKHYPERLINK6HYPERLINK3.2HYPERLINK網(wǎng)站外觀設(shè)計(jì)的藝術(shù)性HYPERLINKHYPERLINK7HYPERLINK4．HYPERLINK網(wǎng)站導(dǎo)航設(shè)計(jì)HYPERLINKHYPERLINK8HYPERLINK4.1HYPERLINK全局導(dǎo)航的HYPERLINK3HYPERLINK個(gè)基礎(chǔ)要素HYPERLINKHYPERLINK8HYPERLINK4.2HYPERLINK輔助導(dǎo)航的HYPERLINK3HYPERLINK個(gè)設(shè)計(jì)要點(diǎn)HYPERLINKHYPERLINK9HYPERLINK4.3HYPERLINK網(wǎng)站地圖的設(shè)計(jì)HYPERLINKHYPERLINK10HYPERLINK4.4HYPERLINK導(dǎo)航設(shè)計(jì)禁忌HYPERLINKHYPERLINK11HYPERLINK5.HYPERLINK網(wǎng)站界面布局HYPERLINKHYPERLINK12HYPERLINK5.1HYPERLINK界面布局與內(nèi)容的相關(guān)性HYPERLINKHYPERLINK12HYPERLINK5.2HYPERLINK網(wǎng)站界面設(shè)計(jì)的兼容性HYPERLINKHYPERLINK14HYPERLINK5.3HYPERLINK首頁設(shè)計(jì)任務(wù) HYPERLINK15HYPERLINK5.4HYPERLINK列表頁面版式設(shè)計(jì)HYPERLINKHYPERLINK17HYPERLINK5.5HYPERLINK詳細(xì)內(nèi)容頁面版式設(shè)計(jì)HYPERLINKHYPERLINK18HYPERLINK5.6HYPERLINK頁面第一屏空間利用 HYPERLINK19HYPERLINK6.HYPERLINK網(wǎng)站視覺元素設(shè)計(jì) HYPERLINK20HYPERLINK6.1HYPERLINK讓文字易辨識 HYPERLINK20HYPERLINK6.2HYPERLINK讓圖片更合理 HYPERLINK22HYPERLINK6.3HYPERLINK讓表單更易用 HYPERLINK22HYPERLINK6.4HYPERLINK讓按鈕更易點(diǎn)擊HYPERLINKHYPERLINK23網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第2頁。網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第2頁。1．試著去了解用戶網(wǎng)頁設(shè)計(jì)師在進(jìn)行網(wǎng)站的外觀設(shè)計(jì)之前，不妨先去思考幾個(gè)問題·誰是你的目標(biāo)用戶？·目標(biāo)用戶具有什么特點(diǎn)？·你的網(wǎng)站運(yùn)營目標(biāo)是什么？·如何讓你的設(shè)計(jì)真正為傳遞網(wǎng)站內(nèi)容和產(chǎn)品價(jià)值而服務(wù)？·你的設(shè)計(jì)能否給目標(biāo)用戶帶來更好的體驗(yàn)？網(wǎng)站外觀設(shè)計(jì)應(yīng)依托于網(wǎng)站結(jié)構(gòu)，以用戶為中心設(shè)計(jì)，使網(wǎng)站內(nèi)容以更符合用戶習(xí)慣的方式呈現(xiàn)。同時(shí)網(wǎng)站的外觀設(shè)計(jì)還要通過對用戶行為的引導(dǎo)服務(wù)于網(wǎng)站的運(yùn)營目標(biāo)。時(shí)下國內(nèi)的一些企業(yè)網(wǎng)站存在的較普遍問題是：沒有分析用戶特征和用戶需求，以企業(yè)領(lǐng)導(dǎo)的喜好或設(shè)計(jì)師個(gè)人喜好來作為設(shè)計(jì)的依據(jù)；或者過分強(qiáng)調(diào)外觀設(shè)計(jì)而忽略了最根本的企業(yè)的行業(yè)屬性，過于注重視覺效果，網(wǎng)站美觀有余實(shí)用不足。信息化運(yùn)營專家（）認(rèn)為,設(shè)計(jì)師面對兩類用戶：一是企業(yè)客戶本身，一是企業(yè)客戶所面對的客戶，即網(wǎng)站的訪問者。如何滿足這兩類用戶的需求，則需要通過以下方法來達(dá)成：1、加強(qiáng)與企業(yè)客戶的溝通，了解客戶建立網(wǎng)站的商業(yè)目標(biāo)；2、站在網(wǎng)站訪問者的角度考慮問題，把注意力集中在潛在客戶需求和目標(biāo)上，而不是依靠企業(yè)管理者的憑空想象來進(jìn)行設(shè)計(jì)。2．網(wǎng)站整體風(fēng)格和品牌形象網(wǎng)站的整體風(fēng)格是網(wǎng)站外觀設(shè)計(jì)的指導(dǎo)思想。視覺元素、CSS、布局方式、瀏覽器兼容性等視覺表現(xiàn)形式都要服從于網(wǎng)站的整體風(fēng)格。確立網(wǎng)站整體風(fēng)格有助于品牌形象的塑造，而網(wǎng)站的品牌理念對網(wǎng)站的整體風(fēng)格也有著重要的影響。網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第3頁。網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第3頁。網(wǎng)站的品牌形象不僅是現(xiàn)有的品牌在網(wǎng)上的延伸，還能給用戶帶來更多的符合期望的品牌體驗(yàn)。總體上，網(wǎng)站風(fēng)格設(shè)計(jì)要契合以下幾方面：2.1風(fēng)格要突出企業(yè)/產(chǎn)品的個(gè)性氣質(zhì)企業(yè)網(wǎng)站的風(fēng)格要體現(xiàn)獨(dú)特性而不是與其他網(wǎng)站千篇一律的風(fēng)格，比如套用模板程序做出來的網(wǎng)站通常就難以體現(xiàn)個(gè)性氣質(zhì)。很多創(chuàng)意類的工作室或者廣告公司的網(wǎng)站常常喜歡采用紅黑，黑白這樣對比強(qiáng)烈的顏色。以此來體現(xiàn)網(wǎng)站的品牌氣質(zhì)，使網(wǎng)站整體顯得個(gè)性張揚(yáng)，飽滿精致。例如：設(shè)計(jì)公司力銳的網(wǎng)站/點(diǎn)評：力銳網(wǎng)站整體色調(diào)為黑加淺灰，搭配協(xié)調(diào)，外觀設(shè)計(jì)體現(xiàn)了其獨(dú)特的個(gè)性氣質(zhì)，設(shè)計(jì)意味強(qiáng)烈的配圖更是對這點(diǎn)加以強(qiáng)調(diào)，給人很深的印象。例如：品客薯片的網(wǎng)站網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第4頁。網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第4頁。點(diǎn)評：品客食品的網(wǎng)上設(shè)計(jì)，采用與代表產(chǎn)品薯片包裝相同的搶眼的紅色為主色調(diào)，飛散的薯片在勾人食欲的同時(shí)，讓人感覺到淘氣活潑趣味性，充分體現(xiàn)了產(chǎn)品的特性。2.2網(wǎng)站風(fēng)格要符合品牌視覺形象塑造網(wǎng)站的品牌形象的關(guān)鍵是將企業(yè)的VI視覺元素運(yùn)用于網(wǎng)頁設(shè)計(jì)，使得網(wǎng)站的整體風(fēng)格符合企業(yè)品牌的內(nèi)涵，達(dá)到線上線下整體風(fēng)格一致，有助于品牌形象的統(tǒng)一塑造。如：養(yǎng)生源蜂業(yè)公司的網(wǎng)站首頁與企業(yè)VI圖片養(yǎng)生源公司網(wǎng)站養(yǎng)生源企業(yè)VI圖片點(diǎn)評：網(wǎng)站的綠色+黃色系與企業(yè)品牌的VI視覺基本一致，突出了蜂業(yè)公司的產(chǎn)品特性，傳達(dá)品牌與綠色自然生態(tài)一致的健康理念。?小結(jié)：設(shè)計(jì)師可以通過以下幾點(diǎn)確立網(wǎng)站的整體風(fēng)格和品牌形象1、理解網(wǎng)站要傳達(dá)的品牌理念2、網(wǎng)站VI主色調(diào)與企業(yè)VI識別一致網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第5頁。3、在頁面頭部的醒目位置放logo，并配以品牌口號，貫通全站每個(gè)頁面網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第5頁。4、同一級別的頁面在設(shè)計(jì)上保持一致性。3．“實(shí)用”與“美觀”的平衡點(diǎn)網(wǎng)絡(luò)營銷導(dǎo)向的企業(yè)網(wǎng)站外觀設(shè)計(jì)，要在實(shí)用性和藝術(shù)性之間尋找出平衡點(diǎn)，讓網(wǎng)頁設(shè)計(jì)既美觀又方便實(shí)用。3.1網(wǎng)站設(shè)計(jì)少點(diǎn)花俏，多些實(shí)用用戶到網(wǎng)站是為了獲取希望了解的信息，設(shè)計(jì)繁雜的網(wǎng)頁對于用戶快速獲取信息是一種阻礙，因?yàn)檫^多的設(shè)計(jì)元素和背景噪音會令用戶分心，還會影響網(wǎng)站的兼容性和打開速度。因此，網(wǎng)站設(shè)計(jì)少點(diǎn)花俏，多些實(shí)用，著重于整體風(fēng)格的形成和實(shí)用信息的傳遞，而不是對局部細(xì)節(jié)過度刻畫、濫用動(dòng)畫圖片或flash，導(dǎo)致瀏覽者無所適從。如：斯?fàn)柕て妫ǚb品牌）的網(wǎng)站/點(diǎn)評：極具視覺沖擊力的背景和過多的動(dòng)態(tài)圖片搶走了用戶的注意力，成為了影響交互的干擾元素，對用戶獲取網(wǎng)站內(nèi)容造成了障礙。例：美觀與實(shí)用兼顧的企業(yè)電子商務(wù)網(wǎng)站：網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第6頁。網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第6頁。點(diǎn)評：首頁設(shè)計(jì)美觀和諧，一氣呵成，文本信息豐富，banner廣告雖占有不小的寬幅，但內(nèi)含促銷信息言之有物，能促成顧客轉(zhuǎn)化，整個(gè)版面絕無華而不實(shí)的元素。?小結(jié)：設(shè)計(jì)師可以通過以下方法來平衡網(wǎng)站頁面的美觀與實(shí)用性·一個(gè)屏幕區(qū)間，單一圖片占地不宜超過1/2的版面·盡量避免使用純flash制作網(wǎng)站首頁·減少花俏、巨大的背景圖片運(yùn)用·頁面上采用大量的flash和動(dòng)畫圖片的時(shí)候，應(yīng)考慮到頁面的打開速度·使用大圖片時(shí)，盡量在圖片中通過文字傳遞更多實(shí)用信息3.2網(wǎng)站外觀設(shè)計(jì)的藝術(shù)性大部分用戶打開一個(gè)網(wǎng)站首先形成的印象是來自于網(wǎng)頁外觀設(shè)計(jì)，因此外觀設(shè)計(jì)的美觀、藝術(shù)性也是網(wǎng)站易用性建設(shè)的基礎(chǔ)。對企業(yè)網(wǎng)站來說，要兼顧“實(shí)用性”基礎(chǔ)上的美觀和藝術(shù)性，通常在于對細(xì)節(jié)設(shè)計(jì)的用心。如圖：國外軟件公司的網(wǎng)站網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第7頁。網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第7頁。點(diǎn)評：這是一個(gè)設(shè)計(jì)簡潔的企業(yè)網(wǎng)站,結(jié)構(gòu)清晰，導(dǎo)航基于信息本質(zhì)，沒有太多花俏的圖片，但對細(xì)節(jié)深入專注，設(shè)計(jì)富有質(zhì)感。?小結(jié)：讓頁面看起來富有藝術(shù)性的美觀效果，需要注重以下方面：·主體色彩與輔助色彩搭配的協(xié)調(diào)性·網(wǎng)站選用的配圖個(gè)性鮮明，并與頁面背景協(xié)調(diào)·根據(jù)網(wǎng)站內(nèi)容采用合理的分欄結(jié)構(gòu)來進(jìn)行疏密有致的頁面布局·注重細(xì)節(jié)設(shè)計(jì)的完美4．網(wǎng)站導(dǎo)航設(shè)計(jì)網(wǎng)站的導(dǎo)航機(jī)制是網(wǎng)站內(nèi)容架構(gòu)的體現(xiàn)，網(wǎng)站導(dǎo)航是否合理是網(wǎng)站易用性評價(jià)的重要指標(biāo)之一。網(wǎng)站的導(dǎo)航機(jī)制一般包括全局導(dǎo)航、輔助導(dǎo)航、站點(diǎn)地圖等體現(xiàn)網(wǎng)站結(jié)構(gòu)的、對用戶進(jìn)行引導(dǎo)的因素。正確的網(wǎng)站導(dǎo)航要做到便于用戶的理解和使用，讓用戶對網(wǎng)站形成正確的空間感和方向感，不管來到網(wǎng)站的哪一頁，都很清楚自己所在的位置。4.1全局導(dǎo)航的3個(gè)基礎(chǔ)要素全局導(dǎo)航（PersistentNavigation）又稱主導(dǎo)航，它是出現(xiàn)在網(wǎng)站的每一個(gè)頁面上一組通用的導(dǎo)航元素，以一致的外觀出現(xiàn)在網(wǎng)站的每一頁，扮演著對用戶最基本的訪問方向性指引。網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第8頁。網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第8頁。對于大型電子商務(wù)網(wǎng)站來說，全局導(dǎo)航還應(yīng)當(dāng)包括搜索與購買工具兩大要素，以方便用戶在任意頁面均能執(zhí)行產(chǎn)品搜索和與顧客轉(zhuǎn)化有關(guān)的活動(dòng)，如加入購物車。如戴爾網(wǎng)站的全局導(dǎo)航：點(diǎn)評：1和2即站點(diǎn)的logo，同時(shí)點(diǎn)擊logo也可以返回到首頁，3是網(wǎng)站的欄目設(shè)置，4是站內(nèi)搜索，5是與顧客轉(zhuǎn)化有關(guān)的常用工具。?小結(jié)：一般企業(yè)的全局導(dǎo)航必須包括3個(gè)基本設(shè)計(jì)要素：·站點(diǎn)logo：logo必須加上回首頁的連接·回首頁：每個(gè)全局導(dǎo)航條左邊位置同樣出現(xiàn)回首頁的提示及連接·全站基礎(chǔ)欄目（一級欄目）4.2輔助導(dǎo)航的3個(gè)設(shè)計(jì)要點(diǎn)輔助導(dǎo)航又被稱作面包屑路徑或?qū)蛹壊藛?，體現(xiàn)為內(nèi)頁的“當(dāng)前位置”提示。輔助導(dǎo)航的作用是無論用戶身處站內(nèi)何處，均不會迷路，尤其當(dāng)網(wǎng)站的欄目層次較多的時(shí)候，正確的輔助導(dǎo)航的設(shè)置尤為重要。它從另一個(gè)層面反映了網(wǎng)站的結(jié)構(gòu)層次，是對全局導(dǎo)航的有效補(bǔ)充。如戴爾網(wǎng)站的輔助導(dǎo)航：點(diǎn)評：輔助導(dǎo)航出現(xiàn)在戴爾網(wǎng)站的每一個(gè)內(nèi)頁緊靠主導(dǎo)航條下的位置，以“>”來對層級進(jìn)行分隔，簡單而形象從視覺上暗示了瀏覽層次的前進(jìn)方向；末尾的“臺式機(jī)”和當(dāng)前所在頁面的名稱一致，并用不同的顏色加以突出，讓瀏覽者對當(dāng)前的所在位置一目了然。網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第9頁。?小結(jié)：輔助導(dǎo)航的3個(gè)設(shè)計(jì)要點(diǎn)：網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第9頁。·出現(xiàn)的位置在全局導(dǎo)航之下、正文內(nèi)容之上的過渡空間·層級關(guān)系體現(xiàn)正確，用戶通過當(dāng)前頁面可以依次返回上一頁、直至首頁，不出現(xiàn)缺鏈、錯(cuò)鏈的情況·形式采用文本鏈接，而不是圖片4.3網(wǎng)站地圖的設(shè)計(jì)網(wǎng)站地圖（SiteMap）將網(wǎng)站內(nèi)深層次的鏈接關(guān)系以一個(gè)扁平的頁面呈現(xiàn)出來，同它的命名一樣，讓用戶對網(wǎng)站的內(nèi)容與結(jié)構(gòu)全局快速了解。就如大賣場指示圖一樣讓我們對各個(gè)賣場的區(qū)域劃分具體位置有個(gè)初步的了解。結(jié)構(gòu)合理的網(wǎng)站地圖，不但能讓瀏覽者對整個(gè)網(wǎng)站的結(jié)構(gòu)內(nèi)容有個(gè)初步印象，同時(shí)也是對搜索引擎友好的表現(xiàn)。例如http://www.webcredible.co.uk/sitemap.shtml這個(gè)網(wǎng)站的站點(diǎn)地圖極為規(guī)范，除了結(jié)構(gòu)清晰外，對各欄目還有簡單的介紹。點(diǎn)評：該網(wǎng)站地圖放棄所有虛飾性圖片，富有層次感的設(shè)計(jì)將欄目結(jié)構(gòu)層次清晰地呈現(xiàn)出來；并對重要欄目有簡述說明，對用戶起到很好的指引作用。網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第10頁。?小結(jié)：網(wǎng)站地圖的設(shè)計(jì)應(yīng)該重視以下幾點(diǎn)：網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第10頁。·快速加載頁面，因此去除任何圖片·層次感，而不是密密麻麻堆砌鏈接·呈現(xiàn)的層次不宜過多，也不宜過少，一般呈現(xiàn)到主導(dǎo)航下的二級菜單·文本鏈接方式，而非圖片相關(guān)文章：優(yōu)化網(wǎng)站導(dǎo)航設(shè)計(jì)改善用戶體驗(yàn)4.4導(dǎo)航設(shè)計(jì)禁忌最佳導(dǎo)航方式是采用文本鏈接方式，但不少網(wǎng)站，尤其是娛樂休閑網(wǎng)站為了表現(xiàn)網(wǎng)站的炫酷風(fēng)格，在全局導(dǎo)航條上通過flash等技術(shù)手段大做文章，弊大于利，以下是一些常見的導(dǎo)航設(shè)計(jì)禁忌：使用移動(dòng)的圖片因?yàn)椴蝗菀渍业娇牲c(diǎn)擊的區(qū)域，移動(dòng)的圖片常會使瀏覽者產(chǎn)生挫折感。采用“很酷”的表現(xiàn)技巧如把導(dǎo)航藏起來，只有當(dāng)鼠標(biāo)停留在相應(yīng)位置才會出現(xiàn)，這樣仿佛很酷，但是人們更喜歡可以直接看到的選擇。導(dǎo)航?jīng)]有文字提示目前國內(nèi)較多企業(yè)網(wǎng)站喜歡使用圖片或flash來構(gòu)筑站點(diǎn)的導(dǎo)航，從視覺角度上講這樣做顯得更別致更醒目一些，但是它對提高網(wǎng)站易用性沒有好處，如下圖：某企業(yè)網(wǎng)站的導(dǎo)航條，順德工業(yè)集團(tuán)的網(wǎng)站.tw/網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第11頁。網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第11頁。點(diǎn)擊前點(diǎn)擊后（鼠標(biāo)移上后）點(diǎn)評：只有當(dāng)鼠標(biāo)移到對應(yīng)的圖片上，才會展開顯示內(nèi)容“電子事業(yè)”，如果單純的看兩個(gè)OurBusiness，誰能知道有什么區(qū)別呢？5.網(wǎng)站界面布局網(wǎng)站界面的布局方式、展示形式直接影響用戶使用網(wǎng)站的方便性。合理的頁面布局令用戶快速發(fā)現(xiàn)網(wǎng)站的核心內(nèi)容和服務(wù)；如果頁面布局不合理，用戶不知道如何開始獲取所需的信息、或者怎么執(zhí)行操作來獲得相應(yīng)的服務(wù)，那么他們就會離開這個(gè)網(wǎng)站，甚至以后都不會再訪問這個(gè)網(wǎng)站。界面布局的基本原則是既要體現(xiàn)網(wǎng)站運(yùn)營的重點(diǎn)，又要兼顧用戶訪問行為習(xí)慣，由此，需要做到以下幾方面：5.1界面布局與內(nèi)容的相關(guān)性網(wǎng)站的界面布局與網(wǎng)站內(nèi)容架構(gòu)息息相關(guān)。網(wǎng)站界面布局應(yīng)遵循用戶瀏覽習(xí)慣和網(wǎng)站的信息規(guī)劃，將內(nèi)容合理有序的呈現(xiàn)在用戶面前，使重要信息置于頁面重要板塊得以重點(diǎn)體現(xiàn)。同時(shí)網(wǎng)站的界面布局也反映出網(wǎng)站的運(yùn)營思路，并對最終的營銷結(jié)果產(chǎn)生影響。如：深圳電信的網(wǎng)站首頁網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第12頁。網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第12頁。頁面第二屏頁面第一屏頁面第二屏頁面第一屏點(diǎn)評：廣告占據(jù)了網(wǎng)站第一屏中重要的位置，每月最新優(yōu)惠等用戶更為關(guān)心的內(nèi)容沉到了頁面的下方。網(wǎng)站使用廣告的用意是為了配合營銷活動(dòng)的宣傳，這樣的布局更象是出于網(wǎng)站的目標(biāo)，忽略了用戶的目的，因此未必能達(dá)到預(yù)期的效果。?小結(jié)：設(shè)計(jì)師在進(jìn)行網(wǎng)站界面布局時(shí)應(yīng)注意以下幾點(diǎn)·從上到下，從左到右，按照內(nèi)容重要性的優(yōu)先級有序展開：·重要內(nèi)容放在靠前的位置·建立清晰的視覺層次·頁面布局清晰明確，同級的頁面布局一致·頁面上內(nèi)容有包含關(guān)系的部分，視覺上要進(jìn)行嵌套·頁面上內(nèi)容有相關(guān)聯(lián)系的部分，視覺上也要體現(xiàn)這種相關(guān)性相關(guān)文章：視線跟蹤研究對網(wǎng)頁布局設(shè)計(jì)的啟示讓網(wǎng)頁清晰易懂的5個(gè)方法電子商務(wù)網(wǎng)站該采用何種布局網(wǎng)頁布局設(shè)計(jì)：注冊登錄框放哪里合適？網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第13頁。5.2網(wǎng)站界面設(shè)計(jì)的兼容性網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第13頁。網(wǎng)站界面設(shè)計(jì)還應(yīng)考慮瀏覽器兼容性，即要適合大多數(shù)用戶的瀏覽環(huán)境，使他們都能正常的瀏覽。隨著Web標(biāo)準(zhǔn)的推廣和應(yīng)用，將網(wǎng)站界面的表現(xiàn)與形式分離，更具靈活性和適應(yīng)性的方式在網(wǎng)站建設(shè)中越來越受推崇。要做到網(wǎng)站界面在各瀏覽器和分辨率下相兼容，不妨第一步就從web標(biāo)準(zhǔn)化的運(yùn)用開始。目前網(wǎng)站界面的主流分辨率主要指1024px×768px，04年以后大約60%以上的網(wǎng)民采用此分辨率。而隨著液晶顯示器的普及，1280px×1024px分辨率將會有更多人使用。因而網(wǎng)站界面設(shè)計(jì)應(yīng)該在保證主流分辨率的基礎(chǔ)上，爭取做到兼顧適應(yīng)未來分辨率的趨勢。同理，網(wǎng)站界面目前對應(yīng)的主流瀏覽器仍然是IE5.5以上，火狐firefox的市場份額近年也不斷增加，設(shè)計(jì)師要做到網(wǎng)頁在以上瀏覽器下均能正常瀏覽。如圖：安利：/IE瀏覽器：正常火狐瀏覽器：不正常點(diǎn)評：網(wǎng)站在火狐瀏覽器中出現(xiàn)嚴(yán)重異常手機(jī)3g時(shí)代終將來臨，無線互聯(lián)網(wǎng)將是未來發(fā)展趨勢。企業(yè)在建立網(wǎng)站時(shí)不光考慮網(wǎng)站界面在各瀏覽器的兼容性，還有必要對手機(jī)瀏覽兼容，有的企業(yè)甚至?xí)９┦謾C(jī)上網(wǎng)瀏覽的wap網(wǎng)站。如圖：聯(lián)想集團(tuán)的手機(jī)站點(diǎn)http://lenovo.mobi/網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第14頁。網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第14頁。點(diǎn)評：網(wǎng)站界面適應(yīng)手機(jī)的窄屏模式，信息內(nèi)容從上到下有序展開，去除大圖片，只剩必要的logo圖片。?小結(jié)：要做到網(wǎng)站界面的兼容性設(shè)計(jì)師應(yīng)做到以下幾點(diǎn)：·Web標(biāo)準(zhǔn)的熟練運(yùn)用·網(wǎng)站界面應(yīng)對主流瀏覽器兼容·網(wǎng)站界面應(yīng)對主流分辨率兼容·網(wǎng)站界面對手機(jī)和屏幕閱覽器等特殊設(shè)備的兼容相關(guān)文章：瀏覽器兼容,網(wǎng)頁程序員心中永遠(yuǎn)的痛微軟IE7.0瀏覽器將兼容WEB標(biāo)準(zhǔn)某外貿(mào)出口網(wǎng)站在firefox瀏覽器的顯示情況5.3首頁設(shè)計(jì)任務(wù)作為企業(yè)網(wǎng)上信息的第一入口，首頁不僅扮演形象展示的作用，更重要的是起到信息傳遞的作用。目前，國內(nèi)品牌企業(yè)的首頁設(shè)計(jì)過于重視“形象展示”職能而忽略“信息傳遞”職能，導(dǎo)致大量企業(yè)網(wǎng)站首頁一律是全屏flash，對用戶快速獲取信息造成阻礙。因此，網(wǎng)站的首頁設(shè)計(jì)要在傳遞品牌形象的同時(shí)，讓首次訪問的用戶在第一時(shí)間明白網(wǎng)站的內(nèi)容、網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第15頁。服務(wù)和功能，同時(shí)，通過首頁，能夠快速直達(dá)所要找尋的目標(biāo)頁面，因此首頁設(shè)計(jì)需要具備一些基礎(chǔ)元素：企業(yè)logo標(biāo)示、信息搜索框、全局導(dǎo)航條、產(chǎn)品分類目錄、動(dòng)態(tài)新聞、推薦信息、網(wǎng)站地圖等基本要素。網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第15頁。如下圖：聯(lián)想集團(tuán)中文網(wǎng)站的首頁設(shè)計(jì)點(diǎn)評：聯(lián)想首頁具備了用戶完成訪問任務(wù)所需要的大部分基礎(chǔ)要素，不過尚缺乏網(wǎng)站地圖等細(xì)節(jié)因素。?小結(jié)：網(wǎng)站的首頁設(shè)計(jì)任務(wù)主要包括以下幾點(diǎn)：·站點(diǎn)的標(biāo)示和使命，讓用戶明白這個(gè)網(wǎng)站是做什么的，有什么獨(dú)特的地方·告訴用戶站點(diǎn)提供的內(nèi)容和服務(wù)有哪些·注冊和登陸入口·重點(diǎn)鏈接推薦，但要避免大量信息堆積首頁讓用戶難以獲取重點(diǎn)相關(guān)文章：Web2.0能給誰機(jī)會？從新浪首頁改版說起網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第16頁。調(diào)查：58%的機(jī)械企業(yè)網(wǎng)站首頁缺乏有效信息網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第16頁。5.4列表頁面版式設(shè)計(jì)常見的列表頁面包括新聞等文字鏈接類型的列表和產(chǎn)品頁面等圖文混排型的列表。站內(nèi)搜索結(jié)果頁面也屬于列表頁面的一種。列表頁面的特點(diǎn)是：用戶在列表頁面的瀏覽目的已經(jīng)相當(dāng)明確，集中于某一主題下的可選信息豐富，是通向內(nèi)容頁面的最后一道橋梁；用戶在此頁掃描式瀏覽，希望盡快找到鏈接目標(biāo)進(jìn)入內(nèi)容頁面。因此列表頁面應(yīng)盡量減少干擾信息，突出內(nèi)容的鏈接標(biāo)題。如：某出口企業(yè)網(wǎng)站的產(chǎn)品列表頁面：點(diǎn)評：頁面左邊直接呈現(xiàn)核心列表信息，沒有干擾信息阻礙，產(chǎn)品縮略圖、產(chǎn)品名稱與摘要信息布局井然有序，產(chǎn)品加粗鏈接文本醒目，適合快速瀏覽。?小結(jié)：設(shè)計(jì)師在設(shè)計(jì)列表頁面模板時(shí)候要做到以下幾點(diǎn)：·為列表增加一個(gè)標(biāo)題和一段摘要信息·盡可能多的展示列表數(shù)量，減少頻繁翻頁·相鄰兩條列表之間明確區(qū)分間距，每條列表標(biāo)題醒目·產(chǎn)品列表最好提供產(chǎn)品的縮略圖網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第17頁。·列表翻頁的“上一頁”“下一頁”提示醒目，并至于列表首尾的雙向位置，而且應(yīng)該包括每頁多少條，共多少頁的全局說明，當(dāng)前頁碼突出顯示。網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第17頁。相關(guān)文章：老奸巨猾的阿里巴巴產(chǎn)品列表翻頁設(shè)計(jì)列表分頁設(shè)計(jì)SEO優(yōu)化與UE5.5詳細(xì)內(nèi)容頁面版式設(shè)計(jì)詳細(xì)內(nèi)容頁面應(yīng)屬于網(wǎng)站最深層次的頁面，如單條新聞的詳細(xì)內(nèi)容或是單個(gè)產(chǎn)品的詳細(xì)內(nèi)容。一般都有較多的文字。形式上主要分為文字排版和圖文混排。在詳細(xì)內(nèi)容頁面上，用戶獲取信息的目的已經(jīng)相當(dāng)明確，此時(shí)不宜在頁面左邊或正前方視線最集中的地方出現(xiàn)干擾性內(nèi)容，而應(yīng)將干擾性內(nèi)容置右側(cè)或頁面底部位置。同時(shí)，詳細(xì)內(nèi)容頁面由于是網(wǎng)站的終極頁面，大量用戶在這里關(guān)閉窗口退出網(wǎng)站，因此有必要根據(jù)本頁內(nèi)容主題提供與本文相關(guān)的其他內(nèi)容鏈接，如“相關(guān)文章”列表，盡量挽留用戶。點(diǎn)評：內(nèi)容頁面的核心內(nèi)容置于網(wǎng)頁左邊最重要的位置，標(biāo)題重點(diǎn)突出，推薦更多信息置于文章底部及右側(cè)次重要位置，以挽留用戶查看過多內(nèi)容。?小結(jié)：設(shè)計(jì)師在設(shè)計(jì)詳細(xì)內(nèi)容頁面的版式時(shí)要做到以下幾點(diǎn)·文章標(biāo)題醒目·文章底部或右側(cè)置放更多相關(guān)內(nèi)容鏈接及其它推薦鏈接、廣告；·對于較長的文字，應(yīng)該提供摘要和設(shè)計(jì)錨點(diǎn)目錄。網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第18頁。·產(chǎn)品的詳細(xì)頁面中對于較復(fù)雜的參數(shù)宜采用表格或列表的形式更易查看。網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第18頁。5.6頁面第一屏空間利用第一屏是用戶視線和行為集中的部位，用戶最關(guān)注的內(nèi)容必須在第一屏呈現(xiàn)。目前很多企業(yè)網(wǎng)站的第一屏大半空間被廣告占據(jù)，不利于用戶快速獲取需要的信息?？傮w上，頁面第一屏空間利用包含以下要素：全局導(dǎo)航條、核心內(nèi)容部分、內(nèi)頁具備當(dāng)前位置的提示、。國內(nèi)品牌企業(yè)尤其喜歡在第一屏視線最集中的位置使用寬幅的通欄廣告圖片，以展示所謂的“企業(yè)形象”，這種手法往往用得過火，導(dǎo)致第一屏2/3的位置都是毫無疑義的形象宣傳圖片，浪費(fèi)了寶貴的黃金地段。如：格蘭仕首頁：/點(diǎn)評：第一屏的flash圖片所占位置過大，而且半天“l(fā)oading”不完，頁面不能正常顯示，用戶體驗(yàn)不佳。再如：美國某企業(yè)投放google關(guān)鍵詞廣告的著陸頁設(shè)計(jì)版式前后對比：網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第19頁。網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第19頁。改進(jìn)前改進(jìn)后點(diǎn)評：該著陸頁設(shè)計(jì)最為顯著的改進(jìn)是將兩屏設(shè)計(jì)改為一屏，讓用戶在第一屏即快速執(zhí)行“試用”的顧客轉(zhuǎn)化行為。?小結(jié)：設(shè)計(jì)師要做到以下幾點(diǎn)以合理利用網(wǎng)頁第一屏的空間：·利用好視覺中心突出重點(diǎn)信息·權(quán)衡文字與圖片的比例，圖片為輔，文字信息為主·當(dāng)后面還有內(nèi)容時(shí)，第一屏不要形成已完成的假象6.網(wǎng)站視覺元素設(shè)計(jì)網(wǎng)站視覺元素包括文字，圖片，標(biāo)簽，表單，列表，多媒體等等，是網(wǎng)站外觀設(shè)計(jì)的組成部分，服從于網(wǎng)站的整體風(fēng)格需要。用好網(wǎng)站視覺元素，能更好的指導(dǎo)和協(xié)助用戶完成網(wǎng)站上的任務(wù)流程，使用戶獲得良好的在線體驗(yàn)。6.1讓文字易辨識字體是幫助用戶獲得與網(wǎng)站的信息交互的重要手段，因而文字的易讀性和易辨認(rèn)性是設(shè)計(jì)網(wǎng)站頁面時(shí)的重點(diǎn)。不同的字體會營造出不同的氛圍，同時(shí)不同的字體大小和顏色也對網(wǎng)站的內(nèi)容起到強(qiáng)調(diào)或者提示的作用。網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第20頁。正確的文字和配色方案是好的視覺設(shè)計(jì)的基礎(chǔ)。網(wǎng)站上的文字受屏幕分辨率和瀏覽器的限制，但是仍有通用的一些準(zhǔn)則：文字必須清晰可讀，大小合適，文字的顏色和背景色有較為強(qiáng)烈的對比度，文字周圍的設(shè)計(jì)元素不能對文字造成干擾。盡可能少用游動(dòng)文字、圖形文字。網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第20頁。如：歐萊雅中國網(wǎng)站：點(diǎn)評：新聞文本與背景色對比不強(qiáng)烈，閱讀吃力，同時(shí)底部新聞標(biāo)題字體過小，幾乎難以識別。?小結(jié)：設(shè)計(jì)師在進(jìn)行網(wǎng)站的頁面文字排版時(shí)要做到以下幾點(diǎn)·避免字體過于黯淡導(dǎo)致閱讀困難·字體色與背景色對比明顯·字體顏色不要太雜·有鏈接的字體要有所提示，最好采用默認(rèn)鏈接樣式·標(biāo)題和正文所用的文字大小有所區(qū)別·作為內(nèi)容的文字字體大小最好能做大一點(diǎn)·英文和數(shù)字選用與中文字體和諧的的字體6.2讓圖片更合理網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第21頁。頁面上圖片也是版式的重要組成，正確的運(yùn)用圖片，可以幫助用戶對信息加深印象，引導(dǎo)用戶的行為，與網(wǎng)站整體風(fēng)格協(xié)調(diào)的圖片，能幫助網(wǎng)站營造獨(dú)特的品牌氛圍，加深瀏覽者的印象。網(wǎng)頁設(shè)計(jì)與用戶體驗(yàn)全文共24頁，當(dāng)前為第21頁。網(wǎng)站中圖片的主要作用大致有以下三種：banner廣告圖片、產(chǎn)品展示圖