項(xiàng)目背景

小世界是一款植根于 QQ，以社交為核心，并以興趣為聚合的開放式內(nèi)容社交產(chǎn)品。

小世界的用戶大部分來自 QQ，因此用戶畫像也與 QQ 類似，用戶群體主要介于 95 至 00 后，Z 世代出生的年輕人是小世界的主力用戶群體。相較于 QQ 空間，小世界擁有更開放的關(guān)系鏈和更垂直的興趣分類，用戶可以根據(jù)自己的興趣愛好以及地理位置找到更契合的內(nèi)容與圈層。

然而在內(nèi)容社交的紅海中，產(chǎn)品形態(tài)都幾乎成熟，各類競(jìng)品同質(zhì)化嚴(yán)重。因此，如何在競(jìng)品中打造獨(dú)特的品牌感知，并且兼顧產(chǎn)品的基礎(chǔ)體驗(yàn)，是小世界冷啟初期設(shè)計(jì)面臨的最大困境。下文也會(huì)通過“世界觀構(gòu)建”和“視覺語言”這兩個(gè)維度來探討如何打破上述設(shè)計(jì)困境。

世界觀構(gòu)建 x 視覺語言

1. 構(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)品文案的撰寫提供素材和語境。

2. 建立視覺語言系統(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í)在世界觀的營造上也進(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)橙粉三色營造夢(mèng)幻多彩的氛圍。以藍(lán)為主色，應(yīng)用于核心操作，并以橙色和粉色為輔助色，在少數(shù)地方強(qiáng)調(diào)和點(diǎn)綴使用。黑白以及灰階則主要用于文字和界面。

最終，通過以上世界觀和設(shè)計(jì)語言的搭建，我們?yōu)樾∈澜缃⒘似放聘拍睢a(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：主要是小世界冷啟動(dòng)相關(guān)頁面，包括邀請(qǐng)流程、閃屏動(dòng)畫以及新手引導(dǎo)。
• 內(nèi)容瀏覽：主內(nèi)容消費(fèi)場(chǎng)景，包括 Feed、聚合頁瀑布流的瀏覽。
• 核心操作：對(duì)內(nèi)容的高頻互動(dòng)操作。
• 等待&為空?qǐng)鼍埃?非高頻率出現(xiàn)但能帶來小驚喜的場(chǎng)景。

1. 小世界 INTRO

小世界 Intro 主要指用戶進(jìn)入到產(chǎn)品主瀏覽場(chǎng)景前的系列流程——包括邀請(qǐng)、閃屏、新手引導(dǎo)。這一部分作為小世界冷啟動(dòng)的重要環(huán)節(jié)，需要給新用戶營造出獨(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ì)上的打磨。

2. 等待&為空?qǐng)鼍?/h4>

頁面加載

小世界的加載動(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à)值。

歡迎關(guān)注作者微信公眾號(hào)：「騰訊ISUX」