編輯導讀：在產品的迭代升級過程中，改版設計是常常會遇到的問題。文章對QQ旗下的老牌運動產品——QQ運動的體驗升級改版進行了詳細的梳理，對遇到的一些問題進行了分析總結，供大家參考學習。

在這個全民健身的時代，越來越多的用戶開始頻繁使用運動APP，記錄自己的運動數據，分享個人的訓練動態(tài)。

QQ運動是QQ旗下的老牌運動產品，在上一版本中，由于過分依賴紅包福利體系，近一年逐漸呈現(xiàn)不健康的發(fā)展趨勢，需要尋找新的產品形態(tài)使產品重回正軌。因此，伴隨著市場、產品和用戶的持續(xù)更新，如何突破增長瓶頸，讓它在眾多同類產品中脫穎而出，鞏固自身競爭優(yōu)勢，是本次官網改版的主要課題。

01 用戶分析

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

首先，16-24歲這部分用戶表現(xiàn)出的行為是：

1. 認真運動，在跑步、健走這類運動基礎功能中占比很大；
2. 自我表現(xiàn)欲望強，關注排行榜，重度原創(chuàng)偏好比例高；
3. 社交活躍度高，體現(xiàn)在好友數量多，在空間和群中的行為十分活躍；其次，40-60歲這部分用戶大盤穩(wěn)定，專注于與利益點有關的功能 ，如獎金賽、打卡領紅包等。

02 差異化定位

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

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

03 體驗洞察

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

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

04 設計執(zhí)行

1. 設計方法

QQ運動產品設計強調規(guī)范、一致、細節(jié)嚴謹的設計原則。首先，設計師既要考慮穩(wěn)定的用戶群體，又要考慮不同模塊之間的統(tǒng)一性，還要保證不同設計師的輸出一致，以及數據帶來的波動；強調細節(jié)嚴謹，是因為用戶量龐大，而且已經養(yǎng)成固定的行為習慣，并且運動功能相對已完善。面對上述現(xiàn)狀，設計師就需要采用更規(guī)?；⒕毣脑O計策略。

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

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

2. 品牌設計

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

3. UI設計

（1）優(yōu)化首頁布局，聚焦核心功能

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

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

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

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

（2）優(yōu)化運動記錄，提升使用體驗

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

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

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

（3）優(yōu)化計步詳情，增強用戶粘性

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

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

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

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

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

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

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

05 項目總結

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

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

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

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

本文由 @騰訊ISUX 原創(chuàng)發(fā)布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協(xié)議。