DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 網頁專題設計技巧:設計師應該營造活動氣氛
網頁專題設計技巧:設計師應該營造活動氣氛
編輯:關於網頁技巧     

《ideas》是騰訊互動娛樂系統設計團隊TGideas針對各類游戲的視覺包裝設計所輸出的適用性研究期刊,希望與大家分享相關經驗,以及游戲類課題的交流。

本期

專題的氛圍是必須的

By Zaneye

網頁專題設計技巧:設計師應該營造活動氣氛_poluoluo.com

曾幾何時,自己苦思冥想自認為集藝術與創意於一體的作品出爐了,卻被需求方一口否絕!其實很大的原因是因為我們的設計思路跟需求方的想法方向上是不一致的,沒有表達出他們想要的意境,也就是所謂的活動氣氛,人家要喜慶你搞個很有藝術感的大灰調,要麼就是頁面過於平淡,人家一再要求你放大標題字,放大人物,其實那是因為頁面缺乏視覺沖擊力,少了點氣勢,少了點氛圍。有時可能你覺得自己做得非常不錯,自我很欣賞,但做設計並不能像放屁,自己覺得很爽,卻熏倒周圍一大片。我們不能只做自己喜歡的設計,商業設計也不只是純藝術!

> 對於需求方一再強調的活動氣氛,設計師應該如何去營造呢?

1、有個明確的活動標題!

溝通是必須的,了解並明確需求方的意圖!確定主題方向,首先你得有個讓玩家一眼就看得明白的大大的主題,千萬別干把主題文字做得很小的事!可能你覺得那樣看起來比較美觀,但玩家看的挺揪心。

網頁專題設計技巧:設計師應該營造活動氣氛_poluoluo.com

如上圖所示,標題的凸顯是一個活動專題頁面的點睛之筆,一個有氣勢的標題能襯起整個專題的氣氛,主標題一般都簡短精辟,概括了整個活動的專題商業訴求。副標題一般是起解釋說明的作用,描述該活動的利益點。所以在視覺處理上標題是要重點刻畫的,將其拆分做一些形狀、色彩、大小、字體、質感、排版的變化和突破是必不可少的。玩家善於掃描,且勤於掃描,卻不勤於思考,且對小於24號的文字都是視而不見的。所以一定要讓大標題吸引注玩家,讓玩家感興趣,才會去看那些小於24號的文字。

2、選用合適的素材及元素,點綴活動氣氛

節日要有節日的元素,比賽要有比賽的元素。圓形和其它幾何圖形比較,具有圓滑的特點,讓人感覺輕松、愉悅,合理的運用會提高頁面的層次,讓焦點更加突出,增強視覺感的同時也能夠營造活躍的氛圍。但記得要使用加減法,不能亂堆一通,點到為止即可。

網頁專題設計技巧:設計師應該營造活動氣氛_poluoluo.com

網頁專題設計技巧:設計師應該營造活動氣氛_poluoluo.com

上面圖1只是用了冠軍杯作為主要元素去營造一種比賽氣氛,素材並不新穎,但出來的效果卻令人相當震撼。圖2的素材是非常給力,所以營造的那種周年慶的氣氛也十分犀利。玩家可能不用看文字就能明白這兩個頁面是干嘛的。畢竟圖形比文字能更快速更有效的傳達信息。

3、用合理的色調營造意境,設計有靈魂的作品

通俗點地說就是該喜慶的得喜慶,該火爆的還是得火爆,但這火候是掌在設計師手中的,當需求方給了個很山寨很暴力的頁面給你參考時,你得明白,這是他想要的氣氛,但不一定是他想要的畫面,我們是設計師,不是美工,美工與設計師的區別其實跟裁縫與服裝設計師的區別是一樣一樣的,這個你懂的。

何謂有靈魂的作品,請看下面幾個作品:

網頁專題設計技巧:設計師應該營造活動氣氛_poluoluo.com

網頁專題設計技巧:設計師應該營造活動氣氛_poluoluo.com

網頁專題設計技巧:設計師應該營造活動氣氛_poluoluo.com

非常簡單的素材,卻營造出了扣人心弦的氣氛,就像畫面裡有個故事,有個影像,讓玩家如同身臨其境,陷入其中,完全抓住了玩家的眼球。其實這些作品無非是找到適合的元素,輔以合理統一的色調,運用眩光/實體/手繪/虛幻空間/平面構成等表現手法給玩家設計一個完美的陷阱,套住他們的心。

> 營造專題活動氣氛並不只是“火/爆/熱”

這種過火過爆過熱的專題活動,不僅會讓玩家感到不適,還會使游戲的品牌形象受損。

下面我們看一組對比:

網頁專題設計技巧:設計師應該營造活動氣氛_poluoluo.com

網頁專題設計技巧:設計師應該營造活動氣氛_poluoluo.com

網頁專題設計技巧:設計師應該營造活動氣氛_poluoluo.com

通過對比,左邊的專題頁面總讓人感覺少了些什麼。那便是氣勢和氣氛。

也許有點氣氛卻總讓人想起街邊小廣告,簡陋,設計缺少一些思考,缺少一些靈魂,像是拼圖式的設計。氣氛並不是你堆一堆東西上去就叫有氣氛的,拋開可用性、易用性、識別性、安全性等不管,單是美觀上就有些欠佳。游戲專題/線上活動可以說是游戲品牌推廣最常見的手段,如何去了解並掌握用戶心理,繼而設計出緊扣玩家心弦的專題,即是我們一直在追求的。

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