項目案例｜QQ 在線狀態(tài)升級故事

▲點擊"三分設"關注，回復"社群"加入我們

歡迎來到專業(yè)設計師學習交流社區(qū)

三分設｜連接知識，幫助全球 1 億設計師成長

阿里巴巴設計官方認證 MCN 機構

SUXA 深圳體驗設計協會華東分會

全球服務設計共創(chuàng)節(jié)城市站發(fā)起者

·

轉自：騰訊ISUX

編輯：李凱悅

共 5634 字，預計閱讀 15 分鐘

前言

“咳咳咳” —— QQ 老網民對這個音效一定不陌生。這個音效背后的 QQ “在線狀態(tài)” 功能，曾經乃是各大網友們游走沖浪的日常標配。但這個在 PC 時代土生土長的功能，卻在移動時代水土不服，還險些被打入冷宮。在雪藏多年后，2019 年， QQ8.0 對 “在線狀態(tài)” 啟動了系列改版，一年時間內，在線狀態(tài)光速升溫，火爆營業(yè)，收獲眾多小年輕好口碑。所以，一個差點成為時代眼淚的功能，如何在新的時代背景下找到屬于自己定位，重新煥發(fā)生命力呢？讓我們穿越時間線，一探究竟。

一、遭遇窘境：移動時代下水土不服

2013 年，移動化時代悄然降臨， QQ 移動化也在轟轟烈烈大步邁進。而 “在線” 、 “隱身” 這類刻著 PC 時代 DNA 的在線狀態(tài)，因不符移動端 QQ “隨時在線” 、 “隨時可溝通” 的產品定位而被取消。

沒料到頗具前瞻性的產品策略在落地時卻接不上地氣，早已習慣了在線狀態(tài)的用戶無法接受這等變動，紛紛祭出一星警告。為了平息眾怒，在線狀態(tài)只好保留下來。

十幾年來培養(yǎng)起來的用戶習慣和認知確實不易顛覆，但在線狀態(tài)難道只能這般強行營業(yè)嗎？這個功能還能為用戶帶來什么價值呢？未來的路又該何去何從呢？

二、重新詮釋：找到演變的新生態(tài)位

故事始于 2019 年的一個秋天。隨著 QQ 8.0 改版提出 “生機” 的設計理念，圍繞著   “如何讓在線狀態(tài)更加有生機活力” 這一命題，產品設計團隊展開了新的嘗試 ——  “在線狀態(tài)” 固然是 PC 時代的產物，那能否在新時代，和新環(huán)境、新需求碰撞出不一樣的可能性，從而煥發(fā)更多生機呢？

我們追本溯源，挖掘在線狀態(tài)的可能性。

1. 挖掘本質：在線狀態(tài)是一種實時個人動態(tài)

在線狀態(tài)的作用是什么？在 PC 時代里， “在線”  、 “離線”  等狀態(tài)其實是一盞實時社交信號燈，清晰地告知好友自己此時此時是否能聯系到。它就像日常生活里大街小巷的店鋪門口上掛著的營業(yè)牌，小巧而又清晰地告訴客人店鋪是否在 “營業(yè)中” 。

在 PC 時代里， “在線” 、 “離線” 這盞信號燈之所以重要，是因為好友的 帳號狀態(tài) 暗示了聊天互動等最基本的社交行為是否能得到及時的響應。視角回到移動時代，隨地隨地聯系朋友已成為呼吸一樣自然。一次社交互動是否能獲得響應，更多取決于諸多對方當下所處的 情境狀態(tài)，比方說好友正在忙、心情不好、請假了等等。

因此在移動時代，只有實時更新、豐富立體的狀態(tài)傳達才能在這個信息高速流通的社交環(huán)境中，更大程度消解聊天過程中對好友情境的不確定性，降低交流過程中的信息差。而這些狀態(tài)可能包含主觀心理或者客觀情境等在內。移動場景里的在線狀態(tài)的演變朝向應該是一種更加 實時更新的、貼合生活場景的個人動態(tài)。

但問題是，表達個人實時動態(tài)，其實是用戶在社交場景中一直以來都有的訴求，平臺上也早有相應的功能，比方說大家熟知的發(fā)布個性簽名、寫說說等。那么新版的在線狀態(tài)如何才能差異化，更好地滿足用戶需求呢？

2. 拉高視角：構建分析框架，找到合適生態(tài)位

無論是個性簽名、說說亦或者個人狀態(tài)，其實都是用戶自行發(fā)表的內容。從 內容創(chuàng)作成本 以及內容實時性兩個維度進行正交，可以對已有的能力做一個 清晰的分層 —— 上述提到的說說和個性簽名都需要依賴自定義上傳內容，具有較高編輯門檻，這種方式可以盡可能多地展示用戶獨特想法，但是同時也難以兼容輕量即時的表達訴求。

因此，在這樣一個內容生態(tài)中，剛好存在一個缺口 —— 一種輕量即時的、輔助聊天場景的個人實時動態(tài) —— 需要被填補。而在線狀態(tài)因其天然自帶的信號燈屬性，恰恰好可以填補這個缺口。

由此，在線狀態(tài)已經大致摸清自己的生態(tài)位 —— 基于用戶對在線狀態(tài)形成的認知和操作習慣，拓展更加實時豐富、貼合生活場景的選項及能力，讓用戶能夠更加方便快捷地發(fā)射社交信號，為聊天添多一份趣味或者拓展一種新的信息傳遞方式。

那么接下來，如何從設想到落地？

三、內容設計：從單點到多維的演進

有過踩雷經驗，自然不敢一上來便大刀闊斧。從 2019 年起的在線狀態(tài)系列改版，其實是一段摸著石頭過河的過程。隨著持續(xù)不斷的小步驗證，局面從混沌、不確定，到逐漸清晰可見，在線狀態(tài)的內容設計也是從謹慎單一的靜態(tài)內容，逐漸演變成更加豐富智能的動態(tài)內容。

1.單點試水：拓展映射日常點滴的在線狀態(tài)

任何嘗試都離不開真實場景，在線狀態(tài)的改版也如是。圍繞著用戶需要什么樣的社交情境線索，我們開始扮演一個普通女 / 男子初中生。想想日常生活里，什么情況下心心念念的好閨蜜好基友即便在線可能也不聯系上呢 —— 也許在苦苦干作業(yè)沒空看手機，也許正美滋滋地煲著高糖甜劇嗑 CP 呢，也可能是手機快沒電急急忙忙開啟了省電模式……

于是我們從線下日常活動為著眼點，推出一系列日常生活的在線狀態(tài)集合：“學習中” 、 “游戲中” 、 “健身中” 、 “煲劇中” 、 “睡覺中” ，以及拓展了更豐富的設備狀態(tài) “我的電量” 、 “信號弱”—— 這些普普通通由吃喝拉撒組成的，不就是最真實日常的生活嘛？

這些由線下到線上的狀態(tài)都以更大范圍地覆蓋更多可能性，為廣大 “現充” 年輕人的聊天互動提供真實生活的場景線索。

經過大膽改版及整飾后，第一批改版的在線狀態(tài)正式下海試水了！令人欣喜的是，新版在線狀態(tài)不但沒翻車，還收獲了一大波用戶好評，每天的狀態(tài)切換量急速上升。

2.持續(xù)運營：同步生活時間線和重大事件

在第一次改版嘗鮮后，我們沿著 “個人實時狀態(tài)” 這個思路繼續(xù)往前行，讓在線狀態(tài)能夠投射三次元里日新月異發(fā)生的變化，從而讓狀態(tài)更加真實有鮮活感。

于是在重大事件以及節(jié)日熱點的時候，在線狀態(tài)也堅持營業(yè)，保持和現實生活時間線的無縫銜接：在 2020 年疫情期間，在線狀態(tài)結合場景上新了  “在線學習” 、  “遠程辦公” 、  “TiMi 中” 等狀態(tài)，滿足用戶宅家抗疫時表達社交信號的需求；在有特殊節(jié)日時，如七夕前夕上線 “戀愛中” 、 “汪汪汪” ，植樹節(jié)上線 “遇見春天” ；每逢傳統(tǒng)佳節(jié)，在線狀態(tài)在上新 “喜迎雙節(jié)” 、 “拜年中” 的同時，也會非常具有防疫意識地呼吁 “宅家過節(jié)” 、 “就地過年” ……

這類狀態(tài)總能在節(jié)日時期點燃一波話題，幫助用戶傳遞了最需要表達的社交信號。

3.智能實時：和各種內容打通，更加豐富靈活

隨著在線狀態(tài)隊伍的日益擴充，我們發(fā)現其中那些可以實時可變的狀態(tài)歡迎度會更高，所帶來的的話題也會更多，如實時更新的 “我的電量” ：

