網(wǎng)站界面設(shè)計(jì)的原則

2023-10-19    分類: 網(wǎng)站建設(shè)

網(wǎng)站用戶界面(Website User Interface)是指網(wǎng)站用于和用戶交流的外觀、部件和程序等等。如果你經(jīng)常上網(wǎng)的話,會(huì)看到很多網(wǎng)站設(shè)計(jì)很樸素,看起來(lái)給人一種很舒服的感覺(jué);有點(diǎn)網(wǎng)站很有創(chuàng)意,能給人帶來(lái)意外的驚喜和視覺(jué)的沖擊;而相當(dāng)多的網(wǎng)站頁(yè)面上充斥著怪異的字體,花哨的色彩和圖片,給人網(wǎng)頁(yè)制作粗劣的感覺(jué)。網(wǎng)站界面的設(shè)計(jì),既要從外觀上進(jìn)行創(chuàng)意以到達(dá)吸引眼球的目的,還要結(jié)合圖形和版面設(shè)計(jì)的相關(guān)原理,從而使得網(wǎng)站設(shè)計(jì)變成了一門獨(dú)特的藝術(shù)。

通常的講,企業(yè)網(wǎng)站用戶界面的設(shè)計(jì)應(yīng)遵循以下幾個(gè)基本原則:

1.用戶導(dǎo)向(User oriented)原則

設(shè)計(jì)網(wǎng)頁(yè)首先要明確到底誰(shuí)是使用者,要站在用戶的觀點(diǎn)和立場(chǎng)上來(lái)考慮設(shè)計(jì)網(wǎng)站。要作到這一點(diǎn),必須要和用戶來(lái)溝通,了解他們的需求、目標(biāo)、期望和偏好等。網(wǎng)頁(yè)的設(shè)計(jì)者要清楚,用戶之間差別很大,他們的能力各有不同。比如有的用戶可能會(huì)在視覺(jué)方面有欠缺(如色盲),對(duì)很多的顏色分辨不清;有的用戶的聽(tīng)覺(jué)也會(huì)有障礙,對(duì)于網(wǎng)站的語(yǔ)音提示反映遲鈍;而且相當(dāng)一部分用戶的計(jì)算機(jī)使用經(jīng)驗(yàn)很初級(jí),對(duì)于復(fù)雜一點(diǎn)的操作會(huì)感覺(jué)到很費(fèi)力。另外,用戶使用的計(jì)算機(jī)機(jī)器配置也是千差萬(wàn)別,包括顯卡、聲卡、內(nèi)存、網(wǎng)速、操作系統(tǒng)以及瀏覽器等都會(huì)有不同。設(shè)計(jì)者如果忽視了這些差別,設(shè)計(jì)出的網(wǎng)頁(yè)在不同的機(jī)器上顯示就會(huì)造成混亂。

2.KISS(Keep It Simple And Stupid)原則

KISS原則就是"Keep It Sample And Stupid"的縮寫,簡(jiǎn)潔和易于操作是網(wǎng)頁(yè)設(shè)計(jì)的最重要的原則。畢竟,網(wǎng)站建設(shè)出來(lái)是用于普通網(wǎng)民來(lái)查閱信息和使用網(wǎng)絡(luò)服務(wù)。沒(méi)有必要在網(wǎng)頁(yè)上設(shè)置過(guò)多的操作,堆集上很多復(fù)雜和花哨的圖片。該原則一般的要求,網(wǎng)頁(yè)的下載不要超過(guò)10秒鐘(普通的撥號(hào)用戶56 Kbps網(wǎng)速);盡量使用文本鏈接,而減少大幅圖片和動(dòng)畫的使用;操作設(shè)計(jì)盡量簡(jiǎn)單,并且有明確的操作提示;網(wǎng)站所有的內(nèi)容和服務(wù)都在顯眼處向用戶予以說(shuō)明等。

3.布局控制

關(guān)于網(wǎng)頁(yè)排版布局方面,很多網(wǎng)頁(yè)設(shè)計(jì)者重視不夠,網(wǎng)頁(yè)排版設(shè)計(jì)的過(guò)于死板,甚至照抄他人。如果網(wǎng)頁(yè)的布局凌亂,僅僅把大量的信息堆集在頁(yè)面上,會(huì)干擾瀏覽者的閱讀。一般在網(wǎng)頁(yè)設(shè)計(jì)上所要遵循的原理有:

(1)Miller公式。

