大厂实战案例！QQ运动是如何做好界面设计的？

推荐阅读

随着科技与人们日常生活的日益紧密关联，运动生活也逐渐离不开运动手环、手表以及运动应用。许多人的智能手机中都安装了各种运动类应用，这些应用涵盖了从日常轻松的营养记录到硬核的无氧训练动作指导等各种功能。不同的运动产品在设计风格上各具特色，本文将对运动产品的设计风格进行分析，并探讨其在硬核及轻松等场景中的不同应用。通过这些产品的设计，我们也能感受到视觉设计对于产品调性的影响和作用。

在 2023 年初，我们进行了产品定位的重新调整。与以往专注于专业运动人群的定位不同，我们决定融入全民运动的潮流，与 KEEP、Nike Running Club 等运动类产品有所区别。这次改版的目标是吸引更喜欢轻松运动的学生用户群体。因此，我们旨在创造更轻松自在的运动体验，将产品的定位调整为更符合日常运动场景的特点。

一、营造轻松的品牌感知

1. 配色设定

运动产品的定位与视觉效果密切相关。首先，在 UI 层面的配色方面，我们观察到一个现象。对于硬核类型的运动产品，其通常会选择深色背景，以传达出专业可靠的感觉。这种设计搭配高饱和度的色彩，用以点缀内容。一般而言，这类产品会根据其定位在不同的运动类型中定义相应的运动数据和指标。这种设计更加吸引那些对各项运动指标有迫切需求的专业用户。

相反，以 QQ 运动、Keep 为主的日常锻炼场景为主的产品，更倾向于采用浅色调，并用轻松的品牌色进行点缀。这种设计更加注重整体配色中的通透感和产品的品牌感知。这样的设计更适合那些日常运动中不太关注专业指标的普通用户。在这种场景下，产品的外观更注重轻松、活泼的氛围，与日常生活更为契合。

QQ 运动的品牌色一直是跟随 QQ 品牌的 QQ 蓝，蓝色意味着稳定，安全，在本次再设计上，我们目标向用户传递更轻松的视觉感受。于是，这次品牌升级，我们并没有大刀阔斧的进行 logo 重绘，而是重新定义了专属 QQ 运动的品牌色---以黄绿色为主色，以紫色,橙色，灰色为辅助色。颠覆 QQ 运动以太过稳重的品牌印象。

2. 字体设定

在品牌字体的选择方面，考虑到 QQ 运动的主要用户群体为年轻学生，并且男女性别比例相对均衡，我们采取了一种与传统运动品牌不同的策略。相较于粗体字形所带来的厚重感，我们选择了一款更为轻松年轻化的手写字体，来更好地迎合我们的用户群体。这款字体被应用在一些 QQ 运动的运营场景中。通过这种选择，我们既确保了易读性，同时也更好地承接了新形象所需的整体氛围。这一策略旨在为品牌注入更加活泼、年轻的视觉元素，以更好地与目标用户建立共鸣。

3. 辅助图形

在前一版本的 QQ 运动品牌体系中，我们注意到品牌资产的辅助图形相对较为不足，几乎所有的辅助图形都是由 LOGO 延伸而来的。为了改进这一状况，这次我们充分结合了 QQ 运动的功能，特别设计了全新的品牌辅助图形。

我们深入挖掘了 QQ 运动中最受欢迎的功能，包括「记步数」和「跑步」的运动轨迹。通过对每位用户的运动轨迹进行重新设计，我们定义了一种轻松、平面感的弯曲线条，成为 QQ 运动全新的辅助图形。这一设计不仅突显了品牌与运动的密切关系，同时也为品牌资产增添了独特而富有创意的元素。通过引入这样的辅助图形，我们旨在为 QQ 运动品牌赋予更加生动和具体的视觉表达，以更好地体现其特有的运动精神。

二、让人放轻松的设计元素

1. UI 设定

