讓運(yùn)動(dòng)樂在其中,設(shè)計(jì)可以這么做
現(xiàn)在,運(yùn)動(dòng)類應(yīng)用并不少見,那么,運(yùn)動(dòng)類應(yīng)用可以怎么設(shè)計(jì)?可以運(yùn)用哪些設(shè)計(jì)元素來搭建視覺設(shè)計(jì)風(fēng)格?這篇文章里,作者就結(jié)合實(shí)例做了分析和梳理,一起來看看吧。
隨著科技與人們?nèi)粘I畹娜找婢o密關(guān)聯(lián),運(yùn)動(dòng)生活也逐漸離不開運(yùn)動(dòng)手環(huán)、手表以及運(yùn)動(dòng)應(yīng)用。許多人的智能手機(jī)中都安裝了各種運(yùn)動(dòng)類應(yīng)用,這些應(yīng)用涵蓋了從日常輕松的營養(yǎng)記錄到硬核的無氧訓(xùn)練動(dòng)作指導(dǎo)等各種功能。不同的運(yùn)動(dòng)產(chǎn)品在設(shè)計(jì)風(fēng)格上各具特色,本文將對(duì)運(yùn)動(dòng)產(chǎn)品的設(shè)計(jì)風(fēng)格進(jìn)行分析,并探討其在硬核及輕松等場景中的不同應(yīng)用。通過這些產(chǎn)品的設(shè)計(jì),我們也能感受到視覺設(shè)計(jì)對(duì)于產(chǎn)品調(diào)性的影響和作用。
在2023年初,我們進(jìn)行了產(chǎn)品定位的重新調(diào)整。與以往專注于專業(yè)運(yùn)動(dòng)人群的定位不同,我們決定融入全民運(yùn)動(dòng)的潮流,與KEEP、Nike Running Club等運(yùn)動(dòng)類產(chǎn)品有所區(qū)別。
這次改版的目標(biāo)是吸引更喜歡輕松運(yùn)動(dòng)的學(xué)生用戶群體。因此,我們旨在創(chuàng)造更輕松自在的運(yùn)動(dòng)體驗(yàn),將產(chǎn)品的定位調(diào)整為更符合日常運(yùn)動(dòng)場景的特點(diǎn)。
一、營造輕松的品牌感知
1. 配色設(shè)定
運(yùn)動(dòng)產(chǎn)品的定位與視覺效果密切相關(guān)。首先,在UI層面的配色方面,我們觀察到一個(gè)現(xiàn)象。對(duì)于硬核類型的運(yùn)動(dòng)產(chǎn)品,其通常會(huì)選擇深色背景,以傳達(dá)出專業(yè)可靠的感覺。這種設(shè)計(jì)搭配高飽和度的色彩,用以點(diǎn)綴內(nèi)容。一般而言,這類產(chǎn)品會(huì)根據(jù)其定位在不同的運(yùn)動(dòng)類型中定義相應(yīng)的運(yùn)動(dòng)數(shù)據(jù)和指標(biāo)。這種設(shè)計(jì)更加吸引那些對(duì)各項(xiàng)運(yùn)動(dòng)指標(biāo)有迫切需求的專業(yè)用戶。
相反,以QQ運(yùn)動(dòng)、Keep為主的日常鍛煉場景為主的產(chǎn)品,更傾向于采用淺色調(diào),并用輕松的品牌色進(jìn)行點(diǎn)綴。這種設(shè)計(jì)更加注重整體配色中的通透感和產(chǎn)品的品牌感知。這樣的設(shè)計(jì)更適合那些日常運(yùn)動(dòng)中不太關(guān)注專業(yè)指標(biāo)的普通用戶。在這種場景下,產(chǎn)品的外觀更注重輕松、活潑的氛圍,與日常生活更為契合。
QQ運(yùn)動(dòng)的品牌色一直是跟隨QQ品牌的QQ藍(lán),藍(lán)色意味著穩(wěn)定,安全,在本次再設(shè)計(jì)上,我們目標(biāo)向用戶傳遞更輕松的視覺感受。于是,這次品牌升級(jí),我們并沒有大刀闊斧的進(jìn)行l(wèi)ogo重繪,而是重新定義了專屬Q(mào)Q運(yùn)動(dòng)的品牌色—以黃綠色為主色,以紫色,橙色,灰色為輔助色。顛覆QQ運(yùn)動(dòng)以太過穩(wěn)重的品牌印象。
2. 字體設(shè)定
在品牌字體的選擇方面,考慮到QQ運(yùn)動(dòng)的主要用戶群體為年輕學(xué)生,并且男女性別比例相對(duì)均衡,我們采取了一種與傳統(tǒng)運(yùn)動(dòng)品牌不同的策略。相較于粗體字形所帶來的厚重感,我們選擇了一款更為輕松年輕化的手寫字體,來更好地迎合我們的用戶群體。
這款字體被應(yīng)用在一些QQ運(yùn)動(dòng)的運(yùn)營場景中。通過這種選擇,我們既確保了易讀性,同時(shí)也更好地承接了新形象所需的整體氛圍。這一策略旨在為品牌注入更加活潑、年輕的視覺元素,以更好地與目標(biāo)用戶建立共鳴。
3. 輔助圖形
在前一版本的QQ運(yùn)動(dòng)品牌體系中,我們注意到品牌資產(chǎn)的輔助圖形相對(duì)較為不足,幾乎所有的輔助圖形都是由LOGO延伸而來的。為了改進(jìn)這一狀況,這次我們充分結(jié)合了QQ運(yùn)動(dòng)的功能,特別設(shè)計(jì)了全新的品牌輔助圖形。
我們深入挖掘了QQ運(yùn)動(dòng)中最受歡迎的功能,包括「記步數(shù)」和「跑步」的運(yùn)動(dòng)軌跡。通過對(duì)每位用戶的運(yùn)動(dòng)軌跡進(jìn)行重新設(shè)計(jì),我們定義了一種輕松、平面感的彎曲線條,成為QQ運(yùn)動(dòng)全新的輔助圖形。這一設(shè)計(jì)不僅突顯了品牌與運(yùn)動(dòng)的密切關(guān)系,同時(shí)也為品牌資產(chǎn)增添了獨(dú)特而富有創(chuàng)意的元素。通過引入這樣的輔助圖形,我們旨在為QQ運(yùn)動(dòng)品牌賦予更加生動(dòng)和具體的視覺表達(dá),以更好地體現(xiàn)其特有的運(yùn)動(dòng)精神。
二、讓人放輕松的設(shè)計(jì)元素
UI設(shè)定
在運(yùn)動(dòng)玩法方面,我們首先對(duì)頁面流量最大的版頭入口進(jìn)行了全新升級(jí)。以前,我們直接展示了運(yùn)動(dòng)步數(shù)功能,但為了使每天的運(yùn)動(dòng)數(shù)據(jù)更富有生命力,我們進(jìn)行了改進(jìn)?,F(xiàn)在,我們用一個(gè)元素來量化消耗的步數(shù),不再將每日的運(yùn)動(dòng)數(shù)據(jù)簡單呈現(xiàn)為冰冷的一串?dāng)?shù)字。通過這一變化,每日消耗的熱量更加直觀可見,使用戶更容易理解和感受。
此外,我們根據(jù)不同的熱量消耗,從0步到3000步最低消耗一杯酸奶,一直到超過18000步最大消耗一頓麻辣火鍋,規(guī)劃了6種不同的食物。這一設(shè)計(jì)旨在使用戶能夠更生動(dòng)地感受到他們的運(yùn)動(dòng)成果,同時(shí)也為品牌注入了輕松化的氛圍。通過將運(yùn)動(dòng)數(shù)據(jù)與實(shí)際食物相聯(lián)系,我們希望激發(fā)用戶對(duì)運(yùn)動(dòng)的更大興趣,使整個(gè)運(yùn)動(dòng)品牌更具有吸引力。
在規(guī)劃食物材質(zhì)時(shí),我們進(jìn)行了多次嘗試,探索了不同的渲染風(fēng)格。我們?cè)囘^模仿美食攝影,追求接近真實(shí)的效果,也嘗試過將食物擬人化呈現(xiàn)成卡通風(fēng)格。然而,最終我們選擇了一種啞光粘土的風(fēng)格。這樣的設(shè)計(jì)不會(huì)讓食物看起來過于寫實(shí),并確保了頁面風(fēng)格依然是輕松跳躍的主調(diào)。
啞光粘土的風(fēng)格為頁面注入了一種獨(dú)特的藝術(shù)感,使得食物更具有趣味性和親和力。通過采用這一獨(dú)特的渲染風(fēng)格,我們旨在為用戶提供更加輕松、愉悅的視覺體驗(yàn),同時(shí)保持整體品牌的一致性。這種設(shè)計(jì)不僅使食物更突出,也強(qiáng)調(diào)了品牌在展現(xiàn)運(yùn)動(dòng)玩法時(shí)的獨(dú)特而富有創(chuàng)意的一面。
在進(jìn)行食物建模和渲染時(shí),我們進(jìn)行了多次嘗試,特別注重在QQ運(yùn)動(dòng)中呈現(xiàn)的食物不要過于逼真,避免類似飯館菜單照片那樣過于真實(shí)的效果。我們的目標(biāo)是讓這些食物散發(fā)出一些輕松和幽默感。因此,我們選擇了一種比較卡通感的渲染方式,并在模型上自然地融入了一些QQ和QQ運(yùn)動(dòng)的元素,比如漢堡胚上的QQ運(yùn)動(dòng)烙印,珍珠奶茶雪頂上的噗噗曲奇。
特別值得一提的是,當(dāng)用戶一天的消耗超過18000步時(shí),運(yùn)動(dòng)首頁將展示一鍋冒著煙的鴛鴦鍋,而筷子夾起來的是噗噗形態(tài)的丸子。這種創(chuàng)意的設(shè)計(jì)不僅為用戶呈現(xiàn)了與運(yùn)動(dòng)相關(guān)的獨(dú)特場景,同時(shí)也加強(qiáng)了品牌的趣味性。通過將QQ運(yùn)動(dòng)的元素融入食物渲染中,我們追求在用戶體驗(yàn)中創(chuàng)造更為愉悅和有趣的感覺,使品牌更富有個(gè)性和吸引力。
最后我們輔以全新定義的QQ運(yùn)動(dòng)的線條,巧妙的穿插配合食物,拉開食物元素與頁面信息的空間層級(jí)。最終,二維配合三維完成運(yùn)動(dòng)首頁的進(jìn)場動(dòng)畫的設(shè)計(jì)。
當(dāng)還未記錄到有效運(yùn)動(dòng)數(shù)據(jù)時(shí),我們?cè)O(shè)計(jì)了一杯水的插圖來代表此刻狀態(tài),用幽默的方式來鼓勵(lì)用戶動(dòng)起來。除此之外,我們?cè)诎骖^的位置也規(guī)劃了它的運(yùn)營能力,希望在一些大型活動(dòng)節(jié)日時(shí),QQ運(yùn)動(dòng)首頁頭部可以承載宣傳媒介的作用。比如在每年9月初,我們會(huì)承接“騰訊99公益日”的宣傳,接入小紅花的形象ip。此外后續(xù)我們也在頭部位置制定設(shè)計(jì)規(guī)范,后續(xù)可以進(jìn)行商業(yè)化延展。
最后,我們?cè)诰S持原有的產(chǎn)品框架前提下,延續(xù)這種輕松的設(shè)計(jì)語言,完成了QQ運(yùn)動(dòng)各頁面模塊的整體升級(jí)。
在項(xiàng)目復(fù)盤中,我們明確了本次改版的設(shè)計(jì)目標(biāo),并從設(shè)計(jì)角度重新思考產(chǎn)品定位,注重輕松化的設(shè)計(jì)風(fēng)格,讓配色、字體、UI、動(dòng)效,甚至文案等元素共同形成了相輔相成的整體。輕松化的設(shè)計(jì)風(fēng)格是QQ運(yùn)動(dòng)在創(chuàng)新方面的嘗試,而新版QQ運(yùn)動(dòng)上線后,我們不僅收到了大量正面的數(shù)據(jù)反饋,也發(fā)現(xiàn)了一些值得持續(xù)設(shè)計(jì)迭代的方面。
這次輕松化運(yùn)動(dòng)的設(shè)計(jì)思路與流程也不是版本迭代的終點(diǎn),而是對(duì)于QQ“輕松做自己”理念的持續(xù)演進(jìn)。通過聆聽用戶聲音并不斷打磨產(chǎn)品細(xì)節(jié),期望越來越多的用戶能參與到健康運(yùn)動(dòng),收獲輕松與快樂。
作者:ISUX設(shè)計(jì)
來源公眾號(hào):騰訊ISUX(ID:tencent_isux),騰訊ISUX用戶體驗(yàn)與設(shè)計(jì)部。
本文由人人都是產(chǎn)品經(jīng)理合作媒體@騰訊ISUX 授權(quán)發(fā)布,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自 Unsplash,基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
- 目前還沒評(píng)論,等你發(fā)揮!