腾讯实战案例!QQ 9 完整设计过程复盘

一、设计目标

作为一个拥有 25 年历史的社交产品,QQ 经历了不同世代的行业发展,一直初心不改,不断优化产品体验,为用户服务。发展至今,QQ 早已不再是一个简单的即时通讯工具,而是一个覆盖通讯、社区、短视频、元宇宙等多场景,并全面支持桌面端、平板端与移动端的多元化社交空间。在这个社交空间里,用户可以随时随地表达心情,可以天南海北地寻找搭子,也可以造个小窝实现猫狗双全。与此同时,横跨多端的平台支持、丰富多元的产品形态,也使得 QQ 的包袱日益繁重。因此,如何让 QQ 轻松上阵,走向下一个 25 年,是我们面临的巨大挑战。

面对这些挑战,QQ9 在设计理念上,一方面回归平台设计的普适性,建立多端一致、简洁轻量的设计语言,营造舒适轻盈的视觉美感;另一方面塑造多元社交空间的包容性,设计上兼容并包个性化、娱乐化和功能化,以满足多样化的用户和需求,让用户可以在 QQ 自由自在地打造多重人设,实现多元社交,轻松做自己。

往期腾讯改版案例:

二、冰雪之原 光华绚烂

QQ9 焕新设计灵感,自辽阔无垠的冰雪之原,於东方既白拂晓时,天地浑然一体,素然纯净。但这并非是终点,而是新的起点,我们希望,在纯净简洁的基础上,用户在不经意间便能感受到「光」带来的恰到好处的绚丽与精彩,温暖与关怀。

腾讯实战案例!QQ 9 完整设计过程复盘

腾讯实战案例!QQ 9 完整设计过程复盘

QQ9 的精妙之处恰恰在于纯净简洁的背后,潜藏着丰富与绚丽,等待着用户探索并发现,而非一开始就用花哨的色彩和元素抢占用户的注意力。

设计上利用绚烂多彩、幻化无穷的光影来造就 QQ9 这种隐藏体验,例如用户在刷新、加载、loading 时,绚丽流动的色彩会在纯净简洁的界面上出现。在用户使用 QQ9 的过程中,每一次绚丽多彩、充满期待的表达都会刚好与用户的情绪落点相吻合,每一次流动的色彩都是随机变化带来的新鲜和愉悦,给予强烈的隐喻表达,预示着全新的内容,新鲜的资讯,焕新的感官体验。

腾讯实战案例!QQ 9 完整设计过程复盘

腾讯实战案例!QQ 9 完整设计过程复盘

腾讯实战案例!QQ 9 完整设计过程复盘

三、普适包容 回归本源

QQ9 的图标设计,回归平台普适的本质,更加简洁轻量,能够满足多端、多平台、多场景的设计需求,为 QQ9 带来轻松愉悦的体验。同时发挥图标的实用性,降低认知门槛。如全局设置页面,在表单组件中增加了图标识别辅助,降低用户信息阅读成本,通过图形识别可以更便捷的分门别类。同时精简后的空白页视觉设计更加清晰易懂,通过简洁、直接的图形表达,引导用户快捷地完成操作,减轻用户的认知负担。

腾讯实战案例!QQ 9 完整设计过程复盘

四、信息分层 重建秩序

为了创造更有秩序的视觉体验,设计重新梳理了基础场景中所有功能层级,通过提高颜色对比度,帮助用户更轻松地理解信息层次,使内容更加突出,确保日夜间都能维持一致的层级,避免造成混乱,使信息呈现上更加有序。

腾讯实战案例!QQ 9 完整设计过程复盘

用户浏览内容的过程中,习惯于将空间位置接近的内容归为一组,称之为“格式塔原理”。在界面中我们借助格式塔原理进行分组展示,使页面布局更加合理清晰,让用户能够快速识别,比如设置页面,如果将功能入口分散展示,在使用过程中就会容易失焦,而通过近似性将内容分成账号信息、软件功能、增值功能、个人信息收集进行聚合分组,就可以很直观的降低认知负担。

腾讯实战案例!QQ 9 完整设计过程复盘

在信息的浏览顺序上也重新调整了内容优先级,以符合用户关注信息的角度出发,对内容进行进行重新排布,区分元素的主次。

腾讯实战案例!QQ 9 完整设计过程复盘

