對于一款社交產(chǎn)品，面臨最大的挑戰(zhàn)也許不是來自競爭對手，而是隨時間飛逝不斷進化的互聯(lián)網(wǎng)環(huán)境。作為已誕生 20 年的 QQ，歷經(jīng)了用戶價值，產(chǎn)品形態(tài)的反復(fù)探討與爭論，輪番過不同平臺與設(shè)備的遷移與聚焦，迅速適應(yīng)當(dāng)下并尋求用戶利益最大化的方向是 QQ 團隊面臨的難題。

·

用戶的核心行為場景早已遷移到移動平臺，隨著年輕用戶在互聯(lián)網(wǎng)的影響力逐步提升，QQ 有意加大「娛樂化」屬性在產(chǎn)品功能，設(shè)計體驗上的比重。既有火爆一時的「坦白說」，年輕用戶「處Q友」的「QQ擴列」，宣泄情感的「輕互動」，也有融合前沿技術(shù)體驗的「QQ紅包」、「AR穿越」等狂歡活動。為了吸引年輕用戶的眼光，不斷刷新更酷炫的體驗，升級更大規(guī)模的活動占據(jù)了版本規(guī)劃的大部分內(nèi)容。

經(jīng)過 6.0 與 7.0 版本的迭代后，雖然亮點功能與節(jié)日運營能收獲不少口碑，但從目標(biāo)用戶的反饋以及用戶群體的遷移現(xiàn)象來看，QQ 也面臨活躍用戶群體收窄的危機。

生機不代表野蠻生長，有效降噪，減少騷擾

要避免「過度設(shè)計」，「華而不實」的負面反饋，意味著得先提升用戶在社交和溝通場景的有效性，降低界面里的噪聲，減少冗余信息的騷擾，提高更有社交價值信息的展示比例。

通訊與社交是用戶在 QQ 獲得信息的核心場景，也是冗余信息和過度提示的高發(fā)場景。以用戶接觸信息的入口頁面（消息列表）為例，舊版本通過分割線來區(qū)分信息個體，對于惜字如金的信息首要界面來說，標(biāo)題與摘要已有足夠辨識度來區(qū)隔不同的信息個體，分割線帶來的容器感意義不大，而群聊頭像的組合方式，雖然不規(guī)則拼接方式有利于提升 5 人以下人數(shù)的辨識度，但也造成了在視覺觀感上的無序，從而使得整體頁面增添了「噪聲」。

因此在直觀表現(xiàn)層面，即使不改變大部分的信息內(nèi)容，也可以通過消除信息容器感，規(guī)整信息樣式的方式來降噪。而在邏輯層面的降噪，則要通過用戶場景來考量，過往對于推送給用戶的信息過于強調(diào)信息類型，卻忽略了用戶往往并不需要過分關(guān)注眾多「特殊」信息的訴求，從而為用戶帶來了騷擾，為此我們從消息推送的機制梳理了多達十幾種消息類型的觸發(fā)場景，并去掉了一半以上的特殊信息類型的推送，削弱了大部分特殊信息類型的表現(xiàn)樣式。對于用戶來說需要的并不是更多「特別關(guān)心」的強提示，而應(yīng)該是只有極少數(shù)的強提示才能高效提升「特別關(guān)心」的觸達效率。

·

生機意味著能有利展示用戶的優(yōu)質(zhì)信息

有生機的設(shè)計意味著平臺能「理解」用戶對信息展示的意圖，讓用戶把優(yōu)質(zhì)內(nèi)容更有效的對外展示。新版本相比舊版本能在同樣的區(qū)域內(nèi)展示更多有效的社交內(nèi)容，例如資料卡調(diào)整布局結(jié)構(gòu)能提升有效信息在頁面占比，同時也根據(jù)用戶設(shè)置封面圖的比例數(shù)據(jù)，去掉千人一面的默認(rèn)封面圖，為此節(jié)省的空間可以為用戶展示未來更豐富的社交內(nèi)容（例如用戶上傳的短視頻內(nèi)容）。同樣對于抽屜頁（側(cè)邊導(dǎo)航欄）也去除默認(rèn)封面圖，并通過視覺樣式（拉通為全屏頁面）與進場動畫（從左往右擠出）擯棄原本「浮層」的信息架構(gòu)，更穩(wěn)定的頁面（全屏）能承載更有效的社交信息，從而把「抽屜導(dǎo)航」提升為與「消息」「聯(lián)系人」「動態(tài)」信息架構(gòu)平級的「我的」頁面，為后續(xù)規(guī)劃更豐富的社交與個性能力提供更具擴展性的信息框架。