在运动玩法方面，我们首先对页面流量最大的版头入口进行了全新升级。以前，我们直接展示了运动步数功能，但为了使每天的运动数据更富有生命力，我们进行了改进。现在，我们用一个元素来量化消耗的步数，不再将每日的运动数据简单呈现为冰冷的一串数字。通过这一变化，每日消耗的热量更加直观可见，使用户更容易理解和感受。

此外，我们根据不同的热量消耗，从 0 步到 3000 步最低消耗一杯酸奶，一直到超过 18000 步最大消耗一顿麻辣火锅，规划了 6 种不同的食物。这一设计旨在使用户能够更生动地感受到他们的运动成果，同时也为品牌注入了轻松化的氛围。通过将运动数据与实际食物相联系，我们希望激发用户对运动的更大兴趣，使整个运动品牌更具有吸引力。

在规划食物材质时，我们进行了多次尝试，探索了不同的渲染风格。我们试过模仿美食摄影，追求接近真实的效果，也尝试过将食物拟人化呈现成卡通风格。然而，最终我们选择了一种哑光粘土的风格。这样的设计不会让食物看起来过于写实，并确保了页面风格依然是轻松跳跃的主调。

哑光粘土的风格为页面注入了一种独特的艺术感，使得食物更具有趣味性和亲和力。通过采用这一独特的渲染风格，我们旨在为用户提供更加轻松、愉悦的视觉体验，同时保持整体品牌的一致性。这种设计不仅使食物更突出，也强调了品牌在展现运动玩法时的独特而富有创意的一面。

在进行食物建模和渲染时，我们进行了多次尝试，特别注重在 QQ 运动中呈现的食物不要过于逼真，避免类似饭馆菜单照片那样过于真实的效果。我们的目标是让这些食物散发出一些轻松和幽默感。因此，我们选择了一种比较卡通感的渲染方式，并在模型上自然地融入了一些 QQ 和 QQ 运动的元素，比如汉堡胚上的 QQ 运动烙印，珍珠奶茶雪顶上的噗噗曲奇。

特别值得一提的是，当用户一天的消耗超过 18000 步时，运动首页将展示一锅冒着烟的鸳鸯锅，而筷子夹起来的是噗噗形态的丸子。这种创意的设计不仅为用户呈现了与运动相关的独特场景，同时也加强了品牌的趣味性。通过将 QQ 运动的元素融入食物渲染中，我们追求在用户体验中创造更为愉悦和有趣的感觉，使品牌更富有个性和吸引力。

最后我们辅以全新定义的 QQ 运动的线条，巧妙的穿插配合食物，拉开食物元素与页面信息的空间层级。最终，二维配合三维完成运动首页的进场动画的设计。

当还未记录到有效运动数据时，我们设计了一杯水的插图来代表此刻状态，用幽默的方式来鼓励用户动起来。除此之外，我们在版头的位置也规划了它的运营能力，希望在一些大型活动节日时，QQ 运动首页头部可以承载宣传媒介的作用。比如在每年 9 月初，我们会承接“腾讯 99 公益日”的宣传，接入小红花的形象 ip。此外后续我们也在头部位置制定设计规范，后续可以进行商业化延展。

最后，我们在维持原有的产品框架前提下，延续这种轻松的设计语言，完成了 QQ 运动各页面模块的整体升级。

在项目复盘中，我们明确了本次改版的设计目标，并从设计角度重新思考产品定位，注重轻松化的设计风格，让配色、字体、UI、动效，甚至文案等元素共同形成了相辅相成的整体。轻松化的设计风格是 QQ 运动在创新方面的尝试，而新版 QQ 运动上线后，我们不仅收到了大量正面的数据反馈，也发现了一些值得持续设计迭代的方面。

这次轻松化运动的设计思路与流程也不是版本迭代的终点，而是对于 QQ“轻松做自己”理念的持续演进。通过聆听用户声音并不断打磨产品细节，期望越来越多的用户能参与到健康运动，收获轻松与快乐。

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