萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 用戶界面設計:傳遞春節情感的GUI設計

用戶界面設計:傳遞春節情感的GUI設計

用戶界面設計:傳遞春節情感的GUI設計 三聯

  2012?你會想到什麼?過去式?“世界末日”的代名詞?哈,我們都走過去喽,不論是你想與不想,期待不期待,2013都平安地到來啦,是不是很期待2013年的“重生”呢,是不是想好了要怎麼過這個特殊的新年呢,大家想到了什麼,團圓?春運?萬物始發?為了這個“重生”的春節,除了夢想與期望,再來點溫暖吧!

  我在的gui小組為了傳遞這個溫暖的春節,我們提前一個月去討論這個結合品牌logo的春節gui設計,先來個頭腦風暴吧,大伙兒發散思維,想法一下子有很多,這下可把大家的習俗都聊了一遍,這會你就會感歎中國的地大物博了,你也可以看到各地的習俗中都是非常重視春節的團聚,一家人過個年三十。其實在民間,傳統意義上的春節是從臘月二十三,一直到正月十五。除夕夜之前,我們都會來裝飾自己的家,有掛燈籠的、貼對聯、剪窗花、大掃除等;元宵節,大伙兒都會去逛燈會,觀看各式各樣、美妙絕倫的燈籠。我們就把大家聊出來的一些關鍵詞寫在了白板上,有年夜飯、年畫、打年糕、舞獅、煙花、財神、鞭炮對聯、剪紙窗花等等;元宵節的關鍵詞:猜燈謎、湯圓、燈籠、禮花煙花、月亮等。

  春節剪影

  看著寫出來的關鍵詞,我們的腦袋裡就蹦出了各種各樣的過年場景。第一種場景就是:老式的瓦房上貼滿有“年年有余”、“春節”等字樣的年畫,屋檐上掛滿著紅紅的燈籠,小孩們結群伴友地在路上放著鞭炮,天空中煙花爆竹此起彼伏,一副熱鬧非凡的景象。第二種場景:除夕夜父母們終於盼回了在外拼搏的孩子們,大家一起圍在桌邊說說笑笑,敘述著各種思念,每個人臉上都綻放著幸福的花朵兒。接著想到元宵節到來啦:這一天,明亮的月亮高高地懸掛在星空中,夜空中綻放著五顏六色的煙花,春節場景裡的小孩坐在爸爸的肩膀上提著花燈去趕燈會,夜空中綻放著五顏六色的煙花。描述完了春節和元宵的構想後,發現這樣一系列的場景是有故事連接在一起的,而不是間斷的,這樣呈現出來給用戶的就是有故事情節的,能讓用戶能夠體會到真切實意、身臨其近的感覺,就好像我們小時候是如何過元宵的場景,這樣的春節logo是不是更具有親切感、連續性、和認知性呢?

  下面是一些當時的手繪線稿圖。

  線稿剪影

  討論出上面描述的幾個方案後,我們又分析了這些方案運用到實際效果中,給用戶帶去的感受,覺得春節方案一更適合,因為方案二更適用於除夕夜,短時間的烘托氣氛,第一種方案更符合春節期間長時間的烘托。為了讓前後場景能有連續性,讓用戶體驗到親切的感受,元宵節方案就是孩子提著燈籠坐在爸爸肩膀上逛街鬧元宵。我們討論出方案後,接下來就是上色喽,為了讓氣氛圖應用到各平台,開始AI矢量設計,梓佑呢就給了我們一些意見,覺得用AI繪制出來的效果太銳利、硬朗,沒有了手繪的感覺,而且質感效果在春節這個主題上會顯得尖銳一些,正好梓佑找到了一張台灣的年畫,我們看了這種年畫(如下圖),覺得這種年畫給人古樸溫馨、沒有銳利的感覺,而且畫面運用了藏青色、洋紅色、青藍色等顏色,整體感覺復古了許多,就像小朋友純手繪畫成的,顯得有點兒粗糙,但感覺原汁原味。

  蠟畫元素

  接著我們在傳統中國紅的大色調基礎上,加入了洋紅、藏藍等色調,使得整體畫風偏手繪、古樸風格。春節呢是我們的傳統節日,所以給人物穿上了唐裝,加深了畫面濃濃的中國味;房屋建築上選用琉璃瓦房、石階小路,因為這些呢是我們生活中經常看見的場景,即拉近了和用戶之間的距離,又增添了親切感。

  經過上面的一番取經後,我們在原先的質感上,用手繪板修改效果,接著加入臘畫的一些元素和服裝改造之後,春節和元宵效果圖就此出爐啦。

  铛铛铛~~經過前端gg們的努力,頁面上就出現了我們的春節圖和元宵圖啦 。在一淘首頁頁面上,logo區域背景色和窄版、寬版效果采用了響應式的設計,春節和元宵節區域背景色分別是紅色和夜空藏藍色,紅色是不是很顯得有過年氣氛啦,再搭配上春節舞獅和煙火的造型,滿滿的,濃郁的春節氣氛啊!我們在技術上加了煙花爆炸的動畫效果,更加顯得有生命力喽。

  其實在設計春節和元宵圖之前,我們GUI小組已經小有幾次設計成果,分別有聖誕節、元旦節、臘八節,下面放上2012年的幾張氣氛圖讓大家再次回憶下。

  其實在做這些節日logo之前,我們就列舉出了一年中可以做的一些logo,包含了中國傳統節日和西方傳統節日,目前,除了傳統節日外,很多是當時所發生的一些重大事情,就像以前發生的5.12大地震,還有與公司相關的重大事件(淘寶雙11,雙12),支付寶(年度賬單),google(著名歷史人物的誕辰、某天的某一重大發明)等。我們都知道節日文化是一個國家或一個民族在漫長的歷史過程中形成和發展的民族文化,也是一種民族風俗和民族習慣。我們希望通過這些節日文化能讓用戶在如今紛繁的生活中了解 、 感受這些文化,在情感上達到一種共鳴。通過這次春節氣氛圖的創作過程,我們希望這會是一個延續的過程,每當你打開一淘首頁或者其他平台頁面時,你能感受到節日給你帶來的關懷,也是我們給你准備的一份特殊的問候哦!當下一個節日到來的時候,又會呈現給你不一樣的感受,不同的節日,不同的表達方式,每次給你帶來的或許是一份緬懷、一份感動、一份記憶。..。..這都會讓我們為之努力,給用戶帶來一個難忘的時光。

copyright © 萬盛學電腦網 all rights reserved