痞事 PSRSS

@Tony

「PSRSS · 痞事」是一個基于內容分享的獨立文藝情緒博客。

文章 587
朋友 26
來訪 15202

LATEST POSTS

我們都愛寫博客 (添加鏈接加QQ群:172039861)

  • 云南丨昆明
  • http://www.qvcbiu.live
  • 網站成立2394天

#一個有故事的博客#

Tony

  • 生活

《上古世紀》新官網視覺表現的思考

項目背景:上古世紀從首次對玩家曝光,經過團隊兩年多的研發,終于迎來國服的第一次測試。經過漫長的等待,玩家首次進入了《上古世紀》的冒險之旅。為了響應首測,產品官方網站進行改版,一方面讓官網承載的功能全面滿足測試的要求,另一方面對于游戲官方的視覺傳達進行全面刷新。

對于游戲產品的視覺包裝,差異化、風格化設計以及頁面的良好瀏覽體驗,是我們每次官網改版力求做到最好為目標。而對于這次改版,我們也充分在挖掘上古產品的特點以及素材的特質,力求在眾多同類型產品中,官網的視覺表現能獨樹一幟,形成自己的風格以及品牌化包裝。

《上古世紀》產品特點以及素材情況:

1、世界觀龐大 ?2、第三代網游(slogan:這一次、改變世界) 3、游戲場景畫面眾多且精良

在眾多游戲官網中,“讓我記住一個游戲的官網”,我想是設計師應該去做的,而記住,無疑必須從具體的視覺表現中去體現,并讓人留下記憶,比如整體的配色,然后加上三要素:按鈕、圖片、文字的差異化表現。

上古龐大世界觀的視覺體現就是眾多的游戲場景,而塑造“唯美世界”的視覺呈現,應該是這次官網主視覺繼續傳承并一直堅持下去的品牌化包裝路線,這點我們一致認同,于是怎么結合這次測試內容的要求,完成頁面良好用戶體驗,加上傳承的視覺,便是我們這次工作的目標。

以下是部分游戲場景截圖:

前期探索與風格定位

風格化的方向確認后,對于頁面的展現,我們也試圖去嘗試,現在終端技術的發展,以及網頁瀏覽環境的變化, 我們不得不開始考慮各種應用環境的視覺表現,于是有了一些草案的探索。

方案1

響應式設計已經不是新鮮的字眼,這次上古世紀新官網能否做到響應式的表現,雖然有視覺的嘗試,但也有對應的挑戰。

挑戰并非技術問題,而是響應式布局對視覺的表現會有特別的要求,比如“盡可能少的使用圖片”“按鈕,文字 盡可能不要使用視覺樣式,而使用純色與文本”……這些標準或條件將導致網站視覺上的游戲信息視覺傳達降低,從市場的接受度來說,也很具挑戰。

假如這些問題可以通過另一種方式去實現,這對用戶來說則是大大的提升體驗效果,無論用戶使用市面上哪種尺寸的屏幕都是可以自適應,得到很好的內容呈現,而且對運營來說也是有百利而無一害,用戶的瀏覽沒有限制,就算是用手機也可以很好的瀏覽網站內容,而且在內容的增加與刪減都不會有很大的限制,內容與背景之間的相互影響也不會太大,可以根據主題定制多套背景,在多張背景之間可以現實切換效果,再配上背景音效,視聽感受應該不錯。

通過把按鈕的背景與文本做成一張圖片來代替色塊,當然技術上會遇到問題,因為在手機上瀏覽的時候,圖片可能會縮到很小而導致文字看不清楚,最后導致無法使用這個功能。

顯然此方案雖然力求新意,但綜合考慮實現成本、游戲視覺表現以及時間等問題,暫時放棄,但對于游戲產品官網響應式設計的探索,需要繼續下去。

方案2

方案3

相比方案1,方案2與方案3的表現,可能稍微傳統、比較常規的布局,兩者在視覺展示上有些相似,但在功能方面卻有不同,在方案2中,使用游戲場景作為首頁的主視覺,讓游戲一直重點強調的“世界”得到充分的展示,功能模塊的位置也比較合理,唯一不足的地方就在于廣告是豎立式的,這種豎立式的廣告因為高度比較高,在小屏幕下可能會出現展示不完整的現象,而且背景的過度形式也造成一定的限制,對深色背景色的支持效果比較好,但對淺色背景色的支持效果欠佳,而且游戲的畫面給人的感覺比較優雅并帶著清新陽光又不乏詩意,與沉重暗黑風格的游戲風格相反,所以用淺色來參與表現,更符合游戲調性。于是,方案3便是整體優化后的結果。

