網(wǎng)站界面分析和優(yōu)化設計技術詳解.doc

精品文檔網(wǎng)站界面分析和優(yōu)化設計 一、網(wǎng)站界面優(yōu)化的重要性。web技術的發(fā)展，使得互聯(lián)網(wǎng)用戶從單純?yōu)g覽信息時代邁入了更加注重交互、更加人性化的時代。網(wǎng)民使用互聯(lián)網(wǎng)產(chǎn)品已經(jīng)不僅僅只關注工作效率，而是越來越關心使用過程中的體驗。網(wǎng)站界面的本質(zhì)是讓用戶做主，操作簡便性、強調(diào)交互性。在互聯(lián)網(wǎng)發(fā)展的過程中，最初希望通過建立網(wǎng)站來搶占市場、樹立形象的企業(yè)逐步認識到網(wǎng)站提供優(yōu)質(zhì)的用戶體驗才是可持續(xù)發(fā)展的競爭優(yōu)勢，而網(wǎng)站服務界面的設計效果是用戶體驗好壞的直接影響因素。某電商網(wǎng)站Allurent曾經(jīng)做過一個調(diào)查，當用戶對某一網(wǎng)站的驗較差時，80%的用戶表示不會再次訪問該網(wǎng)站，60%的用戶表示影響到了自己對該商家的整體印象，而40%的用戶表示甚至可能不再去該商家的實體店鋪。用戶不良體驗無疑是在與網(wǎng)站界面的交互中形成的。目前，很多商業(yè)網(wǎng)站已經(jīng)充分認識到周到、貼心的網(wǎng)站界面設計對于企業(yè)利益獲取的重要性。很多跨國公司如雅虎、惠普、IBM微軟、蘋果、等都先后成立了用戶體驗研究機構，嘗試將用戶體驗的研究成果應用到界面設計中來，國內(nèi)互聯(lián)網(wǎng)企業(yè)如百度、騰訊等也都建立了相應的研究團隊。二、網(wǎng)站界面優(yōu)化的核心要素網(wǎng)站服務界面是指網(wǎng)站為用戶辦事服務和提供信息的網(wǎng)頁內(nèi)容展現(xiàn)方式。關注服務界面，就是要做好網(wǎng)頁界面的優(yōu)化設計工作?；谟脩趔w驗進行網(wǎng)站服務界面優(yōu)化設計，需要將用戶體驗從不同層次、維度進行分解，提取與網(wǎng)頁界面相關的要素，然后才能對相應要素實施具體的優(yōu)化設計。 Adaptive Path公司的創(chuàng)始人James Garrett對用戶體驗的要素進行過較為系統(tǒng)地研究，將用戶體驗劃分為戰(zhàn)略、范圍、結構、框架、表現(xiàn)10個核心要素，如圖所示。這5個層面自下而上逐步的從抽象轉(zhuǎn)為具體。圖1. 用戶體驗要素模型這一用戶體驗要素模型中與界面優(yōu)化直接相關的是框架層和表現(xiàn)層的四個關鍵要素，即界面設計、導航設計、信息設計和視覺設計。我們主要討論界面設計這一主要要素。三、網(wǎng)站界面的優(yōu)化3.1提高頁面響應速度隨著科技的發(fā)展用戶等待網(wǎng)頁加載的耐性越來越低。2009年，微軟搜索引擎必應（bing）進行過一項調(diào)查，研究頁面載入速度和其他網(wǎng)站指標是否有明顯相關性。根據(jù)報告顯示，每2秒鐘的延遲頁面會使用戶滿意度降低3.8%的，減少4.3%的單位用戶收入和減少4.3%的點擊數(shù)。多項研究結果表明，2秒以內(nèi)是用戶最滿意的網(wǎng)頁打開時間，用戶能夠忍受的最長等待時間為6-8秒，如果網(wǎng)頁載入時間超過12秒，99%的用戶會關閉網(wǎng)頁。從用戶角度看，網(wǎng)頁打開的速度越慢，其心理受挫感會越強，進而會惡化用戶對網(wǎng)站的使用體驗。目前，百度、谷歌等主流搜索引擎已經(jīng)將頁面響應速度加入了他們的排名計算因素中，成為決定網(wǎng)站權重值的重要因素，可見頁面響應速度的重要性。網(wǎng)站應定期對頁面響應速度進行測試。例如，可以利用標準化度量工具如YSlow來協(xié)助進行前端性能優(yōu)化。同時采取相應措施改進性能：一方面應盡量減少網(wǎng)頁文件的大小。圖片和多媒體在修飾網(wǎng)頁的同時，也成為影響網(wǎng)頁下載速度的重要因素，可將圖片壓縮或?qū)⒋髨D分塊成為零散圖片來減少圖片載入負荷。另一方面可提高加載的呈現(xiàn)效率，選擇讓頁面內(nèi)容根據(jù)重要程度有秩序地加載。3.2增強站內(nèi)搜索易用性絕大多數(shù)功能完善的政府網(wǎng)站都提供站內(nèi)搜索服務，并將其當做標準功能。當用戶無法通過導航系統(tǒng)找到信息或者他們清楚自己所需信息的準確描述時，發(fā)起站內(nèi)搜索將是獲取信息最簡單、最直接的途徑。然而，目前絕大多數(shù)政府網(wǎng)站的站內(nèi)搜索實際效果都不盡人意，有的網(wǎng)站甚至沒有設置搜索條。搜索功能不足使得用戶面對龐大的政府網(wǎng)站資源無從下手，既降低了用戶體驗，也降低了網(wǎng)站資源的利用率。增強站內(nèi)搜索的易用性主要從兩個方面入手：一是要讓用戶易于發(fā)現(xiàn)，二是要提高搜索性能。首先，搜索條的位置要盡量統(tǒng)一，且放置在醒目位置。較為通用的做法是放置在網(wǎng)頁右上角，并使用與周圍網(wǎng)頁元素顏色對比強烈的搜索按鈕吸引用戶注意。其次，搜索性能方面，應用查詢建議工具，提供結果篩選功能，在提高搜索查準率的同時，還可建立垂直搜索。查詢建議工具又稱為提前鍵入，當用戶在搜索框中輸入相應詞時會自動出現(xiàn)更多相關的搜索詞，查詢建議工具對于那些不太明確查詢信息的正確描述的用戶來說尤其有效，目前google、百度都提供了此功能。3.3優(yōu)化界面細節(jié)體驗網(wǎng)站建設之初，設計人員往往按照對用戶需求的理解和規(guī)劃方案進行服務界面設計，而這種狀況下往往因為關注了一些大的方面，卻忽視了一些細節(jié)功能的處理。而很多時候，一些細節(jié)的優(yōu)化最能夠給用戶驚喜、貼心的感受。細節(jié)處理的過程實際上亦是用戶需求的發(fā)現(xiàn)與需求滿足的過程。隨著互聯(lián)網(wǎng)技術不斷創(chuàng)新，已經(jīng)出現(xiàn)了一些用于改善網(wǎng)站用戶體驗的智能分析工具，其中就有國家信息中心網(wǎng)絡政府研究中心研發(fā)的記錄網(wǎng)站用戶點擊行為的分析工具政府網(wǎng)站頁面熱力圖。熱力圖收集了網(wǎng)民訪問頁面的每一次鼠標點擊，并將這些點擊位置用添加圖層的方式在政府網(wǎng)站頁面上予以準確標示，是分析網(wǎng)民訪問行為的有效工具。在熱力圖中網(wǎng)民點擊越多的地方顏色越亮（黃色），點擊較少的地方呈藍色，無人點擊的地方為白色。使用網(wǎng)站頁面熱力圖可以有效幫助發(fā)現(xiàn)曾經(jīng)忽視的細節(jié)，從而有針對性的提出優(yōu)化方法以都政府網(wǎng)站首頁（）為例，在首頁加載熱力圖后我們發(fā)現(xiàn)，從2011年12月10日到2012年5月10日五個月中，網(wǎng)站logo“太陽神鳥”有近6500人次點擊，但用戶點擊Logo后，網(wǎng)頁僅僅只是刷新屏幕。用戶點擊便意味著他們對logo好奇，認為這里應當有內(nèi)容。于是我們建議成都網(wǎng)站運營部門在網(wǎng)站首頁logo中加入了鏈接，點擊logo將進入logo“太陽神鳥”的介紹頁面中，讓用戶對logo以及網(wǎng)站設計風格有更為深入的了解。熱力圖是用戶訪問行為的客觀記錄工具，基于熱力圖可以有針對性的發(fā)現(xiàn)優(yōu)化細節(jié)。3.4提升表單的友好性表單是用戶在網(wǎng)站上進行信息輸入的窗口，是交互體驗最重要的影響元素。對于網(wǎng)站來說，想要獲取盡可能詳細、規(guī)范的用戶信息，而對于用戶來說，希望填寫的表單越簡單越好。因此，在滿足網(wǎng)站信息收集基本要求的同時，也要考慮表單設計的友好性。一是應減少表單操作的時間。表單輸入元素應盡可能簡化，避免過早向用戶索要過于詳細的信息，否則繁瑣的輸入操作不僅延長了完成任務的時間，還會導致用戶的厭煩情緒而放棄使用。根據(jù)用戶喜歡點擊多于輸入的操作習慣，還應盡量用選擇性控件代替輸入框。二是盡量簡化用戶的思考。為容易產(chǎn)生疑惑的表單元素提供必要的解釋或示例，如允許輸入的長度、必填項等，避免讓用戶過多思考。三是出錯信息及時提醒。當用戶在相應輸入框中輸入錯誤信息時應及時判斷并提醒，這比起點擊提交按鈕后出現(xiàn)錯誤頁面提示、要求返回重新輸入的交互方式，不僅降低了用戶的勞動量，也減少了任務完成的時間。四是讓表單記住用戶的部分信息以減少用戶下次訪問時重復信息的輸入。3.5劃頁面布局網(wǎng)站頁面中用來傳遞信息的元素主要有文字、圖片、多媒體動畫、視頻。頁面布局應將這些不同內(nèi)容進行合理排列布局，使得用戶更有效的抓住重點。頁面布局需要結合用戶的行為習慣進行考慮。國外的一些研究機構和學者曾組織過關于網(wǎng)頁閱讀習慣的視覺軌跡研究。研究結果表明用戶瀏覽網(wǎng)站的視覺路線類似于字母“F”型。所謂F型模式，即用戶瀏覽網(wǎng)頁時首先從網(wǎng)頁最左上看起，看完前面幾行的大部分內(nèi)容，越往下看的越短，只有左邊一部分內(nèi)容被看到，形成F型瀏覽軌跡，F(xiàn)型瀏覽軌跡也正好符合人們從左到右的書寫習慣。因此，對于頁面布局來說，應將網(wǎng)頁重要的元素放在左側(cè)，并且以符合F形狀的形式來放置。在具體的頁面布局上，現(xiàn)在有很多良好的布局解決技巧可以幫助創(chuàng)建整潔有序的內(nèi)容布局，包括內(nèi)容的歸類整理、排列與對齊、貼近與遠離、流暢的視線移動、平衡、重復元素的應用等等。通過對網(wǎng)頁設計元素及內(nèi)容進行合理布局,使網(wǎng)頁形式富有節(jié)奏感并且圖文并茂。事實上，頁面布局的工作分為前期的布局設計和后期的網(wǎng)站調(diào)整。前期布局設計是通過對用戶需求的預測而做的設計，這樣的設計不一定能夠完全解決用戶的訪問需求，因此需要結合后期的網(wǎng)站訪問數(shù)據(jù)分析、可用性測試、欄目設置等進行調(diào)整，將用戶最需要、最關注的內(nèi)容放在最明顯的位置，從而提升用戶體驗。后期的調(diào)整是長期性工作，又是極容易被忽視的工作。3.6實例分析“十樂網(wǎng)”網(wǎng)站界面的視覺優(yōu)化，分別針對以下九個方面進行：1、視覺風格；2、LOGO 優(yōu)化；3、首頁優(yōu)化；4、頁面尺寸：5、色彩搭配；6、文字排版；7、圖標優(yōu)化；8、Header 優(yōu)化；9、Footer 優(yōu)化。圖1 “十樂網(wǎng)”的優(yōu)化“十樂網(wǎng)”網(wǎng)站界面可用性設計，可用性的目的是使產(chǎn)品更為易用、易學、簡單和愉悅，是通過對用戶的認知和知覺兩個方面來研究產(chǎn)品的界面設計。依據(jù)我個人理解，網(wǎng)站頁面的可用性體現(xiàn)在視覺設計和交互設計之中