·

因此信息框架不只是在做減法，而是通過設(shè)計把冗余信息轉(zhuǎn)移并替換為更有利核心通訊與關(guān)系鏈社交的信息和能力。

生機具備有序和精致感的特征

與追求自我解放的藝術(shù)學(xué)科不同，有生機的設(shè)計具備有序和精致感的特征，也是代表了理性、自律、嚴(yán)謹(jǐn)?shù)牡讓釉O(shè)計原則?！兜赖陆?jīng)》有言：合抱之木生于毫末，九層之臺起于累土，千里之行始于足下。這些毫末細微的，不被人留意的底層規(guī)則，恰恰才是支撐 QQ8.0 的根基。

1. 有序可依的柵格系統(tǒng)

柵格系統(tǒng)定義了一套底層的、統(tǒng)一的測量單位，當(dāng)設(shè)計團隊內(nèi)對此達成共識時，可以避免因屏幕適配、比例換算產(chǎn)生的半像素偏移，適配多種屏幕，提升精致細膩程度，同時保證了設(shè)計稿件中元素屬性的一致性和規(guī)范化，并有效降低設(shè)計師的決策成本，提高不同設(shè)計師之間的協(xié)同效率。

在 QQ8.0 的設(shè)計中，我們定義了一個單位為 8px 的軟柵格系統(tǒng)：以 8px 為單位來規(guī)范元素的尺寸與間距。

對于安卓來說，安卓的 mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi 等各個分辨率，都能被 8px 整除。這符合 Google Material Design 對于柵格系統(tǒng)的定義：所有元素的尺寸與間距都與 4dp（8px）的基準(zhǔn)網(wǎng)格嚴(yán)格對齊，也就是說，將界面切割成 8px*8px 的網(wǎng)格，所有元素的邊緣和間距都會嚴(yán)格地落在網(wǎng)格邊線上。但對于 iOS 而言，主流機型如 750*1334px，828*1472px、750*1624px 等都不能被 8px 整除，因此 QQ 設(shè)計團隊采取了軟柵格的方法：在設(shè)計過程中，保證元素的尺寸是 8px 的倍數(shù)，保證元素與元素之間的相對距離為 8px 的倍數(shù)即可。

·

當(dāng) QQ 設(shè)計團隊對這套 8px 柵格系統(tǒng)達成共識后，界面設(shè)計獲得了有力的決策依據(jù)，得以迅速而規(guī)范地開展。

·

2. 更有規(guī)律的字號應(yīng)用場景

字體與字號是設(shè)計中的重要一環(huán)。在 QQ8.0 的設(shè)計中，QQ 設(shè)計團隊重新調(diào)整主體字號，并減少了字號種類，梳理了字號階梯。

根據(jù)調(diào)研報告，QQ 的年輕用戶使用小屏、非全面屏手機依然占據(jù)主流，因此對于單屏的信息容載量是非常敏感的。在 QQ8.0 的設(shè)計中，我們將主體字號從 36px 降低為 34px，提高頁面的容載量，對小屏手機更加友好。此外，QQ 設(shè)計團隊重新梳理了字號階梯，將字號從過往的 8 種減少至 4 種，在每個頁面出現(xiàn)的字號限制在 3 種以內(nèi)，使信息的呈現(xiàn)更有規(guī)律，幫助用戶更快地定位到有效信息。

·

3. 整齊一致的轉(zhuǎn)場動效