在方案3中,將首頁的主視覺與廣告位巧妙的結合到一起,不但對游戲特色能有很好的展示,而且對廣告有很好的呈現,由于頁面主要視覺都在集中在這一位置,不擔對頁面空間有很好的整合利用,而且這種形式將頁面清晰的分成上下兩個部分,對下方功能的展示與體驗都有很好的幫助,同時在廣告圖的切換效果在很大程度上能讓用戶對此頁面保持一定的新鮮感,去除了因為長期使用某些特定背景視覺而對其產生的視覺疲勞與乏味感。

最終,方案3在方案討論會中通過了海選。

設計執行

官網首頁

分別從兩個方面對頁面進行優化:

1:頁面top廣告主視覺

由于頁面將最重要的視覺重心放在了top位置,所以top視覺能在很大程度上對頁面的視覺效果產生強烈影響,除此之外,top視覺還帶有廣告功能,為讓視覺效果能達到預期,且不影響功能,對場景素材進行了挑選與規劃:盡可能的使用寬廣明亮,大氣恢弘的場景,一來可以很好的展示“世界”的概念,二來可以有很好的視覺沖擊,再配合對場景的氣氛進行優化處理。

2:界面與其它功能模塊的梳理

為讓頁面功能有比較好的體驗,提高文字信息的閱讀性,導航及按鈕等部件的功能性,特地對板塊進行了梳理劃分,使其重要層級與位置相符,同時采用簡潔、干凈、清新的配色,結合材質對部件進行強弱化處理,使重要層級更加凸顯與方便查找與使用。

首頁最終效果:

內頁

為保持整站風格的統一,有更好的功能延展性,保持了首頁設計思路,而將內容部分與界面功能部件分開,對需要單獨進行視覺設計的內容則可單獨處理,提高了內容的可操作性。

內頁最終效

引導頁

引導作為用戶進入官網的第一視覺展示區,為更好的讓游戲特色可以得到很好的展示,經過討論后決定選出最具游戲特色的場景,與全屏動態屏保的方式進行展示,唯美動人的場景畫面,配合美妙的背景音效,并為用戶制作成系統屏保系統,用戶不但可以在線享受如此美妙的視聽盛宴,還可以將其下載安裝到自己的電腦上,個性化自己的系統。

引導頁最終效果

小結

《上古世紀》官網上線后,整體效果得到了認可。傳承了視覺以場景為主體的包裝方向,也進一步優化了圖片的處理,雖然也有些不同的聲音,例如沒有游戲感(與傳統游戲網站相比較),頁面布局稍微規矩等,對于每次的版面更新,的確都會有一些美中不足,但我們需要做的,更多的是結合產品當前的階段,給玩家最直接的表達,做漂亮設計固然重要,當正確與有效設計,才能真正能幫助產品解決問題,方能讓設計變成力量,這才是我們堅定不移,一直探索的道路,其任重而道遠,我們在努力!

《上古世紀》官方網址:http://age.qq.com

—————————————————————————————————————————————————————————————————

注:文章非原創,原鏈接地址http://so.uehtml.com/uesoso/post/362/

歡迎來Mr.童的小店逛逛:http://live75.taobao.com/

 

Comments | 61 條評論

  游客,你好 修改資料

*郵箱和昵稱必須填寫

  • 真佩服那些搞設計的

  • 真佩服那些搞設計的

  • 真佩服那些搞設計的

  • BJD

    里面還有這么多的道道啊,不知道畫面跟永恒之塔相比,哪個更強。。。。

    • Mr.童

      @BJD 估計玩玩就知道了

      • BJD

        @Mr.童 現在老了,玩不動了,以前通宵打副本。。。。

  • BJD

    里面還有這么多的道道啊,不知道畫面跟永恒之塔相比,哪個更強。。。。

    • Mr.童

      @BJD 估計玩玩就知道了

      • BJD

        @Mr.童 現在老了,玩不動了,以前通宵打副本。。。。

  • BJD

    里面還有這么多的道道啊,不知道畫面跟永恒之塔相比,哪個更強。。。。

    • Mr.童

      @BJD 估計玩玩就知道了

  • 已經不是玩游戲的age

  • 已經不是玩游戲的age

  • 已經不是玩游戲的age

  • 分析的真好,學習了

  • 分析的真好,學習了

  • 分析的真好,學習了

  • 看著很棒,就是我不愛游戲,可惜了

    • Mr.童

      @戀羽 我大學畢業就沒玩過了

  • 看著很棒,就是我不愛游戲,可惜了

    • Mr.童

      @戀羽 我大學畢業就沒玩過了

  • 看著很棒,就是我不愛游戲,可惜了

    • Mr.童

      @戀羽 我大學畢業就沒玩過了

1 2
福建36选7玩法