編者按：QQ 國(guó)際版的輕量和簡(jiǎn)潔一直備受好評(píng)，不過多年未改版的它，今年可能用上兩個(gè)新的視覺設(shè)計(jì)方案。至于改版過程中的思考，騰訊設(shè)計(jì)師給出了這篇文章。

作者：騰訊ISUX - 隔壁老賈

項(xiàng)目背景

QQ國(guó)際版主要是針對(duì)國(guó)外用戶打造的一款輕量社交產(chǎn)品。由于當(dāng)前產(chǎn)品迭代周期相對(duì)較長(zhǎng)，我們對(duì)當(dāng)前視覺提出一個(gè)疑問:現(xiàn)有產(chǎn)品的視覺形態(tài)，是否符合國(guó)際版的產(chǎn)品調(diào)性。基于這個(gè)問題，我們開啟這次探索之旅。

現(xiàn)有版本的視覺問題:

1. 現(xiàn)有的視覺形象是否符合產(chǎn)品氣質(zhì)，在用戶使用的過程中，是否能夠留下深刻印象。

2. 對(duì)于信息層級(jí)關(guān)系的處理，頁(yè)面中元素的比例分布是否合理。

3. 設(shè)計(jì)細(xì)節(jié)的優(yōu)化，例如分割線的處理、灰色的運(yùn)用、圖標(biāo)的形體等，都有提升的空間。
產(chǎn)品的認(rèn)知與定位。

產(chǎn)品的認(rèn)知與定位

1. 產(chǎn)品定位

通過用戶調(diào)研的反饋，人們對(duì)國(guó)際版的使用印象主要集中在功能少、無(wú)廣告、操作便捷、翻譯功能等。輕量、效率對(duì)于他們來說是第一位。而手Q有著更佳豐富的功能以及資源，定位更傾向于娛樂化社交方向，所以兩者產(chǎn)品的定位還是有些差異。

2. 人群定位

國(guó)際版主要針對(duì)海外市場(chǎng)，它可能是留學(xué)海外的文藝青年，時(shí)尚領(lǐng)域的潮流達(dá)人，也可能是商務(wù)業(yè)界的白領(lǐng)精英。他們往往對(duì)生活品質(zhì)有著獨(dú)特的追求，對(duì)新鮮事物也更容易去接受。在開始視覺探索的前提，我們不僅要展現(xiàn)用戶個(gè)性化的一面，還要保證用戶使用產(chǎn)品的高效性。

3. 競(jìng)品分析

競(jìng)品對(duì)象：Line 、Talk、Snapchat、Whatsapp、Allo、Skype、Messenger、Hangouts

如圖: Line、Talk主要針對(duì)日韓地區(qū)，無(wú)論配色還是設(shè)計(jì)細(xì)節(jié)，都能體現(xiàn)產(chǎn)品的親和力。Whatsapp、Allo、Messenger、Hangouts等主要針對(duì)西方地區(qū)，整體視覺偏向于簡(jiǎn)潔硬朗的風(fēng)格。

因此我們分為兩個(gè)維度分析，文化維度和產(chǎn)品維度。文化維度主要體現(xiàn)不同地區(qū)人們對(duì)產(chǎn)品的視覺喜好。例如Line的品牌深受亞洲人群的喜愛，卻無(wú)奈宣布退出西方市場(chǎng)，這也體現(xiàn)出東西方人們對(duì)視覺的喜好差異。而產(chǎn)品維度幫助我們了解用戶日常的使用場(chǎng)景，根據(jù)場(chǎng)景的需求來定義未來的視覺元素。

互聯(lián)網(wǎng)設(shè)計(jì)趨勢(shì)

從Windows Phone極簡(jiǎn)的信息形態(tài)，再到Google一張紙片的藝術(shù)，整個(gè)發(fā)展過程無(wú)非是對(duì)內(nèi)容本質(zhì)的重視，利用內(nèi)容自身的形體去傳遞信息。隨著互聯(lián)網(wǎng)時(shí)代的成熟，人們不再是單純的獲取信息，舒適的閱讀感，強(qiáng)有力的視覺沖擊，動(dòng)態(tài)設(shè)計(jì)帶來的驚喜等等，都成為體驗(yàn)設(shè)計(jì)的一部分。

