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

1、網(wǎng)站界面分析和優(yōu)化設(shè)計 一、網(wǎng)站界面優(yōu)化的重要性 web 技術(shù)的發(fā)展，使得互聯(lián)網(wǎng)用戶從單純?yōu)g覽信息時代邁入了更加 注重交互、更加人性化的時代。網(wǎng)民使用互聯(lián)網(wǎng)產(chǎn)品已經(jīng)不僅僅只關(guān)注 工作效率，而是越來越關(guān)心使用過程中的體驗。網(wǎng)站界面的本質(zhì)是讓用 戶做主，操作簡便性、強調(diào)交互性。 在互聯(lián)網(wǎng)發(fā)展的過程中，最初希望通過建立網(wǎng)站來搶占市場、樹立 形象的企業(yè)逐步認(rèn)識到網(wǎng)站提供優(yōu)質(zhì)的用戶體驗才是可持續(xù)發(fā)展的競 爭優(yōu)勢，而網(wǎng)站服務(wù)界面的設(shè)計效果是用戶體驗好壞的直接影響因素。 某電商網(wǎng)站 Allurent 曾經(jīng)做過一個調(diào)查， 當(dāng)用戶對某一網(wǎng)站的驗較差時， 80%的用戶表示不會再次訪問該網(wǎng)站， 60%的用戶表示影響

2、到了自己對 該商家的整體印象， 而 40%的用戶表示甚至可能不再去該商家的實體店 鋪。用戶不良體驗無疑是在與網(wǎng)站界面的交互中形成的。目前，很多商 業(yè)網(wǎng)站已經(jīng)充分認(rèn)識到周到、 貼心的網(wǎng)站界面設(shè)計對于企業(yè)利益獲取的 重要性。很多跨國公司如雅虎、惠普、 IBM 微軟、蘋果、等都先后成立 了用戶體驗研究機構(gòu)，嘗試將用戶體驗的研究成果應(yīng)用到界面設(shè)計中 來，國內(nèi)互聯(lián)網(wǎng)企業(yè)如百度、騰訊等也都建立了相應(yīng)的研究團隊。 二、網(wǎng)站界面優(yōu)化的核心要素 網(wǎng)站服務(wù)界面是指網(wǎng)站為用戶辦事服務(wù)和提供信息的網(wǎng)頁內(nèi)容展 現(xiàn)方式。關(guān)注服務(wù)界面，就是要做好網(wǎng)頁界面的優(yōu)化設(shè)計工作。基于用 戶體驗進行網(wǎng)站服務(wù)界面優(yōu)化設(shè)計，需要將用戶體驗

3、從不同層次、 維度進行分解，提取與網(wǎng)頁界面相關(guān)的要素，然后才能對相應(yīng)要素 實施具體的優(yōu)化設(shè)計。 Adaptive Path 公司的創(chuàng)始人James Garret對用戶體驗的要素進行過較為系統(tǒng)地研 究，將用戶體驗劃分為戰(zhàn)略、范圍、結(jié)構(gòu)、框架、表現(xiàn)10個核心要素， 如圖所示。這5個層面自下而上逐步的從抽象轉(zhuǎn)為具體。 圖1.用戶體驗要素模型 這一用戶體驗要素模型中與界面優(yōu)化直接相關(guān)的是框架層和表現(xiàn) 層的四個關(guān)鍵要素，即界面設(shè)計、導(dǎo)航設(shè)計、信息設(shè)計和視覺設(shè)計。我 們主要討論界面設(shè)計這一主要要素。 三、網(wǎng)站界面的優(yōu)化 3.1提高頁面響應(yīng)速度 隨著科技的發(fā)展用戶等待網(wǎng)頁加載的耐性越來越低。2009年，微軟

4、 搜索引擎必應(yīng)（bing）進行過一項調(diào)查，研究頁面載入速度和其他網(wǎng)站 指標(biāo)是否有明顯相關(guān)性。根據(jù)報告顯示，每2秒鐘的延遲頁面會使用戶 滿意度降低3.8%的，減少4.3%的單位用戶收入和減少4.3% 的點擊數(shù)。多項研究結(jié)果表明，2秒以內(nèi)是用戶最滿意的網(wǎng)頁打開 時間，用戶能夠忍受的最長等待時間為 6-8秒，如果網(wǎng)頁載入時間超過 12秒，99%的用戶會關(guān)閉網(wǎng)頁。從用戶角度看，網(wǎng)頁打開的速度越慢， 其心理受挫感會越強， 進而會惡化用戶對網(wǎng)站的使用體驗。 目前，百度、 谷歌等主流搜索引擎已經(jīng)將頁面響應(yīng)速度加入了他們的排名計算因素 中，成為決定網(wǎng)站權(quán)重值的重要因素，可見頁面響應(yīng)速度的重要性。 網(wǎng)站應(yīng)定期對

