最新網(wǎng)站界面設(shè)計(jì)(網(wǎng)頁(yè)設(shè)計(jì))八大設(shè)計(jì)原則
今天我們還是說(shuō)下網(wǎng)頁(yè)設(shè)計(jì)常用的基本規(guī)范與設(shè)計(jì)原則.老譚站在多年從事網(wǎng)頁(yè)設(shè)計(jì)的角度全新詮釋八項(xiàng)新的設(shè)計(jì)原則。
網(wǎng)站界面設(shè)計(jì)即網(wǎng)頁(yè)設(shè)計(jì),既要從外觀上進(jìn)行創(chuàng)意以到達(dá)吸引眼球的目的,還要結(jié)合圖形和版面設(shè)計(jì)的相關(guān)原理,從而使得網(wǎng)站界面設(shè)計(jì)變成了一門(mén)獨(dú)特的藝術(shù)。任何網(wǎng)站用戶界面的設(shè)計(jì),甚至UI設(shè)計(jì),視覺(jué)設(shè)計(jì),移動(dòng)APP界面設(shè)計(jì)等 都要遵循以下幾個(gè)基本原則:
?一.用戶導(dǎo)向原則(User oriented),即用戶體驗(yàn)設(shè)計(jì)原則
設(shè)計(jì)網(wǎng)頁(yè)或APP首先要明確到底誰(shuí)是這個(gè)網(wǎng)頁(yè)的使用者,要站在用戶的觀點(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ǔ)音提示反應(yīng)比較遲鈍;而且相當(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ì)造成錯(cuò)亂。
?二.簡(jiǎn)潔和易于操作原則(Keep It Simple And Stupid - KSS),這里說(shuō)的就是網(wǎng)站的風(fēng)格,比如清新,win7風(fēng)格等??
KISS原則就是"Keep It Sample And Stupid"的縮寫(xiě),簡(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ù)雜和花哨的圖片。此原則的一般要求:
1、網(wǎng)頁(yè)的下載不要超過(guò)6秒鐘(普通的家庭寬帶為2M的,速度一般在220kb/s); ? 2、網(wǎng)頁(yè)盡量使用文本鏈接,而減少大幅圖片和動(dòng)畫(huà)的使用,從而加快網(wǎng)頁(yè)的打開(kāi)時(shí)間;
3、操作設(shè)計(jì)盡量簡(jiǎn)單,并且有明確的操作提示;
4、網(wǎng)站所有的內(nèi)容和服務(wù)都盡量在顯眼處向用戶予以說(shuō)明等。
?三.響應(yīng)式布局(Layout)??由于終端界面的多樣性,導(dǎo)致了設(shè)計(jì)師們需要考慮的因素很多拉。
在網(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、7±2的Miller公式。 ? 根據(jù)心理學(xué)家George A.Miller的研究表明,人一次性接受的信息量在7個(gè)比特左右為宜??偨Y(jié)一個(gè)公式為:一個(gè)人一次所接受的信息量為 7±2 比特。這一原理被廣泛應(yīng)用于網(wǎng)站建設(shè)中,一般網(wǎng)頁(yè)上面的欄目選擇最佳在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)站或其它幾個(gè)比較知名的門(mén)戶,有很多個(gè)欄目,超過(guò)了9個(gè)。為了不破壞7±2的Miller公式,在設(shè)計(jì)時(shí)把比較有代表性的分類加粗,然后再按性質(zhì)分組等。
四.排版和視覺(jué)平衡(Visual balance) ?
網(wǎng)頁(yè)設(shè)計(jì)時(shí),各種元素(如圖形、文字、空白)都要有視覺(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及網(wǎng)站LOGO,而頁(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)?shù)牡胤皆黾右恍┝舭?,精煉和升華你的網(wǎng)頁(yè)的形象及美感,使得頁(yè)面變得簡(jiǎn)潔。
五.色彩學(xué)的運(yùn)用及文字的可閱讀性(Colors and text can be read) ?
顏色是影響網(wǎng)頁(yè)的重要因素之一,不同的顏色對(duì)人的感覺(jué)有不同的影響,比如:紅色和橙色使人興奮并使得心跳加速;黃色使人聯(lián)想到陽(yáng)光,是一種快活的顏色;黑色顯得比較莊重,考慮到你希望對(duì)瀏覽者產(chǎn)生什么影響,為網(wǎng)頁(yè)設(shè)計(jì)選擇最恰當(dāng)?shù)念伾òū尘吧?、元素顏色、文字顏色、鏈?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è)面。
?六.網(wǎng)頁(yè)設(shè)計(jì)和諧與一致性(Harmony and consistency) ?
通過(guò)對(duì)網(wǎng)站的各種元素(顏色、字體、圖形、空白等)使用一定的規(guī)格,使得設(shè)計(jì)良好的網(wǎng)頁(yè)看起來(lái)應(yīng)該是和諧的?;蛘哒f(shuō),網(wǎng)站的眾多獨(dú)立網(wǎng)頁(yè)看起來(lái)更像一個(gè)整體。網(wǎng)站界面設(shè)計(jì)上要保持一致性,這是很重要的一點(diǎn)。一致的網(wǎng)站結(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é)。
?? 七.創(chuàng)意類,個(gè)性化,時(shí)尚化
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í)訪客的使用環(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。
? 八.網(wǎng)頁(yè)的加載均衡規(guī)劃與選擇(Planning and selection) ?即web前端開(kāi)發(fā)
1、尺寸 ? ·800*600能照顧到所有網(wǎng)友的電腦,但相當(dāng)是張“小報(bào)”。 ? ·1024*768漸成主流。1024*768能比800*600多出一欄的信息。 ? ·正文頁(yè)采用自適應(yīng)設(shè)計(jì),能在正文頁(yè)做更多相關(guān)內(nèi)容。首頁(yè)也可以嘗試自適應(yīng)的設(shè)計(jì)。自適應(yīng)設(shè)計(jì)的核心是要留出寬度伸縮自如的欄。 ? ·在1024*76模式下,頁(yè)面的長(zhǎng)度不易超過(guò)10屏。 ? ·隨著電腦升級(jí)換代,分辨率提高,電腦屏幕能夠提供的面積越來(lái)越大,這是一種難得的資源,要充分利用?!靶?bào)”改“大報(bào)”要增加一倍的紙張成本,網(wǎng)站改“寬版”,成本的增加卻要小得多。 ? 2、字體字號(hào) ? ·目錄頁(yè)用小字號(hào),為的是放更多的標(biāo)題。 ? ·正文頁(yè)用大字號(hào)。為的是讓讀者讀得舒坦。 ? ·慎用不容易看清楚的楷體??w的作用等于圖片,主要起美化版面的作用。 ? ·多用對(duì)搜索引擎友好的標(biāo)粗,來(lái)表示重點(diǎn)。 ? 3、顏色 ? ·同一個(gè)頁(yè)面的顏色不要超過(guò)4種。眼花繚亂,容易產(chǎn)生視覺(jué)疲勞。 ? ·顏色對(duì)比不要反差太大。網(wǎng)頁(yè)版面不是美術(shù)作品,要避免形式對(duì)內(nèi)容的喧賓奪主。 ? ·文字+底色能夠起到很好的突出作用,在視覺(jué)變化上相當(dāng)于圖片的作用。 ? 4、靜態(tài)化 ? ·訪問(wèn)量大的頁(yè)都應(yīng)該靜態(tài)化,以便減少服務(wù)器壓力,增強(qiáng)網(wǎng)站穩(wěn)定性。訪問(wèn)不到的網(wǎng)頁(yè)是最差的網(wǎng)頁(yè)。 ? ·動(dòng)態(tài)化和靜態(tài)化在一個(gè)頁(yè)面中結(jié)合使用,能同時(shí)得到輕負(fù)荷和即時(shí)交互性的好處。 ? ·哪些頁(yè)面的哪些地方需要靜態(tài)化要在一開(kāi)始就考慮,訪問(wèn)量大了之后,再高考慮,就遲了,由動(dòng)態(tài)化轉(zhuǎn)為靜態(tài)化,會(huì)有很多歷史問(wèn)題。 ? 5、分欄 ? ·首頁(yè)選4欄?還是3欄? ? ·正文頁(yè)多用2欄。 ? ·“縱向邏輯”是指將相近的內(nèi)容從上至下排列,而不是從左向右排列。如果讀者對(duì)這方面內(nèi)容感興趣,他會(huì)從上至下,逐行閱讀。這樣可充分力利用首屏,讓首頁(yè)增多從上至下閱讀的可能。 ? ·避免一欄太強(qiáng),一欄太弱。通過(guò)圖片、套紅等手段進(jìn)行調(diào)控。平均使用讀者主意力。使讀者不敢放過(guò)左中右任何一欄。 ? 6、圖片 ? ·有圖有真相,一圖勝千言。十分必要時(shí)才用。因?yàn)閳D片的編輯成本和帶寬成本都比較文字高很多。 ? ·在目錄頁(yè)的圖,小點(diǎn),再小點(diǎn),多用特寫(xiě);小分辨率,能看就行。在正文頁(yè)的圖,保證清晰,美觀。正文頁(yè)有的是版面。 ? ·正文頁(yè)在5屏之內(nèi),盡量不要分頁(yè)。讓讀者一次讀完。 ? 7、導(dǎo)航條與網(wǎng)站地圖 ? ·導(dǎo)航條是網(wǎng)站的門(mén)牌號(hào)碼,不能隨意更改。否則,讀者會(huì)迷路,找不到他原來(lái)看的內(nèi)容。 ? ·導(dǎo)航條上的分類名的前后次序要兼顧重點(diǎn)和讀者閱讀邏輯,即歸類擺放。 ? ·導(dǎo)航條最多三行。最好二行。太多行顯重。 ? ·導(dǎo)航的更多,就是網(wǎng)站地圖。網(wǎng)站地圖的摘要版可以放在網(wǎng)站底部,成為底部導(dǎo)航。網(wǎng)站的底部導(dǎo)航,很有必要。其好處是:一、可放多行;二、可形成網(wǎng)站底部的閱讀重點(diǎn)。將讀者從首屏帶到最后一屏,期間會(huì)增加很多點(diǎn)擊。 ? ·主導(dǎo)航和頻道導(dǎo)航:主導(dǎo)航每頁(yè)都有,頻道導(dǎo)航只在本頻道頁(yè)面出現(xiàn)。 ? 8、首頁(yè)更新成本 ? ·首頁(yè)設(shè)計(jì)不能只考慮美觀、協(xié)調(diào),要考慮24小時(shí)更新一遍之要求。更新是網(wǎng)站的生命,一定要最大限度地降低首頁(yè)更新成本。 ? ·交叉自動(dòng)同步更新的設(shè)計(jì),可有效降低各種首頁(yè)更新成本,給讀者內(nèi)容豐富即時(shí)的感覺(jué)。 ? ·更新即時(shí)的首頁(yè)是網(wǎng)站的資源,因?yàn)槭琴Y源,更多的標(biāo)題會(huì)擁上這個(gè)首頁(yè)。如此,正循環(huán),這個(gè)首頁(yè)也就火了。更新不即時(shí)的首頁(yè)是網(wǎng)站的雞肋,會(huì)越來(lái)越寂寞,最終會(huì)被荒廢。 ? ·每個(gè)首頁(yè)的設(shè)計(jì)成至少要有一個(gè)讀者點(diǎn)擊進(jìn)去的理由。即時(shí)更新比獨(dú)家內(nèi)容成本低。
全站高品質(zhì)素材免費(fèi)下載!