于是我們便沿著這個思路，借助平臺生態(tài)的能力，和 QQ 音樂進行打通，推出  “聽歌中”  線上活動狀態(tài)。當切換到 “聽歌中” 狀態(tài)時，用戶無論在 QQ 音樂、亦或者在 QQ “一起聽” 時，都可以同步滾動歌名、歌手、歌詞三位一體，不僅幫助你舉手投足間可彰顯自身獨特的音樂品味，而且歌曲背后的潛在話題可以幫助拓寬話題池子。

隨著在線狀態(tài)的新嘗試得到不錯的用戶反饋，我們還和星座、天氣等小程序內容打通，每日更新用戶當天星座運勢以及所在地天氣狀態(tài)。此外，在線狀態(tài)可以基于用戶地理位置變化，智能識別用戶所處場所以及所進行的活動，讓在線狀態(tài)進一步貼近用戶生活語境，同時也讓在線狀態(tài)添上一抹 geek 風。

  

四、精細打磨：在表意之外別出心裁

這么看下來，在線狀態(tài)是不是持續(xù)拓展好內容就穩(wěn)了呢？并不。在線狀態(tài)作為年輕人傳達社交情境狀態(tài)的窗口，若想從心理層面獲取他們的認可和青睞，其表達方式和手法應該和新生代 同處一樣的文化語境 中。

而站在平臺視角，我們也不能一味迎合年輕人口味，而是希望 引導正向的話題討論，讓在線狀態(tài)朝著健康茁壯的方式不斷變化發(fā)展。 因此需要同時考慮用戶及平臺視角訴求來打造內容。

1. 狀態(tài)圖標：你品，且細細品

這一屆的年輕人，不喜歡正兒八經的代言，抵觸了然無趣的白描，他們在豐富娛樂的成長環(huán)境里日漸浸潤，凡事愛細品，處處能玩梗，被動技能就是內心戲足， 天生自帶豐沛的想象力和解讀能力。一言以蔽之，就是 “好玩” 。

因此在線狀態(tài)也是煞費苦心地運用各種手法來打磨圖標和文案，通過更隱喻的表達來留下想象空間。

以表示生氣狀態(tài) “我沒事” 為例，初始設定原本是氣呼呼的 “生氣中” 。但這一屆的年輕人真的喜歡耿直地社交場合表達生氣嗎？除了情緒宣泄，他們還需求安慰求理解。因此優(yōu)化后的 “我沒事” 表達一個微笑里可包含或生氣、或委屈、或傷心的復雜情緒，用戶可聯想好友近期發(fā)生的事件，充分根據自身理解來解析其中情緒。

此外，我們的其他心情狀態(tài)也是結合場景更帶故事感： “悠哉哉” 在夏日陽光海邊，吮了一口椰子汁，一本滿足；“想靜靜” 似乎心情不太好，為了不被人打擾，偷偷把自己關在冰塊里；“美滋滋” 剛被人告白，心里小鹿亂撞，笑得比蜜桃還甜……

2. 文案打磨：引導正向話題

除了圖標以外，和年輕人有無共同語言還需看文案是否能處于同一個頻道。以情人節(jié)狀態(tài)為例，我們希望除了有撒狗糧的 “戀愛中” 以外，能讓萬千單身人士也能尋找隊友報團取暖，因此打算推出單身狀態(tài)（狗頭保命）。但是文案并沒采用直白的  “單身中”  ，而是以 “汪汪汪” 口吻進行自述，概念變模糊了，但是解讀空間就變大了 —— 單身人士可借此尋求共鳴，脫單人士可借此撒狗糧（危險動作，請勿模仿）。

此外， 在線狀態(tài)的文案也要講究正向引導。在星座運勢的內容管控中，我們屏蔽掉一些非正向或者容易引發(fā)歧義的語料庫，盡可能地與聊天或日常生活場景相掛鉤。我們也非常欣喜地看到，對于內容庫的篩選把控確實能激起用戶更多對生活美好事物的討論。

五、框架調整：容器升級之道

隨著在線狀態(tài)的數量玩法逐漸增多，最初界面框架缺乏可拓展性的弊端越來越明顯。每新增一種截然不同的玩法，都會加劇界面的復雜和臃腫，進一步增加用戶認知負荷。

因此，我們勢必需要建立一個包容度更高的交互框架。在這個框架下：

1. 打造認知：打造豐富好玩新認知，提升探索狀態(tài)的吸引力；

2. 簡化操作：可自由輕快進行設置，降低更換在線狀態(tài)的門檻；

3. 框架兼容：靈活包容各交互框架，培養(yǎng)用戶穩(wěn)固的心智習慣。

1. 打造認知：豐富好玩

