絕對干貨,游戲網(wǎng)頁設(shè)計的創(chuàng)新之路!

0 評論 2808 瀏覽 2 收藏 10 分鐘

游戲是我們從小就開始接觸的東西,在中國游戲行業(yè)井噴的年代里,每家有實(shí)力的公司都想在這個行業(yè)里分一杯羹,為了能夠走在行業(yè)的領(lǐng)先地位,從游戲的研發(fā)到運(yùn)營推廣都下足了功夫,而我們作為運(yùn)營推廣的品牌視覺設(shè)計師就應(yīng)該為此出一把力,讓自己的專長先走出國際范兒。

游戲在這個行業(yè)也發(fā)展了許多年了,從剛開始游戲在網(wǎng)絡(luò)上公測以來,我們的游戲網(wǎng)頁就已孕育而生了,在走過數(shù)年之后的今天,曾經(jīng)換湯不換藥的網(wǎng)頁設(shè)計與其說是一成不變不如說是在一次次的創(chuàng)傷我們的瀏覽者,為了能夠撫平創(chuàng)傷我們就應(yīng)該去思考更加合理的視覺語言,讓觀者看著愉悅玩著舒心。這樣的創(chuàng)新才能與觀者達(dá)到情感共鳴,產(chǎn)生對產(chǎn)品的粘性與此建立產(chǎn)品文化的品牌形象。

我們今天的主題是創(chuàng)新,那什么是創(chuàng)新呢?

創(chuàng)新是指:以現(xiàn)有的思維模式提出有別于常規(guī)或常人思路的見解為導(dǎo)向,利用現(xiàn)有的知識和物質(zhì),在特定的環(huán)境中,本著理想化需要或?yàn)闈M足社會需求,而改進(jìn)或創(chuàng)造新的事物、方法、元素、路徑、環(huán)境,并能獲得一定有益效果的行為。所以我們不能假大空,要實(shí)踐就要得出可執(zhí)行的結(jié)論,我認(rèn)為,有效的創(chuàng)意是在繼承前輩以后的合理改進(jìn),而不是拋開一切的顛覆原有。

下面讓我們來回顧一下那些年我們前輩做的頁面,來分析一下當(dāng)年的創(chuàng)(xin)意(dong)點(diǎn)

>08年—09年出品

2008年1月天龍八部COVER頁面

 

該頁面中的導(dǎo)航摒棄了頁頂?shù)某R?guī)設(shè)計,而采用居中與下面信息板塊相協(xié)接,重金屬包邊和水晶質(zhì)感的按鈕,應(yīng)該是當(dāng)時比較注重的。

2009年9月天龍八部COVER頁面

6

 

從頁面當(dāng)中大量的火球看出這期是要打火爆震撼而具有殺傷力的感覺。頁面下方把導(dǎo)航與公告信息通過金屬銅與大石塊穿插后留下的設(shè)計區(qū)域整合了信息,可謂是既整體又與頁面震撼想呼應(yīng)。

2009年8月霸者無雙封測官網(wǎng)

7

 

>10年—11年出品

2010年8月爆笑八仙注冊賬號頁面

8

 

2010年鹿鼎記專題

9

 

2011年8月戰(zhàn)地風(fēng)云專題

10

 

>2012年—2013年出品

2012年鹿鼎記互動站

11

 

該互動站采用擬物化場景,在一個閑暇的午后,坐在窗邊,一邊喝著咖啡一邊翻著精美的書籍,來欣賞那來自《鹿鼎記》的故事,給觀者一種很放松的感覺。

2012年8月鹿鼎記海外官網(wǎng)

12

 

作為歐美登陸的海外站,一定要有國外的氣氛和質(zhì)感,這方面該頁面都一一做到了,無論是濃重的色彩搭配還是導(dǎo)航UI的精致度,都屬于上乘,很有國際范兒的感覺,作為承載頁面內(nèi)容的卷軸正也是中國風(fēng)更好的傳遞,這個站的中西合璧做的很棒。

 

2013年9月暗影之劍全FLANSH概念站

13

 

這是2013年為暗影之劍做的概念站,整站采用FLANSH和JS腳本結(jié)合的方式,讓用戶在操作過程中產(chǎn)生一種互動,使其身臨其境去感受去尋找目標(biāo)的刺激感。

我們上面講述了一下從2008年—2013年這6年中我們網(wǎng)頁視覺的變化;從質(zhì)感方面來看,是由重金屬風(fēng)到輕質(zhì)感的Metro風(fēng),從顏色系統(tǒng)來看,由多色的炫彩到幾種單色的對比沖擊,從畫面形式上來看,從單一到了形式感到十足的多元化,這一路走來,可見在這個信息大爆炸的時代,我們的產(chǎn)品更注重了他的品味和涵養(yǎng),不在是那個天天扯著嗓子吶喊的野蠻人,轉(zhuǎn)而是開始走著一種高大上的國際范兒,讓我們的產(chǎn)品更加貼近用戶,真正的為用戶考慮。

2014年已經(jīng)悄然的來臨,在這個不平凡的時代中,隨著科技的不斷進(jìn)步,我們的視覺定會發(fā)生翻天覆地的變化,從單一性變成多元化,這也是在給我們WEB視覺設(shè)計師出的一道題,接下來是讓我們從不同的領(lǐng)域去加強(qiáng)自己,以不變應(yīng)萬變。

從上面的分析中或許能夠有所想象,下面我們對之后的視覺設(shè)計進(jìn)行一下大膽的猜測,或許他們已經(jīng)走進(jìn)我們,并改變著我們的行為習(xí)慣和生活方式。

>2014年即將出現(xiàn)/已經(jīng)出現(xiàn)

全屏大視野(精致的圖片與精細(xì)的人物角色)

14

 

清晰的圖片要比文字要有說服力,科技的高速發(fā)展帶給我們更大的寬帶,使得我們電腦分辨率變大速度變快,讓我們看的更多看的更遠(yuǎn)。

互動視頻

 

15

 

讓產(chǎn)品不在靜止,電影的興起就是大家在尋找不一樣的感受,讓產(chǎn)品充滿樂趣感。

滾動視差

16

 

該頁面當(dāng)中采用了滾動視差,用一個發(fā)射的火箭升空所處階段的展示來講述該公司十年來的成長歷程。

火箭的升空過程讓頁面流動起來,讓觀者產(chǎn)生了空間的感覺。

多平臺全適應(yīng)

17

 

由于互聯(lián)網(wǎng)的高速發(fā)達(dá),智能化的呼聲與日俱增,這一場浪潮吹紅了小米,讓手機(jī)等便捷式產(chǎn)品與整個互聯(lián)網(wǎng)連到了一起,瀏覽者的需求也在發(fā)生著變化,怎么使大小分比率與網(wǎng)速不同的產(chǎn)品上都能很合理的展示我們的游戲,響應(yīng)式與適應(yīng)式就來到了我們的身邊。

扁平化處理法

18

 

在這個信息大爆炸的時代里,錯綜復(fù)雜的信息沖擊著我們的眼球,讓我們無從瀏覽,用更好更合理的布局來劃分層級減少干擾,是我們當(dāng)之重任。

>總結(jié)

這篇分享是對這幾年WEB視覺發(fā)展的一個小總結(jié),也是自己的一點(diǎn)認(rèn)識,可能當(dāng)中的觀點(diǎn)有些不合理,請大家多多包涵并指出,作為設(shè)計師的我們都希望能把作品和產(chǎn)品有機(jī)結(jié)合,在這條路上我們酸甜苦辣的走著,三人行必有我?guī)煟M覀円黄痫L(fēng)雨相伴!

文章來源:優(yōu)設(shè)網(wǎng)

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!