在這個全民健身的時代，越來越多的用戶開始頻繁使用運動APP，記錄自己的運動數據，分享個人的訓練動態。QQ運動是QQ旗下的老牌運動產品，在上一版本中，由于過分依賴紅包福利體系，近一年逐漸呈現不健康的發展趨勢，需要尋找新的產品形態使產品重回正軌。因此，伴隨著市場、產品和用戶的持續更新，如何突破增長瓶頸，讓它在眾多同類產品中脫穎而出，鞏固自身競爭優勢，是本次官網改版的主要課題。

用戶分析

QQ運動植根于月活用戶高達數億的QQ。因此在改版之初，我們對大盤內的用戶進行了盤點，發現用戶群體呈現明顯的兩極化分布，以16-24歲和40-60歲這兩個年齡段為主。進一步對數據分析后發現，兩類用戶的行為也是截然不同的。首先，16-24歲這部分用戶表現出的行為是：

認真運動，在跑步、健走這類運動基礎功能中占比很大;

自我表現欲望強，關注排行榜，重度原創偏好比例高;

社交活躍度高，體現在好友數量多，在空間和群中的行為十分活躍;其次，40-60歲這部分用戶大盤穩定，專注于與利益點有關的功能 ，如獎金賽、打卡領紅包等。

差異化定位

鎖定有價值的目標群體后，再通過競品分析、用戶訪談和數據分析等方式探索產品的優勢。

從用戶行為看，16-24歲的群體更有益于產品的良性發展?；诖?，我們利用其愛運動、個性化、強社交的特點，引入運動秀，打造“運動秀”的產品定位;同時考慮到40-60歲群體專注利益的特點，輔以紅包和獎金賽等功能。

體驗洞察

明確產品定位后，我們要確定對應產品定位的可量化指標，即增長指標。以增長指標為抓手，更容易幫助我們得出與產品定位等價的設計方向。

QQ運動的改版項目以提高用戶活躍和留存為兩大增長指標，圍繞這兩大指標，我們制定了長線改版規劃。第一期改版，我們聚焦運動工具的優化，內容包括：優化官網首頁、跑步健走和計步詳情模塊。第二期改版將聚焦社交場景進行挖掘探索。

設計執行

1. 設計方法

QQ運動產品設計強調規范、一致、細節嚴謹的設計原則。首先，設計師既要考慮穩定的用戶群體，又要考慮不同模塊之間的統一性，還要保證不同設計師的輸出一致，以及數據帶來的波動;強調細節嚴謹，是因為用戶量龐大，而且已經養成固定的行為習慣，并且運動功能相對已完善。面對上述現狀，設計師就需要采用更規?；?、精細化的設計策略。

首先，QQ運動品牌形象在用戶心中位置已穩固，旗下的業務線也會不斷增加，為了避免業務和品牌關系混亂、體驗不一致的問題，設計師需要在現有品牌形象基礎上，進一步優化完善品牌系統;其次建立統一的UI組件。兩種內容貫徹至全業務線，形成設計規?；?。

其次，設計師合理使用設計技能，在圖形、顏色、字體、版式、動畫五種視覺語言中垂直打造體驗效果，保證設計的精細化程度。例如：在標準字體的基礎上建立運營字庫;在動畫方面，可以從反饋、功能、過渡、趣味、氛圍等多維度場景精細打造動畫效果等。

2. 品牌設計

設計師重新梳理了QQ運動品牌系統，為全業務線打造視覺骨架。其中包括標準logo、標準色、輔助色，標準字體、標準運營字體和輔助圖形。

3. UI設計

優化首頁布局，聚焦核心功能

重新梳理首頁的功能優先級。根據產品定位和改版目標，我們對運動工具這類高價值功能強化感知，對業務要求的banner營收模塊保證首屏容納，對利益點相關的輔助功能維持原狀，同時加強首頁賽事的運營能力，對低頻功能降優先級，對低價值功能收歸二級頁。

我們采用模塊化卡片的形式，將功能按優先級規劃布局。以一套模塊化卡片結構，承載“計步、跑步和健走”三種運動工具內容，這樣使信息有規律地整合并展示，降低用戶的理解成本，同時保證設計側的規范統一。

此外，卡片式結構在用戶行為引導上也有天然的優勢，用戶更容易下意識滑動卡片探索功能，增加之后的運動工具的曝光機會。

