对于一款社交产，面最大的挑战许是来自竞争对手，而是随时间飞逝断进的互联环境。作为已诞生 20 年的 QQ，历了用户价，产品形态的反复探讨与争论，轮番过不同平台与设备的迁移与聚焦，迅速应当下并寻求用户利益化的方向 QQ 团队面临的难题。
用户的核行场景早已迁移到移动平台，随轻用户互联网的影响力逐提升，QQ 意加「娱乐化」属性产品功能，设体验的比重。既火爆一时的「坦白」，轻用户「处Q友」的「QQ扩列」，宣泄感的「轻互动」，也融合沿技体验的「QQ包」、「AR穿越」狂欢活动。了吸引轻用户的眼光，不断刷新酷炫的体验，升级规模的活动占据了版本规划的部分内。
过 6.0 与 7.0 版本的迭后，虽然亮点功能与节日运营能收获不少口碑，但从目标用户的反馈以及用户群体的迁移象看，QQ 也面临活跃用户群体收窄的危机。
避免「过度设」，「华不实」的负面反馈，意得先提升用户社交沟通场景的效性，降低界面里的噪声，减少冗余信息的骚扰，提高社交价信息的展示比例。
通讯与社交是户在 QQ 获得信息的核心场景，是冗余信息和过示的发场景。户接触信息的入口页面（消息列表）为例，旧版本通过分割线来区分信息个体，对于惜字如金的信息首要界面来说，标题与摘要已有足够辨识来区隔同的信息个体，分割线带来的容器感意义大，而群聊头像的组合方式，虽然规则拼接方式有利于升 5 人人数的辨识，但成了在视觉观感上的无序，从而使得整体页面增添了「噪声」。
因此在直观表现层面，即使改变大分的信息容，可通过消除信息容器感，规整信息样式的方式来降噪。而在逻辑层面的降噪，则要通过户场景来考量，过往对于推送给户的信息过于强调信息类，却忽略了户往往并需要过分注众多「特殊」信息的诉求，从而为户带来了骚扰，为此我们从消息推送的机制梳了多达十几种消息类的触发场景，并掉了一半上的特殊信息类的推送，削弱了大分特殊信息类的表现样式。对于户来说需要的并是更多「特别心」的强示，而应该是只有极数的强示才效升「特别心」的触达效率。
机的设意平台能「理解」用户对信息展示的意图，让用户把优质内效的对外展示。新版本相比旧版本能同样的区域内展示多效的社交内，例如资料卡调整布局结构能提升效信息页面占比，同时也根据用户设置封面图的比例数据，去掉千人一面的默认封面图，此节省的空间可以用户展示未丰富的社交内（例如用户传的短视频内）。同样对于抽屉页（侧导航栏）也去除默认封面图，并通过视觉样式（拉通全屏页面）与场动画（从左往右挤出）摈弃原本「浮层」的信息架构，稳的页面（全屏）能承载效的社交信息，从把「抽屉导航」提升与「消息」「联系人」「动态」信息架构平级的「我的」页面，后续规划丰富的社交与性能力提供具扩展性的信息框架。
因此信息框架不只减法，通过设把冗余信息转移并替换利核通讯与关系链社交的信息能力。
与追求自我解的学科不同，机的设具备序精致感的特征，也表了理性、自律、严谨的底层设原则。《道德》言：合抱之木于毫末，层之台起于累土，千里之行始于足下。这些毫末细微的，不被人留意的底层规则，恰恰支撑 QQ8.0 的根基。
1. 有序可依的栅格系统
栅格系统义了一套底层的、统一的测单，当设团队内对此达共识时，可以避免因屏幕配、比例换算产的半素偏移，配多种屏幕，提升精致细腻程度，同时保证了设稿件中元素属性的一致性规范化，并效降低设师的决策本，提高不同设师之间的协同效率。
在 QQ8.0 的设计中，我们定义了一个单位为 8px 的软栅格系统： 8px 为单位来规范元素的尺寸与间距。
对安卓来说，安卓的 mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi 等各个分辨率，能被 8px 整除。符合 Google Material Design 对栅系统的定义：所有元素的尺寸与间距与 4dp（8px）的基准网严对齐，也就是说，将界面切割成 8px*8px 的网，所有元素的边缘和间距严地落在网边上。但对 iOS 而言，主流机型 750*1334px，828*1472px、750*1624px 等不能被 8px 整除，因此 QQ 设计团采取软栅的方法：在设计程中，证元素的尺寸是 8px 的倍数，证元素与元素之间的相对距离为 8px 的倍数即。
当 QQ 设计团对套 8px 栅系统达成共识，界面设计获得有力的决策依据，得以迅速而规范地开展。
2. 更有规律的字号应用场景
字体与字号是设计中的重要一环。在 QQ8.0 的设计中，QQ 设计团队重调整体字号，并减了字号种类，梳了字号阶梯。
根据研报告，QQ 的年轻用户使用小屏、非面屏手机依占据主流，因此对单屏的信息容载量是非常敏感的。在 QQ8.0 的设计中，我们将主字号从 36px 降低为 34px，提高页面的容载量，对小屏手机更加。此外，QQ 设计团重新梳理字号阶梯，将字号从往的 8 种减少至 4 种，在每个页面出现的字号在 3 种以内，使信息的呈现更有规律，帮助用户更快地定位到有效信息。
3. 整齐一致的转场动效
万物复苏一致向阳而生的场景是人类对大自然生机盎然的直观感受，我们把有序和一致的体验纳入到贯穿任务路径的转场效。对于页面之间的转场效，见有从左往右，从上到和全屏缩放的模式，过旧版本对这种效的使场景没有严格的界定，原因在于 QQ 作为平台供的功入口及耦合的任务系较复杂，导致缺乏一致性的转场效无法为户带来有预期的交互反馈。为此，团队重规范页面效的使场景，将要功模的转场逻辑做了全面的梳。
横向切换，层级的深入与退
对于明确父子层级系的页面切换，使左右横滑的页面效，有助于层级结构的引导，户感知当跳转到同页面，并根据导航栏上的返指示，退到最初的页面。横向切换增强视觉阅读的延续性，户有明确的预期。
纵向滑动，启一分支任务
依于主任务径的分支任务（例：创建群聊、发送文件），则采用下滑动的页面动效，目的强调分支任务行的即时性，并且完分支任务之后，能行其它动作。另一方面，纵向滑动的运动轨迹较，易引起用户的注意力，让用户专注于当下的任务。
全屏缩放，强调内容来
于强预览能力入口打开（例：在聊天窗口查看图片、视频），使用全屏缩放页动效，能够增强从预览到内容完展示时过渡视觉张力。全屏缩放强调了内容展示路径来，也有利于造全屏浏览沉浸感。
「在沟通」是 QQ 最早的号，也是希望用户能在 QQ 聊的过程中获得快，但只是为此而不断堆砌娱化的功能和夸张而缺乏条理的计，只会激发用户的审美疲劳增添体验的沉重，所以需要剖析「在QQ聊获得快」的本质，「」应该是用户发内心产生的认同好。用户在高效便捷使用 QQ ，也不必过于严肃生硬，在适当的机能发现会心一笑的幽默，不响主线任的体验过程中能遇惊喜，在进行沟通或社交的候能轻无忧，让用户觉 QQ 是一个充观正能量的朋友，也就是让用户能知 QQ 的活力朝气，从而于在 QQ 进行聊社交。
队重新思考消息传递环节的体验，希望能通过更生动的方式透传消息所附带的情。最近人类本能的息传递方式是语音消息，发现用户对语音暂停，进度拖拽，音频预览有烈的诉求，为了拉开竞品语音消息的差距，需要为声音进行可视化计，让用户能在视觉和触控上直观受语音消息的生动表现。
音频预览声纹样设计也是波三折，设计师起初尝试十几样，经过实现成本、性能条件、晰表意和视觉美观权衡后，最终筛选出个适合新版本案。
而当内测版本按计式实现后，却发现真实的声音息并不能还出计稿所呈现的优雅效果，因为真实环下的复杂音效实际语速间隔所带来的声纹变化在体量偏的消息气泡只能有损展示，从而导致要出现断崖式的变化，要缺乏变化的持式，也不能达通过声纹来展示声音预览的效果。
为此品，设计与开发团队针音量峰值与变化规律做了大量模拟测试，最终采用算法优化来贴近设计期望效，于音量变化持平场景，做了声纹浮动算法，以确保声纹有节奏变化；于断崖变化场景，做了声纹补过渡，拟合出更优雅曲线效。
语音泡在体验上解决了进度拖拽困难，主题泡适配等难题，更多关于语音泡设计细节与故事可阅读《129夸奖QQ语音进度条，是如何设计出来？》细细品味。
图标是用户在 QQ 上最先触的图形息，也是最能直观表达产品调性和计度的符号，基于生机的理念，计队重新思考图标在本能（美观），行为（达）和反思（值得回味）层面的象表现。例如旧版的「面对面传输文件」图标，独展示只能传递「文件」的概念，但忽略了面对面快传的核心在于「快」，因此重新计的图标融了「纸飞机」「闪」表，着重表达传送迅速的概念；旧版的「个性装扮」图标在造型上容易产生曲解，而新图标则从字面「装扮」的含义切入，计成年轻人爱穿的T恤造型。
乎所有图标都经过重新计，也有为图标融入来源生活、流行文化的素，让整套图标不会过于系统化拘谨，从而增添一轻幽默。
在用户图形界面中，用户接触到最的颜不只是品牌，而是黑、灰和白，也是很重要但又容易被设计师忽略的灰阶系。往的设计中，常常使用纯黑（#000000）、中黑（#333333）、纯白（#FFFFFF）个组合，但在纯白的背中叠加纯黑的文字，对比度高，黑强势地压页面中其他元素。人类所感的彩来自大自，而大自中并没有纯正的黑和白，我们所见的黑是深灰，因为光的缘故，境还为其着上各种。基个原理，我们在纯黑、灰的基础上，加适当的蓝进行和，达到深蓝黑的效果。中和蓝的黑与灰组合来，赋予页面柔和、温润的属，也让 QQ 的灰阶不么生硬，而略带生机。
色彩系统的刷，着更明，多彩的方向调试，重梳色彩应的场景，色更有规律。
随色彩的整体新，新版本 QQ 也了一胆的试──设多彩且细节质感的图标。虽然扁平化的图标设已流行数，但 QQ 对部分图标行颠覆式的设并非只追求表面的花哨，了让用户喜欢去试图标所表的功能。因此精致多彩质感的样式应用聊天窗口「加面板」里的图标，我们认对于藏「加面板」的功能（送礼、厘米秀、轻互动）也同样用户提供丰富多彩的沟通与社交能力，希望用户点击「加面板」时，能第一眼看到还很多可以用户传递信息表达感的方式，也向用户暗示这些精致图标所表的趣丰富的功能。
类不是 AI，类具有情感。我们在使用 QQ 时，会有多元化情感，或喜或悲，或怒或乐。QQ，是用户情感见证，是用户情感容。此，QQ 设计团队自己提了个脑洞问题，「用户在使用 QQ 接收到不消息时，会有怎样不心情？」我们希望将用户下那刻情感刻画和表现出来，以作为用户情感见证。于是我们采了多场景，戏精灵魂在脑内小剧场演了遍又遍：
滴滴滴滴，QQ 接收到新消息：哇哦，有哪位小可爱在找我呢？
一打 QQ，发超过几十条未读：整人呆掉，哈？这帮人搞什么？
偷偷注着的那个人发来了 QQ 消息：哇！开心！
有人大红包：财，赶紧抢！让金钱蒙蔽我的双眼吧！
老在收作业而你还没做完：啊啊啊啊啊死了。
有在滔滔不绝：咦惹（白眼），这个有完没完？
我们将这些不情感设计成不表情，植入到消息列表图标，作为个小蛋，希冀他们与用户不期而遇，能够为用户带来些欢乐。
过图标、基础控件、色体系、信息框架等模块新设计，团队于 QQ8.0 设计理念也有了更深层理解，生不是为了刻意造强颜欢笑娱乐感，更希望用户在体验 QQ 过程所经历为过程，能获与心相映共情感。
这次改版涉及数十功能模块，刷新超过 200 页面，重绘了绝部分的图标，能不到一月内完这迭依赖于项目团队各角色的紧密合作与业务侧的通力合作，过程中设团队也历了内部与外部关于设风格调性的激烈讨论。QQ 作社交平台一方面需通用控件，图标体系，色彩系统到足够的严谨与普；另一方面又需充分考虑轻用户自我表达，感传递层次的性与乐趣，这也 QQ 后续版本所面临的挑战──权衡平台稳健与性表达的设。
版本式线后，团队也持续关注用户的反馈，很多中肯的意见也后续版本的优化提供了非常好的法，希望家继续保持对 QQ 的关注与，同时也敬请待 QQ 化多实用、趣的能力。
注「腾讯ISUX」的公众：
浙公网安备33011002017549号