Xhong：主題一直是QQ iPad比較薄弱的一塊，在用戶的強(qiáng)烈呼聲下，項(xiàng)目組決定在6.5版本上線新的主題，為此做了大量的嘗試和思考。基于大屏設(shè)計(jì)的QQ iPad主題有何特點(diǎn)？應(yīng)該如何設(shè)計(jì)？在此分享本次主題設(shè)計(jì)總結(jié)。

需求背景

主題設(shè)計(jì)的需求源自三個(gè)原因：

1. 從Support上梳理了用戶對QQ iPad 的反饋，在體驗(yàn)方面，用戶希望提供更多的主題，高居第一位；

2. 線上主題數(shù)量少，風(fēng)格弱，只是手Q主題的簡單搬運(yùn)，沒有為iPad大屏做針對性的設(shè)計(jì)；

3. 本期開發(fā)人力緊缺，從設(shè)計(jì)側(cè)發(fā)起主題設(shè)計(jì)的需求，能夠在占用開發(fā)資源較少的前提下實(shí)現(xiàn)項(xiàng)目落地。

準(zhǔn)備工作

在著手設(shè)計(jì)前，我對三個(gè)影響本次主題設(shè)計(jì)的關(guān)鍵點(diǎn)進(jìn)行了調(diào)研和分析，得到了一些有用的結(jié)論：

1. 現(xiàn)存主題數(shù)量少、效果弱

現(xiàn)存4套主題題材少，受眾相對局限；主題只對左側(cè)Tab Bar底圖和圖標(biāo)進(jìn)行替換，效果較弱。

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

調(diào)研了今年QQiPad活躍用戶的分布情況，發(fā)現(xiàn)30歲以下用戶占據(jù)80%以上。同時(shí)，14及14歲以下的?。鯇W(xué)生人群及18-22歲的大學(xué)生人群在占比上較為突出，說明目前QQiPad的使用人群主要是30歲以下的青年人，同時(shí)低齡人群也占了明顯的數(shù)量，因此在主題題材挑選上，應(yīng)優(yōu)先考慮青年人及低齡人群的喜好。

ISUX北京設(shè)計(jì)中心在今年年中做了一次關(guān)于QQiPad用戶審美取向的調(diào)研，得到了下面的一組數(shù)據(jù)：

從這組數(shù)據(jù)我們可以相對直觀地了解到用戶對界面的審美傾向，這些關(guān)鍵詞將指導(dǎo)接下來的主題設(shè)計(jì)工作。

3. QQ iPad界面特點(diǎn)顯著，需要針對性的設(shè)計(jì)策略

QQiPad的界面特點(diǎn)：

這樣的頁面特點(diǎn)導(dǎo)致了三個(gè)難點(diǎn)：

1. 視覺樣式多，整體視覺統(tǒng)一性難把控；
2. 視覺框架弱，只設(shè)計(jì)元素難出強(qiáng)效果；
3. 頁面元素多，背景的設(shè)計(jì)上限制重重。

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

第一，視覺上減少前景元素的種類

可控的視覺元素用統(tǒng)一的視覺風(fēng)格進(jìn)行處理；不可控的視覺元素，減少其顏色的數(shù)量。

第二，保證背景和前景的層次感，讓前景元素躍于背景之上

背景類型有三大類：純色背景，紋理背景、插畫／照片背景，根據(jù)他們的特點(diǎn)做合理的限制，就能保證主題的整體氛圍及文字的可讀性。

設(shè)計(jì)執(zhí)行

1. 設(shè)計(jì)流程

根據(jù)調(diào)研得到的用戶審美傾向關(guān)鍵詞，篩去一些定義比較模糊、與其他關(guān)鍵詞有交集的詞（如大氣、時(shí)尚、有愛）等，留下七個(gè)可執(zhí)行度比較高的風(fēng)格關(guān)鍵詞：清新、簡約、素雅、酷炫、萌、卡通、夢幻。

根據(jù)這些關(guān)鍵詞，先后嘗試了十多個(gè)方案，最后綜合各種因素，篩選出5個(gè)方案上線。

在這12個(gè)主題方案的執(zhí)行過程中，我總結(jié)了一個(gè)通用性比較高的設(shè)計(jì)流程，通過這個(gè)流程，能夠思路清晰并快速地執(zhí)行方案的設(shè)計(jì)。

2. 設(shè)計(jì)案例

