DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 設計案例分享:QQ登陸節日banner的創作過程
設計案例分享:QQ登陸節日banner的創作過程
編輯:關於網頁技巧     

  QQ登錄banner是與用戶溝通情感的小窗口,在一些特殊的日子裡我們嘗試一些力所能及的表達方式來給用戶一種感動,一種記憶。
  QQ登錄banner正力求避免直白的畫面呈現,增強畫面的趣味性、故事性,喚起用戶共鳴,以幽默的方式帶給用戶愉悅的心情。
  下面分類歸納一些節日banner的創作過程,通過記錄一些設計過程中的反復與糾結,總結幾點與大家共享。
一. 避免低幼與直白的畫面鋪陳

 
【開學日】
  九月一日開學,對於在校學生或是畢業許久的社會人士,都是痛並快樂的日子。普遍學子的情感,渡過漫長悠閒的假期後開學是件無奈的事;對已畢業許久的人來說,開學是學子時代的難忘記憶。
  開學日,直接映入我們眼前的元素是黑板、操場、紅領巾、文具等;常脫口而出的一句話是好好學習天天向上。打開圖片搜索引擎,鍵入關鍵詞開學,出現黑板報、教室、小朋友的笑臉的圖片。低幼與富有童趣的畫面表達僅限於一線之間。
  開學日畫面的大方向被設定為避免低幼與直白的畫面鋪陳,呈現積極向上的畫面帶來樂觀情緒,並喚起兒時共鳴。
  我們做了個小腦爆,並提取一些畫面場景關鍵詞:教室衛生角,綠化角,等校車;共鳴點:新學期同學見面,三八線,希望小學,布置教室等。最終,把畫面定為教室後的綠化角場景,主要元素為同學們帶來的綠化布置教室,同時以植物的郁郁蔥蔥帶給積極向上的樂觀情緒。


  在繪制過程中,尋找一些教室、綠化、黑板報等攝影作品,從中吸取構圖靈感與光線運用經驗;從一些表達自然的插畫作品中提取色彩表達的畫面基調。
  視覺稿產品評審過程中,不出意料遭到了一些挑戰。問題主要集中於植物太多像植樹節,各地域開學的習慣不同,開學元素太隱晦等。綜合了我們的場景設定與腦暴的結果,產品提出的質疑,我們增加了黑板上開學了的文字,增強開學氣氛。
  畫面中操場籃球架、紅旗、黑板、課桌等元素,在換了視角後的教室一角的場景,以植物盆栽為主體景物的畫面場景。開學第一天,同學們帶來心愛的小盆栽布置教室,迎接新學期的到來。寓意生機勃勃的新學期和學生的健康成長。最重要的是帶給大家充滿希望與信心的情感,引導積極向上的樂觀情緒。


二. 擇代表性景物烘托畫面意境 

 
【教師節】 
  開學後一周,迎來了九月十日教師節。同樣是校園主題,這是一個歌頌老師神聖職業的節日。關於教師節的記憶畫面也有很多。說在學生時代,每逢教師節同學們都自發組織,想送老師一份表達心意小小的禮物,記憶中有流行過自制賀卡、一朵康乃馨、一包巧克力、掛歷一般是家長送等等。當然都免不了寫下一句心裡話,贊頌的話獻給敬愛的老師祝福節日愉快。有把老師比作園丁、春雨潤物細無聲、歌頌老師無私的紅燭精神等等佳句。
  而“春蠶到死絲方盡,蠟炬成灰淚始干”無疑是歌頌老師最精煉、最有畫面感的名句之一。


  鎖定“紅燭”作為代表性靜物元素後,我們列出紅燭元素應用於不同場景基調的區分:不同於災難後的溫馨祈福畫面,不同於洞房花燭的浪漫畫面,不同於聊齋志異中的神鬼氛圍,不同於防患於未然的火災教育知識普及。
  在畫面表達上把紅燭的靜物更多融入在深夜老師工作的場景,於是試卷、紅筆、老式老花鏡、書架、夜空的北斗星成了畫面的輔助元素。
  畫面呈現深夜老師批改試卷的場景,桌上點燃著一支節日紅燭。老師們無私奉獻的紅燭精神值得我們尊敬與贊頌。“春蠶到死絲方盡,蠟炬成灰淚始干”!
