網(wǎng)站如何提高界面的交互性

遼寧對(duì)外經(jīng)貿(mào)學(xué)院信息管理系 任華新

網(wǎng)站如何提高界面的交互性

遼寧對(duì)外經(jīng)貿(mào)學(xué)院信息管理系 任華新

隨著互聯(lián)網(wǎng)技術(shù)的快速發(fā)展，用戶與計(jì)算機(jī)之間的交互方式與交互技術(shù)也層出不窮，并借助計(jì)算機(jī)技術(shù)得以改進(jìn)和發(fā)展。作為人機(jī)之間傳遞和交換信息的第一個(gè)窗口的網(wǎng)站，用戶界面對(duì)人機(jī)交互起到了決定性的重要和必要作用。那么如何提高人機(jī)交互的速度就成為了人們注意的焦點(diǎn)。本文闡述了影響頁(yè)面交互的因素，并找到了相應(yīng)的解決方法。

網(wǎng)站；網(wǎng)頁(yè)；交互

互聯(lián)網(wǎng)信息時(shí)代的發(fā)展為網(wǎng)站設(shè)計(jì)及網(wǎng)站中的人機(jī)界面交互設(shè)計(jì)提供了前所未有的發(fā)展空間，越來(lái)越多的軟件和互聯(lián)網(wǎng)公司開始重視網(wǎng)站中的人機(jī)交互和用戶體驗(yàn)在產(chǎn)品中的重要作用。而網(wǎng)站中的用戶界面是用戶和網(wǎng)絡(luò)產(chǎn)生接觸的第一個(gè)窗口,對(duì)于互聯(lián)網(wǎng)產(chǎn)品的用戶體驗(yàn)以及訪問(wèn)量、注冊(cè)量、銷售額甚至成本等都有至關(guān)重要的影響。

在一個(gè)網(wǎng)站中，網(wǎng)頁(yè)上的可交互元素，包括頁(yè)面上的按鈕、鏈接、文本框等，更應(yīng)合理設(shè)計(jì)才能帶來(lái)好的頁(yè)面交互性。那么如何提高網(wǎng)頁(yè)的交互性呢，主要是要注意以下幾點(diǎn)。

1 注意網(wǎng)站的鏈接、按鈕和LOGO

一個(gè)網(wǎng)站的鏈接和按鈕都應(yīng)該符合用戶的使用習(xí)慣。目前鏈接文字通用的表現(xiàn)方式是字色藍(lán)色并帶下劃線的文字。而按鈕應(yīng)當(dāng)是有一定的立體感，看上去就是一個(gè)突出的按鈕，一看就知道是可以點(diǎn)擊的。而LOGO是與其它網(wǎng)站鏈接以及讓其它網(wǎng)站鏈接的標(biāo)志和門戶。在通常情況下，通過(guò)點(diǎn)擊LOGO可以返回到網(wǎng)站的首頁(yè)。所以,LOGO即是一個(gè)網(wǎng)站的名片，LOGO更是網(wǎng)站的靈魂所在，除此之外它還具有一個(gè)重要的導(dǎo)航功能。網(wǎng)站的LOGO作為一個(gè)重要的網(wǎng)頁(yè)元素，當(dāng)鼠標(biāo)移上去或者劃過(guò)等事件，應(yīng)該有相關(guān)的信息響應(yīng)。

2 網(wǎng)站頁(yè)面加載進(jìn)度

網(wǎng)站的每個(gè)鏈接，包括網(wǎng)站的首頁(yè)打開都需要時(shí)間加載的，只是某些網(wǎng)站功能較為簡(jiǎn)單，加載起來(lái)很快是而無(wú)需擔(dān)心頁(yè)面延遲。但某些網(wǎng)站的加載往往不能一次性完成，例如淘寶這種大型購(gòu)物平臺(tái)，頁(yè)面有很多的商品圖片，加載需要一定時(shí)間，這個(gè)時(shí)候是需要一定的響應(yīng)式的，所以頁(yè)面更應(yīng)該給出提示，否則讓用戶等待太久是很不友好的做法。

事實(shí)上,有很多的因素會(huì)影響到網(wǎng)頁(yè)初次加載的響應(yīng)時(shí)間:HTML文件的文檔的大??；頁(yè)面中的各種元素例如代碼、圖片、flash、音頻、視頻等元素文檔的大??；HTML頁(yè)面的復(fù)雜程度(瀏覽器可以很快的展現(xiàn)簡(jiǎn)單的頁(yè)面)；用戶反應(yīng)的快慢也會(huì)影響瀏覽速度；被網(wǎng)頁(yè)頁(yè)面調(diào)用的其他內(nèi)容所在的服務(wù)器的訪問(wèn)速度；網(wǎng)站的域名和外部域名的DNS的解析速度也會(huì)影響網(wǎng)頁(yè)的加載速度；用戶所使用的計(jì)算機(jī)的各種性能(如果計(jì)算機(jī)的資源消耗過(guò)多，或者配置過(guò)低，瀏覽器也會(huì)變得響應(yīng)緩慢)；服務(wù)器的配置的高低。

除了上述因素會(huì)導(dǎo)致網(wǎng)站響應(yīng)的快慢以外，一些人為的因素及一些硬件也會(huì)影響網(wǎng)頁(yè)加載的速度。例如：服務(wù)器端、客戶端和網(wǎng)速。服務(wù)器端主要包括：服務(wù)器的地域，是否雙線，處理能力等。

那么如何提高頁(yè)面的瀏覽速度呢？采取以下幾種基本的方法可以有效的提高網(wǎng)頁(yè)的瀏覽速度。

（1）在不影響頁(yè)面質(zhì)量的前提下，盡可能的優(yōu)先優(yōu)化HTML代碼。（在頁(yè)面上傳服務(wù)器之前，先去掉HTML文檔中的沒必要的換行標(biāo)記以及注釋。但為了保證頁(yè)面的可讀性和可維護(hù)性，注釋的代碼還應(yīng)當(dāng)保留在源代碼中）。

（2）為了減少文檔之間的依賴，在制作網(wǎng)頁(yè)時(shí)頁(yè)面中應(yīng)盡可能少的包含其他外部引用。（可以將多個(gè)腳本放入一個(gè)腳本文件，圖片處理的技術(shù)將多個(gè)小圖片合并成為一個(gè)大圖，這樣就只需要加載一次）。

（3）把開發(fā)的網(wǎng)頁(yè)里面的字節(jié)減少一些，把沒用的字節(jié)都刪了。盡量多使用div來(lái)布局網(wǎng)頁(yè)，少使用表格布局。

（4）盡可能的定制圖片及包含圖片的元素的尺寸。讓圖片本身就符合網(wǎng)頁(yè)的要求，這樣可以盡量避免頁(yè)面展現(xiàn)時(shí)由于圖片不能一次性加載而造成頁(yè)面元素跳動(dòng)的現(xiàn)象。

（5）小腳本放在頭元素中，而比較大的腳本則放在頁(yè)面的尾端加載，這樣頁(yè)面可以在大的腳本加載完成前展示出來(lái)。如果把大的腳本放在頁(yè)面的頭元素進(jìn)行加載，則瀏覽器會(huì)等到腳本完全加載完成后才顯示頁(yè)面內(nèi)容。

3 網(wǎng)頁(yè)中應(yīng)隱藏不常用的操作

網(wǎng)站中不經(jīng)常使用的操作可以不用突顯出來(lái)，將其弱化或隱藏。例如，網(wǎng)站中有某個(gè)彈出層是幾乎不用到的，為了不對(duì)用戶造成干擾，我可以在當(dāng)鼠標(biāo)經(jīng)過(guò)的時(shí)候才出現(xiàn)這個(gè)彈出層。這個(gè)是基于上文提到的不干擾用戶注意力角度出發(fā)的。比如，在新浪微博中，微博的屏幕功能只有在鼠標(biāo)移到對(duì)應(yīng)某條微博的右上角并單擊鼠標(biāo)的時(shí)候才會(huì)彈出操作提示框，否則是看不到屏蔽操作的，這個(gè)就是一個(gè)隱藏操作的具體體現(xiàn)。

4 盡量減少?gòu)棾鲂畔?/h2>