我們基于現(xiàn)有的視覺問題、產(chǎn)品定位、人群分析、設(shè)計(jì)趨勢(shì)，可以推斷出我們視覺的大致基調(diào) : 高端 、品質(zhì) 、輕量，針對(duì)人群的不同喜好，我們提出兩套視覺設(shè)計(jì)方案。

PLAN A : Free the air

簡(jiǎn)介：這套視覺的靈感源于“空氣”，通過對(duì)視覺形態(tài)的傳達(dá)，讓用戶感受到觸碰空氣的質(zhì)感。

視覺展示：

設(shè)計(jì)分析:

1. 刺激感官的色彩

迎合設(shè)計(jì)的潮流趨勢(shì)，高飽和的色彩維度，普遍能夠刺激人們的視覺感官，便于人們更快的識(shí)別信息。因此我們?cè)谠衅放粕幕A(chǔ)上，進(jìn)行優(yōu)化提升，讓色彩看起來更加清爽明快，而不是死板沉悶的辦公軟件。

2. 圓形元素的延展

圓作為這次主題的載體，我們賦予它多樣的視覺形態(tài)。無(wú)論是登陸頁(yè)面的背景圖，還是個(gè)人中心的頭圖，通過不同的形式，相同的元素，去傳達(dá)“空氣”的理念，讓用戶感受到觸摸空氣的質(zhì)感。

3. 形體之間的對(duì)話

如何利用圖形的形體來表現(xiàn)關(guān)聯(lián)？我們能否利用形體自身的特性，通過交錯(cuò)、疊加、分離來傳遞更多的情感關(guān)系。本次視覺方案中，避免對(duì)話框樣式的出現(xiàn)，取而代之的是傾聽形體之間的對(duì)話。

PLAN B : Black & White

簡(jiǎn)介：時(shí)尚作為這套視覺風(fēng)格的核心，張揚(yáng)個(gè)性，特立獨(dú)行，激發(fā)年輕人的內(nèi)心色彩。

視覺展示

設(shè)計(jì)分析:

1. 黑與白的純粹

隨著我們ISUX品牌的升級(jí)，色彩化繁為簡(jiǎn)，利用的黑與白，傳遞更加豐富的信息。企鵝形象的設(shè)定：帝企鵝也稱皇帝企鵝，象征著人們的品質(zhì)與地位，更符合海外用戶對(duì)于品質(zhì)生活的追求。

2. 圖形藝術(shù)氣質(zhì)的體現(xiàn)

圖標(biāo)的形體往往能夠映襯出產(chǎn)品的小情調(diào)，本次圖標(biāo)設(shè)計(jì)的初衷，希望它簡(jiǎn)約而又不失華麗，硬朗而又不失情感。在細(xì)節(jié)的處理上，更注重對(duì)層次的把握，邊角的地方也會(huì)做一些個(gè)性化的處理，讓圖標(biāo)散發(fā)自身的氣質(zhì)。

3. 雜志的閱讀體驗(yàn)

合理的版式可以給用戶帶來舒適的閱讀感，例如Medium、YahooNews等，通過嚴(yán)謹(jǐn)?shù)男畔⒉季郑@得整個(gè)頁(yè)面結(jié)構(gòu)更加充實(shí)。而時(shí)尚版式的設(shè)計(jì)，例如夸張的文字對(duì)比，個(gè)性化的定制符號(hào)，張揚(yáng)的切割設(shè)計(jì)，讓每個(gè)頁(yè)面有著屬于自己的節(jié)奏。

無(wú)論是方案A的輕薄淡雅，還是方案B的純粹果斷，他們都有各自鮮明的性格。產(chǎn)品只是一個(gè)虛擬框架，需要視覺的幫助，賦予它全新的生命，讓它變得更加充實(shí)。而你心目中的國(guó)際版會(huì)是什么樣子？這兩套視覺方案是否符合你的口味呢？

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

1. 夜間模式丨《超過8億人使用的QQ，總結(jié)了夜間模式設(shè)計(jì)的通用方法》
2. QQ 表情丨《揭秘QQ 新版表情背后的設(shè)計(jì)故事》
3. QQ 會(huì)員丨《通過優(yōu)化，我們將QQ會(huì)員付費(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"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量180萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com