根據(jù)心理學(xué)家George A.Miller的研究表明,人一次性接受的信息量在7個(gè)比特左右為宜??偨Y(jié)一個(gè)公式為:一個(gè)人一次所接受的信息量為 7±2 比特。這一原理被廣泛應(yīng)用于網(wǎng)站建設(shè)中,一般網(wǎng)頁(yè)上面的欄目選擇優(yōu)質(zhì)在5~9個(gè)之間,如果網(wǎng)站所提供給瀏覽者選擇的內(nèi)容鏈接超過(guò)這個(gè)區(qū)間,人在心理上就會(huì)煩躁,壓抑,會(huì)讓人感覺(jué)到信息太密集,看不過(guò)來(lái),很累。例如Aol.com的欄目設(shè)置:Main、MyAol、Mail、People、Search、Shop、Channels和Devices共八個(gè)分類。Msn.com的欄目設(shè)置:MSN Home、My MSN、Hotmail、Search、Shopping、Money和People & Chat共七項(xiàng)。然而很多國(guó)內(nèi)的網(wǎng)站在欄目的設(shè)置遠(yuǎn)遠(yuǎn)超出這個(gè)區(qū)間。

(2)分組處理。

上面提到,對(duì)于信息的分類,不能超過(guò)9個(gè)欄目。但如果你的內(nèi)容實(shí)在是多,超出了9個(gè),需要進(jìn)行分組處理。如果,你的網(wǎng)頁(yè)上提供幾十篇文章的鏈接,需要每隔7篇加一個(gè)空行或平行線做以分組。如果你的網(wǎng)站內(nèi)容欄目超出9個(gè),如微軟公司的網(wǎng)站,共有11個(gè)欄目,超過(guò)了9個(gè)。為了不破壞Miller公式,在設(shè)計(jì)時(shí)使用藍(lán)黑兩種顏色分開。

4.視覺(jué)平衡

網(wǎng)頁(yè)設(shè)計(jì)時(shí),也要各種元素(如圖形、文字、空白)都會(huì)有視覺(jué)作用。根據(jù)視覺(jué)原理,圖形與一塊文字相比較,圖形的視覺(jué)作用要大一些。所以,為了達(dá)到視覺(jué)平衡,在設(shè)計(jì)網(wǎng)頁(yè)時(shí)需要以更多的文字來(lái)平衡一幅圖片。另外,按照中國(guó)人的閱讀習(xí)慣是從左到右,從上到下,因此視覺(jué)平衡也要遵循這個(gè)這個(gè)道理。例如,你的很多的文字是采用左對(duì)齊〈Align=left〉,需要在網(wǎng)頁(yè)的右面加一些圖片或一些較明亮、較醒目的顏色。一般情況下,每張網(wǎng)頁(yè)都會(huì)設(shè)置一個(gè)頁(yè)眉部分和一個(gè)頁(yè)腳部分,頁(yè)眉部分常放置一些Banner廣告或?qū)Ш綏l,而頁(yè)腳部分通常放置聯(lián)系方式和版權(quán)信息等,頁(yè)眉和頁(yè)腳在設(shè)計(jì)上也要注重視覺(jué)平衡。同時(shí),也決不能低估空白的價(jià)值。如果你的網(wǎng)頁(yè)上所顯示的信息非常密集,這樣不但不利于讀者閱讀,甚至?xí)鹱x者反感,破壞該網(wǎng)站的形象。在網(wǎng)頁(yè)設(shè)計(jì)上,適當(dāng)增加一些空白,精煉你的網(wǎng)頁(yè),使得頁(yè)面變的簡(jiǎn)潔。

5.色彩的搭配和文字的可閱讀性

顏色是影響網(wǎng)頁(yè)的重要因素,不同的顏色對(duì)人的感覺(jué)有不同的影響,例如:紅色和橙色使人興奮并使得心跳加速;黃色使人聯(lián)想到陽(yáng)光,是一種快活的顏色;黑顏色顯得比較莊重,考慮到你希望對(duì)瀏覽者產(chǎn)生什么影響,為網(wǎng)頁(yè)設(shè)計(jì)選擇合適的顏色(包括背景色、元素顏色、文字顏色、鏈節(jié)顏色等)。

為方便閱讀網(wǎng)站上的信息,可以參考報(bào)紙的編排方式將網(wǎng)頁(yè)的內(nèi)容分欄設(shè)計(jì),甚至兩欄也要比一滿頁(yè)的視覺(jué)效果要好。另一種能夠提高文字可讀性的因素是所選擇的字體,通用的字體(Arial,Courier New,Garamond,Times New Roman,中文宋體)最易閱讀,特殊字體用于標(biāo)題效果較好,但是不適合正文。如果在整個(gè)頁(yè)面使用一些特殊字體(如Cloister,Gothic,Script,Westminster,華文彩云,華文行楷),這樣讀者閱讀起來(lái)感覺(jué)一定很糟糕。該類特殊字體如果在頁(yè)面上大量使用,會(huì)使得閱讀頗為費(fèi)力,瀏覽者的眼睛很快就會(huì)疲勞,不得不轉(zhuǎn)移到其他頁(yè)面。

