Qzone大應用改版案例分析:視覺的最佳化

來源:互聯網
上載者:User

文章描述:QQ遊戲:Qzone大應用改版小結.

Qzone大應用是QQ遊戲在Qzone上的一個集合,裡麵包含了我們團隊所研發的各種棋牌休閒遊戲的Web版,現在已經發布了19款,包含歡樂鬥地主,英雄殺,QQ桌球,QQ跳棋,象棋,對對碰等…,隨著遊戲的增加,老版本的擴充性,視覺表現,功能模組上都面臨著問題,便有了這次的整體改版…

改版的原因

1、視覺的陳舊

背景過於厚重和複雜,不利於使用者的注意力放在應用表徵圖上;“線上好友”與“公告”板塊的設定也不是很科學,佔去了過多的空間。

2、為了帶動遊戲線上資料

雖然舊版本中的遊戲表徵圖有“大圖”“小圖”兩種模式,但無論哪種查看方式都無法將所有遊戲表徵圖在首頁全部展示完,這種分頁展示的情況下,排列在第二頁的遊戲,線上資料相比首頁的遊戲下降了幾千個點。

改版中遇到的問題

1、受限於Qzone應用的結構要求

所有Qzone裡的應用都是局限在固定寬度內,但是需要呈現的板塊和功能點並不算少,主次關係需要重新梳理。

2、整個應用頁面為Flash開發,局限了設計的發揮

整個QQGAME大應用是由Flash開發完成的,這樣一來為了控制整個應用的載入速度,不宜匯入過多的位元影像,所以有些地方需要在Flash中重新繪製,但是Flash作為一款向量設計軟體,細節上不能達到PS那樣的細緻程度;其次是檔案中某些控制項是由程式寫死在檔案之中,因此設計無法作出較大的修改。

改進和最佳化的點

1、將分頁展示改為一頁展示

“線上好友”板塊下移,為遊戲表徵圖空出了更多的展示空間,這樣一來,使用者就能在第一屏看到所有的遊戲表徵圖。

2、將“啟動遊戲大廳”和“邀請好友“的功能強化

“啟動遊戲大廳”和“邀請好友”兩個功能點在舊版中只是用文字鏈的形式展現,這樣的展示形式很容易讓人忽略,對於資料的拉動起不到實質性的作用。因此在新版中,我們將這兩個功能點處理為按鈕的樣式,並且從版面的下方挪到了版面頭部,從而加大他們的曝光率。

3、新加入遊戲推薦板塊,對重點遊戲進行推薦,拉高資料

在新版的設計中,我們加入了遊戲推薦欄,用以對重點遊戲進行推薦,由於尺寸擺放位置的特殊性,希望藉此來拉動對應遊戲的拉起資料。

4、將“公告欄“的功能弱化

舊版本的“公告欄”以一個板塊的形式呈現,佔據了整個版面1/6的面積,實際上這一功能點所起到的作用並不是很大,並不需要在一個重要的位置佔據這麼大的面積,因此在新版的設計中,我們將這個功能點弱化為文字鏈,但是位置仍然保持在版面頭部,以此來保證相關資訊發布的同時又不會分散使用者對於遊戲表徵圖的注意力。

視覺的最佳化

1、與QQ遊戲大廳2012的視覺風格統一(樣式的演變)

視覺的更新可以說是這次QQGAME大應用頁面改版最直觀的改變了。這次的改版,除了在視覺風格上希望與時俱進,更重要的是,我們希望讓使用者第一眼看到這個應用頁面的時候能立刻聯想到QQ遊戲大廳,因此我們著力於將視覺設計與遊戲大廳的視覺風格統一起來,保持大廳輕薄、通透的質感,並且我們加入了“卓明穀”這一QQ遊戲大廳2012版的標誌性元素。

第一個版本,注重了輕量化設計,線條和色塊的設計盡量清淡以便於使用者將注意力更多地放在遊戲表徵圖上,“公告”也換成了圖片的形式放在版面頂部。

第二版,為了和QQ遊戲大廳風格更貼合,讓使用者一眼就能識別,我們將應用的背景修改成和QQ遊戲大廳一樣的色調,並加入了“卓明穀”的背景。

第三版,頂部的圖片廣告回到了文字鏈形式,板塊之間的區分變得更加明晰,板塊的背景也進行了最佳化,調整了透明度,讓整個介面看起來更加清新。

最後定稿,我們將遊戲推薦板塊的形式做了小小的調整,因為之前的形式會讓使用者看起來像是廣告。“線上好友”板塊的捲軸最後還是去掉了,換成了翻至首頁和翻至尾頁按鈕,最後,還在版面頭部加上了“邀請好友”按鈕。

2、視覺上更輕量化,讓使用者的注意力更多地落在遊戲icon上

相比舊版本的設計,新版的設計把許多地方弱化,甚至去掉了,例如公告和線上好友板塊中的icon。這種做減法的設計方法,一來是和遊戲大廳輕薄的風格保持一致,二來,弱化了這些次要的甚至是不必要的元素,反而更能突出應用中的遊戲表徵圖,因為這些表徵圖才是整個產品的重點,不應該用多餘的元素來幹擾它們的呈現。

新功能

遊戲表徵圖置頂功能

新版本的設計中,為每個遊戲加上了“置頂”這一功能。當使用者將滑鼠移到某一遊戲表徵圖上的時候,會出現“置頂”按鈕,點擊該按鈕,則該遊戲會被移動到“遊戲庫”的首位,從而方便使用者下一次尋找和進行遊戲。因為目前整個QQGAME大應用中包含的遊戲只有17款,所以在一個頁面中就全部展示出來了,遊戲如果排列在中間,使用者尋找會浪費一定的時間,“置頂”功能的加入可以將使用者經常玩的遊戲放在顯眼的位置便於其尋找。

體驗地址:

http://rc.qzone.qq.com/myhome/385/?via=QZ.APP.SEARCH



相關文章

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 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。