三. 場景性故事性與趣味性遞進

 
【中秋節】
  中秋佳節最受中國人重視的佳節之一,是中國傳統節日。對於耳熟能詳的中秋節典故我們可以如數家珍:嫦娥奔月、吳剛伐桂樹、玉兔搗年糕、拜兔兒爺、朱元璋與月餅的由來等等。留意月餅包裝盒面的插圖,嫦娥、玉兔、滿月等成為中秋節的默認畫像,每逢中秋節看到這些畫面成為一種習以為常的事。
  習以為常在創作中,某種程度上是一件杯具的事情,沒有了驚喜沒有了激情。就在這些我們習以為常的元素中,怎麼能出乎意料之外又符合情理之中,找出概念突破口呢?


  我們在描寫中秋的軟文中翻江倒海,在經典的古詩句中陶冶情操:“但願人長久,千裡共婵娟”,“舉頭望明月,低頭思故鄉。“在美好的佳節給予祝福的同時,我們能否融入幽默的元素?
  一個童年的寓言動畫片引起我們的共鳴:“猴子撈月”——上海美術電影制片廠出品於1981年的動畫片。
  記憶中動畫片裡的小猴們生動活潑的身影仿佛就在眼前。當然聯想到猴子撈月,也是處於當時動畫形象與故事場景的魅力在我們幼小的心中烙下的深刻記憶。
感性過後,理性查閱“猴子撈月”的典故寓意的:典出《法苑珠林•愚戆篇•雜癡部》,用這則典故來告誡,如果庸人自擾,難免會招致災禍。另外也有對於畫面表達上,水中撈月一場空歧義的顧慮。
  抱著嘗試的心情,進行草圖勾勒,嘗試以小猴一家作為banner畫面的主角,以“猴子撈月”的場景賦予新的中秋祝願的美好意味。制作期間,嘗試加入荷塘月色的場景來烘托中秋佳節的節日氣氛。完稿後,得到了產品的一致贊賞與認可,身邊同事也紛紛表示喜愛有加。
  避免直白的畫面陳述,融入故事性與趣味性的概念突破,我們漸入佳境。


  畫面定格在猴子一家團圓賞月,小猴手捧荷葉撈月的場景,以荷塘月色的環境襯托中秋佳節。選擇猴子撈月的畫面,增加場景的趣味性與故事感,喚起兒時的美好回憶。中秋將即,畫面隱喻家庭團圓共享明月的美好祝願。
  發布前尚有幾日的空閒之余,我們進一步對畫面進行動畫嘗試,讓畫面中有微波漣漪的flash動態的微妙效果。但不對用戶登錄中造成干擾。

  
【聖誕節】
  12月25是一年一度的聖誕節,是西方國家一年中最盛大的節日,可以和新年相提並論,似我國過春節。
  草圖YY了許多以企鵝為主角的故事場景,例如企鵝在南極收到了聖誕老人的禮物;一直堅信有聖誕老人存在的企鵝守望天空睡著了,只有雪人有幸目睹了聖誕老人的尊容。最終選擇了聖誕老人的方案,以馴鹿車沖出畫面的構圖增強視覺沖擊力。 畫面抓取聖誕老人帶著節日禮物,駕著馴鹿雪橇飛馳而來的一刻,身邊坐著企鵝面帶驚喜,歡呼雀躍。
背景描繪積雪覆蓋的聖誕樹林,溫暖的小屋亮著節日的彩燈,來烘托聖誕節日的歡樂氣氛。

  
【元旦】 
  公歷的1月1日是元旦節,也被稱為“新年”。
  元旦節過程稿是這樣構思的:QQ手拿“仙女棒”在夜空中劃過,隨即燃起2011字樣的節日禮花。小兔目不轉睛地端坐在屋頂上,被空中絢爛的煙花吸引,寓意2011新年的到來。畫面的主要人物角色遭到產品的挑戰,幾經討論,思考歸納人物被砍的糾結點有三:一,在屋頂上燃放煙花爆竹,場景有待商確;二,畫面元素過於復雜;三,兔子生肖用於元旦還是新年。
  最終畫面刪去了企鵝與小兔的主角,把畫面重心集中於夜空燃起盛開2011字樣的煙花。表達人們慶祝元旦佳節的歡慶一刻,烘托新年的氣氛。

  
【溫情banner】


  在公司成立12周年之際,接到QQ“溫情banner”的需求。以“QQ與你一路相伴”為主題,帶給用戶一絲別樣的溫暖。最終選定三個用戶年齡段發生的故事:戀人、小孩、老人:
  戀人——畫面描繪一對情侶相依在草地上面向大海看日出的場景,海上一輪朝陽冉冉升起。情侶的影子在草地上形成QQ的形狀,寓意著因為QQ,我們在一起。
  小孩——畫面描繪小孩如同企鵝學步般,在父親的攙扶下邁出欣喜的腳步。寓意著QQ伴隨著我們每一步的成長,突出QQ與你一路相伴的主題。
  老人(未推)——畫面呈現夕陽下,游子奔向背已駝的老母親。在異鄉求學的學子與親人間的聯系,QQ與你一路相伴。

  
【其他節日banner】 


  帶著愉悅的心情總結過往節日banner的設計過程,也發現了些許不足之處。畫面表達上,出現人物角色後略顯復雜。表達節日氣氛的筆墨更需精確拿捏,簡潔大氣還是主流王道。
  畫面內容構思,節日banner不僅僅是直白的節日提醒,我們正在默默努力,一步一步創新。敬請期待2011年的節日登錄banner,感謝閱讀:)

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved