2017-1-1 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
導(dǎo)語
沒想到吧，你竟然可以通過企鵝FM來跑步？為什么在電臺(tái)App要深度挖掘一個(gè)運(yùn)動(dòng)場景，交互設(shè)計(jì)師又是如何將痛點(diǎn)和需求轉(zhuǎn)化為市場藍(lán)海，在設(shè)計(jì)的過程中怎樣將場景垂直的特色表現(xiàn)出來······關(guān)于這些，我有一些想法與大家分享。
企鵝FM3.1上線了“跑步聽”，我們內(nèi)部都把它叫做“跑步電臺(tái)”。跑步電臺(tái)有獨(dú)立入口，里面是企鵝FM聯(lián)合專業(yè)運(yùn)動(dòng)主播精心準(zhǔn)備的跑步節(jié)目，最大的特色在于：跑步電臺(tái)會(huì)計(jì)算用戶的實(shí)際跑步步頻與節(jié)目目標(biāo)步頻之間的匹配度，來進(jìn)行智能提醒，從而陪伴用戶科學(xué)而輕松的跑步。
這是我們在規(guī)劃這個(gè)產(chǎn)品功能時(shí)的第一個(gè)問題。即使在音樂類軟件都已經(jīng)上線了跑步相關(guān)功能的當(dāng)下，我們依然發(fā)問——真的有人，通過電臺(tái)App來跑步嗎？
如果僅僅是針對現(xiàn)在電臺(tái)類App，那需求一定是微乎其微，不同于音樂統(tǒng)一的內(nèi)容屬性，電臺(tái)類內(nèi)容屬性太豐富——音樂時(shí)間短，小說時(shí)間長；相聲很搞笑，新聞很嚴(yán)肅······這些內(nèi)容決定了他們天然就不能像音樂一樣隨機(jī)重組。
有時(shí)候我們需要退一步來思考需求。
產(chǎn)品經(jīng)理提出這種需求的初衷是什么——最初產(chǎn)品經(jīng)理的出發(fā)點(diǎn)其實(shí)是怎樣針對場景重組內(nèi)容，讓優(yōu)質(zhì)的節(jié)目得到更多的曝光，讓用戶可以對某一個(gè)功能入口產(chǎn)生粘性。所以這個(gè)需求的出發(fā)點(diǎn)更多是對于業(yè)務(wù)的一種探索。
而之所以選擇跑步這個(gè)場景，跟現(xiàn)在社會(huì)上健身這個(gè)“勢”是分不開的。健身儼然已是全面風(fēng)潮，約跑、曬跑成為了朋友圈一道新風(fēng)景線。據(jù)說2017年中國馬拉松將超500場，比2011年的22場呈井噴之勢。另一方面智能手機(jī)的定位和記錄體能指數(shù)功能，是能讓場景閉環(huán)的基礎(chǔ)。
回到跑步電臺(tái)這個(gè)需求本身，跑步電臺(tái)應(yīng)該是推薦優(yōu)質(zhì)的跑步類內(nèi)容的整合，本質(zhì)上還是用來服務(wù)于電臺(tái)節(jié)目的。這些內(nèi)容指向的目標(biāo)用戶也是相對明確的：想要科學(xué)合理地跑步的跑者，偶爾跑步的小白用戶。
所謂知己知彼，百戰(zhàn)不殆。我們向內(nèi)尋求需求的本質(zhì)，向外應(yīng)該去關(guān)注整個(gè)市場的競品，從而形成自己的“藍(lán)海戰(zhàn)略”——一條基于用戶痛點(diǎn)尋求差異化創(chuàng)新突圍之路。
我們尋找了許多競品，現(xiàn)有市場落腳在三種內(nèi)容形態(tài)上：1、專業(yè)健身指導(dǎo)課程（綠色），2、專業(yè)跑步記錄軟件（橙色），3、運(yùn)動(dòng)場景的音樂推送（藍(lán)色）。
當(dāng)我們以 x軸（專業(yè)—業(yè)余） 與 y軸（陪練—指導(dǎo)） 畫出產(chǎn)品機(jī)會(huì)定位圖，然后把這三類產(chǎn)品放進(jìn)去的時(shí)候，我們可以看到，在“業(yè)余+指導(dǎo)”的定位區(qū)間是明顯的市場缺口。再回看需求：推薦優(yōu)質(zhì)的跑步類內(nèi)容的整合，兩者內(nèi)外結(jié)合，我們可以這樣對產(chǎn)品進(jìn)行定義——
我們提供給用戶適合跑步時(shí)收聽的內(nèi)容，而不同于普通的跑步歌單，我們推出的是完整的有聲教程，能夠直接指導(dǎo)用戶科學(xué)的跑步，并且監(jiān)督用戶按照要求和目標(biāo)步頻來進(jìn)行運(yùn)動(dòng)。
針對這份產(chǎn)品定義，我們再去分門別類的定義產(chǎn)品功能：
1、內(nèi)容形式：以專輯的維度推薦。例如：某跑步課程為一個(gè)專輯，其中分三個(gè)節(jié)目（環(huán)節(jié)），前五分鐘慢，中十五分鐘快，后十分鐘慢。
2、提醒：當(dāng)你的步頻低于或者高于目標(biāo)步頻時(shí)針對步頻一次提醒，每公里針對跑步里程提醒。
3、計(jì)分：根據(jù)用戶實(shí)際跑步步頻與節(jié)目的目標(biāo)步頻之間的匹配度進(jìn)行計(jì)分。
跑步電臺(tái)是一個(gè)內(nèi)容與產(chǎn)品形態(tài)強(qiáng)相關(guān)的產(chǎn)品。在這種深度垂直場景的設(shè)計(jì)，我們的設(shè)計(jì)僅僅追隨內(nèi)容是不夠的，需要去有張力地表現(xiàn)內(nèi)容，讓目標(biāo)用戶快速了解到這是一個(gè)針對跑步的運(yùn)動(dòng)場景，激發(fā)他運(yùn)動(dòng)的欲望······為此我們設(shè)計(jì)了全新的專輯卡片、運(yùn)動(dòng)播放界面、運(yùn)動(dòng)成果頁和分享頁，支持運(yùn)動(dòng)狀態(tài)的語音提示。
1-落地頁／精品感與運(yùn)動(dòng)力
作為企鵝FM推出的第一個(gè)深度垂直功能，我們追求精品感+運(yùn)動(dòng)力，我們要讓用戶感受到運(yùn)動(dòng)電臺(tái)里的節(jié)目可靠而優(yōu)質(zhì)，進(jìn)而想要嘗試。左圖是原有app可以承載的產(chǎn)品形態(tài)，將信息拆分成右邊三類信息，我們再來重組。
怎樣去打造精品感？我們可以類比品的櫥窗，回想一下品的臨街櫥窗，一定不會(huì)像開架貨品一樣擠在一起，它會(huì)有高低錯(cuò)落的展臺(tái)，它會(huì)在展臺(tái)上打造許多細(xì)節(jié)。精品，是需要重點(diǎn)、層次和細(xì)節(jié)的。類比到我們的設(shè)計(jì)，我們采用卡片的形式，其實(shí)這并不是最高利用率的方案，但它讓用戶聚焦到我們最精品的內(nèi)容（重點(diǎn)）、給用戶探索的空間（層次）、圍繞卡片我們可以加入很多企鵝FM這個(gè)品牌獨(dú)有的元素（細(xì)節(jié)）。
PS：接下個(gè)版本中，我們希望加入更多動(dòng)感的元素，比如魔法色。
2-播放頁／針對動(dòng)態(tài)場景打造
我們的節(jié)目，有一個(gè)統(tǒng)一的衡量指標(biāo)，就是步頻，用戶的實(shí)際跑步步頻越是接近節(jié)目的節(jié)奏，那么用戶的得分越高。
我們拆分現(xiàn)有的播放頁，可以看到針對跑步這個(gè)動(dòng)態(tài)場景有的需要增加：步頻、步頻匹配度、目標(biāo)步頻、結(jié)束跑步、跑步的時(shí)間／距離／配速······而有的需要?jiǎng)h掉：評論、定時(shí)、列表、語速、音效······有的元素有的需要突出：步頻與步頻匹配度。
下圖前后對比可以看到，跑步電臺(tái)的播放界面有更多運(yùn)動(dòng)元素，更聚焦在步頻這個(gè)要素上，運(yùn)動(dòng)相關(guān)組件的重要級更高，更具針對性地運(yùn)用顏色?？梢韵胂笠幌?，用戶只要在跑步過程中看到最大的數(shù)字（107處）是金色就知道自己達(dá)標(biāo)了。
3-結(jié)束頁／讓用戶擁有成就感
雖然人人都知道運(yùn)動(dòng)對身體好，但這并不是一個(gè)輕松的活動(dòng)，我們希望用戶運(yùn)動(dòng)完之后我們能夠給他們成就感，激勵(lì)他們繼續(xù)投入到運(yùn)動(dòng)中去。這也是我們構(gòu)建更系統(tǒng)的激勵(lì)體系的基礎(chǔ)。
所以我們把用戶的跑步過程以可視化圖表的形式記錄下來，用戶可以真切地看到自己已經(jīng)完成的跑步。同樣的，我們希望用戶分享出去的時(shí)候也是一張可視化的圖表。而展示的卡片我們特意選擇了在社交平臺(tái)上展示效率最高的正方形。
企鵝FM的“跑步聽”功能從開始設(shè)計(jì)到上線只有一個(gè)月的時(shí)間，從最初大家懵懵懂懂抱著試試看的心態(tài)到真的對這個(gè)功能有信心，有一些思考希望與大家分享：
1、影子采訪（shadow use）在垂直場景的設(shè)計(jì)中極其重要。垂直場景針對的用戶和行為比較明確，定性研究相對定量研究更重要，我在設(shè)計(jì)過程中啟發(fā)我最多的就是shadow use，我潛入跑步的群和用戶一起跑步，看他們跑步過程中需要哪些功能，跑完之后什么樣的信息會(huì)給他們帶來成就感。如果是訪談?dòng)脩艨赡軙?huì)虛構(gòu)自己的需求和感受，而shadow use讓設(shè)計(jì)師得到的信息皆為真實(shí)。
2、在進(jìn)行卡片式模塊設(shè)計(jì)時(shí)，可以采用元素拆分并重構(gòu)組件的方法：就是把所有已有的+缺失的+需要的元素拆分出來，再根據(jù)現(xiàn)在的用戶需求重新搭建組件，然后再把組件放到模塊中去。
3、產(chǎn)品功能從0到1比從1到100難得多，從0到1我真的是兩眼一抹黑，但這個(gè)功能開發(fā)完成之后我們馬上就可以分門別類地提出許多優(yōu)化方案。設(shè)計(jì)師如果能夠多嘗試從0到1的設(shè)計(jì)過程，對于從1～100的設(shè)計(jì)有很大的幫助。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com
