• 未分類
  • 平面理論教程
  • Flash教程
  • 其他作品
  • 標誌設計
  • 海報招貼
  • 包裝設計
  • 畫冊設計
  • 網頁設計
  • 名片設計
  • PS作品
  • CG設計
  • MAYA教程
  • Illustrator教程
  • AutoCAD教程
  • 3DMAX教程
  • Painter教程
  • 繪畫教程
  • FireWorks教程
  • 攝影教程
  • 工業設計
  • 網頁設計教程
  • 其他資訊
  • 摺紙大全




  • [ 平面理論教程 ] LOL新英雄與新皮膚移動端頁面設計分析—- 其他教程




    教學主題: LOL新英雄與新皮膚移動端頁面設計分析

    大家好!! 小編今天來和大家分享關於 其他教程中的平面理論教程教學

    今天的這個教學主題是: LOL新英雄與新皮膚移動端頁面設計分析

    這教學的重點為這幾點 [ 設計,分析,頁面,移動,英雄,皮膚,推廣,通過,進行,渠道, ]

    希望你可以從這幾點中領悟到修圖的精華

    本文重點

    隨着移動互聯網的迅猛發展,對於遊戲的活動宣傳渠道不再局限於PC端,微信、手Q、掌上英雄聯盟成為英雄聯盟重要的推廣渠道。在新英雄、新皮膚的移動推廣,做了不少的嘗試。

    隨着移動互聯網的迅猛發展,對於遊戲的活動宣傳渠道不再局限於PC端,微信、手Q、掌上英雄聯盟成為英雄聯盟重要的推廣渠道。在新英雄、新皮膚的移動推廣,做了不少的嘗試。

    LOL新英雄與新皮膚移動端頁面設計分析

    以上為2014年6月至2015年6月新英雄移動端推廣頁面,以及2015年推出的娑娜終極皮膚-DJ娑娜移動端推廣頁。

    在引入頁的設計上,設計師根據英雄特性做不同的引入交互,再通過幀動畫、CSS3、canvas技術讓用戶在瀏覽頁面過程中進行一個互動,更形象簡易的了解新英雄特性。

    弗雷爾卓德之心 布隆

    布隆的被動技能通過普通攻擊和Q技能對目標身上增加“震蕩猛擊”,當“震蕩猛擊”層數到達4時,就會被擊暈,那麼在引入頁上就利用這一特性,通過點擊屏幕狙擊能量喚醒新英雄。主要利用JS+幀動畫效果完成。

    (掃碼可看動效,下同)

    LOL新英雄與新皮膚移動端頁面設計分析

    迷失之牙 納爾

    套用一下納爾視頻介紹里的一句話“納爾是一個靈巧的小動物”,因為是動物,所以通過尋找“神獸”這樣的一個定義來進行英雄的喚醒,技術上通過canvas擦除+幀動畫來進行交互實現。

    LOL新英雄與新皮膚移動端頁面設計分析

    星界游神 巴德

    巴德的存在會導致神奇的調和之音出現,這些調和之音會為巴德提供經驗值,法力和移動速度加成。那麼通過他的這一被動技能,我們通過點擊收集調和之音的方式來進行英雄的喚醒。

    LOL新英雄與新皮膚移動端頁面設計分析

    在內容展示上,移動端英雄專題內容參考PC端頁面展示內容,展示英雄原畫、背景故事、介紹視頻、基本技能、技能視頻,由於移動端頁面更趨向於輕巧及可讀性,於是摒棄了英雄截圖、英雄克制技巧及使用技巧。下面我們看一組數據。

    LOL新英雄與新皮膚移動端頁面設計分析

    由於手機瀏覽過程中,用戶瀏覽操作頁面會上下翻頁,在進行數據統計時未進行數據去重,故到達率超過100%,但是仍可以看出頁面觸達率較高,背景故事、技能、視頻等的瀏覽率值較高,頁面內容布局較為符合用戶所需。

    有關內容有一項補充,在布隆專題的時候,有嘗試在移動端進行英雄、皮膚的購買,但是購買的轉化率不是很好,於是在後續的兩期中,將新英雄、皮膚的購買去掉。以下為購買按鈕的點擊數據及轉化率。

    購買按鈕點擊數據(佔比:點擊量/頁面瀏覽總量)

    LOL新英雄與新皮膚移動端頁面設計分析

    購買數(從點擊購買按鈕到購買成功的轉化率為:33.4%)

    LOL新英雄與新皮膚移動端頁面設計分析

    在頁面推廣上,也進行了一些嘗試性的推廣傳播。下面為三期英雄5天的PV/UV

    LOL新英雄與新皮膚移動端頁面設計分析

    下列為推廣渠道分佈

    LOL新英雄與新皮膚移動端頁面設計分析

    布隆主要通過微信消息推送、官網掃二維碼進行傳播, 納爾除了保留布隆的傳播渠道外,更增加了掌上英雄聯盟這個傳播渠道,掌盟流量佔比達到62%,巴德則繼續沿用納爾的傳播渠道,另外增加了微博、手Q兩個渠道,然而增加的這兩個渠道並沒有帶來很大的流量,這一期掌盟的流量佔比達到99%,可以看出用戶通過手機獲取相關英雄聯盟信息多為通過掌盟APP。

    講完有關新英雄的一些數據,那接下來我們了解一下新皮膚的一些數據,在3月的時候,終極皮膚–DJ娑娜在移動端進行了一個專題推廣。再來放一下二維碼。

    LOL新英雄與新皮膚移動端頁面設計分析

    關於英雄皮膚,用戶更關心的是皮膚的是否好看,皮膚特效是否酷炫,皮膚專題的內容製作上設計師更注重皮膚的原畫展示、皮膚的特效視頻展示。頁面不需要過多的特效渲染,而更突出皮膚本身的酷炫效果。

    在DJ娑娜移動端的推廣上,有了前2期新英雄的推廣經驗,在新皮膚的推廣上更注重掌盟的推廣,以下為DJ娑娜皮膚一些數據。

    LOL新英雄與新皮膚移動端頁面設計分析

    LOL新英雄與新皮膚移動端頁面設計分析
    貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
    使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit/Undo )命令使
    用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

    感謝大家關注~~

    設計:帥強

    重構:大思敏、小海

    看完小編分享的教學之後 是不是對平面理論教程中的其他教程教學更熟悉了呢?

    希望我們所介紹的 LOL新英雄與新皮膚移動端頁面設計分析 這教學會喜歡

    文章標題: 骨子愛創意- LOL新英雄與新皮膚移動端頁面設計分析–轉載請註明來源處

    本教學分類為平面理論教程中的 其他教程相關教學

    文章相關關鍵字為: 設計,分析,頁面,移動,英雄,皮膚,推廣,通過,進行,渠道,

    本文永久連結 :LOL新英雄與新皮膚移動端頁面設計分析

    本文轉載自 :VIA