在線狀態(tài)原有的設置入口極為隱蔽，只有長按頭像或者精準點擊圖標才可進入。隨著狀態(tài)內容的擴充，為了打造在線狀態(tài)豐富好玩的認知，入口設計變得進一步 顯性化、動態(tài)化，可以將具體內容實時外傳出來。

此外，過去的設置界面存在諸多限制：空間上，半屏浮層越發(fā)顯得局促；操作上，平鋪陳列方式膠囊狀難以承載更多操作；表達上，可交互的控件形態(tài)各異略顯復雜。

再版中采用了 櫥窗式陳列 的方式，對可操作元素進行統(tǒng)一的規(guī)整，用更加充裕的版面承載明確可操作的控件。

2. 簡化操作：輕量便捷

在線狀態(tài)的定位是更加即時的狀態(tài)傳達，自然不希望用戶在設置路徑上太多門檻。新方案中層級盡可能扁平，用戶基本不用進入二級頁面，設置點擊操作即刻生效，打造靈活自由的進出方式。

3. 框架規(guī)則：包容可拓展

在新增的狀態(tài)類型中，有些實時變化的特殊狀態(tài)在設置時需要二級頁面來承載。過去的二級頁基本以彈起新頁面的方式來解決，對于用戶來說相對較重，讓原本應該輕便的操作造成割裂感。在新框架中，點擊方形入口可基于原始位置展開成大面板，讓二級操作不脫離上下文語境，用戶可自由靈活地進出設置。

基于這樣的框架，我們更多智能實時的高級能力得以流暢地嵌入到這樣的框架里，并保證框架的穩(wěn)定統(tǒng)一，讓用戶得以再此培養(yǎng)穩(wěn)固的認知和操作習慣。

自此，2019 年底開始的 QQ 在線狀態(tài)的探尋生機之旅，從 產品定位、內容拓展到框架結構一直在迭代，這個旅程也在一直持續(xù)探索中。從一開始在移動端的水土不服，到改版后使用量光速升溫，這過程是對用戶訴求的不斷體察和推敲，同時也是對功能場景的不斷挖掘。但無論功能怎么迭代，在線狀態(tài)都會積極融入到年輕人所在的文化語境里，幫助用戶以更貼心好玩的姿態(tài)展示更豐富多維的社交情境。

結語

八年前，在一篇網絡報道中，一位評論者針對 QQ 在線狀態(tài)被取消感慨道， “要摧毀自己十幾年來建立起來的用戶習慣和認知，對 QQ 來說是一個漫長而痛苦的過程，至于對錯，目前或許仍無法評判。” 

八年后，或許我們有了初步的答案 —— 我們并非只能 To Be or Not To Be ，我們可以通過改變思維來拓寬更多第三選擇。

 “在線狀態(tài)” 一定是設備帳號的 “在線” 或者 “離線” 嗎？當我們把 “在線狀態(tài)” 這個解決方案看成一個黑盒子的時候，能看到這個黑盒的輸出是 “輔助聊天社交”  、 “與情境相關”  、 “會因時而變”  等一系列能力屬性。那我們再 逆向地從屬性層面進行解構，便可以突破舊有的 “設備狀態(tài)” 的思考范式，對其賦予新的意義和聯想。

未來 QQ 在線狀態(tài)也會朝著更生機更鮮活的方式演進，做更好玩、更貼心的 QQ 。

---

超值課程推薦

華為用戶體驗設計的體系搭建方法

超 10 億用戶的產品，到底是怎么做用戶體驗的？

揭秘滴滴、蔚來等大廠的用戶體驗設計策略

原創(chuàng)好文推薦

一款為你帶來難忘體驗的美食 APP

Web Vitals —— 谷歌的新一代 Web 性能體驗和質量指標

2021 年用戶體驗設計趨勢分析

想要引導用戶行為轉化，設計師必須深刻理解這 4 個認知心理學理論

讓設計圈一片嘩然的 Google 新 logo 到底出了什么問題？國外的設計專家這么說

如何系統(tǒng)的增強用戶粘性，提升產品轉化率？你要懂得“行為設計學”

設計新趨勢「玻璃擬態(tài)」到底是什么？這里有一份實現效果的詳細教程

如何將設計系統(tǒng)快速的從 Sketch 切換到 Figma？這里有 6 個需要注意的關鍵點

---

歡迎大家關注三分設，每天分享優(yōu)質設計、創(chuàng)意靈感、新知新識，定期大咖老師直播分享，零距離連麥，答疑解惑。