It is ultra experience

——————————

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

用戶分析

QQ運動植根于月活用戶高達數(shù)億的QQ。因此在改版之初，我們對大盤內(nèi)的用戶進行了盤點，發(fā)現(xiàn)用戶群體呈現(xiàn)明顯的兩極化分布，以16-24歲和40-60歲這兩個年齡段為主。進一步對數(shù)據(jù)分析后發(fā)現(xiàn)，兩類用戶的行為也是截然不同的。首先，16-24歲這部分用戶表現(xiàn)出的行為是：（1）認(rèn)真運動，在跑步、健走這類運動基礎(chǔ)功能中占比很大；（2）自我表現(xiàn)欲望強，關(guān)注排行榜，重度原創(chuàng)偏好比例高；（3）社交活躍度高，體現(xiàn)在好友數(shù)量多，在空間和群中的行為十分活躍；其次，40-60歲這部分用戶大盤穩(wěn)定，專注于與利益點有關(guān)的功能 ，如獎金賽、打卡領(lǐng)紅包等。

差異化定位

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

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

體驗洞察

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

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

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

1.設(shè)計方法

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

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

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

2.品牌設(shè)計

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

3.UI設(shè)計

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

項目總結(jié)

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

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

1. 設(shè)計管理最重要的是項目底層邏輯，即產(chǎn)品設(shè)計思維。設(shè)計師要站在產(chǎn)品方向，針對不同時期的產(chǎn)品特點明確真實的設(shè)計目標(biāo)，然后確定具體的設(shè)計指標(biāo)，把設(shè)計量化。

2. 大一統(tǒng)的品牌設(shè)計思維和“T”型設(shè)計執(zhí)行法，適用于所有設(shè)計項目。設(shè)計師不但要掌握知識的廣度，也需要在知識的深度方面下功夫。因此，設(shè)計師需要不斷突破自身壁壘，不斷成長。

3. UI組件化管理，有利于多人合作，提升工作效率。

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