5、頁面響應(yīng)速度進行測試。例如，可以利用標(biāo)準(zhǔn)化度量 工具如 YSlow 來協(xié)助進行前端性能優(yōu)化。同時采取相應(yīng)措施改進性能： 一方面應(yīng)盡量減少網(wǎng)頁文件的大小。圖片和多媒體在修飾網(wǎng)頁的同時， 也成為影響網(wǎng)頁下載速度的重要因素， 可將圖片壓縮或?qū)⒋髨D分塊成為 零散圖片來減少圖片載入負(fù)荷。另一方面可提高加載的呈現(xiàn)效率， 選擇 讓頁面內(nèi)容根據(jù)重要程度有秩序地加載。 3.2 增強站內(nèi)搜索易用性 絕大多數(shù)功能完善的政府網(wǎng)站都提供站內(nèi)搜索服務(wù)，并將其當(dāng)做標(biāo) 準(zhǔn)功能。當(dāng)用戶無法通過導(dǎo)航系統(tǒng)找到信息或者他們清楚自己所需信息 的準(zhǔn)確描述時，發(fā)起站內(nèi)搜索將是獲取信息最簡單、最直接的途徑。然 而，目前絕大多數(shù)政府網(wǎng)站的站內(nèi)

6、搜索實際效果都不盡人意， 有的網(wǎng)站 甚至沒有設(shè)置搜索條。 搜索功能不足使得用戶面對龐大的政府網(wǎng)站資源 無從下手，既降低了用戶體驗，也降低了網(wǎng)站資源的利用率。增強站內(nèi) 搜索的易用性主要從兩個方面入手：一是要讓用戶易于發(fā)現(xiàn)， 二是要提 高搜索性能。 首先，搜索條的位置要盡量統(tǒng)一，且放置在醒目位置。較為通用的 做法是放置在網(wǎng)頁右上角， 并使用與周圍網(wǎng)頁元素顏色對比強烈的搜索 按鈕吸引用戶注意。 其次，搜索性能方面，應(yīng)用查詢建議工具，提供結(jié)果篩選功能，在 提高搜索查準(zhǔn)率的同時， 還可建立垂直搜索。 查詢建議工具又稱為提前 鍵入，當(dāng)用戶在搜索框中輸入相應(yīng)詞時會自動出現(xiàn)更多相關(guān)的搜索詞， 查詢建議工具對于

7、那些不太明確查詢信息的正確描述的用戶來說尤其 有效，目前google、百度都提供了此功能。 3.3 優(yōu)化界面細節(jié)體驗 網(wǎng)站建設(shè)之初，設(shè)計人員往往按照對用戶需求的理解和規(guī)劃方案進 行服務(wù)界面設(shè)計， 而這種狀況下往往因為關(guān)注了一些大的方面，卻忽視 了一些細節(jié)功能的處理。 而很多時候，一些細節(jié)的優(yōu)化最能夠給用戶驚 喜、貼心的感受。 細節(jié)處理的過程實際上亦是用戶需求的發(fā)現(xiàn)與需求滿足的過程。隨 著互聯(lián)網(wǎng)技術(shù)不斷創(chuàng)新， 已經(jīng)出現(xiàn)了一些用于改善網(wǎng)站用戶體驗的智能 分析工具， 其中就有國家信息中心網(wǎng)絡(luò)政府研究中心研發(fā)的記錄網(wǎng)站用 戶點擊行為的分析工具 政府網(wǎng)站頁面熱力圖。 熱力圖收集了網(wǎng)民訪 問頁面的每一次鼠