萬物復(fù)蘇一致向陽而生的場景是人類對大自然生機盎然的直觀感受，我們把有序和一致的體驗納入到貫穿任務(wù)路徑的轉(zhuǎn)場動效。對于頁面之間的轉(zhuǎn)場動效，常見有從左往右，從上到下和全屏縮放的模式，不過舊版本對這三種動效的使用場景沒有嚴(yán)格的界定，原因在于 QQ 作為平臺提供的功能入口以及耦合的任務(wù)關(guān)系較復(fù)雜，導(dǎo)致缺乏一致性的轉(zhuǎn)場動效無法為用戶帶來有預(yù)期的交互反饋。為此，團隊重新規(guī)范頁面動效的使用場景，將主要功能模塊的轉(zhuǎn)場邏輯做了全面的梳理。

橫向切換，層級的深入與回退

對于明確父子層級關(guān)系的頁面切換，使用左右橫滑的頁面動效，有助于層級結(jié)構(gòu)的引導(dǎo)，讓用戶感知當(dāng)下跳轉(zhuǎn)到不同頁面，并根據(jù)導(dǎo)航欄上的返回指示，退回到最初的頁面。橫向切換能增強視覺閱讀的延續(xù)性，讓用戶有明確的預(yù)期。

·

縱向滑動，開啟一個分支任務(wù)

依附于主任務(wù)路徑的分支任務(wù)（例：創(chuàng)建群聊、發(fā)送文件），則采用上下滑動的頁面動效，目的是強調(diào)分支任務(wù)行為的即時性，并且在完成分支任務(wù)之后，才能進行其它動作。另一方面，縱向滑動的運動軌跡較長，更容易引起用戶的注意力，讓用戶專注于當(dāng)下的任務(wù)。

·

全屏縮放，強調(diào)內(nèi)容的來源

對于強預(yù)覽能力入口的打開方式（例：在聊天窗口查看圖片、視頻），使用全屏縮放的頁面動效，能夠增強從預(yù)覽到內(nèi)容完整展示時過渡的視覺張力。全屏縮放強調(diào)了內(nèi)容展示的路徑來源，也有利于營造全屏瀏覽的沉浸感。

·

生機需承載樂觀與活力

「樂在溝通」是 QQ 最早的口號，也是希望用戶能在 QQ 聊天的過程中獲得快樂，但只是為此而不斷堆砌娛樂化的功能和夸張而缺乏條理的設(shè)計，只會激發(fā)用戶的審美疲勞增添體驗的沉重感，所以需要剖析「在QQ聊天獲得快樂」的本質(zhì)，「樂」應(yīng)該是用戶發(fā)自內(nèi)心產(chǎn)生的認(rèn)同與好感。用戶在高效便捷使用 QQ 時，也不必過于嚴(yán)肅生硬，在適當(dāng)?shù)臅r機能發(fā)現(xiàn)會心一笑的幽默感，不影響主線任務(wù)的體驗過程中能遇到小驚喜，在進行溝通或社交的時候能輕松無憂，讓用戶感覺 QQ 是一個充滿樂觀與正能量的朋友，也就是讓用戶能感知到 QQ 的活力與朝氣，從而樂于在 QQ 進行聊天與社交。

生動的語音消息設(shè)計

團隊重新思考消息傳遞環(huán)節(jié)的體驗，希望能通過更生動的方式透傳消息所附帶的情感。最接近人類本能的信息傳遞方式是語音消息，我們發(fā)現(xiàn)用戶對語音暫停，進度拖拽，音頻預(yù)覽有強烈的訴求，為了拉開與競品語音消息的差距，需要為聲音進行可視化設(shè)計，讓用戶能在視覺和觸控上直觀感受到語音消息的生動表現(xiàn)。

音頻預(yù)覽的聲紋樣式設(shè)計也是一波三折，設(shè)計師起初嘗試的十幾種樣式，經(jīng)過實現(xiàn)成本、性能條件、清晰表意和視覺美觀權(quán)衡后，最終篩選出一個適合新版本的方案。