6.和諧與一致性

通過(guò)對(duì)網(wǎng)站的各種元素(顏色、字體、圖形、空白等)使用一定的規(guī)格,使得設(shè)計(jì)良好的網(wǎng)頁(yè)看起來(lái)應(yīng)該是和諧的?;蛘哒f(shuō),網(wǎng)站的眾多單獨(dú)網(wǎng)頁(yè)應(yīng)該看起來(lái)像一個(gè)整體。網(wǎng)站設(shè)計(jì)上要保持一致性,這又是很重要的一點(diǎn)。一致的結(jié)構(gòu)設(shè)計(jì),可以讓瀏覽者對(duì)網(wǎng)站的形象有深刻的記憶;一致的導(dǎo)航設(shè)計(jì),可以讓瀏覽者迅速而又有效的進(jìn)入在網(wǎng)站中自己所需要的部分;一致的操作設(shè)計(jì),可以讓瀏覽者快速學(xué)會(huì)在整個(gè)網(wǎng)站的各種功能操作。破壞這一原則,會(huì)誤導(dǎo)瀏覽者,并且讓整個(gè)網(wǎng)站顯的雜亂無(wú)章,給人留下不良的印象。當(dāng)然,網(wǎng)站設(shè)計(jì)的一致性并不意味著刻板和一成不變,有的網(wǎng)站在不同欄目使用不同的風(fēng)格,或者隨著時(shí)間的推移不斷的改版網(wǎng)站,會(huì)給瀏覽者帶來(lái)新鮮的感覺(jué)。

7.個(gè)性化

(1)符合網(wǎng)絡(luò)文化

企業(yè)網(wǎng)站不同于傳統(tǒng)的企業(yè)商務(wù)活動(dòng),要符合Internet網(wǎng)絡(luò)文化的要求。首先,網(wǎng)絡(luò)最早是非正式性、非商業(yè)化的,只是科研人員用來(lái)交流信息。其次,網(wǎng)絡(luò)信息是只在計(jì)算機(jī)屏幕上顯示而沒(méi)有打印出來(lái)閱讀,網(wǎng)絡(luò)上的交流具有隱蔽性,誰(shuí)也不知道對(duì)方的真實(shí)身份。另外,許多人在上網(wǎng)的時(shí)候是在家中或網(wǎng)吧等一些比較休閑,比較隨意的環(huán)境下。此時(shí)網(wǎng)絡(luò)用戶的使用環(huán)境所蘊(yùn)涵的思維模式與坐在辦公室里西裝革履的時(shí)候大相徑庭。因此,整個(gè)互聯(lián)網(wǎng)的文化是一種休閑的、非正式性的、輕松活潑的文化。在網(wǎng)站上使用幽默的網(wǎng)絡(luò)語(yǔ)言,創(chuàng)造一種休閑的、輕松愉快、非正式的氛圍會(huì)使網(wǎng)站的訪問(wèn)量大增。

(2)塑造網(wǎng)站個(gè)性

另外,網(wǎng)站的整體風(fēng)格和整體氣氛表達(dá)要同企業(yè)形象相符合并應(yīng)該很好的體現(xiàn)企業(yè)CI。在這方面比較經(jīng)典的案例有:可口可樂(lè)個(gè)性鮮明的前衛(wèi)網(wǎng)站"Life Tastes Good";工整、全面、細(xì)致的通用電氣公司網(wǎng)站"We bring good things to life(GE帶來(lái)美好的生活)";崇尚科技創(chuàng)新文化的3M公司網(wǎng)站"Creating solutions for business、industry and home";刻意扮演一個(gè)數(shù)字電子娛樂(lè)之集大成者的角色,要成為新時(shí)代夢(mèng)想實(shí)現(xiàn)者的索尼網(wǎng)站;平易近人、親情濃郁的通用汽車公司網(wǎng)站體現(xiàn)了"以人為本"的企業(yè)定位和營(yíng)銷策略;服務(wù)全面、細(xì)致、方便,處處體現(xiàn)"賓至如歸"服務(wù)理念的希爾頓大酒店網(wǎng)站。

新聞標(biāo)題:網(wǎng)站界面設(shè)計(jì)的原則
URL標(biāo)題:http://www.bm7419.com/news19/286769.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站建設(shè)、電子商務(wù)、網(wǎng)站維護(hù)、網(wǎng)頁(yè)設(shè)計(jì)公司、軟件開發(fā)、營(yíng)銷型網(wǎng)站建設(shè)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

網(wǎng)站托管運(yùn)營(yíng)