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