·

·

而當(dāng)內(nèi)測版本按設(shè)計樣式實現(xiàn)后，卻發(fā)現(xiàn)真實的聲音信息并不能還原出設(shè)計稿所呈現(xiàn)的優(yōu)雅效果，因為真實環(huán)境下的復(fù)雜音效與實際語速間隔所帶來的聲紋變化在體量偏小的消息氣泡只能有損展示，從而導(dǎo)致要么出現(xiàn)斷崖式的變化，要么缺乏變化的持平樣式，也不能達到通過聲紋來展示聲音預(yù)覽的效果。

為此產(chǎn)品，設(shè)計與開發(fā)團隊針對音量的峰值與變化規(guī)律做了大量的模擬測試，最終采用算法優(yōu)化的方式來貼近設(shè)計期望的效果，對于音量變化持平的場景，做了聲紋浮動算法，以確保聲紋有節(jié)奏變化；對于斷崖式變化的場景，做了聲紋補間過渡，擬合出更優(yōu)雅的曲線效果。

·

語音氣泡在體驗上還解決了進度拖拽困難，主題氣泡適配等難題，更多關(guān)于語音氣泡的設(shè)計細節(jié)與故事可閱讀《129萬人夸獎的QQ語音進度條，是如何設(shè)計出來的？》細細品味。

·

生機為圖標(biāo)營造幽默感

圖標(biāo)是用戶在 QQ 上最先接觸到的圖形信息，也是最能直觀表達產(chǎn)品調(diào)性和設(shè)計態(tài)度的符號，基于生機的理念，設(shè)計團隊重新思考圖標(biāo)在本能（美觀），行為（達意）和反思（值得回味）層面的具象表現(xiàn)。例如舊版的「面對面?zhèn)鬏斘募箞D標(biāo)，單獨展示只能傳遞「文件」的概念，但忽略了面對面快傳的核心在于「快」，因此重新設(shè)計的圖標(biāo)融合了「紙飛機」與「閃電」表意，著重表達傳送與迅速的概念；舊版的「個性裝扮」圖標(biāo)在造型上容易產(chǎn)生曲解，而新圖標(biāo)則從字面「裝扮」的含義切入，設(shè)計成年輕人愛穿的T恤造型。

·

幾乎所有圖標(biāo)都經(jīng)過重新設(shè)計，也有意為圖標(biāo)融入來源生活、流行文化的元素，讓整套圖標(biāo)不會過于系統(tǒng)化拘謹(jǐn)，從而增添一份輕松幽默感。

·

讓「灰色」附帶生機，融入自然色彩的灰階設(shè)計

在用戶圖形界面中，用戶接觸到最多的顏色不只是品牌色，而是黑色、灰色和白色，這也是很重要但又容易被設(shè)計師忽略的灰階體系。過往的設(shè)計中，常常使用純黑色（#000000）、中黑色（#333333）、純白色（#FFFFFF）這個組合，但在純白色的背景中疊加純黑色的文字，對比度過高，黑色會強勢地壓過頁面中其他元素。人類所感知的色彩來自大自然，而大自然中并沒有純正的黑色和白色，我們所見的黑色都是深灰色，因為光線的緣故，環(huán)境還會為其著上各種色調(diào)?；谶@個原理，我們在純黑色、灰色的基礎(chǔ)上，加入適當(dāng)?shù)乃{色進行調(diào)和，達到深藍黑的效果。這些中和了藍調(diào)的黑色與灰色組合起來，賦予了頁面柔和、溫潤的屬性，也讓 QQ 的灰階不那么生硬，而略帶生機。

·

讓「多彩」增添生機，提升用戶的使用欲

色彩系統(tǒng)的刷新，也朝著更鮮明，多彩的方向調(diào)試，重新梳理色彩應(yīng)用的場景，用色也更有規(guī)律。

·

·

