QQ 極簡與夜間模式設計過程總結

QQ 極簡與夜間模式設計過程總結

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

QQ 極簡與夜間模式設計過程總結

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

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

簡潔模式

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

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

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

QQ 極簡與夜間模式設計過程總結

QQ 簡潔模式設計策略

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

QQ 極簡與夜間模式設計過程總結

信息降噪

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

QQ 極簡與夜間模式設計過程總結

簡化功能

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

QQ 極簡與夜間模式設計過程總結

純粹交流

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

QQ 極簡與夜間模式設計過程總結

風格中性

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

QQ 極簡與夜間模式設計過程總結

簡化圖形

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

QQ 極簡與夜間模式設計過程總結

簡潔模式設置路徑

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

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

QQ 極簡與夜間模式設計過程總結

QQ 極簡與夜間模式設計過程總結


夜間模式

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

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

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

QQ 極簡與夜間模式設計過程總結

1. QQ 夜間模式設計策略

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

QQ 極簡與夜間模式設計過程總結

2. 護眼舒適

降低對比度

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

QQ 極簡與夜間模式設計過程總結

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

QQ 極簡與夜間模式設計過程總結

降低圖像與色彩的明度

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

QQ 極簡與夜間模式設計過程總結

組件化

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

QQ 極簡與夜間模式設計過程總結

3. 情感化設計

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

主題背景

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

QQ 極簡與夜間模式設計過程總結

趣味圖標

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

QQ 極簡與夜間模式設計過程總結

動效

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

QQ 極簡與夜間模式設計過程總結

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

QQ 極簡與夜間模式設計過程總結

結語

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

QQ 極簡與夜間模式設計過程總結


分享到:


相關文章: