個(gè)性化的網(wǎng)頁(yè)設(shè)計(jì)

摘要：在當(dāng)今大數(shù)據(jù)化的時(shí)代，信息需求的日益增長(zhǎng)，大部分人獲得信息主要來(lái)自互聯(lián)網(wǎng)。如何進(jìn)行個(gè)性化的網(wǎng)頁(yè)設(shè)計(jì)？首先必須了解自己要做網(wǎng)站的內(nèi)容，只有抓住了網(wǎng)站內(nèi)容的個(gè)性特征并且視覺(jué)化，然后從網(wǎng)頁(yè)的界面、導(dǎo)航條、交互方式、文字、圖片、色彩、聲音、FLASH動(dòng)畫、視頻等元素入手，才能設(shè)計(jì)出精彩且個(gè)性的網(wǎng)頁(yè)來(lái)。

關(guān)鍵詞：個(gè)性化的網(wǎng)頁(yè)設(shè)計(jì)；界面；導(dǎo)航條；交互方式；文字；FLASH動(dòng)畫在當(dāng)今大數(shù)據(jù)化的時(shí)代，信息需求的日益增長(zhǎng)，大部分人獲得信息主要來(lái)自互聯(lián)網(wǎng)。個(gè)人和企事業(yè)單位、組織的發(fā)展，信息的發(fā)布交流等，同樣也是大部分通過(guò)互聯(lián)網(wǎng)實(shí)現(xiàn)的。網(wǎng)頁(yè)的視覺(jué)展示，能向?yàn)g覽者充分展示個(gè)人或企事業(yè)單位、組織自身的個(gè)性特征和企業(yè)文化。

如何進(jìn)行個(gè)性化的網(wǎng)頁(yè)設(shè)計(jì)？進(jìn)行個(gè)性化的網(wǎng)頁(yè)設(shè)計(jì)，首先必須了解自己要做網(wǎng)站的內(nèi)容，只有抓住了網(wǎng)站內(nèi)容的個(gè)性特征并且視覺(jué)化，然后從網(wǎng)頁(yè)的界面、導(dǎo)航條、交互方式、文字、圖片、色彩、聲音、視頻等元素入手，才能設(shè)計(jì)出精彩且個(gè)性化的網(wǎng)頁(yè)來(lái)。

如何讓網(wǎng)頁(yè)界面的視覺(jué)個(gè)性化？（1）該網(wǎng)站內(nèi)容的個(gè)性特點(diǎn)是什么？（2）如何從視覺(jué)上突出其特點(diǎn)？只有抓住了其網(wǎng)站內(nèi)容的個(gè)性特點(diǎn)并且視覺(jué)化，才能抓住瀏覽者的視線。例如，十幾年前韓國(guó)電影《醉畫仙》發(fā)行時(shí)，為了配合電影《醉畫仙》的發(fā)行，做了一個(gè)網(wǎng)站。這個(gè)網(wǎng)站除了它的FLASH技術(shù)做到了極致，它的視覺(jué)效果上做到了極具個(gè)性特征。以至于這個(gè)網(wǎng)站出來(lái)后，很多網(wǎng)站都風(fēng)行一時(shí)的模仿它?！蹲懋嬒伞返碾娪爸v的是十九世紀(jì)韓國(guó)畫家張承業(yè)的故事，如何在平面的網(wǎng)頁(yè)上展示電影里一個(gè)畫家的故事和這部電影的相關(guān)內(nèi)容，該網(wǎng)站的歡迎界面的背景是一張白色帶底紋圖片，白色帶底紋的圖片模擬出國(guó)畫宣紙的質(zhì)感。畫面中間是一滴墨汁滲透的生宣上的痕跡，墨汁的里面的文字分別是金色的韓文——“醉畫仙”和白色的中文——“醉畫仙”。并且在墨跡里做了一條金魚(yú)追蹤的FLASH，當(dāng)瀏覽者的鼠標(biāo)劃過(guò)墨汁時(shí)，出現(xiàn)一條金魚(yú)追蹤的動(dòng)畫，給瀏覽者以游戲般的交互體驗(yàn)。墨跡的左下方是一支毛筆，墨跡左上方的文字前面是一個(gè)紅色的印章形的裝飾元素，右下方的兩種文字的鏈接前面也是用小的墨跡做的裝飾元素。整個(gè)畫面無(wú)論從文字到圖形，都來(lái)自東方文化的元素，整個(gè)頁(yè)面精彩絕倫的向?yàn)g覽者展示了東方文化的神韻。同時(shí)，讓人一看就知道這是一個(gè)跟繪畫有關(guān)的網(wǎng)站。高超的FLAH技術(shù)和典雅的畫面一下子就吸引住了瀏覽者的眼球。這樣一個(gè)簡(jiǎn)潔明快精美的歡迎界面，給瀏覽者一個(gè)視覺(jué)美感和緩沖。同時(shí)，設(shè)計(jì)者牢牢地抓住了該網(wǎng)站的本質(zhì)特征——這個(gè)網(wǎng)站是要介紹一位畫家，一位畫水墨的畫家！

圖1圖2點(diǎn)擊進(jìn)去，主頁(yè)依舊是白色帶底紋的背景，優(yōu)雅寧?kù)o。畫面成大膽對(duì)角線構(gòu)圖，紅艷艷的水墨山水風(fēng)景畫占住了畫面右下方，酣暢淋漓又如水彩畫般明艷輕薄透明，主角坐在山上，隨著FLASH動(dòng)畫的出現(xiàn)，點(diǎn)擊主角發(fā)出豪放不羈聲嘶力竭的嘶吼，瀏覽者為之震撼的同時(shí)，也略對(duì)網(wǎng)站人物的個(gè)性特征有所了解。精彩FLASH動(dòng)畫展示了主角精湛的作畫過(guò)程，高超的FLASH技術(shù)令人嘆為觀止！伴隨這個(gè)FLASH動(dòng)畫和背景音樂(lè)，把瀏覽者帶入了十九世紀(jì)中葉，封建的朝鮮王朝內(nèi)外交困中風(fēng)雨飄搖的時(shí)代，淋漓盡致的表現(xiàn)了畫家張承業(yè)狂放不羈的個(gè)性和技術(shù)高超的繪畫過(guò)程。網(wǎng)頁(yè)的導(dǎo)航設(shè)計(jì)非常個(gè)性且精彩，導(dǎo)航條的形狀采用不拘一格的毛筆在紙上繪畫留下的痕跡作為輪廓。

點(diǎn)擊關(guān)于電影導(dǎo)演和電影相關(guān)信息的導(dǎo)航進(jìn)入子網(wǎng)頁(yè)，每一個(gè)人物介紹，每一個(gè)人物的圖片都是用墨跡在生宣上繪畫留下的生動(dòng)的筆墨痕跡做背景。再一次將主角的職業(yè)和電影以及網(wǎng)頁(yè)三者之間的關(guān)系絕妙地結(jié)合在一起。最精彩的是關(guān)于電影主要人物的介紹，F(xiàn)LASH 場(chǎng)景模仿電影場(chǎng)景，當(dāng)鼠標(biāo)劃過(guò)人物時(shí)，角色會(huì)屈膝彎腰點(diǎn)頭問(wèn)好，并且會(huì)自我介紹，人物周圍還有投影，完全是電影場(chǎng)面調(diào)度的效果，令瀏覽者迫不及待地想觀看電影和電影相關(guān)的資料。

圖3網(wǎng)頁(yè)的字體設(shè)計(jì)和編排，在網(wǎng)頁(yè)設(shè)計(jì)中占有相當(dāng)重要的作用，整個(gè)網(wǎng)站的字體，為了更恰如其分的表現(xiàn)人物和內(nèi)容，從標(biāo)題字到導(dǎo)航和文本內(nèi)容，所有的文字都是手寫體。

圖4韓國(guó)電影《醉畫仙》網(wǎng)站是將電影、網(wǎng)頁(yè)設(shè)計(jì)、繪畫三者之間關(guān)系完美的結(jié)合，將東方文化的神韻的表達(dá)到了極致。該網(wǎng)頁(yè)極具個(gè)性化設(shè)計(jì)：整個(gè)網(wǎng)站的文字為了更恰如其分的表現(xiàn)人物和內(nèi)容，從標(biāo)題文字到導(dǎo)航和文本內(nèi)容，所有的文字都是手寫體；整個(gè)網(wǎng)站的交互設(shè)計(jì)，歡迎界面不僅美輪美奐，還給瀏覽者游戲般的交互體驗(yàn)。其他的交互設(shè)計(jì)也給瀏覽者動(dòng)態(tài)的視覺(jué)體驗(yàn)；圖片和色彩都充分地突出網(wǎng)站的個(gè)性特征；網(wǎng)頁(yè)的導(dǎo)航設(shè)計(jì)非常個(gè)性且精彩，導(dǎo)航條的形狀采用不拘一格的毛筆在紙上繪畫留下的痕跡作為輪廓。因此，對(duì)網(wǎng)頁(yè)進(jìn)行設(shè)計(jì)時(shí)，要想把網(wǎng)頁(yè)設(shè)計(jì)做得極致，首先必須了解自己要做網(wǎng)站的內(nèi)容，只有抓住了網(wǎng)站內(nèi)容的個(gè)性特征并且視覺(jué)化。然后從網(wǎng)頁(yè)的界面、導(dǎo)航條、交互方式、文字、圖片、色彩、聲音、視頻等元素入手，才能設(shè)計(jì)出精彩且個(gè)性的網(wǎng)頁(yè)來(lái)。參考文獻(xiàn)：

[1] 曹金明.網(wǎng)頁(yè)設(shè)計(jì)與配色[M].北京希望電子出版社，2005.

[2] 周埗.網(wǎng)頁(yè)設(shè)計(jì)解析[M].清華大學(xué)出版社，2009.

[3] 張?jiān)品?民族藝術(shù)與文字設(shè)計(jì)的關(guān)聯(lián)與影響[J].民族藝術(shù)，2012（03）.作者簡(jiǎn)介：朱俊華（1972—），女，湖北孝感人，助教，現(xiàn)任教于湖北美術(shù)學(xué)院設(shè)計(jì)系，主要研究方向：廣告設(shè)計(jì)。