QQ9 中对空间说说流我们重新规划信息层级并进行了降噪。首先为了突出说说正文内容,减小了点赞区和评论区的色彩和字号。用轻量的线性图标取代了原有的厚重的图标。图片由原来的通栏展示改为卡片展示,增加了页面呼吸感减少用户浏览时的视觉负担。

腾讯实战案例!QQ 9 完整设计过程复盘

五、密友关系 轻松社交

过去,QQ 好友的维系和沟通主要依赖于公开圈子、特别关心和消息活跃来维持关系。然而,随着社交方式的改变,年轻人更倾向于短暂但快速地满足特定需求的"小社交",以减轻社交压力。基于这种社交趋势,QQ9 进行了全新的设计升级——引入了"搭子关系"的概念。在搭子关系中,用户可以建立现有的亲密关系,也可以互为搭子,一同参与学习、运动、游戏等活动。这种关系既保持了清晰的边界感,又以轻松的姿态开启一段互相陪伴的关系。通过这一改进,我们希望减轻用户的社交压力,为用户创造更加丰富、轻松和愉快的社交体验。

腾讯实战案例!QQ 9 完整设计过程复盘

除了聊天页面外,空间也针对亲密关系用户推出了亲密空间-两人的专属小空间。在这里你可以发说说,存相册。你和好友在生活中值得记录的美好时刻,值得纪念的关键时间都可以存储在这里。同时我们也为喜欢“收集”的年轻人准备了丰富的贴纸,更多的记录你们的情谊就可以获得更多的贴纸,有你陪伴的每一天都值得被记录。

腾讯实战案例!QQ 9 完整设计过程复盘

六、在线状态 自由定义

全新状态面板能够容纳更多状态展示,UI 布局更加轻盈简洁。引入了多彩的状态背景色体系,营造出不同状态下独特的视觉情感氛围。同时 QQ9 我们更进一步,增添了超秀形象的状态功能,让用户能够生动有趣地展现当下状态,使状态表现更加丰富多彩。这些升级将为用户带来更为丰富生动的状态展示,让用户能够以更具个性化的方式展示自己的情感和状态。

腾讯实战案例!QQ 9 完整设计过程复盘

腾讯实战案例!QQ 9 完整设计过程复盘

七、全新表情 新潮有梗

QQ 表情经历了长达 7 年的不断演变后,终于 QQ9 中迎来了一次全新升级。这次的更新不仅仅是技术上的进步,更是对用户需求深刻倾听的结果。在外观设计上更加精致,融入了时下流行元素,每一个细节都经过精心雕琢,使表情更具辨识度和潮流性。同时,QQ9 表情不仅注重外观,更注重内涵。巧妙地融入时尚和幽默感的设计,为用户提供了更多表达情感和共鸣的可能性。在这个数字化时代,表情不再只是简单的符号,而是一种用户表达自我的语言。QQ9 表情期望融入用户日常喜爱的表达方式,以更潮更有梗的形式,让用户轻松表达自己,释放更多的笑容和愉悦。

腾讯实战案例!QQ 9 完整设计过程复盘

在 QQ9 表情上新计划中,表情设计团队研究并融入了更多网络热梗元素(尊嘟假嘟,坚强,功德+1 ...)让用户在表达情感时有更加丰富的语境和更加流行的表达。快来 QQ9 中尽情挖掘这些新表情为聊天带来的乐趣吧!

腾讯实战案例!QQ 9 完整设计过程复盘

八、多端一致 无界体验

多年发展下来,QQ 移动端和桌面端的设计体验渐行渐远,甚至同为桌面端的 Windows、Mac、Linux 三个版本设计都迥然不同,由此带来的体验问题与研发问题也日益尖锐。为此,设计团队围绕着 QQ9 建立起一套全面覆盖移动端、桌面端、平板端的设计语言。

布局设计上,全新的 QQ 桌面版将旧版分离的主面板和会话面板进行整合,采用了更符合当前用户习惯的大面板布局。此举降低了信息架构的深度,页面布局更加清晰、更具拓展性,用户也可以根据需求自由缩放面板,或者吸附在屏幕边缘自动隐藏,灵活又方便。

视觉风格上,则对齐 QQ9 焕新设计进行全面刷新,一举荡涤桌面端陈旧繁杂、过时落后的气息,以轻量有力的图形、轻盈焕采的颜色、简洁有序的界面塑造了轻松愉悦的使用感受,与移动端保持一致的设计,也有效降低用户对 QQ 多端产品的认知成本,提升 QQ 品牌感知。

此外,我们解决了多端功能不一致的痛点,包括聊天与文件存储管理、功能丰富的 QQ 状态、发送 QQ 超级表情等。这次 QQ 桌面版的重新设计,将为平台品质与未来发展奠定良好的基础,同时也让 QQ 团队有了重新审视产品的契机,下架繁杂无用的功能与服务,摆脱过往的沉重包袱,让 QQ 桌面版焕发出新的生命力。

腾讯实战案例!QQ 9 完整设计过程复盘

腾讯实战案例!QQ 9 完整设计过程复盘

五、平等亲近 为你设计

QQ 一直鼓励用户深入探索,希望用户自行发现 QQ 世界中的惊喜与快乐。此前在 QQ8.0 版本中,我们曾在底部导航的图标上进行了类似的尝试。而在 QQ9 的设计上,我们延续了这种理念。在 QQ9 的“关于 QQ”界面上,我们埋藏了一个小小的惊喜,用户通过探索即可获得特别的壁纸,欢迎大家前往体验!

腾讯实战案例!QQ 9 完整设计过程复盘

此外,QQ 也一向珍视用户的意见和建议,这些闪光的想法为设计团队提供了宝贵的灵感。因此,QQ9 特意建设了一个名为“QQ 追光者”的功能,用户通过该功能进行反馈,昵称将呈现在昵称墙上,并获得一枚特别的勋章,这是 QQ 对用户真诚支持和贡献的感谢。“QQ 追光者”这一命名,寄托了 QQ 希望与用户一同前行,寻找未来无限可能的愿景。这里不仅仅是一个反馈平台,更是一个与用户平等交流、共创共建的空间。

腾讯实战案例!QQ 9 完整设计过程复盘

六、官网改版 引人入胜

随着 QQ9 正式发布,QQ 的官网(im.qq.com)也随之迎来更新。官网的设计理念围绕着“轻松做自己“进行视觉传达我们通过“轻·透·彩”的品牌语言来贯穿官网视觉与使用体验,轻盈柔和的色彩,加上灵动轻巧的动画转场,使官网体验上更轻松愉悦。与 QQ9 的多端适配一样,官网设计也进行了自适应适配,能够在桌面端和移动端为用户提供同样极致的阅读感受,引导用户通过官网下载体验 QQ9,达到引人入胜的效果。欢迎大家点击 im.qq.com 进行访问,更多全新体验和玩法等着你来探索~

腾讯实战案例!QQ 9 完整设计过程复盘

QQ9 宣传视频,创意与设计概念

当视频无法加载时请刷新页面,
或前往PC获得最佳体验。

整体个宣传片,我们以一个问题 “内心的光要怎么展开?”为开场去开始。故事是以「光」的概念带观看者展开每一面社交的可能。以「光」的设计概念去打开多元化的社交,同时感受到整洁轻松。无论你的社交行为是什么,在 QQ9 可以为你找到那份光,轻松为你展开。不以品牌方的视角跟用户对话,整体的调性和文案我们如朋友的跟用户对话。

七、启动页闪屏

沿用宣传片里相同的「光」元素,唤醒大家对全新 QQ 版本的一种新鲜与轻松感。

散发现代氛围以及「光」背后充满诗意且多元的可能。以“欢迎来到 QQ9”的用户欢迎语,强化 QQ9 品牌认同感的同时,通过欢迎语促进用户社区感的建立。

腾讯实战案例!QQ 9 完整设计过程复盘

结语

无论是技术架构层面,或是体验设计层面,QQ 团队都致力于为用户打造轻松纯粹的社交体验。QQ9 焕新设计,回归平台设计的普适性,建立了一致轻量、舒适轻松的视觉美感;同时塑造了多元社交空间的包容性,让用户可以在 QQ 自由打造多重人设,轻松做自己。QQ 走向下一个 25 年的道路依然充满挑战,但我们已然迈出了重要的一步。

QQ9 焕新风格,现已全新上线。期待大家更新体验,也欢迎大家前往设置-关于-QQ 追光者页面反馈建议和意见。QQ 愿意与大家携手共创,彼此启发,不断追光,向前而行。

欢迎关注作者微信公众号:「腾讯ISUX」

腾讯实战案例!QQ 9 完整设计过程复盘

收藏 90
点赞 72

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。