隨著色彩的整體更新，新版本 QQ 也做了一個大膽的嘗試──設(shè)計多彩且有細節(jié)質(zhì)感的圖標(biāo)。雖然扁平化的圖標(biāo)設(shè)計已流行數(shù)年，但在 QQ 對部分圖標(biāo)進行顛覆式的設(shè)計并非只是追求表面的花哨，而是為了讓用戶更喜歡去嘗試圖標(biāo)所代表的功能。因此精致多彩有質(zhì)感的樣式應(yīng)用在聊天窗口「加號面板」里的圖標(biāo)，我們認(rèn)為對于藏在「加號面板」的功能（送禮、厘米秀、輕互動等）也同樣為用戶提供豐富多彩的溝通與社交能力，希望用戶點擊「加號面板」時，能第一眼看到還有很多可以為用戶傳遞信息表達情感的方式，也向用戶暗示這些精致圖標(biāo)所代表的有趣和豐富的功能。

·

生機為用戶建立與心相映的共情感，有故事的彩蛋

人類不是 AI，人類具有情感。我們在使用 QQ 時，會有多元化的情感，或喜或悲，或怒或樂。QQ，就是用戶情感的見證，是用戶情感的容器。因此，QQ 設(shè)計團隊給自己提了一個腦洞問題，「當(dāng)用戶在使用 QQ 接收到不同消息時，會有怎樣不同的心情？」我們希望將用戶當(dāng)下那一刻的情感刻畫和表現(xiàn)出來，以作為用戶情感的見證。于是我們采集了多種場景，戲精靈魂在腦內(nèi)小劇場演了一遍又一遍：

滴滴滴滴，QQ 接收到新消息：哇哦，有哪位小可愛在找我呢？

一打開 QQ，發(fā)現(xiàn)超過幾十條未讀：整個人呆掉，哈？這幫人在搞什么？

偷偷關(guān)注著的那個人發(fā)來了 QQ 消息：哇！開心！

有人發(fā)大紅包：發(fā)財了，趕緊搶！讓金錢蒙蔽我的雙眼吧！

老師在收作業(yè)而你還沒做完：啊啊啊啊啊我死了。

有人在滔滔不絕：咦惹（白眼），這個人有完沒完？

我們將這些不同的情感設(shè)計成不同的表情，植入到消息列表的圖標(biāo)中，作為一個小彩蛋，希冀他們與用戶的不期而遇，能夠為用戶帶來一些歡樂。

·

通過對圖標(biāo)、基礎(chǔ)控件、色彩體系、信息框架等模塊的重新設(shè)計，團隊對于 QQ8.0 的設(shè)計理念也有了更深層次的理解，生機不只是為了刻意營造強顏歡笑的娛樂感，更希望用戶在體驗 QQ 過程所經(jīng)歷的行為過程中，能獲得與心相映的共情感。

這次改版涉及數(shù)十個功能模塊，刷新超過 200 個頁面，重繪了絕大部分的圖標(biāo)，能在不到一個月內(nèi)完成這個迭代依賴于項目團隊各角色的緊密合作與業(yè)務(wù)側(cè)的通力合作，過程中設(shè)計團隊也經(jīng)歷了內(nèi)部與外部關(guān)于設(shè)計風(fēng)格和調(diào)性的激烈討論。QQ 作為社交平臺一方面需要在通用控件，圖標(biāo)體系，色彩系統(tǒng)做到足夠的嚴(yán)謹(jǐn)與普適；另一方面又需要充分考慮年輕用戶在自我表達，情感傳遞層次上的個性與樂趣，這也是 QQ 在后續(xù)版本所面臨的挑戰(zhàn)──權(quán)衡平臺穩(wěn)健與個性表達的設(shè)計。

·

版本正式上線后，團隊也持續(xù)在關(guān)注用戶的反饋，很多中肯的意見也為后續(xù)版本的優(yōu)化提供了非常好的想法，希望大家繼續(xù)保持對 QQ 的關(guān)注與熱愛，同時也敬請期待 QQ 進化更多實用、有趣的能力。

歡迎關(guān)注「騰訊ISUX」的公眾號