網(wǎng)站設(shè)計(jì)與思考
2011-08-26 文章來(lái)源: 深達(dá)設(shè)計(jì)
定位你的網(wǎng)站CI形象 所謂CI,是借用的廣告術(shù)語(yǔ)。(CI是英文corporate identity的縮寫(xiě)),意思是通過(guò)視覺(jué)來(lái)統(tǒng)一企業(yè)的形象?,F(xiàn)實(shí)生活中的CI策劃比比皆是,杰出的例子如:可口可樂(lè)公 司,全球統(tǒng)一的標(biāo)志,色彩和產(chǎn)品包裝,給我們的印象極為深刻。更多的例子如SONY,三菱,麥當(dāng)勞等等。 一個(gè)杰出的網(wǎng)站,和實(shí)體公司一樣,也需要整體的形象包裝和設(shè)計(jì)。準(zhǔn)確的,有創(chuàng)意的CI 設(shè)計(jì),對(duì)網(wǎng)站的宣傳推廣有事半功倍的效果。在您的網(wǎng)站主題和名稱定下來(lái)之后,需要思考的就是網(wǎng)站的CI形象。 有網(wǎng)友要問(wèn)了:我不是學(xué)廣告專(zhuān)業(yè)的,CI對(duì)我來(lái)說(shuō)可能太難了吧:( 不用擔(dān)心,阿捷自己也沒(méi)有學(xué)過(guò)設(shè)計(jì)專(zhuān)業(yè)哦。大家只要參考我的一些具體做法和經(jīng)驗(yàn),很容易將自己網(wǎng)站的CI搞定:)
1.設(shè)計(jì)網(wǎng)站的標(biāo)志(logo).首先你需要設(shè)計(jì)制作一個(gè)網(wǎng)站的標(biāo)志(logo)。就如同商標(biāo)一樣,logo是你站點(diǎn)特色和內(nèi)涵的集中體現(xiàn),看見(jiàn)logo就讓大家聯(lián)想起你的站點(diǎn)。注意:這里的logo不是指88X31的小圖標(biāo)banner,而是網(wǎng)站的標(biāo)志。 標(biāo)志可以是中文,英文字母,可以是符號(hào),圖案,可以是動(dòng)物或者人物等等。比如:soim是用soim的英文作為標(biāo)志,新浪用字母sina+眼睛作為標(biāo)志。標(biāo)志的設(shè)計(jì)創(chuàng)意來(lái)自你網(wǎng)站的名稱和內(nèi)容。
(1).網(wǎng)站有代表性的人物,動(dòng)物,花草,可以用它們作為設(shè)計(jì)的藍(lán)本,加以卡通化和藝術(shù)化,例如迪斯尼的米老鼠,搜狐的卡通狐貍,鯊?fù)w壇的籃球鯊魚(yú)。
(2).網(wǎng)站有專(zhuān)業(yè)性的,可以以本專(zhuān)業(yè)有代表的物品作為標(biāo)志。比如中國(guó)銀行的銅板標(biāo)志,奔馳汽車(chē)的方向盤(pán)標(biāo)志。
(3).最常用和最簡(jiǎn)單的方式是用自己網(wǎng)站的英文名稱作標(biāo)志。采用不同的字體, 字母的變形,字母的組合可以很容易制作好自己的標(biāo)志。
2.設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)色彩。網(wǎng)站給人的第一印象來(lái)自視覺(jué)沖擊,確定網(wǎng)站的標(biāo)準(zhǔn)色彩是相當(dāng)重要的一步。不同的色彩搭配產(chǎn)生不同的效果,并可能影響到訪問(wèn)者的情緒。 “標(biāo)準(zhǔn)色彩”是指能體現(xiàn)網(wǎng)站型象和延伸內(nèi)涵的色彩。舉個(gè)實(shí)際的例子就明白了:IBM的深藍(lán)色,肯得基的紅色條型,windows視窗標(biāo)志上的紅藍(lán)黃綠色塊,都使我們覺(jué)得很貼切,很和諧。如果將IBM改用綠色或金黃色,我們會(huì)有什么感覺(jué)? 一般來(lái)說(shuō),一個(gè)網(wǎng)站的標(biāo)準(zhǔn)色彩不超過(guò)3種,太多則讓人眼花繚亂。標(biāo)準(zhǔn)色彩要用于網(wǎng)站的標(biāo)志,標(biāo)題,主菜單和主色塊。給人以整體統(tǒng)一的感覺(jué)。至于其它色彩也可以使用,只是作為點(diǎn)綴和襯托,絕不能喧賓奪主。一般來(lái)說(shuō),適合于網(wǎng)頁(yè)標(biāo)準(zhǔn)色的顏色有:藍(lán)色,黃/橙色,黑/灰/白色三大系列色。(注:關(guān)于色彩搭配的具體方法,我們會(huì)在本系列文章的第八篇介紹)。
3.設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)字體。和標(biāo)準(zhǔn)色彩一樣,標(biāo)準(zhǔn)字體是指用于標(biāo)志,標(biāo)題,主菜單的特有字體。一般我們網(wǎng)頁(yè)默認(rèn)的字體是宋體。為了體現(xiàn)站點(diǎn)的“與眾不同”和特有風(fēng)格,我們可以根據(jù)需要選擇一些特別字體。例如,為了體現(xiàn)專(zhuān)業(yè)可以使用粗仿宋體,體現(xiàn)設(shè)計(jì)精美可以用廣告體,體現(xiàn)親切隨意可以用手寫(xiě)體等等。當(dāng)然這些都是阿捷的個(gè)人看法,你可以根據(jù)自己網(wǎng)站所表達(dá)的內(nèi)涵,選擇更貼切的字體。目前常見(jiàn)的中文字體有二三十種,常見(jiàn)的英文字體有近百種,網(wǎng)絡(luò)上還有許多專(zhuān)用英文藝術(shù)字體下載,要尋找一款滿意的字體并不算困難:) 需要說(shuō)明的是:使用非默認(rèn)字體只能用圖片的形式,因?yàn)楹芸赡転g覽者的PC里沒(méi)有安裝你的特別字體,那么您的辛苦設(shè)計(jì)制作便付之東流啦!
4.設(shè)計(jì)網(wǎng)站的宣傳標(biāo)語(yǔ)。也可以說(shuō)是網(wǎng)站的精神,網(wǎng)站的目標(biāo)。用一句話甚至一個(gè)詞來(lái)高度概括。類(lèi)似實(shí)際生活中的廣告金句。例如:鵲巢的“味道好極了”;麥斯威爾的“好東西和好朋友一起分享”;Intel的“給你一個(gè)奔騰的心”。 以上四方面:標(biāo)志,色彩,字體,標(biāo)語(yǔ),是一個(gè)網(wǎng)站樹(shù)立CI形象的關(guān)鍵,確切的說(shuō)是網(wǎng)站的表面文章,設(shè)計(jì)并完成這幾步,你的網(wǎng)站將脫胎換骨,整體形象有一個(gè)提高。形象地說(shuō):你從一個(gè)土氣的農(nóng)民轉(zhuǎn)變?yōu)橐晃晃餮b革履的白領(lǐng)人士。(注意:我們只是以平面靜態(tài)來(lái)設(shè)計(jì)CI,還沒(méi)有引入聲音,三維立體等因素。) 好了,看了以上的介紹,你應(yīng)該對(duì)網(wǎng)站CI有了一個(gè)初步的概念。也許不是很明白,因?yàn)槟切┑览硖橄罅耍憧赡苄枰恍?shí)際的,更生動(dòng)的例子。阿捷會(huì)在自己的主頁(yè)上同時(shí)修改補(bǔ)充一些實(shí)例。下一節(jié),我們來(lái)討論“確定網(wǎng)站的欄目版塊”,歡迎您參與,謝謝! 確定網(wǎng)站的欄目和版塊 《設(shè)計(jì)的思考》系列文章,今天開(kāi)始寫(xiě)第三篇。阿捷不是專(zhuān)業(yè)的網(wǎng)頁(yè)設(shè)計(jì)師,但阿捷將盡自己所能把這個(gè)系列文章寫(xiě)好,盡可能將自己實(shí)踐過(guò)程中總結(jié)的經(jīng)驗(yàn)和心得告訴給大家,希望能給您一點(diǎn)收獲,一點(diǎn)啟發(fā)。文章中所列觀點(diǎn)如有不同意見(jiàn),歡迎您來(lái)信討論,來(lái)信寄ajie@soim.com,謝謝。 我們?cè)谇岸恼吕飳W(xué)習(xí)了定位網(wǎng)站主題和確立網(wǎng)站的CI形象。下面是否該進(jìn)入實(shí)質(zhì)性的設(shè)計(jì)制作階段呢?答案是:不能。經(jīng)驗(yàn)告訴我們,建立一個(gè)網(wǎng)站好比寫(xiě)一篇文章,首先要擬好提綱,文章才能主題明確,層次清晰;也好比造一座高樓,首先要設(shè)計(jì)好框架圖紙,才能使樓房結(jié)構(gòu)合理。初學(xué)者(包括我自己:-),最容易犯的錯(cuò)誤就是:確定題材后立刻開(kāi)始制作。當(dāng)你一頁(yè)一頁(yè)制作完畢后才發(fā)現(xiàn):網(wǎng)站結(jié)構(gòu)不清晰,目錄龐雜,內(nèi)容東一塊西一塊。結(jié)果不但瀏覽者看得糊涂,自己擴(kuò)充和維護(hù)網(wǎng)站也相當(dāng)困難,您的網(wǎng)站或許就此半途而廢,更糟糕的是:你因此失去了制作主頁(yè)的信心和興趣!所以,我們?cè)趧?dòng)手制作網(wǎng)頁(yè)前,一定要考慮好以下三方面:
1.確定欄目和版塊;
2.確定網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)
3.網(wǎng)站的整體風(fēng)格創(chuàng)意設(shè)計(jì) 今天我們首先來(lái)討論“確定網(wǎng)站的欄目和版塊”。 網(wǎng)站的題材確定后,相信你已經(jīng)收集和組織了許多相關(guān)的資料內(nèi)容。你一定認(rèn)為這些都是最好的,肯定能吸引網(wǎng)友們來(lái)瀏覽網(wǎng)站。但是你有沒(méi)有將最好的,最吸引人的內(nèi)容放在最突出的位置呢?有沒(méi)有讓好東西在版面分布上占絕對(duì)優(yōu)勢(shì)呢?我看見(jiàn)許多個(gè)人主頁(yè)的欄目(主菜單)并不是這樣的。舉個(gè)例子:有一個(gè)以提供動(dòng)畫(huà)素材為主題的站點(diǎn),它的主欄目是:關(guān)于站長(zhǎng),本站導(dǎo)航,動(dòng)畫(huà)寶庫(kù),本站論壇,本站留言本,聯(lián)系站長(zhǎng)。首頁(yè)上寫(xiě)著本站網(wǎng)址和版權(quán)申明(居然還有將本站設(shè)為首頁(yè)字樣)。最主要的,最吸引人的動(dòng)畫(huà)素材在主欄目里占1/6,在首頁(yè)上一字沒(méi)提。我想即使這個(gè)站點(diǎn)的確有大量的,精美的動(dòng)畫(huà)素材,也很難吸引瀏覽者繼續(xù)挖掘。 欄目的實(shí)質(zhì)是一個(gè)網(wǎng)站的大綱索引,索引應(yīng)該將網(wǎng)站的主體明確顯示出來(lái)。在制定欄目的時(shí)候,要仔細(xì)考慮,合理安排。
一般的網(wǎng)站欄目安排要注意以下幾方面:
1.記住要緊扣你的主題! 一般的做法是:將你的主題按一定的方法分類(lèi)并將它們作為網(wǎng)站的主欄目。例如上面的例子,可以將欄目分為動(dòng)物動(dòng)畫(huà),標(biāo)志動(dòng)畫(huà),三維動(dòng)畫(huà),卡通動(dòng)畫(huà)等,在首頁(yè)上標(biāo)明最近更新的動(dòng)畫(huà)。記住:主題欄目個(gè)數(shù)在總欄目中要占絕對(duì)優(yōu)勢(shì),這樣的網(wǎng)站顯的專(zhuān)業(yè),主題突出,容易給人留下深刻印象。
2.個(gè)最近更新或網(wǎng)站指南欄目 如果你的首頁(yè)沒(méi)有安排版面放置最近更新內(nèi)容信息,就有必要設(shè)立一個(gè)“最近更新”的欄目。這樣做是為了照顧常來(lái)的訪客,讓你的主頁(yè)更有人性化。 如果你的主頁(yè)內(nèi)容龐大(超過(guò)15MB),層次較多,而又沒(méi)有站內(nèi)的搜索引擎,建議您設(shè)置“本站指南”欄目??梢詭椭踉L者快速找到他們想要的內(nèi)容。
3.設(shè)定一個(gè)可以雙向交流的欄目 不需要很多,但一定要有。比如論壇,留言本,郵件列表等,可以讓瀏覽者留下他們的信息。有調(diào)查表明,提供雙向交流的站點(diǎn)比簡(jiǎn)單的留一個(gè)"Email me"的站點(diǎn)更具有親和力。 4.設(shè)一個(gè)下載或常見(jiàn)問(wèn)題回答欄目網(wǎng)絡(luò)的特點(diǎn)是信息共享。如果你看到一個(gè)站點(diǎn)有大量的優(yōu)秀的有價(jià)值的資料,你肯定希望能一次性下載,而不是一頁(yè)一頁(yè)瀏覽存盤(pán)。“將心比心”在你自己的主頁(yè)上設(shè)置一個(gè)資料下載欄目,會(huì)得到大家的喜歡。有些站點(diǎn)為了廣告顯示量,一篇文章還要分幾頁(yè)顯示,我覺(jué)得遲早會(huì)因訪問(wèn)量下降而淘汰(個(gè)人意見(jiàn):)。另外,如果您的站點(diǎn)經(jīng)常收到網(wǎng)友關(guān)于某方面的問(wèn)題來(lái)信,你最好設(shè)立一個(gè)常見(jiàn)問(wèn)題回答的欄目,既方便了網(wǎng)友,也可以節(jié)約自己更多時(shí)間用以學(xué)習(xí)。至于其他的輔助內(nèi)容,如關(guān)于本站,版權(quán)信息等可以不放在主欄目里,以免沖淡主題。總結(jié)以上幾點(diǎn),我們得出劃分欄目需要注意的是: ●盡可能刪除與主題無(wú)關(guān)的欄目 ●盡可能將網(wǎng)站最有價(jià)值的內(nèi)容列在欄目上 ●盡可能方便訪問(wèn)者的瀏覽和查詢 上面說(shuō)的是欄目,我們?cè)倏纯窗鎵K設(shè)置。版塊比欄目的概念要大一些,每個(gè)版塊都有自己的欄目。舉個(gè)例子:網(wǎng)易的站點(diǎn)分新聞,體育,財(cái)經(jīng),娛樂(lè),教育等版塊,每個(gè)版塊下面有各有自己的主欄目。一般的個(gè)人站點(diǎn)內(nèi)容少,只有主欄目(主菜單)就夠了,不需要設(shè)置版塊。
如果你覺(jué)得的確有必要設(shè)置版塊的,應(yīng)該注意
1.各版塊要有相對(duì)獨(dú)立性。
2.各版塊要有相互關(guān)聯(lián)。
3.版塊的內(nèi)容要圍繞站點(diǎn)主題。關(guān)于版塊方面,主要是門(mén)戶站點(diǎn)等較大ICP需要考慮的問(wèn)題,在此不再作展開(kāi)討論。