如何主導一套遊戲官網的設計

來源:互聯網
上載者:User

   1、開工前的討論

  在做上一版的概念版官網的時候,主要是交代清楚了遊戲的故事背景、陣營關係、種族職業初步介紹。當時介於遊戲開發的階段,很多東西其實是點到為止。就像是說看一本書看了個序。

  在做正式版官網的時候,和市場方面、產品經理做了比較詳細的溝通,該版本官網除了滿足遊戲正常運營所需要的一些功能外,也希望延續概念版的基礎,把之前講到的一些東西鋪開來,講的更詳盡。

  這幾點主要包括:故事背景、種族職業、蒸汽文化。主要以專題方式呈現。

  2、設計思路整理

  第一版官網方案:

  概念:陣營強對抗,強調敵對勢力,加強PK代入感。(以下方案為概念類比稿,借用了其他產品的形象圖,敬請諒解。)

  第二版官網方案:

  概念:時間軸。以黑金各種族出現的年代作為時間軸,講述該種族出現的時期發生的故事、出現的新事物等等。(以下為DEMO示範)

  第三版官網方案:

  概念:蒸汽與魔幻。官網分為兩個入口,內容上面做區分,畫面表現上提供兩套皮膚,玩家選擇自己喜歡的陣營進入查看相關的資訊。(以下方案為概念類比稿,借用了其他產品的形象圖,敬請諒解。)

  第四版官網方案:

  概念:蒸汽龐克。已經進去到了遊戲開測前的階段,所以在之前和幾個概念類型的官網都已經不在適用,要完全按遊戲正式的官網來做。經過第三版蒸汽與魔幻的對比後,選擇了更能引起人們關注的“蒸汽龐克”風。

  3、設計中的思考

  1、蒸汽龐克版官網

  我們都知道,一般構成網頁設計的幾個要素:主視覺、背景圖、SLOGAN、UI。

  主視覺:這方面有較大的選擇餘地。IP中心提供了幾個比較成型的角色。

  UI:前期的資料收集非常重要,看看我的檔案包吧。

  選定了個原型,做出了大致的設定;

  提交藝術中心幫忙細化,包括後期的FLASH效果。

  SLOGAN:結合整體頁面的效果,在SLOGAN的設計上面,沒有做過多、複雜的效果。

  動畫:最終加入了一些蒸汽氣壓錶針齒輪轉動等效果,起到了錦上添花的效果。

  2、專題

  所有專題在設計之初有一個構想,官網選擇了蒸汽龐克這個元素來設計,是希望人們在腦海中加深對黑金蒸汽文化的印象,既然我們植入了一個符號,為什麼不在更多專題裡面不斷的加深這個印象呢?或許是蒸汽元素,又或許只是一個“符號”。所以在專題設計的時候,我採取了比較具象的、形式感的布局,並且一直延續下去,形成一種風格。

  故事專題:

  符號:書本。添加蒸汽元素,以書本的形式來進行封裝,原本想做成電子雜誌,後來種種原因取消了。

  種族職業:

  符號:旗幟。以旗幟來區分不同的陣營,就像古代的兩軍對壘,都要扛上自家的旗幟。

  這裡面順便要提到一點是素材的前期準備。

  有人說裡面的種族的圖畫的很贊,整體結構也比較好。關於這個我要告訴大家的是:在提素材需求的時候,你的腦海中要對畫面有個比較清晰的描繪。更重要的是你要對遊戲的概論有比較充分的瞭解。

  雙面黑金:

  符號:圓形。以圓形為視覺中心,左右兩邊採用對抗的形式,展示不同的“雙面”概念:雙面魔幻、雙面CEO、雙面風格、雙面陣營、雙面玩法。

  4、項目總結

  黑金項目中值得思考和分享的幾個點:

  1、引導頁頭圖過高,採用幾秒後定位到下面的主介面,這樣的互動體驗好嗎?

  2、頁面頭部未必非要有人物主形象。

  3、在做banner的時候,官網、論壇、登入器盡量保持比例統一。

  4、不要忽視一些截圖素材,其實有時候截圖更能讓使用者直觀的感受的遊戲內的真實度。

  5、論壇、新聞之類的塊面,因為有大量的文字資訊,盡量不要使用反白的效果,長時間閱讀會讓眼睛產生疲勞感。當然,也別用很純、飽和度很高的顏色,會被刺瞎的。

  5、一點建議

  總結幾個點吧:

  1、 瞭解遊戲資訊:包括故事背景、職業、特色玩法、價值觀、……千萬不要忽視文字資料。

  2、 收集市場資訊:競品遊戲的官網,分析他們的優勢與劣勢。分析我們的使用者群,他們的喜好與習慣。瞭解測試時間、推廣計劃等市場計劃。

  3、 原型的討論:別把自己當個美工,我們不只是一個畫畫的、美工,積極的去參與到原型的討論中,你能從中瞭解到產品經理們的思路,同時也能把你的想法反饋給他們,有時候你的點子或許會給別人一些啟發。

  4、 巧婦的米:去找項目的主美多要些資源吧,什麼花花草草、動物妖怪、NPC大叔、十八般武藝啦,別嫌多,總有用到的時候。如果能說服他給你開個他們內部的共用許可權那就更好了。

  5、 頭腦風暴:能做的都做完了,要是你還沒有找到感覺,那就拉上難兄難弟們一起頭腦風暴一下吧。總有些協助的。

  6、 上線跟蹤:有人說我們是像素眼,其實我們是有一種追求完美的心,上線前看看最終呈現的效果和你預期的有沒有差別吧。

        :更多精彩教程請關注三聯網頁設計教程 欄目,

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。