騰訊實戰案例!QQ 9 完整設計過程復盤

一、設計目標

作為一個擁有 25 年歷史的社交產品,QQ 經歷了不同世代的行業發展,一直初心不改,不斷優化產品體驗,為用戶服務。發展至今,QQ 早已不再是一個簡單的即時通訊工具,而是一個覆蓋通訊、社區、短視頻、元宇宙等多場景,并全面支持桌面端、平板端與移動端的多元化社交空間。在這個社交空間里,用戶可以隨時隨地表達心情,可以天南海北地尋找搭子,也可以造個小窩實現貓狗雙全。與此同時,橫跨多端的平臺支持、豐富多元的產品形態,也使得 QQ 的包袱日益繁重。因此,如何讓 QQ 輕松上陣,走向下一個 25 年,是我們面臨的巨大挑戰。

面對這些挑戰,QQ9 在設計理念上,一方面回歸平臺設計的普適性,建立多端一致、簡潔輕量的設計語言,營造舒適輕盈的視覺美感;另一方面塑造多元社交空間的包容性,設計上兼容并包個性化、娛樂化和功能化,以滿足多樣化的用戶和需求,讓用戶可以在 QQ 自由自在地打造多重人設,實現多元社交,輕松做自己。

往期騰訊改版案例:

二、冰雪之原 光華絢爛

QQ9 煥新設計靈感,自遼闊無垠的冰雪之原,於東方既白拂曉時,天地渾然一體,素然純凈。但這并非是終點,而是新的起點,我們希望,在純凈簡潔的基礎上,用戶在不經意間便能感受到「光」帶來的恰到好處的絢麗與精彩,溫暖與關懷。

騰訊實戰案例!QQ 9 完整設計過程復盤

騰訊實戰案例!QQ 9 完整設計過程復盤

QQ9 的精妙之處恰恰在于純凈簡潔的背后,潛藏著豐富與絢麗,等待著用戶探索并發現,而非一開始就用花哨的色彩和元素搶占用戶的注意力。

設計上利用絢爛多彩、幻化無窮的光影來造就 QQ9 這種隱藏體驗,例如用戶在刷新、加載、loading 時,絢麗流動的色彩會在純凈簡潔的界面上出現。在用戶使用 QQ9 的過程中,每一次絢麗多彩、充滿期待的表達都會剛好與用戶的情緒落點相吻合,每一次流動的色彩都是隨機變化帶來的新鮮和愉悅,給予強烈的隱喻表達,預示著全新的內容,新鮮的資訊,煥新的感官體驗。

騰訊實戰案例!QQ 9 完整設計過程復盤

騰訊實戰案例!QQ 9 完整設計過程復盤

騰訊實戰案例!QQ 9 完整設計過程復盤

三、普適包容 回歸本源

QQ9 的圖標設計,回歸平臺普適的本質,更加簡潔輕量,能夠滿足多端、多平臺、多場景的設計需求,為 QQ9 帶來輕松愉悅的體驗。同時發揮圖標的實用性,降低認知門檻。如全局設置頁面,在表單組件中增加了圖標識別輔助,降低用戶信息閱讀成本,通過圖形識別可以更便捷的分門別類。同時精簡后的空白頁視覺設計更加清晰易懂,通過簡潔、直接的圖形表達,引導用戶快捷地完成操作,減輕用戶的認知負擔。

騰訊實戰案例!QQ 9 完整設計過程復盤

四、信息分層 重建秩序

為了創造更有秩序的視覺體驗,設計重新梳理了基礎場景中所有功能層級,通過提高顏色對比度,幫助用戶更輕松地理解信息層次,使內容更加突出,確保日夜間都能維持一致的層級,避免造成混亂,使信息呈現上更加有序。

騰訊實戰案例!QQ 9 完整設計過程復盤

用戶瀏覽內容的過程中,習慣于將空間位置接近的內容歸為一組,稱之為“格式塔原理”。在界面中我們借助格式塔原理進行分組展示,使頁面布局更加合理清晰,讓用戶能夠快速識別,比如設置頁面,如果將功能入口分散展示,在使用過程中就會容易失焦,而通過近似性將內容分成賬號信息、軟件功能、增值功能、個人信息收集進行聚合分組,就可以很直觀的降低認知負擔。

騰訊實戰案例!QQ 9 完整設計過程復盤

在信息的瀏覽順序上也重新調整了內容優先級,以符合用戶關注信息的角度出發,對內容進行進行重新排布,區分元素的主次。

騰訊實戰案例!QQ 9 完整設計過程復盤

QQ9 中對空間說說流我們重新規劃信息層級并進行了降噪。首先為了突出說說正文內容,減小了點贊區和評論區的色彩和字號。用輕量的線性圖標取代了原有的厚重的圖標。圖片由原來的通欄展示改為卡片展示,增加了頁面呼吸感減少用戶瀏覽時的視覺負擔。

騰訊實戰案例!QQ 9 完整設計過程復盤

五、密友關系 輕松社交

過去,QQ 好友的維系和溝通主要依賴于公開圈子、特別關心和消息活躍來維持關系。然而,隨著社交方式的改變,年輕人更傾向于短暫但快速地滿足特定需求的"小社交",以減輕社交壓力。基于這種社交趨勢,QQ9 進行了全新的設計升級——引入了"搭子關系"的概念。在搭子關系中,用戶可以建立現有的親密關系,也可以互為搭子,一同參與學習、運動、游戲等活動。這種關系既保持了清晰的邊界感,又以輕松的姿態開啟一段互相陪伴的關系。通過這一改進,我們希望減輕用戶的社交壓力,為用戶創造更加豐富、輕松和愉快的社交體驗。

騰訊實戰案例!QQ 9 完整設計過程復盤

除了聊天頁面外,空間也針對親密關系用戶推出了親密空間-兩人的專屬小空間。在這里你可以發說說,存相冊。你和好友在生活中值得記錄的美好時刻,值得紀念的關鍵時間都可以存儲在這里。同時我們也為喜歡“收集”的年輕人準備了豐富的貼紙,更多的記錄你們的情誼就可以獲得更多的貼紙,有你陪伴的每一天都值得被記錄。

騰訊實戰案例!QQ 9 完整設計過程復盤

六、在線狀態 自由定義

全新狀態面板能夠容納更多狀態展示,UI 布局更加輕盈簡潔。引入了多彩的狀態背景色體系,營造出不同狀態下獨特的視覺情感氛圍。同時 QQ9 我們更進一步,增添了超秀形象的狀態功能,讓用戶能夠生動有趣地展現當下狀態,使狀態表現更加豐富多彩。這些升級將為用戶帶來更為豐富生動的狀態展示,讓用戶能夠以更具個性化的方式展示自己的情感和狀態。

騰訊實戰案例!QQ 9 完整設計過程復盤

騰訊實戰案例!QQ 9 完整設計過程復盤

七、全新表情 新潮有梗

QQ 表情經歷了長達 7 年的不斷演變后,終于 QQ9 中迎來了一次全新升級。這次的更新不僅僅是技術上的進步,更是對用戶需求深刻傾聽的結果。在外觀設計上更加精致,融入了時下流行元素,每一個細節都經過精心雕琢,使表情更具辨識度和潮流性。同時,QQ9 表情不僅注重外觀,更注重內涵。巧妙地融入時尚和幽默感的設計,為用戶提供了更多表達情感和共鳴的可能性。在這個數字化時代,表情不再只是簡單的符號,而是一種用戶表達自我的語言。QQ9 表情期望融入用戶日常喜愛的表達方式,以更潮更有梗的形式,讓用戶輕松表達自己,釋放更多的笑容和愉悅。

騰訊實戰案例!QQ 9 完整設計過程復盤

在 QQ9 表情上新計劃中,表情設計團隊研究并融入了更多網絡熱梗元素(尊嘟假嘟,堅強,功德+1 ...)讓用戶在表達情感時有更加豐富的語境和更加流行的表達。快來 QQ9 中盡情挖掘這些新表情為聊天帶來的樂趣吧!

騰訊實戰案例!QQ 9 完整設計過程復盤

八、多端一致 無界體驗

多年發展下來,QQ 移動端和桌面端的設計體驗漸行漸遠,甚至同為桌面端的 Windows、Mac、Linux 三個版本設計都迥然不同,由此帶來的體驗問題與研發問題也日益尖銳。為此,設計團隊圍繞著 QQ9 建立起一套全面覆蓋移動端、桌面端、平板端的設計語言。

布局設計上,全新的 QQ 桌面版將舊版分離的主面板和會話面板進行整合,采用了更符合當前用戶習慣的大面板布局。此舉降低了信息架構的深度,頁面布局更加清晰、更具拓展性,用戶也可以根據需求自由縮放面板,或者吸附在屏幕邊緣自動隱藏,靈活又方便。

視覺風格上,則對齊 QQ9 煥新設計進行全面刷新,一舉蕩滌桌面端陳舊繁雜、過時落后的氣息,以輕量有力的圖形、輕盈煥采的顏色、簡潔有序的界面塑造了輕松愉悅的使用感受,與移動端保持一致的設計,也有效降低用戶對 QQ 多端產品的認知成本,提升 QQ 品牌感知。

