搞點新意思-QQiPad主題帶你飛

Xhong

主題一直是QQiPad比較薄弱的一塊,在用戶的強烈呼聲下,項目組決定在6.5版本上線新的主題,為此做了大量的嘗試和思考。基於大屏設計的QQiPad主題有何特點?應該如何設計?在此分享本次主題設計總結。

需求背景

主題設計的需求源自三個原因:

1.從Support上梳理了用戶對QQiPad的反饋,在體驗方面,用戶希望提供更多的主題,高居第一位;

2.線上主題數量少,風格弱,只是手Q主題的簡單搬運,沒有為iPad大屏做針對性的設計;

3.本期開發人力緊缺,從設計側發起主題設計的需求,能夠在佔用開發資源較少的前提下實現項目落地。

準備工作

在着手設計前,我對三個影響本次主題設計的關鍵點進行了調研和分析,得到了一些有用的結論:

1.現存主題數量少、效果弱

現存4套主題題材少,受眾相對局限;主題只對左側Tab Bar底圖和圖標進行替換,效果較弱。

2.活躍用戶偏年輕&低齡,審美偏向清新簡約的界面

調研了今年QQiPad活躍用戶的分布情況,發現30歲以下用戶佔據80%以上。同時,14及14歲以下的小/初學生人群及18-22歲的大學生人群在佔比上較為突出,說明目前QQiPad的使用人群主要是30歲以下的青年人,同時低齡人群也佔了明顯的數量,因此在主題題材挑選上,應優先考慮青年人及低齡人群的喜好。

ISUX北京設計中心在今年年中做了一次關於QQiPad用戶審美取向的調研,得到了下面的一組數據:

從這組數據我們可以相對直觀地了解到用戶對界面的審美傾向,這些關鍵詞將指導接下來的主題設計工作。

3.QQiPad界面特點顯著,需要針對性的設計策略

QQiPad的界面特點:

這樣的頁面特點導致了三個難點:

視覺樣式多,整體視覺統一性難把控;

視覺框架弱,只設計元素難出強效果;

頁面元素多,背景的設計上限制重重。

針對問題,我將整個界面的元素進行拆分歸納,嘗試從中找到對策。如下圖所示,將首頁分為背景和前景,又將前景元素分為可控視覺元素和不可控視覺元素,基於這個抽象的模型思考解決辦法。

第一,視覺上減少前景元素的種類。可控的視覺元素用統一的視覺風格進行處理;不可控的視覺元素,減少其顏色的數量。

第二,保證背景和前景的層次感,讓前景元素躍於背景之上。背景類型有三大類:純色背景,紋理背景、插畫/照片背景,根據他們的特點做合理的限制,就能保證主題的整體氛圍及文字的可讀性。

設計執行

1.設計流程

根據調研得到的用戶審美傾向關鍵詞,篩去一些定義比較模糊、與其他關鍵詞有交集的詞(如大氣、時尚、有愛)等,留下七個可執行度比較高的風格關鍵詞:清新、簡約、素雅、酷炫、萌、卡通、夢幻

根據這些關鍵詞,先後嘗試了十多個方案,最後綜合各種因素,篩選出5個方案上線。

在這12個主題方案的執行過程中,我總結了一個通用性比較高的設計流程,通過這個流程,能夠思路清晰並快速地執行方案的設計。

2.設計案例

接下來以“幻音派對”主題為例,詳細解析該流程的推進過程。

風格關鍵詞

選擇經過調研篩選的關鍵詞之一“酷炫”,作為主題的風格方向。

確定題材

根據“酷炫”這個關鍵詞腦爆了一些題材方向,最終確定使用EDM(Electronic Dance Music)這個題材,原因有:風格強烈,能夠留下深刻印象;元素多,便於設計;同時躁動的音樂風格及視覺感受也是現如今很多年輕人所喜歡的,符合QQiPad的用戶年齡層定位。

氛圍版&視覺元素

EDM的特點除了律(gui)動(chu)感極強的音樂之外,現場絢麗多彩的燈光效果是其最大的特點。炫光、魅色和幾何元素是產生EDM酷炫效果的基礎,根據這三個特性進行界面元素的繪製。

首頁方案設計

根據氛圍版提取的視覺特徵與題材的視覺元素進行結合,對首頁進行設計,因為首頁的視覺元素最多,能夠最好地表現主題的風格,因此以首頁為設計重點,首頁風格定稿後,再將風格同步到其他的頁面上。

其他頁面同步

首頁方案確認後,便可以把風格同步到其他的頁面了。同步遵循“由主到次”的原則,先走查主要頁面如AIO、動態、個人資料等,確認該風格在這些頁面也可行之後,便可以把其他更深層級的頁面也同步上風格。

3.其他方案展示

森之頌歌

暖暖下午茶

簡 色

QQfamily新年歡樂頌

4.主題入口改版

上線了全新的主題,作為門面的個性裝扮入口也需要 “翻新”,搭配本次的主題升級。舊版的個性裝扮入口功能非常簡陋,只提供主題banner展示,缺失預覽功能;上線新主題後,原主題底層調整,需要提示用戶手動更新,線上的入口也無法滿足這種需求。

因此,藉助本次主題升級的機會,對個性裝扮頁也進行了界面升級,由原來的橫向banner的形式變為“封面+操作區”上下結構的形式,增加了預覽主題的功能;同時,對主題的狀態進行了擴充和明確的定義,以按鈕文案的形式進行展現,相比之前的形式,展示更清晰,對不同情況的兼容性更強。

總結整個項目的推進思路:

1.接到設計需求時,思考需求背後相關的要點,進行調研分析,獲得合理明確的目標;

2.基於目標進行方案的發散,儘可能嘗試多的方案,基於方案分析其合理性,進行修改,確定方案,最終落地。

每一個設計,其實都是一次又一次“發散”和“收斂”後的結晶,發散是為了突破創新、收斂是為了合理落地,兩者缺一不可,因此,既要嚴謹思考,又要大膽想象,才能夠獲得更好的設計結果。

鳴謝

在本次項目中,感謝放放、婷婷還有我的導師靚靚的悉心指導,感謝老大和標叔指點迷津,感謝多多的切圖支持,同時也感謝在項目過程中給我提寶貴意見的同事們,你們的支持給了我很大的動力!

再次感謝大家支持!

 

 

 

Tags: , , ,

Xhong
遊戲應用中心品牌更新
上一遍
H5動畫開發快車道
下一遍
11,612
QQ空間 新浪微博 Facebook Google+

相關推薦

留下你的想法吧