8、標(biāo)點擊， 并將這些點擊位置用添加圖層的方式在政府 網(wǎng)站頁面上予以準(zhǔn)確標(biāo)示，是分析網(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 好奇，認(rèn)為這里應(yīng)當(dāng) 有內(nèi)容。于是我們建議成都網(wǎng)站運營部門在網(wǎng)站首頁

9、logo 中加入了鏈 接，點擊 logo 將進入 logo “太陽神鳥 ”的介紹頁面中，讓用戶對 logo 以 及網(wǎng)站設(shè)計風(fēng)格有更為深入的了解。 熱力圖是用戶訪問行為的客觀記錄 工具，基于熱力圖可以有針對性的發(fā)現(xiàn)優(yōu)化細節(jié)。 3.4 提升表單的友好性 表單是用戶在網(wǎng)站上進行信息輸入的窗口，是交互體驗最重要的影 響元素。對于網(wǎng)站來說，想要獲取盡可能詳細、規(guī)范的用戶信息，而對 于用戶來說，希望填寫的表單越簡單越好。因此，在滿足網(wǎng)站信息收集 基本要求的同時，也要考慮表單設(shè)計的友好性。 一是應(yīng)減少表單操作的時間。表單輸入元素應(yīng)盡可能簡化，避免過 早向用戶索要過于詳細的信息， 否則繁瑣的輸入操作不僅延長了

10、完成任 務(wù)的時間，還會導(dǎo)致用戶的厭煩情緒而放棄使用。 根據(jù)用戶喜歡點擊多 于輸入的操作習(xí)慣， 還應(yīng)盡量用選擇性控件代替輸入框。二是盡量簡化 用戶的思考。 為容易產(chǎn)生疑惑的表單元素提供必要的解釋或示例， 如允 許輸入的長度、必填項等，避免讓用戶過多思考。三是出錯信息及時提 醒。當(dāng)用戶在相應(yīng)輸入框中輸入錯誤信息時應(yīng)及時判斷并提醒，這比起 點擊提交按鈕后出現(xiàn)錯誤頁面提示、要求返回重新輸入的交互方式，不 僅降低了用戶的勞動量，也減少了任務(wù)完成的時間。 四是讓表單記住用戶的部分信息以減少用戶下次訪問時重復(fù)信息 的輸入。 3.5 劃頁面布局 網(wǎng)站頁面中用來傳遞信息的元素主要有文字、圖片、多媒體動畫、 視頻

11、。頁面布局應(yīng)將這些不同內(nèi)容進行合理排列布局， 使得用戶更有效 的抓住重點。 頁面布局需要結(jié)合用戶的行為習(xí)慣進行考慮。國外的一些研究機構(gòu) 和學(xué)者曾組織過關(guān)于網(wǎng)頁閱讀習(xí)慣的視覺軌跡研究。 研究結(jié)果表明用戶 瀏覽網(wǎng)站的視覺路線類似于字母 “F”。所謂F型模式，即用戶瀏覽網(wǎng) 頁時首先從網(wǎng)頁最左上看起， 看完前面幾行的大部分內(nèi)容，越往下看的 越短，只有左邊一部分內(nèi)容被看到，形成 F 型瀏覽軌跡， F 型瀏覽軌跡 也正好符合人們從左到右的書寫習(xí)慣。因此，對于頁面布局來說，應(yīng)將 網(wǎng)頁重要的元素放在左側(cè)，并且以符合 F形狀的形式來放置。 在具體的頁面布局上，現(xiàn)在有很多良好的布局解決技巧可以幫助創(chuàng) 建整潔有序的

12、內(nèi)容布局，包括內(nèi)容的歸類整理、排列與對齊、貼近與遠 離、流暢的視線移動、平衡、重復(fù)元素的應(yīng)用等等。通過對網(wǎng)頁設(shè)計元 素及內(nèi)容進行合理布局 ,使網(wǎng)頁形式富有節(jié)奏感并且圖文并茂。 事實上，頁面布局的工作分為前期的布局設(shè)計和后期的網(wǎng)站調(diào)整。 前期布局設(shè)計是通過對用戶需求的預(yù)測而做的設(shè)計， 這樣的設(shè)計不一定 能夠完全解決用戶的訪問需求，因此需要結(jié)合后期的網(wǎng)站訪問數(shù)據(jù)分 析、可用性測試、欄目設(shè)置等進行調(diào)整，將用戶最需要、最關(guān)注的 內(nèi)容放在最明顯的位置，從而提升用戶體驗。后期的調(diào)整是長期性 工作，又是極容易被忽視的工作。 3.6 實例分析 “十樂網(wǎng) ”網(wǎng)站界面的視覺優(yōu)化， 分別針對以下九個方面進行： 1、視 覺風(fēng)格； 2、LOGO 優(yōu)化； 3、首頁優(yōu)化； 4、頁面尺寸： 5、色彩搭配； 6、文字排版； 7、圖標(biāo)優(yōu)化； 8、Header 優(yōu)化； 9、Footer 優(yōu)化。 圖1 “十樂網(wǎng)”的優(yōu)化 “十樂網(wǎng)”網(wǎng)站界面可用性設(shè)計，可用性的目的是使產(chǎn)品更為易用、 易學(xué)、簡單和愉悅， 是通過對用戶的認(rèn)知和知