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

用戶分析

QQ運(yùn)動(dòng)植根于月活用戶高達(dá)數(shù)億的QQ。因此在改版之初，我們對(duì)大盤內(nèi)的用戶進(jìn)行了盤點(diǎn)，發(fā)現(xiàn)用戶群體呈現(xiàn)明顯的兩極化分布，以16-24歲和40-60歲這兩個(gè)年齡段為主。進(jìn)一步對(duì)數(shù)據(jù)分析后發(fā)現(xiàn)，兩類用戶的行為也是截然不同的。首先，16-24歲這部分用戶表現(xiàn)出的行為是：

認(rèn)真運(yùn)動(dòng)，在跑步、健走這類運(yùn)動(dòng)基礎(chǔ)功能中占比很大;

自我表現(xiàn)欲望強(qiáng)，關(guān)注排行榜，重度原創(chuàng)偏好比例高;

社交活躍度高，體現(xiàn)在好友數(shù)量多，在空間和群中的行為十分活躍;其次，40-60歲這部分用戶大盤穩(wěn)定，專注于與利益點(diǎn)有關(guān)的功能 ，如獎(jiǎng)金賽、打卡領(lǐng)紅包等。

差異化定位

鎖定有價(jià)值的目標(biāo)群體后，再通過(guò)競(jìng)品分析、用戶訪談和數(shù)據(jù)分析等方式探索產(chǎn)品的優(yōu)勢(shì)。

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

體驗(yàn)洞察

明確產(chǎn)品定位后，我們要確定對(duì)應(yīng)產(chǎn)品定位的可量化指標(biāo)，即增長(zhǎng)指標(biāo)。以增長(zhǎng)指標(biāo)為抓手，更容易幫助我們得出與產(chǎn)品定位等價(jià)的設(shè)計(jì)方向。

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

設(shè)計(jì)執(zhí)行

1. 設(shè)計(jì)方法

QQ運(yùn)動(dòng)產(chǎn)品設(shè)計(jì)強(qiáng)調(diào)規(guī)范、一致、細(xì)節(jié)嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)原則。首先，設(shè)計(jì)師既要考慮穩(wěn)定的用戶群體，又要考慮不同模塊之間的統(tǒng)一性，還要保證不同設(shè)計(jì)師的輸出一致，以及數(shù)據(jù)帶來(lái)的波動(dòng);強(qiáng)調(diào)細(xì)節(jié)嚴(yán)謹(jǐn)，是因?yàn)橛脩袅魁嫶螅乙呀?jīng)養(yǎng)成固定的行為習(xí)慣，并且運(yùn)動(dòng)功能相對(duì)已完善。面對(duì)上述現(xiàn)狀，設(shè)計(jì)師就需要采用更規(guī)模化、精細(xì)化的設(shè)計(jì)策略。

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

其次，設(shè)計(jì)師合理使用設(shè)計(jì)技能，在圖形、顏色、字體、版式、動(dòng)畫五種視覺語(yǔ)言中垂直打造體驗(yàn)效果，保證設(shè)計(jì)的精細(xì)化程度。例如：在標(biāo)準(zhǔn)字體的基礎(chǔ)上建立運(yùn)營(yíng)字庫(kù);在動(dòng)畫方面，可以從反饋、功能、過(guò)渡、趣味、氛圍等多維度場(chǎng)景精細(xì)打造動(dòng)畫效果等。

2. 品牌設(shè)計(jì)

設(shè)計(jì)師重新梳理了QQ運(yùn)動(dòng)品牌系統(tǒng)，為全業(yè)務(wù)線打造視覺骨架。其中包括標(biāo)準(zhǔn)logo、標(biāo)準(zhǔn)色、輔助色，標(biāo)準(zhǔn)字體、標(biāo)準(zhǔn)運(yùn)營(yíng)字體和輔助圖形。

3. UI設(shè)計(jì)

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

重新梳理首頁(yè)的功能優(yōu)先級(jí)。根據(jù)產(chǎn)品定位和改版目標(biāo)，我們對(duì)運(yùn)動(dòng)工具這類高價(jià)值功能強(qiáng)化感知，對(duì)業(yè)務(wù)要求的banner營(yíng)收模塊保證首屏容納，對(duì)利益點(diǎn)相關(guān)的輔助功能維持原狀，同時(shí)加強(qiáng)首頁(yè)賽事的運(yùn)營(yíng)能力，對(duì)低頻功能降優(yōu)先級(jí)，對(duì)低價(jià)值功能收歸二級(jí)頁(yè)。

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

此外，卡片式結(jié)構(gòu)在用戶行為引導(dǎo)上也有天然的優(yōu)勢(shì)，用戶更容易下意識(shí)滑動(dòng)卡片探索功能，增加之后的運(yùn)動(dòng)工具的曝光機(jī)會(huì)。

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

優(yōu)化運(yùn)動(dòng)記錄，提升使用體驗(yàn)

跑步是QQ運(yùn)動(dòng)目標(biāo)用戶主要使用的核心功能，也是本次調(diào)整的重點(diǎn)內(nèi)容之一。我們從用戶行為及使用場(chǎng)景的角度出發(fā)，對(duì)UI及動(dòng)畫進(jìn)行了優(yōu)化。

跑步中的用戶很少立刻停下來(lái)操作APP，用戶在手機(jī)搖晃且可能比較累的狀態(tài)下誤觸概率可能增加。考慮到這一點(diǎn)，我們?cè)鰪?qiáng)了觸碰后的反饋動(dòng)效，以便讓運(yùn)動(dòng)中勞累的用戶更清晰的關(guān)注到自己有沒(méi)有誤觸界面。在一些關(guān)鍵功能設(shè)計(jì)上需要給用戶「反悔」的反應(yīng)時(shí)間。例如結(jié)束跑步對(duì)于用戶是一個(gè)需要認(rèn)真思考的決定，我們對(duì)不同功能的按鈕分別設(shè)計(jì)了“短按暫停跑步”和“長(zhǎng)按結(jié)束跑步”兩種不同的操作方式。以防用戶因手出汗等等原因誤觸按鈕而導(dǎo)致提前結(jié)束記步。

考慮到用戶跑步以室外場(chǎng)景居多，在此次界面設(shè)計(jì)中，通過(guò)對(duì)色彩的重新規(guī)劃突出界面元素的視覺對(duì)比，同時(shí)強(qiáng)化QQ運(yùn)動(dòng)的品牌色。

優(yōu)化計(jì)步詳情，增強(qiáng)用戶粘性

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

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

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

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

最終QQ運(yùn)動(dòng)一期完整設(shè)計(jì)稿概覽如下：

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

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

項(xiàng)目總結(jié)

新版官網(wǎng)上線后，首頁(yè)打卡功能的點(diǎn)擊率提升超過(guò)60%;首頁(yè)留存率提升近20% ;廣告cpm提升超過(guò)700% ;收入提升280% ;賽事點(diǎn)擊率提升近400%;DAU提升超過(guò)110%。

除此之外，設(shè)計(jì)師也進(jìn)行了設(shè)計(jì)方法沉淀和總結(jié)，主要包括：

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

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