億萬好評的QQ國際版,今年可能會用這兩個新的視覺設(shè)計方案

2017-2-8    周周

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點(diǎn)這里

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

作者:騰訊ISUX – 隔壁老賈

項(xiàng)目背景

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

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

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

2. 對于信息層級關(guān)系的處理,頁面中元素的比例分布是否合理。

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

uisdc-isux-20170205-1

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

1. 產(chǎn)品定位

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

uisdc-isux-20170205-2

2. 人群定位

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

uisdc-isux-20170205-3

3. 競品分析

競品對象:Line 、Talk、Snapchat、Whatsapp、Allo、Skype、Messenger、Hangouts

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

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

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

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

uisdc-isux-20170205-4uisdc-isux-20170205-5uisdc-isux-20170205-6uisdc-isux-20170205-7

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

PLAN A : Free the air

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

uisdc-isux-20170205-8

視覺展示:

uisdc-isux-20170205-9uisdc-isux-20170205-10uisdc-isux-20170205-11

設(shè)計分析:

uisdc-isux-20170205-12

1. 刺激感官的色彩

迎合設(shè)計的潮流趨勢,高飽和的色彩維度,普遍能夠刺激人們的視覺感官,便于人們更快的識別信息。因此我們在原有品牌色的基礎(chǔ)上,進(jìn)行優(yōu)化提升,讓色彩看起來更加清爽明快,而不是死板沉悶的辦公軟件。

uisdc-isux-20170205-13

2. 圓形元素的延展

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

uisdc-isux-20170205-14

3. 形體之間的對話

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

PLAN B : Black & White

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

uisdc-isux-20170205-15

視覺展示

uisdc-isux-20170205-16uisdc-isux-20170205-17uisdc-isux-20170205-18

設(shè)計分析:

uisdc-isux-20170205-19

1. 黑與白的純粹

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

uisdc-isux-20170205-20

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

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

uisdc-isux-20170205-21

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

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

uisdc-isux-20170205-22

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

藍(lán)藍(lán)設(shè)計www.bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

 

分享本文至:

日歷

鏈接

個人資料

存檔