此外,我們解決了多端功能不一致的痛點,包括聊天與文件存儲管理、功能豐富的 QQ 狀態、發送 QQ 超級表情等。這次 QQ 桌面版的重新設計,將為平臺品質與未來發展奠定良好的基礎,同時也讓 QQ 團隊有了重新審視產品的契機,下架繁雜無用的功能與服務,擺脫過往的沉重包袱,讓 QQ 桌面版煥發出新的生命力。

騰訊實戰案例!QQ 9 完整設計過程復盤

騰訊實戰案例!QQ 9 完整設計過程復盤

五、平等親近 為你設計

QQ 一直鼓勵用戶深入探索,希望用戶自行發現 QQ 世界中的驚喜與快樂。此前在 QQ8.0 版本中,我們曾在底部導航的圖標上進行了類似的嘗試。而在 QQ9 的設計上,我們延續了這種理念。在 QQ9 的“關于 QQ”界面上,我們埋藏了一個小小的驚喜,用戶通過探索即可獲得特別的壁紙,歡迎大家前往體驗!

騰訊實戰案例!QQ 9 完整設計過程復盤

此外,QQ 也一向珍視用戶的意見和建議,這些閃光的想法為設計團隊提供了寶貴的靈感。因此,QQ9 特意建設了一個名為“QQ 追光者”的功能,用戶通過該功能進行反饋,昵稱將呈現在昵稱墻上,并獲得一枚特別的勛章,這是 QQ 對用戶真誠支持和貢獻的感謝。“QQ 追光者”這一命名,寄托了 QQ 希望與用戶一同前行,尋找未來無限可能的愿景。這里不僅僅是一個反饋平臺,更是一個與用戶平等交流、共創共建的空間。

騰訊實戰案例!QQ 9 完整設計過程復盤

六、官網改版 引人入勝

隨著 QQ9 正式發布,QQ 的官網(im.qq.com)也隨之迎來更新。官網的設計理念圍繞著“輕松做自己“進行視覺傳達我們通過“輕·透·彩”的品牌語言來貫穿官網視覺與使用體驗,輕盈柔和的色彩,加上靈動輕巧的動畫轉場,使官網體驗上更輕松愉悅。與 QQ9 的多端適配一樣,官網設計也進行了自適應適配,能夠在桌面端和移動端為用戶提供同樣極致的閱讀感受,引導用戶通過官網下載體驗 QQ9,達到引人入勝的效果。歡迎大家點擊 im.qq.com 進行訪問,更多全新體驗和玩法等著你來探索~

騰訊實戰案例!QQ 9 完整設計過程復盤

QQ9 宣傳視頻,創意與設計概念

當視頻在手機上無法加載,可前往PC查看。

整體個宣傳片,我們以一個問題 “內心的光要怎么展開?”為開場去開始。故事是以「光」的概念帶觀看者展開每一面社交的可能。以「光」的設計概念去打開多元化的社交,同時感受到整潔輕松。無論你的社交行為是什么,在 QQ9 可以為你找到那份光,輕松為你展開。不以品牌方的視角跟用戶對話,整體的調性和文案我們如朋友的跟用戶對話。

七、啟動頁閃屏

沿用宣傳片里相同的「光」元素,喚醒大家對全新 QQ 版本的一種新鮮與輕松感。

散發現代氛圍以及「光」背后充滿詩意且多元的可能。以“歡迎來到 QQ9”的用戶歡迎語,強化 QQ9 品牌認同感的同時,通過歡迎語促進用戶社區感的建立。

騰訊實戰案例!QQ 9 完整設計過程復盤

結語

無論是技術架構層面,或是體驗設計層面,QQ 團隊都致力于為用戶打造輕松純粹的社交體驗。QQ9 煥新設計,回歸平臺設計的普適性,建立了一致輕量、舒適輕松的視覺美感;同時塑造了多元社交空間的包容性,讓用戶可以在 QQ 自由打造多重人設,輕松做自己。QQ 走向下一個 25 年的道路依然充滿挑戰,但我們已然邁出了重要的一步。

QQ9 煥新風格,現已全新上線。期待大家更新體驗,也歡迎大家前往設置-關于-QQ 追光者頁面反饋建議和意見。QQ 愿意與大家攜手共創,彼此啟發,不斷追光,向前而行。

歡迎關注作者微信公眾號:「騰訊ISUX」

騰訊實戰案例!QQ 9 完整設計過程復盤

收藏 109
點贊 75

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。