騰訊案例復盤!QQ 的極簡與夜間模式設計過程總結! - 優設網 - UISDC

騰訊案例復盤!QQ 的極簡與夜間模式設計過程總結!

2019/09/08 7134評論 10

QQ 像用戶的一個小小星球,可以隨意的裝點展示自己的個性,同時也能看到其他好友的小星球。然而人是動態成長和變化的,紛繁的世界是否就一直能適合用戶的聊天心境呢?

都說年輕人喜歡用 QQ,他們精力旺盛樂于交友,在社交的同時有強烈的自我表達欲望,QQ 里的個性裝扮能夠滿足年輕人的自我展示需求。

隨著年輕人的成長和社會角色變化,開始需要和學習、工作中不同的人頻繁打交道,涉及的使用場景更為多元化,對溝通逐漸有了效率與特殊場景體驗的訴求。本文講述的是 QQ 近期在極簡設計與人性化體驗設計上的探索與思考。

簡潔模式

各類產品相繼回歸初心追求體驗服務的本質,產品體驗也正在做減法提煉,更為聚焦用戶核心訴求,追求更極簡的體驗。

用戶溝通的本源是信息互換,QQ 通過推出極簡模式,對聊天進行降噪設計,重新突出聊天信息,回歸溝通的本源。

簡潔模式,是允許用戶切換到更純粹的聊天體驗,但并不改變用戶原有的個性化設置,用戶可隨時根據需要,恢復自己的個性裝扮。

1. QQ簡潔模式設計策略

QQ 擁有龐大的用戶量,一直以來用戶對純粹的聊天溝通體驗呼聲較高,回歸到溝通的本源,聚焦極簡溝通聊天體驗,這是化繁為簡的減法過程,我們梳理了 QQ 簡潔模式的設計策略。

信息降噪

頭像和聊天氣泡是承載信息的主要載體,簡潔模式屏蔽個性化裝扮,使信息的展示更純粹和清晰。

簡化功能

為了讓用戶更便捷地發送不同類型的消息,QQ 的輸入區域展示了相冊、拍照、紅包等功能。但在非娛樂化場景聊天時,這些功能使用率是較低的。簡潔模式簡化了工具欄與圖標風格,圖標造型與色彩化繁為簡,利用更純粹的黑與白,方便界面更好凸顯信息和內容,整體與默認模式產生了差異,用戶有更強簡化感知。

純粹交流

QQ 的等級體驗符合部分年輕人的攀比需求,但在某些場景(如辦公,學習等),等級可能會對溝通帶來一定的壓力與干擾。簡潔模式僅保留純粹的聊天信息,讓用戶感受更清爽無壓力的交流。

風格中性

簡潔模式的界面設計風格更為中性,去個性化。設計細節的優化,如分割線的處理、灰色的運用、圖標的形體等,都更為克制精簡。整體視覺體驗以黑白灰為主基調,輔助色點綴,高對比度,猶如容器一樣呈現最具價值的內容和信息。

簡化圖形

極簡還體現在界面的圖標語言,簡潔模式圖標延續 QQ 8.0 風格的圖標造型,在此基礎上追求更極致的減法設計,我們通過提煉圖標造型的輪廓,采用更精煉的細線圖標,能少畫一筆不多出一筆,細節之處方顯匠心。

簡潔模式設置路徑

未來將增設多彩選擇,喜歡簡約風格的你絕對不容錯過 QQ 簡潔模式,歡迎多多體驗。

QQ 升級至 8.1.0 版本的用戶,可以從抽屜進入設置頁,點擊進通用,開啟簡潔模式。

夜間模式

人眼可根據環境光做自動調節,在弱光環境下,人眼對明暗度的辨別更敏銳,對彩色的感知度則更弱。同時人眼還有視覺惰性,晚上長時間使用手機,更容易覺得眼花。