接下來以“幻音派對”主題為例，詳細(xì)解析該流程的推進(jìn)過程。

1）風(fēng)格關(guān)鍵詞

選擇經(jīng)過調(diào)研篩選的關(guān)鍵詞之一“酷炫”，作為主題的風(fēng)格方向。

2）確定題材

根據(jù)“酷炫”這個(gè)關(guān)鍵詞腦爆了一些題材方向，最終確定使用EDM（Electronic Dance Music）這個(gè)題材，原因有：風(fēng)格強(qiáng)烈，能夠留下深刻印象；元素多，便于設(shè)計(jì)；同時(shí)躁動的音樂風(fēng)格及視覺感受也是現(xiàn)如今很多年輕人所喜歡的，符合QQiPad的用戶年齡層定位。

3）氛圍版&視覺元素

EDM的特點(diǎn)除了律（gui）動（chu）感極強(qiáng)的音樂之外，現(xiàn)場絢麗多彩的燈光效果是其最大的特點(diǎn)。炫光、魅色和幾何元素是產(chǎn)生EDM酷炫效果的基礎(chǔ)，根據(jù)這三個(gè)特性進(jìn)行界面元素的繪制。

4）首頁方案設(shè)計(jì)

根據(jù)氛圍版提取的視覺特征與題材的視覺元素進(jìn)行結(jié)合，對首頁進(jìn)行設(shè)計(jì)，因?yàn)槭醉摰囊曈X元素最多，能夠最好地表現(xiàn)主題的風(fēng)格，因此以首頁為設(shè)計(jì)重點(diǎn)，首頁風(fēng)格定稿后，再將風(fēng)格同步到其他的頁面上。

5）其他頁面同步

首頁方案確認(rèn)后，便可以把風(fēng)格同步到其他的頁面了。同步遵循“由主到次”的原則，先走查主要頁面如AIO、動態(tài)、個(gè)人資料等，確認(rèn)該風(fēng)格在這些頁面也可行之后，便可以把其他更深層級的頁面也同步上風(fēng)格。

3. 其他方案展示

森之頌歌：

暖暖下午茶：

簡色：

QQfamily新年歡樂頌：

4. 主題入口改版

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

因此，借助本次主題升級的機(jī)會，對個(gè)性裝扮頁也進(jìn)行了界面升級，由原來的橫向banner的形式變?yōu)椤胺饷妫僮鲄^(qū)”上下結(jié)構(gòu)的形式，增加了預(yù)覽主題的功能；同時(shí)，對主題的狀態(tài)進(jìn)行了擴(kuò)充和明確的定義，以按鈕文案的形式進(jìn)行展現(xiàn)，相比之前的形式，展示更清晰，對不同情況的兼容性更強(qiáng)。

 

總結(jié)整個(gè)項(xiàng)目的推進(jìn)思路：

1. 接到設(shè)計(jì)需求時(shí)，思考需求背后相關(guān)的要點(diǎn)，進(jìn)行調(diào)研分析，獲得合理明確的目標(biāo)；

2. 基于目標(biāo)進(jìn)行方案的發(fā)散，盡可能嘗試多的方案，基于方案分析其合理性，進(jìn)行修改，確定方案，最終落地。

每一個(gè)設(shè)計(jì)，其實(shí)都是一次又一次“發(fā)散”和“收斂”后的結(jié)晶，發(fā)散是為了突破創(chuàng)新、收斂是為了合理落地，兩者缺一不可，因此，既要嚴(yán)謹(jǐn)思考，又要大膽想象，才能夠獲得更好的設(shè)計(jì)結(jié)果。

鳴謝

在本次項(xiàng)目中，感謝放放、婷婷還有我的導(dǎo)師靚靚的悉心指導(dǎo)，感謝老大和標(biāo)叔指點(diǎn)迷津，感謝多多的切圖支持，同時(shí)也感謝在項(xiàng)目過程中給我提寶貴意見的同事們，你們的支持給了我很大的動力！

「人氣過億的QQ 都是怎么設(shè)計(jì)的？」

1. 夜間模式丨《超過8億人使用的QQ，總結(jié)了夜間模式設(shè)計(jì)的通用方法》
2. QQ 表情丨《揭秘QQ 新版表情背后的設(shè)計(jì)故事》
3. QQ 會員丨《通過優(yōu)化，我們將QQ會員付費(fèi)用戶數(shù)提高了5倍！》

原文地址：騰訊ISUX

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量180萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com