大廠實戰案例！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」