UI界面設計

QQ8.0界面升級改版的設計思路

2788

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

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

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

娛樂化設計只是手段，讓平臺持續(xù)保持生命力才是目的

讓QQ的體驗更娛樂化以及融入更多有趣的玩法固然是吸引年輕用戶的常見方式，但團隊也注意到不少年輕用戶隨著年齡與閱歷的增長，會更注重社交的有效性——看似華麗卻缺乏持續(xù)性的活動與玩法對他們的吸引力逐漸減少。

我們一方面想扭轉用戶對QQ“華而不實臃腫低齡”的印象，另外一方面又不希望QQ是一個過于嚴肅冷淡的工具。我們想象中年輕人的社交平臺要能承載豐富多彩的情感表達，能為彼此帶來樂觀與希望，是一個有朝氣和生命力的環(huán)境，這種環(huán)境不應該只是堆砌玩法，而應該讓用戶能感受到平臺在持續(xù)釋放生機的態(tài)度。

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

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

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

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

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

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

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

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

與追求自我解放的藝術學科不同，用戶體驗設計的精致感，是基于理性、自律、嚴謹?shù)牡讓釉O計原則?！兜赖陆?jīng)》有言：九層之臺起于累土，千里之行始于足下。這些毫末細微的、不被人留意的底層規(guī)則，恰恰才是支撐QQ8.0的根基。

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

在QQ8.0的設計中，我們定義了一個單位為8px的軟柵格系統(tǒng)：以8px為單位來規(guī)范元素的尺寸與間距。這套底層的統(tǒng)一單位，方便適配多種屏幕，提升精致細膩程度，保證設計一致性，降低設計師的決策成本，提高協(xié)同效率。

對于安卓來說，安卓的hdpi、xhdpi、xxhdpi等各個分辨率，都能被8px整除。但iOS主流機型如750*1334px，750*1624px等都不能被8px整除，因此在設計過程中，保證元素的尺寸是8px的倍數(shù)，保證元素與元素之間的相對距離為8px的倍數(shù)，剩余空間自動適應。

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

更有規(guī)律的字號應用場景

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

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

整齊一致的轉場動效

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

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

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

縱向滑動 —— 開啟一個分支任務

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

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

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

生機需承載樂觀與活力

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

生動的語音消息設計

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

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

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

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

語音氣泡在體驗上還解決了進度拖拽困難，主題氣泡適配等難題，更多關于語音氣泡的設計細節(jié)與故事請傳送至“點滴匠心，聲入人心”細細品味。

生機為圖標營造幽默感

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

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

讓“灰色”附帶生機——融入自然色彩的灰階設計

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

讓“多彩”增添生機，提升用戶的使用欲

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

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

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

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

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

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

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