騰訊社交用戶體驗(yàn)項(xiàng)目背后：小世界品牌視覺探索
作者： ISUX設(shè)計(jì)，來源： 騰訊ISUX
項(xiàng)目背景
小世界是一款植根于QQ，以社交為核心，并以興趣為聚合的開放式內(nèi)容社交產(chǎn)品。
小世界的用戶大部分來自QQ，因此用戶畫像也與QQ類似，用戶群體主要介乎于95至00后，Z世代出生的年輕人是小世界的主力用戶群體。相較于QQ空間，小世界擁有更開放的關(guān)系鏈和更垂直的興趣分類，用戶可以根據(jù)自己的興趣愛好以及地理位置找到更契合的內(nèi)容與圈層。
然而在內(nèi)容社交的紅海中，產(chǎn)品形態(tài)都已相對(duì)成熟，各類競(jìng)品同質(zhì)化嚴(yán)重。因此，如何在競(jìng)品中打造獨(dú)特的品牌感知，并且兼顧產(chǎn)品的基礎(chǔ)體驗(yàn)，是小世界冷啟初期設(shè)計(jì)面臨的最大困境。下文也會(huì)通過“世界觀構(gòu)建”和“視覺語言”這兩個(gè)維度來探討如何打破上述設(shè)計(jì)困境。
世界觀構(gòu)建x視覺語言
構(gòu)建世界觀
構(gòu)建世界觀通常用于文學(xué)作品或游戲的創(chuàng)作，旨在為劇情與故事創(chuàng)造時(shí)空縱深，渲染角色所在的場(chǎng)景與沉浸式的氛圍。作為一個(gè)希望讓用戶沉浸體驗(yàn)內(nèi)容的社區(qū)產(chǎn)品，小世界也正如其名，需要透過構(gòu)建世界觀來強(qiáng)化品牌感知，喚起用戶共鳴，同時(shí)也為后續(xù)的設(shè)計(jì)拓展與品牌敘事提供根基與延展性。
放 | 探索世界觀的可能性
初期我們以產(chǎn)品形態(tài)和產(chǎn)品名稱作為核心詞進(jìn)行腦暴聯(lián)想，圍繞“世界是什么”以及“世界怎么樣”來探索品牌概念的廣義。在發(fā)散過程中，我們把聯(lián)想到的詞匯都記錄下來，并不對(duì)其進(jìn)行評(píng)價(jià)和篩選，最大程度地記錄具備可能性的詞匯。
收 | 縮小品牌概念范圍
在腦暴相關(guān)概念后，我們需要對(duì)所有詞匯進(jìn)行一個(gè)收攏，以便整理出一個(gè)品牌延展性高、用戶調(diào)性契合度強(qiáng)的世界觀。除此之外，在實(shí)踐層面也要求品牌概念具備較強(qiáng)的邏輯可演繹性與視覺可視化潛力?；谝陨纤膫€(gè)標(biāo)準(zhǔn)進(jìn)行篩選，在一系列的腦暴詞匯中，我們最終收攏出一個(gè)既貼近用戶也便于視覺落地的世界觀：每個(gè)人都在創(chuàng)造自己的閃耀星球，而每個(gè)星球都有包容自己的廣闊宇宙。
在這個(gè)世界觀下，每個(gè)用戶等同于一顆星球，用戶會(huì)通過輸出內(nèi)容來讓自己的星球變得更加閃耀。而不同的內(nèi)容最終匯聚成包羅萬象的大宇宙，即小世界內(nèi)容社區(qū)。用戶可以在社區(qū)內(nèi)透過互動(dòng)，與內(nèi)容或關(guān)聯(lián)鏈建立嶄新而深層的意義。
在此世界觀基礎(chǔ)上，我們以宇宙、星球、航天等元素作為關(guān)鍵詞，進(jìn)行品牌圖形的延展，為后續(xù)視覺語言系統(tǒng)的搭建以及產(chǎn)品文案的撰寫提供素材和語境。
建立視覺語言系統(tǒng)
情緒版構(gòu)建
基于前面的腦暴關(guān)鍵詞和世界觀，我們透過收集參考圖來搭建情緒版，為建立視覺語言提供可視化參考，同時(shí)也對(duì)團(tuán)隊(duì)成員的視覺感知進(jìn)行前期統(tǒng)一。
LOGO設(shè)計(jì)
品牌標(biāo)志以宇宙天體中吸引力最強(qiáng)的黑洞為基礎(chǔ)造型，顏色上選擇了帶多彩光感的高飽和漸變色，希望借此傳達(dá)給用戶豐富、多元的第一印象，即小世界是一個(gè)充滿吸引力，內(nèi)容多彩的社區(qū)。同時(shí)也兼顧了應(yīng)用識(shí)別性，基于界面場(chǎng)景對(duì)其進(jìn)行圖形輪廓的差異化處理。
界面風(fēng)格探索
在LOGO確定后，我們需要對(duì)品牌元素進(jìn)行延展。考慮到小世界是一款移動(dòng)端產(chǎn)品，為了最大化保證用戶在手機(jī)上的使用體驗(yàn)，以及避免品牌元素和UI界面的割裂，品牌風(fēng)格的視覺探索是始終結(jié)合產(chǎn)品的核心界面進(jìn)行的。
我們以圖形占比較高的閃屏、Feed、個(gè)人主頁三個(gè)核心場(chǎng)景進(jìn)行設(shè)計(jì)探索，在一周內(nèi)輸出了3套視覺方案。每套方案在視覺表現(xiàn)各有側(cè)重，同時(shí)在世界觀的營(yíng)造上也進(jìn)行差別化處理，最大化地拉開每套方案的區(qū)別。
在輸出方案后，我們從品牌差異性、用戶調(diào)性契合度、世界觀可延展性三個(gè)維度進(jìn)行了篩選：考慮到扁平風(fēng)格在市場(chǎng)中的差異化較弱，我們首先放棄了線漫風(fēng)格方案C，而更傾向新擬態(tài)質(zhì)感的方案A和B；在進(jìn)行內(nèi)部用研后，色彩多元及立體元素融合較高的方案A更契合年輕用戶的口味，而方案中的星球和社區(qū)結(jié)合的可視化世界觀讓我們后續(xù)的品牌圖形更具延展性，因此最終敲定了方案A為最終方案。
品牌基因提煉
在方案A的基礎(chǔ)上，我們繼而從質(zhì)感、圖形、色彩三個(gè)方面提煉品牌基因，以搭建小世界的視覺語言：
質(zhì)感 | 扁平之下的新擬態(tài)
設(shè)計(jì)是一個(gè)輪回，在設(shè)計(jì)圈習(xí)慣了極簡(jiǎn)的扁平風(fēng)格后，一場(chǎng)界面的復(fù)古風(fēng)潮又卷土重來。
在小世界項(xiàng)目誕生之初，適逢新擬態(tài)（Neumorphism）風(fēng)格流行，但除了設(shè)計(jì)師社區(qū)的概念性設(shè)計(jì)外，市面上還未有過新擬態(tài)風(fēng)格落地的應(yīng)用。在扁平風(fēng)格已經(jīng)泛濫的境況下，我們大膽采用了新擬態(tài)的質(zhì)感來打造小世界的UI界面，希望能在扁平風(fēng)格中打造一種富有擬物層次與差異化的視覺體驗(yàn)，讓用戶在進(jìn)入到界面的第一眼，就能感受到這款產(chǎn)品的與眾不同。
由于小世界是一款以Feed內(nèi)容為視覺主導(dǎo)的產(chǎn)品，為了避免新擬態(tài)元素喧賓奪主，我們?cè)O(shè)計(jì)時(shí)對(duì)其進(jìn)行了光感收攏，削弱了新擬態(tài)的高光和投影，并且只用在重點(diǎn)操作上。另外也僅在核心操作上使用品牌色，既平衡了界面可讀性，同時(shí)也使操作更具可點(diǎn)擊感。
圖形 | 從點(diǎn)及面的3D表現(xiàn)
對(duì)于圖形，我們以世界觀相關(guān)元素進(jìn)行延展，選取了星球、火箭、基地等概念進(jìn)行設(shè)計(jì)。在表現(xiàn)手法上，放棄2D圖形一統(tǒng)界面的方式，以3D手法進(jìn)行輸出，同時(shí)采用無反射材質(zhì)，在保持3D結(jié)構(gòu)的同時(shí)，弱化視覺重量，讓圖形更具兼容性。
考慮到不同界面的圖形比重，我們將3D圖形進(jìn)行組件處理，既有個(gè)體的點(diǎn)型裝飾，也有面型的場(chǎng)景插畫，方便設(shè)計(jì)師在復(fù)用時(shí)根據(jù)應(yīng)用需求進(jìn)行二次組裝。
顏色 | 夢(mèng)幻繽紛的色彩空間
在顏色的使用上，以高飽和的藍(lán)橙粉三色營(yíng)造夢(mèng)幻多彩的氛圍。以藍(lán)為主色，應(yīng)用于核心操作，并以橙色和粉色為輔助色，在少數(shù)地方強(qiáng)調(diào)和點(diǎn)綴使用。黑白以及灰階則主要用于文字和界面。
最終，通過以上世界觀和設(shè)計(jì)語言的搭建，我們?yōu)樾∈澜缃⒘似放聘拍?、產(chǎn)品氣質(zhì)、視覺體驗(yàn)三者契合的初代設(shè)定，從內(nèi)(世界觀)至外(視覺語言)強(qiáng)化產(chǎn)品在用戶心中的品牌形象。
品牌界面化應(yīng)用
在搭建完整個(gè)世界觀和視覺語言后，我們將這些品牌DNA落地并細(xì)化到實(shí)際需求當(dāng)中。小世界是一款上升期的新產(chǎn)品，首要目的是抓住和留住新用戶，所以在整個(gè)品牌落地的過程中，我們以新用戶主消費(fèi)場(chǎng)景路徑為依據(jù)進(jìn)行設(shè)計(jì)：
小世界Intro：主要是小世界冷啟相關(guān)頁面，包括邀請(qǐng)流程、閃屏動(dòng)畫以及新手引導(dǎo)。
內(nèi)容瀏覽：主內(nèi)容消費(fèi)場(chǎng)景，包括Feed、聚合頁瀑布流的瀏覽。
核心操作：對(duì)內(nèi)容的高頻互動(dòng)操作。
等待&為空?qǐng)鼍埃悍歉哳l率出現(xiàn)但能帶來小驚喜的場(chǎng)景。
小世界INTRO
小世界Intro主要指用戶進(jìn)入到產(chǎn)品主瀏覽場(chǎng)景前的系列流程——包括邀請(qǐng)、閃屏、新手引導(dǎo)。這一部分作為小世界冷啟動(dòng)的重要環(huán)節(jié)，需要給新用戶營(yíng)造出獨(dú)屬于小世界的品牌感知，讓用戶進(jìn)入小世界之前就能留下第一印象。
邀請(qǐng)流程
結(jié)合小世界的世界觀，我們把邀請(qǐng)碼包裝成船票形式，讓每一個(gè)獲得邀請(qǐng)的新用戶都有一種拿到船票登錄星球的感覺。在頁面的設(shè)計(jì)上，我們對(duì)船票、邀請(qǐng)流程、手Q分享樣式等都進(jìn)行了品牌圖形融入，凸顯小世界的品牌基因。
閃屏
在用戶接受邀請(qǐng)后，閃屏是用戶真正進(jìn)入小世界的第一個(gè)場(chǎng)景，我們以動(dòng)畫的形式表現(xiàn)火箭穿越內(nèi)容，駛向星球的過程，一方面契合小世界內(nèi)容社區(qū)的產(chǎn)品屬性，另一方面和前置位的船票邀請(qǐng)函在敘事邏輯上連接起來——用戶拿到船票后乘坐火箭登陸星球。
內(nèi)容瀏覽
為了不干擾用戶消費(fèi)內(nèi)容，在Feed瀏覽的主場(chǎng)景下，我們收攏了品牌元素的使用，僅在部分模塊下以品牌色和輕量圖形進(jìn)行設(shè)計(jì)：
例如在廣場(chǎng)頁，我們對(duì)榜單進(jìn)行了設(shè)計(jì)，在保證用戶圖片最大化呈現(xiàn)的同時(shí)，將照片背景和排名標(biāo)簽加入了品牌色，在強(qiáng)化排名視覺重要性的同時(shí)也凸顯了品牌感。（圖1）
對(duì)Feed流中出現(xiàn)的卡片樣式也進(jìn)行了品牌元素的植入，通過加入品牌圖形，讓用戶在消費(fèi)內(nèi)容時(shí)也能感受到品牌元素的存在。（圖2&圖3）
圈子瀑布流是某個(gè)垂直標(biāo)簽下的內(nèi)容聚合，通過頂部默認(rèn)圖和榜單數(shù)字的設(shè)計(jì)，讓整個(gè)頁面視覺感受更為生動(dòng)，同時(shí)支持頂部圖片的自定義，讓每個(gè)圈子都更有個(gè)性。（圖4）
核心操作
推火箭作為小世界的核心操作，用于表達(dá)對(duì)某條內(nèi)容的贊許，用戶對(duì)每條內(nèi)容最多可推送10個(gè)火箭。系統(tǒng)會(huì)根據(jù)用戶收到的火箭總數(shù)贈(zèng)予不同等級(jí)勛章，同時(shí)用戶也會(huì)獲得相應(yīng)勛章下不同的推火箭效果。
為了區(qū)分不同等級(jí)的推火箭效果，我們對(duì)4個(gè)等級(jí)動(dòng)畫效果進(jìn)行了區(qū)分，對(duì)火箭材質(zhì)，尾氣顏色和爆炸背景進(jìn)行了升級(jí)差異化設(shè)計(jì)，讓用戶每成長(zhǎng)一級(jí)都感受到更高階的視覺沖擊。
除了在動(dòng)畫效果上做了區(qū)分，我們還增加了操作的震動(dòng)反饋，希望用戶在使用這個(gè)核心操作時(shí)，能感受到產(chǎn)品在細(xì)節(jié)品質(zhì)上的打磨。
等待&為空?qǐng)鼍?/span>
頁面加載
小世界的加載動(dòng)畫是以星球圖形進(jìn)行設(shè)計(jì)，應(yīng)用在下拉刷新、內(nèi)容加載、編輯器素材加載等場(chǎng)景下，降低等待的枯燥感，同時(shí)加強(qiáng)品牌感知，強(qiáng)化世界觀。
為空頁和文案
在為空頁的圖形設(shè)計(jì)上，采用品牌色主導(dǎo)的單一色相，防止太過豐富的色彩使此類低頻次出現(xiàn)的場(chǎng)景太過搶眼。為空頁的文案也希望能更貼近年輕用戶口味和品牌調(diào)性，所以摒棄機(jī)械式的語言表達(dá)，以更趣味和貼近世界觀的遣詞去創(chuàng)造語境氛圍。
結(jié)語
小世界作為一個(gè)主打年輕人內(nèi)容社交的產(chǎn)品，在競(jìng)爭(zhēng)激烈的紅海中，如何打造自身的獨(dú)特感是品牌設(shè)定最大的困境。品牌的解法不僅局限在視覺的表現(xiàn)上，透過合理沉浸的世界觀給用戶講述感同身受的故事，同時(shí)再將圖形、文案與用戶自身內(nèi)容進(jìn)行充分融合，也能給產(chǎn)品帶來獨(dú)特的品牌氣質(zhì)。
這也是我們?cè)诩t海之中探索小世界品牌的意義，寄希望于小世界，能在浩瀚的社交宇宙中，找到自身的定位和價(jià)值。
作者公眾號(hào)：騰訊ISUX(ID:tencent_isux)
轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請(qǐng)聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請(qǐng)至數(shù)英微信公眾號(hào)(ID: digitaling) 后臺(tái)授權(quán)，侵權(quán)必究。
評(píng)論
評(píng)論
推薦評(píng)論
全部評(píng)論（2條）