萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 游戲網頁設計的創新之路

游戲網頁設計的創新之路

   前言

  游戲是我們從小就開始接觸的東西,在中國游戲行業井噴的年代裡,每家有實力的公司都想在這個行業裡分一杯羹,為了能夠走在行業的領先地位,從游戲的研發到運營推廣都下足了功夫,而我們作為運營推廣的品牌視覺設計師就應該為此出一把力,

游戲網頁設計的創新之路 三聯

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

  我們今天的主題是創新,那什麼是創新呢?

  創新是指:以現有的思維模式提出有別於常規或常人思路的見解為導向,利用現有的知識和物質,在特定的環境中,本著理想化需要或為滿足社會需求,而改進或創造新的事物、方法、元素、路徑、環境,並能獲得一定有益效果的行為。所以我們不能假大空,要實踐就要得出可執行的結論,我認為,有效的創意是在繼承前輩以後的合理改進,而不是拋開一切的顛覆原有。

  下面讓我們來回顧一下那些年我們前輩做的頁面,來分析一下當年的創(xin)意(dong)點

  08年—09年出品

  2008年1月天龍八部COVER頁面

游戲WEB創意路-VC對外20140301_07

  該頁面中的導航摒棄了頁頂的常規設計,而采用居中與下面信息板塊相協接,重金屬包邊和水晶質感的按鈕,應該是當時比較注重的。

  2009年9月天龍八部COVER頁面

游戲WEB創意路-VC對外20140301_10

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

  2009年8月霸者無雙封測官網

游戲WEB創意路-VC對外20140301_14

  10年—11年出品

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

游戲WEB創意路-VC對外20140301_18

  2010年鹿鼎記專題

游戲WEB創意路-VC對外20140301_21

  2011年8月戰地風雲專題

游戲WEB創意路-VC對外20140301_24

  2012年—2013年出品

  2012年鹿鼎記互動站

游戲WEB創意路-VC對外20140301_27

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

  2012年8月鹿鼎記海外官網

游戲WEB創意路-VC對外20140301_31

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

游戲WEB創意路-VC對外20140301_35

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

游戲WEB創意路-VC對外20140301_37

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

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

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

  從上面的分析中或許能夠有所想象,下面我們對之後的視覺設計進行一下大膽的猜測,或許他們已經走進我們,並改變著我們的行為習慣和生活方式。

  2014年即將出現/已經出現

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

游戲WEB創意路-VC對外20140301_41

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

  互動視頻

游戲WEB創意路-VC對外20140301_45

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

  滾動視差

游戲WEB創意路-VC對外20140301_48

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

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

  多平台全適應

游戲WEB創意路-VC對外20140301_52

  由於互聯網的高速發達,智能化的呼聲與日俱增,這一場浪潮吹紅了小米,讓手機等便捷式產品與整個互聯網連到了一起,浏覽者的需求也在發生著變化,怎麼使大小分比率與網速不同的產品上都能很合理的展示我們的游戲,響應式與適應式就來到了我們的身邊。

  扁平化處理法

游戲WEB創意路-VC對外20140301_55

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

  總結

  這篇分享是對這幾年WEB視覺發展的一個小總結,也是自己的一點認識,可能當中的觀點有些不合理,請大家多多包涵並指出,作為設計師的我們都希望能把作品和產品有機結合,在這條路上我們酸甜苦辣的走著,三人行必有我師,希望我們一起風雨相伴!

copyright © 萬盛學電腦網 all rights reserved