視覺設計方面，設計師把品牌色和輔助圖形沿用到UI界面中。為了增加運動的速度力量感，數字上采用粗壯傾斜的DIN英文字體，進度條使用熱量彩虹漸變色，整體強化運動專業性。

優化運動記錄，提升使用體驗

跑步是QQ運動目標用戶主要使用的核心功能，也是本次調整的重點內容之一。我們從用戶行為及使用場景的角度出發，對UI及動畫進行了優化。

跑步中的用戶很少立刻停下來操作APP，用戶在手機搖晃且可能比較累的狀態下誤觸概率可能增加。考慮到這一點，我們增強了觸碰后的反饋動效，以便讓運動中勞累的用戶更清晰的關注到自己有沒有誤觸界面。在一些關鍵功能設計上需要給用戶「反悔」的反應時間。例如結束跑步對于用戶是一個需要認真思考的決定，我們對不同功能的按鈕分別設計了“短按暫停跑步”和“長按結束跑步”兩種不同的操作方式。以防用戶因手出汗等等原因誤觸按鈕而導致提前結束記步。

考慮到用戶跑步以室外場景居多，在此次界面設計中，通過對色彩的重新規劃突出界面元素的視覺對比，同時強化QQ運動的品牌色。

優化計步詳情，增強用戶粘性

人們堅持運動，記錄自己的運動數據，一是為了提升現實自我;二是為了向他人展示更好的社會自我。在上一版設計中，計步詳情頁主要用于沉淀運動數據，幫助用戶關注現實自我的成長。在新版設計中，我們將原運動數據、打卡玩法、進階體系合三為一，期望通過強化與社會自我有關的功能來增強用戶粘性。

根據原運動數據、打卡玩法和進階體系三部分內容，首先確定需要在首頁呈現的關鍵信息。作為計步詳情的核心內容，對運動數據保留重要數據的展示，如今日步數、目標步數、距離和熱量等;打卡玩法主要用于驅動用戶長期堅持，因此需要展示歷史打卡情況和沉淀的高價值數據，包括打卡日歷和三個維度的打卡數據;進階體系主要為用戶明確目標感，并提供標榜社會自我的機會，該部分通過外顯打卡里程碑和步數段位達到目的。

基于上述關鍵信息，明確優先級并梳理信息架構。我們將計步詳情頁的內容分為三大模塊 — 打卡日歷、打卡數據和運動數據，并將兩個維度的進階體系穿插于對應的模塊中。同時在信息架構上突出與打卡玩法相關的功能的信息層級，期望通過引導用戶持續打卡，保持用戶活躍。

打卡日歷不僅用于展示歷史打卡情況，也作為運動數據的時間標尺，因此采用全局導航的形式承載日歷，既獨立存在，又用來切換展示不同日期的運動數據;之后，統一打卡數據模塊和運動數據模塊中內容的排布，并按改版目標確定兩個模塊的優先級排序。此外，將詳細的運動數據收歸二級頁，方便未來拓展設計維度更豐富的數據體系。新方案上線后，計步詳情頁留存率提升超過50%。

最終QQ運動一期完整設計稿概覽如下：

搭建UI組件，便于快捷管理

QQ運動隸屬于QQ體系，所以組件化建立過程中設計師需要對齊手機QQ8.0版本的設計原則和設計規范，在具體應用場景中添加符合自主品牌的相關元素。組件化管理有助于日常多人輸出的稿件統一。后續設計師也會根據新增的項目需要不斷更新迭代組件規范。

項目總結

新版官網上線后，首頁打卡功能的點擊率提升超過60%;首頁留存率提升近20% ;廣告cpm提升超過700% ;收入提升280% ;賽事點擊率提升近400%;DAU提升超過110%。

除此之外，設計師也進行了設計方法沉淀和總結，主要包括：

• 設計管理最重要的是項目底層邏輯，即產品設計思維。設計師要站在產品方向，針對不同時期的產品特點明確真實的設計目標，然后確定具體的設計指標，把設計量化。
• 大一統的品牌設計思維和“T”型設計執行法，適用于所有設計項目。設計師不但要掌握知識的廣度，也需要在知識的深度方面下功夫。因此，設計師需要不斷突破自身壁壘，不斷成長。
• UI組件化管理，有利于多人合作，提升工作效率。

總之，現在的互聯網設計越來越要求專業度，設計師不能只是扮演執行角色，更需要思維跳出設計本身，通過產品的視角，讓設計助力產品實現用戶體驗和商業變現的雙重價值，從而提升產品總價值。