多數手機系統,主要通過環境光自動調節屏幕的亮度,以降低手機上的明暗對比,減少對眼睛的亮度刺激,同時普遍適用于不同類型的手機應用。

為了給用戶提供更舒適的夜間體驗,部分手機系統逐漸推出黑暗模式,一些應用還定制深度的夜間模式。

1. QQ夜間模式設計策略

晚上是 QQ 用戶活躍的高峰期之一,針對夜間場景使用痛點以及業界的趨勢??萍枷蟶?,設計也應如此,因此 QQ 夜間模式體驗定位希望是更護眼舒適的,為用戶提供更人性化體驗,我們梳理出夜間模式的設計策略,并重新設計。

2. 護眼舒適

降低對比度

夜間模式界面通過降低信息與背景的對比度,對圖片/圖標帶色彩的通過使用遮罩,來達到減少對人眼刺激的目的,用戶在夜間弱光環境中使用起來更柔和護眼。

降低信息與背景對比度能降低對人眼的刺激,我們分別從降低界面信息對比度和降低色彩明度入手,在不同背景下適配不同亮度的文字信息。通過黑暗環境人眼真機體驗測試,又再經過多輪字色與背景對比度的優化,保證識別度的基礎上,梳理出在全黑的環境下適合夜間在任何屏幕亮度均可使用的對比度,對比度控制在三個檔位進行組合,不出現純黑白對比。

降低圖像與色彩的明度

界面信息還包括有色的圖文與圖形類,高純度的色彩在深色背景下也容易造成人眼刺激與疲勞。此類信息我們通過使用遮罩來達到降低明度的目的。在保持與系統色彩純度的基礎上,降低明度從而達到柔和護眼的效果。

組件化

QQ 夜間模式適配覆蓋度很高,涉及界面也很多,我們梳理適配了夜間模式組件,同時也提升適配的效率。目前已適配核心路徑場景的夜間體驗,我們與開發同學緊鑼密鼓在適配更多界面,隨著適配的不斷深入,給用戶提供更完善舒適的夜間體驗。

3. 情感化設計

為了強化用戶對夜間模式的認知,提升夜間場景用戶的使用感受。我們運用了情感化的設計,從以下三個維度體現。

主題背景

大面積黑色界面難免會些許單調冰冷,有別于手機系統與應用,QQ 夜間模式保留前版本的星空元素傳承到新版設計中, 夜間模式啟動后,通過繁星點點的背景元素建立夜間環境關聯。

趣味圖標

當用戶開啟夜間模式時,我們設定了彩蛋,發現個別圖標會發生改變,變成帶有夜間相關的圖形語言,后續更新會增加更多趣味的圖標。我們也希望通過帶入趣味元素的表達方式,建立用戶對 QQ 夜間模式的好感。

動效

使用切換操作時,加入適度的過渡動畫,進一步強化用戶對夜間模式的感知,用戶可在抽屜頁點擊切換至夜間模式。

夜間模式體驗路徑,用戶進入 QQ 后,通過右滑或點擊一級界面左上角個人頭像,進入抽屜頁,點擊左下方夜間圖標即可切換至夜間模式。

結語

除了簡潔模式和夜間模式,未來 QQ 還會有更多專題設計的探索思考,通過挖掘使用場景為用戶提供更多人性化好玩的服務。目前這兩個模式均已上線,收到了不少反饋和建議,也請用戶朋友們多多體驗持續關注 QQ 的更新。

歡迎關注「騰訊ISUX」的公眾號:

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址://www.utsvcz.com.cn/simple-qq

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

sketch 界面設計 版式設計 排版布局 職場 優設專訪 設計師干貨 優設大課堂 設計達人 配色 web前端開發 視覺設計 素材下載 AI教程 設計理論 設計流程 神器下載 字體下載 設計師專訪 psd下載 設計規范 海報設計 設計趨勢 用戶體驗設計 動效設計 平面設計 logo設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里