2010/10/20

韓國商業網站設計分析

原文為大陸網站轉載過來,文章可能是2003年所寫,至今還是蠻實用的。但原作者到底是誰,每個轉載都說是他,所以就當不詳好了...內文有做些許用詞上的潤飾。

現在韓國的音樂、偶像劇、電影、遊戲等在80年代後出生的新新人類中很流行,在網絡上大受歡迎的卡通人物如「流氓兔」(MashiMaro)、「pucca娃娃」等還帶動了規模壯觀的玩具、服裝、飾品、圖書等一系列的衍生產品,讓人不由驚嘆它豐富的創造力及非凡的商業頭腦。

我作為網站界面設計師,自然關心的是韓國的同行們是否也如其他領域的設計師那樣出色。在分析了幾天的韓國商業站點以後,不由得驚嘆,韓國的商業站點在框架結構、內容排版、色彩搭配、圖片運用上達到了非常和諧的統一,設計師擁有較大的設計空間。這幾天瀏覽韓國網站的過程,感覺就像一次奇妙的韓國之旅,一路風景優美、賞心悅目,而且沿途時不時會跳出一些小松鼠、青蛙之類的小動物給你些驚喜,讓人不由會心一笑。ok,讓我們言歸正傳吧,一起來看看韓國的設計師怎樣在網絡上揮灑他們的設計理念。

一、網頁結構 
韓國網站的網頁結構相對來說比較簡單,可以說幾乎是統一的風格,左上方是網站的logo,右邊就是它的導覽列,和國內網站不一樣的地方它甚少採用下拉式選單,而是把各級選單的次選單內容放在導覽列下面。然後下面是個大大的flash,再往下就是各級次選單的主要內容,如圖所示:

二、色彩運用
韓國設計師很多都是科班出生,對色彩的運用得宜,在我們看來有些非常難看的顏色到了他們的手裡很輕易的就搭配出一種很另類或和諧的美感,給人的感覺要嘛淡雅迷人,要嘛另類大膽,讓人覺得欣賞他們的網站是一個非常愉悅的過程。在我看來,韓國的設計師真是深得windows xp的設計精髓,漸層顏色以及透明水晶效果用得非常恰當,而不像很多網站動不動就濫用仿蘋果按鈕,和整體風格不協調,看起來顯得很突兀。韓國網站的各個選單一般都比較喜歡採用不同的色調來表達不同選單的主題,灰色是他們最愛用的顏色,因為灰色比較中庸,能和任何色彩搭配,大大的改變色彩的韻味,使對比更強烈,正文文字也大都採用灰色。而局部則喜歡用色彩絢麗的色條或色塊來區分不同的欄位,我們來看下面的幾張圖片。

圖1是聖誕主題的網站,顏色運用對比強烈,在我們看來紅色和綠色搭配就是「紅配綠,狗臭屁」,其實相反色系兩色相配,即所謂紅配綠、藍配黃、橙配紫,這種搭配如果處理得好,出來的效果會很搶眼。如這個網站,看起來顯得很生動活潑,使得紅顯得更紅,很符合網站的主題。
 
▲圖1

圖2是個典型的有關旅遊休閒韓國網站,該網站採用了灰色做為底色,然後用色彩明快的橙色、綠色、粉紅色的色塊來劃分選單,顯得整潔清晰而不呆板。

 
▲圖2

下面這兩個網站運用漸層顏色很出色,圖3一看顏色就知道是個女性的時尚網站,它把幾個選單做成晶瑩剔透的泡泡球放在頂部的大flash裡,非常醒目。整個網站顯得異常優雅迷人。

▲圖3

▲圖4

三、Flash動畫及圖片的運用

韓國的寬頻普及率很高,所以設計師設計起頁面來完全毫無顧忌,大量的圖片、flash得到很好的運用,網站裡的圖片動不動就是40、50K的大圖,網頁圖片多的頁面大小通常都是幾百K,這在我們國內是根本不敢想像的。韓國的flash banner大都以橫幅廣告出現在頁面的導覽列下面,採用的都是精美的圖片或者是手繪風格的向量插圖。國內很多網站也採用大幅的flash廣告條,但是通常都是著眼於如何去表現flash動畫的酷、炫的感覺,使得瀏覽者過於關注flash而忽視了頁面的其他內容。而韓國的flash則更好的融入於網站的主題,和整個頁面搭配起來看得很舒服而不搶眼,他們的關鍵就在於整個flash不是全部變化,而只是局部在動,以及文字和背景的巧妙配合。韓國網頁設計師的手繪能力很強,頁面中大量採用手繪的向量圖片,使得整個網站顯得精緻而與眾不同。

圖5顏色採用類似色調搭配,看起來很舒服。最欣賞的就是flash的右邊的樹葉,有幾片葉子在輕輕飄動,左邊的圖片淡淡地消失、出現,文字緩緩出現,真的是非常有意境,整個網站看起來生機盎然。

▲圖5

最近在雜誌界開始吹起了復古風,六、七十年代的手繪插圖又開始流行,雜誌書籍中大量使用向量時尚插圖取代以前的照片,這股流行趨勢很快也蔓延到了網絡上,韓國網站緊跟在後,在時尚網站和兒童網站中大量運用手繪的插圖,如圖6 、圖7所示。

▲圖6

 
▲圖7

四、文字排版

網站的內容排版因為要考慮到可讀性,很多選單的文字編排都比較簡單以利於閱讀,而在一些內容較少的頁面如網站的廣告或宣傳頁上排版則富於變化,更類似於雜誌內頁的排版,我懷疑很多韓國網頁設計師都是從平面設計師轉行過來的。如圖8、圖9。
▲圖8

▲圖9

五、頁面的立體感及細節處理
韓國網站還有個令人稱讚的地方就是它的網站看起來很有層次感,而這個層次感不是靠作幾個立體字來體現的,其實靠的也不過是添加簡單的圖片或文字陰影效果和巧妙的利用構圖來形成視覺上的差異,但就是這種設計上的不拘泥於形式使網站的立體效果呼之慾出。我最佩服的是韓國設計師做事的認真態度,他們的每一個按鈕、圖片的處理都及其講究,其實一些細微的部分不仔細看還不一定容易發現,但是如果少了這些細節的地方,整個網站的整體形象就要大打折扣了。

圖10中我們可以看到,網站的右邊畫了個好像是探照燈的東西,它周圍的立體效果使得它看起來像是放置在一個房間裡,然後照亮左邊的大幅畫像,感覺就像在電影院一樣,和它這個娛樂主題很吻合。 
▲圖10

圖11是個框架相當簡單的網站,如果處理得不好,很容易會顯得呆板而無趣,但是因為使用了大量的和整個網站顏色風格統一的ICON和圖片,網站看起來顯得很生動。

▲圖11

我們在這裡研究了韓國商業網站設計的種種特點,並不是教大家去如何去效仿、抄襲他們的風格,而是建議大家注意學習和研究他們的設計風格和認真的態度,思考如何更好地繼承優秀的民族藝術,將它和現代設計理念結合起來,做出更有特色的精彩網站。

0 意見:

張貼留言