QQ的極簡設(shè)計(jì)與夜間模式設(shè)計(jì)經(jīng)驗(yàn)分享

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



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

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


一.簡潔模式

各類產(chǎn)品相繼回歸初心追求體驗(yàn)服務(wù)的本質(zhì),產(chǎn)品體驗(yàn)也正在做減法提煉,更為聚焦用戶核心訴求,追求更極簡的體驗(yàn)。

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

簡潔模式,是允許用戶切換到更純粹的聊天體驗(yàn),但并不改變用戶原有的個(gè)性化設(shè)置,用戶可隨時(shí)根據(jù)需要,恢復(fù)自己的個(gè)性裝扮。


1. QQ簡潔模式設(shè)計(jì)策略

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


信息降噪

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



簡化功能

為了讓用戶更便捷地發(fā)送不同類型的消息,QQ 的輸入?yún)^(qū)域展示了相冊、拍照、紅包等功能。但在非娛樂化場景聊天時(shí),這些功能使用率是較低的。簡潔模式簡化了工具欄與圖標(biāo)風(fēng)格,圖標(biāo)造型與色彩化繁為簡,利用更純粹的黑與白,方便界面更好凸顯信息和內(nèi)容,整體與默認(rèn)模式產(chǎn)生了差異,用戶有更強(qiáng)簡化感知。



純粹交流

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



風(fēng)格中性

簡潔模式的界面設(shè)計(jì)風(fēng)格更為中性,去個(gè)性化。設(shè)計(jì)細(xì)節(jié)的優(yōu)化,如分割線的處理、灰色的運(yùn)用、圖標(biāo)的形體等,都更為克制精簡。整體視覺體驗(yàn)以黑白灰為主基調(diào),輔助色點(diǎn)綴,高對比度,猶如容器一樣呈現(xiàn)最具價(jià)值的內(nèi)容和信息。



簡化圖形

極簡還體現(xiàn)在界面的圖標(biāo)語言,簡潔模式圖標(biāo)延續(xù) QQ 8.0 風(fēng)格的圖標(biāo)造型,在此基礎(chǔ)上追求更極致的減法設(shè)計(jì),我們通過提煉圖標(biāo)造型的輪廓,采用更精煉的細(xì)線圖標(biāo),能少畫一筆不多出一筆,細(xì)節(jié)之處方顯匠心。



簡潔模式設(shè)置路徑

未來將增設(shè)多彩選擇,喜歡簡約風(fēng)格的你絕對不容錯過 QQ 簡潔模式,歡迎多多體驗(yàn)。

QQ 升級至 8.1.0 版本的用戶,可以從抽屜進(jìn)入設(shè)置頁,點(diǎn)擊進(jìn)通用,開啟簡潔模式。



二.夜間模式

人眼可根據(jù)環(huán)境光做自動調(diào)節(jié),在弱光環(huán)境下,人眼對明暗度的辨別更敏銳,對彩色的感知度則更弱。同時(shí)人眼還有視覺惰性,晚上長時(shí)間使用手機(jī),更容易覺得眼花。

多數(shù)手機(jī)系統(tǒng),主要通過環(huán)境光自動調(diào)節(jié)屏幕的亮度,以降低手機(jī)上的明暗對比,減少對眼睛的亮度刺激,同時(shí)普遍適用于不同類型的手機(jī)應(yīng)用。

為了給用戶提供更舒適的夜間體驗(yàn),部分手機(jī)系統(tǒng)逐漸推出黑暗模式,一些應(yīng)用還定制深度的夜間模式。


1. QQ夜間模式設(shè)計(jì)策略

晚上是 QQ 用戶活躍的高峰期之一,針對夜間場景使用痛點(diǎn)以及業(yè)界的趨勢??萍枷蛏疲O(shè)計(jì)也應(yīng)如此,因此 QQ 夜間模式體驗(yàn)定位希望是更護(hù)眼舒適的,為用戶提供更人性化體驗(yàn),我們梳理出夜間模式的設(shè)計(jì)策略,并重新設(shè)計(jì)。


2. 護(hù)眼舒適

降低對比度

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


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



降低圖像與色彩的明度

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



組件化

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



3. 情感化設(shè)計(jì)

為了強(qiáng)化用戶對夜間模式的認(rèn)知,提升夜間場景用戶的使用感受。我們運(yùn)用了情感化的設(shè)計(jì),從以下三個(gè)維度體現(xiàn)。


主題背景

大面積黑色界面難免會些許單調(diào)冰冷,有別于手機(jī)系統(tǒng)與應(yīng)用,QQ 夜間模式保留前版本的星空元素傳承到新版設(shè)計(jì)中, 夜間模式啟動后,通過繁星點(diǎn)點(diǎn)的背景元素建立夜間環(huán)境關(guān)聯(lián)。


趣味圖標(biāo)

當(dāng)用戶開啟夜間模式時(shí),我們設(shè)定了彩蛋,發(fā)現(xiàn)個(gè)別圖標(biāo)會發(fā)生改變,變成帶有夜間相關(guān)的圖形語言,后續(xù)更新會增加更多趣味的圖標(biāo)。我們也希望通過帶入趣味元素的表達(dá)方式,建立用戶對 QQ 夜間模式的好感。



動效

使用切換操作時(shí),加入適度的過渡動畫,進(jìn)一步強(qiáng)化用戶對夜間模式的感知,用戶可在抽屜頁點(diǎn)擊切換至夜間模式。



夜間模式體驗(yàn)路徑,用戶進(jìn)入 QQ 后,通過右滑或點(diǎn)擊一級界面左上角個(gè)人頭像,進(jìn)入抽屜頁,點(diǎn)擊左下方夜間圖標(biāo)即可切換至夜間模式。



結(jié)語

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






原文地址:https://isux.tencent.com/articles/simple-qq.html

每天更新,
全站高品質(zhì)素材免費(fèi)下載!