為什么要盡量減少?gòu)棾鲂畔⒛?，這里舉一個(gè)例子來(lái)說(shuō)明一下?當(dāng)你正在看一部精彩的電影或看一本精彩的書，這時(shí)接到一個(gè)無(wú)實(shí)質(zhì)內(nèi)容的電話，你肯定會(huì)非常惱火。網(wǎng)頁(yè)設(shè)計(jì)也是一樣，如果能在當(dāng)前頁(yè)面顯示完成就盡量在當(dāng)前頁(yè)面加載完成。對(duì)于那些彈出信息，例如彈出層、跳轉(zhuǎn)頁(yè)面、模態(tài)窗口等都影響用戶體驗(yàn)。

5 網(wǎng)站對(duì)用戶需要引導(dǎo)-網(wǎng)站導(dǎo)航

一個(gè)好的網(wǎng)站是能夠讓用戶全面瀏覽，所以網(wǎng)站導(dǎo)航十分重要。每個(gè)用戶在瀏覽頁(yè)面時(shí)往往都是不確定性的、無(wú)規(guī)律的，同時(shí)用戶更不喜歡選擇。所以，網(wǎng)站需要時(shí)刻讓用戶看清當(dāng)前的位置。如果瀏覽者不能快速、便捷地找到它，他們就很有可能去別的網(wǎng)站。例如，很多博客網(wǎng)站除了首頁(yè)導(dǎo)航之外，還將分類作為第二導(dǎo)航放在頁(yè)面的邊欄。此外，網(wǎng)站的頁(yè)腳也很重要，因?yàn)橛胁糠钟脩魹g覽時(shí)接觸到的是網(wǎng)站的底部，這個(gè)時(shí)候網(wǎng)站的頁(yè)腳可以方便的讓用戶找到當(dāng)前的站點(diǎn)位置。

一直以來(lái)，網(wǎng)頁(yè)界面設(shè)計(jì)的研究主要針對(duì)于視覺方面，而設(shè)計(jì)的內(nèi)容、流程和原則虛擬了實(shí)物產(chǎn)品的設(shè)計(jì)，基本上沒有太大的改變。隨著信息科技的發(fā)展和人機(jī)交互技術(shù)的成熟，交互界面的設(shè)計(jì)已經(jīng)成長(zhǎng)為一個(gè)獨(dú)立的行業(yè)。本文闡述了基于增強(qiáng)現(xiàn)實(shí)的交互界面概念，分析了其突出特點(diǎn)，總結(jié)歸納交互界面設(shè)計(jì)的流程與原則。交互界面設(shè)計(jì)是一個(gè)全新而又復(fù)雜的研究領(lǐng)域，本文的研究?jī)H僅是交互界面設(shè)計(jì)的冰山一角，如何將交互界面設(shè)計(jì)的理論特性分析清楚、理解透徹，還得依靠同行們的不懈努力和大量實(shí)踐，使用戶和網(wǎng)絡(luò)的信息交流更加簡(jiǎn)便、高效和人性化。

[1] AlbertMehrabian.Analysis of the Big five Personality Factors in Terms of the PAD Temperament Model[J]. Australian Journal of Psychology.2011(2).

[2] 高榛.網(wǎng)絡(luò)游戲中的用戶交互設(shè)計(jì)[J].戲劇之家(上半月).2012(01).

[3] 歐陽(yáng)建軍.基于交互設(shè)計(jì)的界面應(yīng)用研究[J].科教導(dǎo)刊(中旬刊).2010(04).

[4] 劉派.創(chuàng)造愉快體驗(yàn):交互設(shè)計(jì)個(gè)案“智能美食評(píng)論家”實(shí)踐研究[J].南京藝術(shù)學(xué)院學(xué)報(bào)(美術(shù)與設(shè)計(jì)版).2013(03).

本研究為校級(jí)創(chuàng)新團(tuán)隊(duì)項(xiàng)目：互聯(lián)網(wǎng)背景下的圖形用戶界面設(shè)計(jì)研究?！?/p>

任華新（1977-），女，碩士，副教授。研究領(lǐng)域：計(jì)算機(jī)應(yīng)用。