QQ设计团队复盘（QQ极简与夜间模式设计）

QQ设计团队复盘（QQ极简与夜间模式设计）

都说年轻人喜欢用QQ，设计设计他(ta)们精力旺盛乐于(yu)交友，团队在社交的复盘同时有强烈的自(zi)我表达(da)欲望，QQ里的极简个(ge)性装扮能够满足年轻人的自我(wo)展示需求。

然而(er)随着年轻人的夜间成长(chang)和社(she)会角色变化，开始需要和学习(xi)、模式工作中不同的(de)设计设计人(ren)频繁打交道，涉及的团队使用场景多元化，对沟通逐渐有了效率的复盘诉求。本文讲述的(de)极简是QQ近期在极简设计与人性(xing)化体验设计(ji)上的探索与思考。

一、夜间简洁模式

各类产品相继回归初心追求体验服务的模式本质，产品体验(yan)也正在做减法提炼，设计设计更为聚焦用户核心诉求，团队追求更极简的复(fu)盘体验。

用户沟通的本源是信息互换，QQ通过推出极简模式，对聊天进行降噪设计，重新突出聊天信息，回归沟通的本源。

简洁模式，是允许用户切换到更纯粹的聊天体验(yan)，但并不改变用户原有的个性化设置，用户可随时根据需要，恢复自己的(de)个性装扮。

1. QQ简洁模式设计策略

QQ拥有庞大的用户量(liang)，一直以来用户对纯粹的聊天沟通体验呼声较高，回归到沟通的本源，聚焦极(ji)简沟通聊天(tian)体验，这是化繁为简的减法过程，我们梳理了QQ简洁模式的设计策略。

头像和聊天气泡是承载信息的主要载体，简洁模式屏蔽个性化装扮，使信息的展示更纯粹和(he)清晰。

3. 简化(hua)功能

为了让用户更便捷地发送不同类型的消息，QQ的输入区域展示了相册、拍照、红包等功能。但在非娱乐化场景聊天时，这些功能使用率是较低的。简洁模式简化了工具栏与(yu)图标风格，图标造型与色彩化繁为简，利(li)用更纯粹的黑与白，方便界面更(geng)好凸显信息和内容，整体与默认模式(shi)产生了差异，用户有更(geng)强简化感知。

4. 纯粹交流

QQ的等级体验(yan)符合部分年轻人的攀比需求，但在某些场景（如办公，学习等），等(deng)级可能会对沟通带来一定的压力与干扰。简洁模式仅保留纯粹的聊天信息，让用户感受更清爽无(wu)压(ya)力的交流。

5. 风格中性

简洁模式的界面(mian)设计(ji)风格更为中性，去个性化。设计细节的(de)优化，如(ru)分割线的处理(li)、灰色的运用、图(tu)标的形(xing)体等(deng)，都更为克制精简。整体视觉体验以黑白灰为(wei)主基调，辅助色点缀，高对比度，犹如容器一样(yang)呈现最具价值的内(nei)容和信息。

6. 简化图形(xing)

极(ji)简还体现(xian)在界面的图标语言，简洁模式图标延续QQ8.0风格的图标造型，在此基础上追求更(geng)极(ji)致的减法设计，我(wo)们通过提炼图标造型的轮(lun)廓，采用更精炼的细线图标，能(neng)少画一笔不多(duo)出一笔，细节之(zhi)处方显匠心。

7. 简洁模式设置路径

未来将增设多彩选择，喜欢简约(yue)风(feng)格的你绝对不容错过QQ简洁模式(shi)，欢迎多多体验。

QQ升级至8.1.0版本的用户，可以从抽屉进入设置页，点击进通用，开启简洁模式。

二、夜间模式

人眼可根据环境光做自动调节，在弱光环境下，人眼对明暗度的辨别更敏锐，对彩色的(de)感知度则更弱。同时(shi)人眼还有视觉惰性，晚上长时间使用手机，更容易觉得(de)眼花。

多数手机系统，主要通过环境光自动调节屏幕的亮度，以降低手机上的明暗对比，减少(shao)对眼睛的亮度刺激，同时普遍适用(yong)于不同类型的手机应用。

为了给用户提供更舒适的夜间体验，部分(fen)手机系统逐渐推出黑暗模式，一些应用还定制深度的夜间(jian)模式。

晚上是(shi)QQ用户活跃的(de)高峰期之一，针对夜间场景使用痛点以及业(ye)界的趋势。科技向(xiang)善，设计(ji)也应如此，因此QQ夜间模式体验定位(wei)希望是更护眼舒适的(de)，为用户提供更人性化体验，我们梳理出夜间模式的设计策略，并重新设计。

2. 护眼舒适

（1）降低对比度

夜间模式界面通过降低信息与背景的对比度，对图片/图标带色彩的通过使用遮罩，来达到减少对(dui)人眼刺激的目的，用(yong)户在夜间(jian)弱光环境中使用起来更柔和护眼。

降低信息与背景对比度能降低对人眼的刺激，我们分别(bie)从降低界面信息对比度和降低色彩明度入手，在不同背景下适配不同亮度的文字信息。通过黑暗环境人眼真机体验测试，又再经过多轮字色与背景对比度的优化，保证识别度的基础上，梳理出在全(quan)黑的环境下适合夜间(jian)在(zai)任何屏幕亮度均可使用的对(dui)比度，对(dui)比度控制在三个(ge)档位(wei)进行组合，不出现纯黑白对比。

（2）降低图(tu)像(xiang)与色彩的明度

界面信息还包括有色的图文与图形类，高纯度的色彩在深色背景下也(ye)容易造成人眼刺激与疲劳(lao)。此类(lei)信息我们通过使用遮罩来达到降低(di)明度目的的，在保(bao)持与系(xi)统色彩纯度的基础(chu)上，降低明度从而达到柔和护眼的效果(guo)。

（3）组件化

QQ夜间模式适配覆盖度很高，涉及界面也很多 ，我们梳理适配了夜间模式组件，同时也提升适配的效率。目前已适配核心路径场景的夜间体验(yan)，我(wo)们与开发同学紧锣密鼓在适配更(geng)多界面，随着适配的不断深入，给用(yong)户提供更完善舒适的夜间(jian)体验。

情(qing)感化设计

为了强化用户对夜间模式的认知，提升夜间场景用户的使用感受。我们运用了情感化的设计，从以下三个维度体现。

（1）主题背景

大面积黑色界面难免会些许单调冰冷，有别于手机系统与应用，QQ夜间模式保留前版本的(de)星空元素传承到新(xin)版设计(ji)中(zhong)， 夜间模式启动(dong)后，通(tong)过繁星点点的背景元素建立夜间环境关联(lian)。

（2）趣味图标

当(dang)用户开启夜间(jian)模式时，我(wo)们设定了彩蛋，发现个别图标会发生改变，变成带有夜间相关的图形语言，后续更新会增加更多趣味的图标(biao)。我们也(ye)希望通过带入趣味元素的表(biao)达(da)方式，建立用户对QQ夜间模式(shi)的好感。

（3）动效

使用(yong)切换操作时，加入适度的过渡动(dong)画，进一步强化(hua)用户对夜间(jian)模式的感知，用(yong)户可在抽屉页点击切换至夜间模式。

夜间模式体验路径，用户进(jin)入(ru)QQ后，通过右滑或点击一级界面左上角个人头(tou)像，进入抽屉页，点击左下方(fang)夜间图标即可切换至夜间模式。

除了简洁模式和夜间模式，未来QQ还会有更多专题设计的探索思考，通过挖掘使用场景为用(yong)户提供更多人(ren)性化好玩的服务。目前这两个模式均已(yi)上线，收到了不少反馈和建议，也请用户朋友们多多体(ti)验(yan)持续关注QQ的更新。