Keep 的 UI 設(shè)計(jì)分析

11 評(píng)論 28967 瀏覽 172 收藏 14 分鐘

Keep的UI設(shè)計(jì)風(fēng)格跟其他的運(yùn)動(dòng)類(lèi)風(fēng)格有很明顯的差異,整體比較寧?kù)o淡雅,Keep為什么會(huì)選擇這種風(fēng)格?這種風(fēng)格的優(yōu)勢(shì)又在哪里?

前幾天,Keep 宣布用戶數(shù)破 2 億了。從 0 到 2 億,Keep 花了近 4 年半時(shí)間。

據(jù)《2018中國(guó)健身行業(yè)數(shù)據(jù)報(bào)告》顯示,中國(guó)有 4327萬(wàn)健身房人口,在總?cè)丝谥姓急?3.1%。也就是說(shuō),在中國(guó),每 100 個(gè)人當(dāng)中,有3個(gè)人去健身房;每7個(gè)人當(dāng)中,有1個(gè)人用 Keep。

上線于2015年2月的 Keep,以黑馬的姿態(tài)后來(lái)居上,成為明星產(chǎn)品;在健身類(lèi) App 中長(zhǎng)期霸屏第一,受到蘋(píng)果 CEO 庫(kù)克以及很多用戶的喜愛(ài),時(shí)不時(shí)的出沒(méi)于朋友圈,同時(shí)也是騰訊、高盛等熱門(mén)資本的寵兒。

作為 Keep 用戶,我簡(jiǎn)單的研究過(guò) Keep,結(jié)論是 Keep 是一個(gè)綜合發(fā)展的優(yōu)等生——價(jià)值觀、產(chǎn)品、設(shè)計(jì)、運(yùn)營(yíng)、品牌建設(shè)等方面都值得好好學(xué)習(xí)。

另外 Keep 和諸如騰訊、阿里、網(wǎng)易等傳統(tǒng)互聯(lián)網(wǎng)公司旗下的產(chǎn)品比較時(shí),又有很不一樣的地方,因?yàn)?Keep 身上有耐克、可口可樂(lè)這些非互聯(lián)網(wǎng)產(chǎn)品的影子,這也是很有意思的地方。同時(shí),Keep 在某些方面也存在一定提升空間,比如交互設(shè)計(jì),這個(gè)后面我也會(huì)單獨(dú)寫(xiě)篇文章。

今天主要和大家分享一下,我對(duì) Keep UI 設(shè)計(jì)(純視覺(jué)方面,基于 iOS v6.21)的研究與思考,偏宏觀,歡迎大家留言交流。

01 Keep的UI是什么樣的風(fēng)格?

簡(jiǎn)單來(lái)講,和大部分運(yùn)動(dòng)類(lèi) App 比,不太一樣;具體來(lái)講,Keep 的“運(yùn)動(dòng)感”比較輕,同時(shí)又給人一種淡雅寧?kù)o的感覺(jué),這種感覺(jué)會(huì)讓我想起星巴克的設(shè)計(jì)。

(Keep 主要界面)

大部分運(yùn)動(dòng)類(lèi) App,UI 方面,通常都是“運(yùn)動(dòng)感”比較強(qiáng):他們通常會(huì)大面積運(yùn)用醒目的黑色,彩色方面,通常會(huì)用比較亮、比較有活力的顏色,整體上突出的是力量感和活力感;配圖方面,也往往突出力量感和活力感,喜歡用一些充滿較強(qiáng)活力或者爆發(fā)力的圖片、或者是一些肌肉較兇的圖片,配上偏暗偏黑的深色背景、或者鮮艷有活力的彩色背景。

耐克就是很典型的例子,而且一直沿用著這種風(fēng)格。另外,耐克還有一點(diǎn)很不錯(cuò),就是除了這些,耐克還通過(guò)一些充滿笑容的圖片傳遞出了一種運(yùn)動(dòng)時(shí)的愉悅感。

(一些運(yùn)動(dòng)類(lèi) App)

而 Keep 的 UI,配圖里面也經(jīng)常會(huì)用到健身圖片,但極少有那種荷爾蒙四射的力量感。運(yùn)動(dòng)感倒是有一些,比如主色里的灰色,眼睛告訴我它似乎是藍(lán)灰色,但放到 Sketch 或 PS 里面以后,會(huì)發(fā)現(xiàn)其實(shí)是紫灰色,紫色介于冷色和暖色之間,另外這個(gè)顏色本身也比較深比較暗,整體來(lái)看是有一定的力量感在里面的,淡淡契合運(yùn)動(dòng)的主題。如果是藍(lán)色,給人的感覺(jué)會(huì)是冷或者清涼清爽,力量感就會(huì)弱一些。

圖標(biāo)方面,最主要的底部導(dǎo)航圖標(biāo),用的是面型,非常簡(jiǎn)潔的幾何塊狀,配上微弱的圓角,用擬人的說(shuō)法,仿佛有一種結(jié)實(shí)有肌肉的感覺(jué)。比如“我”那個(gè)圖標(biāo),肩很寬,顯得肩和背上是有肌肉的,還有主色里面用來(lái)表示點(diǎn)擊和突出顯示的綠色,雖較為成熟穩(wěn)重,也是有一定活力的。關(guān)于 Keep UI 方面的“運(yùn)動(dòng)感”,就簡(jiǎn)單分享這些例子。

(Keep 主要界面元素)

除了“運(yùn)動(dòng)感”,Keep 的 UI 還有一種淡雅寧?kù)o的感覺(jué),這個(gè)也主要能從顏色里面感受到:主色里的灰色,沒(méi)有特別暗,也有一定的寧?kù)o之感;主色里的綠色,有一定活力,但沒(méi)有大面積使用,不躁動(dòng),能和整體的淡雅寧?kù)o和諧共處。

其它大面積用到色彩的地方,比如大圓按鈕和一些課程模塊的大面積背景色,Keep 選擇了淡雅的類(lèi)似瑜伽、冥想產(chǎn)品的那種配色。還有字體,最黑的字體也沒(méi)有用純黑,粗體也用的少,這些都能讓人感受到一種淡雅寧?kù)o。

02 Keep的 UI 為什么選擇這種風(fēng)格?

1. 受產(chǎn)品定位影響

一款運(yùn)動(dòng)類(lèi) App,自然需要一定的“運(yùn)動(dòng)感”。

2. 受用戶特征影響

不管是以迎合用戶的審美為主導(dǎo),還是以決策者的審美偏好為主導(dǎo),還是兩者結(jié)合,通常都要滿足一個(gè)共同的條件:需要符合主流用戶的審美。

根據(jù)易觀千象數(shù)據(jù)顯示,Keep 用戶主要集中在一二線大中型城市,占比超過(guò) 3/4;用戶年齡主要集中在 35 歲以下,占比約 75%;男女比例接近 1:2。Keep 的這種 UI 風(fēng)格,是能夠?yàn)槠渲髁饔脩羲邮艿摹?/p>

3. 受創(chuàng)始人的審美偏好影響

關(guān)于 Keep 創(chuàng)始人王寧的性格,媒體報(bào)道的說(shuō)法是“謹(jǐn)小慎微”。簡(jiǎn)潔、淡雅寧?kù)o這種低調(diào)的輕運(yùn)動(dòng)風(fēng)格,想必也是王寧所喜歡和推崇的。

(Keep 創(chuàng)始人王寧)

4. 強(qiáng)“運(yùn)動(dòng)感”的 UI 風(fēng)格能否帶來(lái)運(yùn)動(dòng)類(lèi) App 數(shù)據(jù)的增長(zhǎng)?

現(xiàn)在很多人對(duì) UI 設(shè)計(jì)的認(rèn)知和期待主要集中在三個(gè)方面:首先要好看、舒服;其次要體驗(yàn)好,比如閱讀體驗(yàn)、瀏覽體驗(yàn)等;最后要能帶來(lái)數(shù)據(jù)的增長(zhǎng)(商業(yè)價(jià)值),這一點(diǎn)在電商類(lèi)公司尤為明顯。

那么,以運(yùn)動(dòng)類(lèi) App 為例,強(qiáng)“運(yùn)動(dòng)感”的 UI 風(fēng)格和數(shù)據(jù)增長(zhǎng)之間,是否存在必然的因果關(guān)系?我的答案是:未必。

舉例來(lái)說(shuō),產(chǎn)品方是希望用戶第一次看到這款 App 的時(shí)候,能夠嘗試使用,之后能夠持續(xù)不斷的使用。關(guān)于第一次的嘗試使用,UI 會(huì)起到不小的作用,當(dāng)用戶覺(jué)得這個(gè)產(chǎn)品好看有品質(zhì)的時(shí)候,極有可能會(huì)嘗試使用。但是,不同的風(fēng)格都可以被設(shè)計(jì)的好看有品質(zhì),所以這里的核心是設(shè)計(jì)本身,而不是風(fēng)格本身。

另外,現(xiàn)實(shí)生活中,用戶通常都是先做了一個(gè)要運(yùn)動(dòng)的決定,比如要去去跑步或者練腹肌,然后才會(huì)打開(kāi)一款運(yùn)動(dòng) App 來(lái)用。而不是先打開(kāi)一款運(yùn)動(dòng) App,然后受其強(qiáng)“運(yùn)動(dòng)感”的 UI 風(fēng)格的影響,從而決定去跑步或者練腹肌。當(dāng)然也不排除強(qiáng)“運(yùn)動(dòng)感”的 UI 界面,會(huì)讓人產(chǎn)生想要運(yùn)動(dòng)的沖動(dòng),我自己看 Nike Run Club 的界面,就會(huì)產(chǎn)生這種沖動(dòng)。

(Nike Run Club 界面及圖片)

歸根結(jié)底,這里涉及的問(wèn)題是,用戶決定運(yùn)動(dòng)并付諸實(shí)踐的源動(dòng)力究竟來(lái)自哪里?有兩點(diǎn)最為核心:第一,內(nèi)心深處提升自己健康與健美程度的渴望;第二,來(lái)自外界成功例子的激勵(lì),主要是來(lái)自朋友、熟人、名人甚至陌生人,比如關(guān)于彭于晏健身的各種報(bào)道,會(huì)影響和激勵(lì)很多人。

這兩點(diǎn)的力量要遠(yuǎn)大于 UI 風(fēng)格方面的強(qiáng)“運(yùn)動(dòng)感”,運(yùn)動(dòng)類(lèi) App 完全可以在這兩方面做文章,效果會(huì)更好。實(shí)際上,Keep 就這樣做了:“自律給我自由”的品牌口號(hào)就是在喚醒用戶內(nèi)心深處的渴望,社區(qū)里面大量堅(jiān)持健身以及健身成功的例子,也是在激勵(lì)和鼓勵(lì)用戶。

總的來(lái)說(shuō),強(qiáng)“運(yùn)動(dòng)感”的 UI 風(fēng)格,在促進(jìn)一款運(yùn)動(dòng) App 的數(shù)據(jù)增長(zhǎng)方面,效果有限。Keep 選擇了更為有效的其他方法,這里面的助力元素還包括:比較專(zhuān)業(yè)的健身課程、務(wù)實(shí)且互動(dòng)性強(qiáng)的運(yùn)營(yíng)等。

03 這種 UI 風(fēng)格對(duì) Keep 有哪些好處?

1. 低強(qiáng)度的積極情緒更容易帶來(lái)細(xì)水長(zhǎng)流的效果

一個(gè)比較極端的例子是,玩王者榮耀時(shí)的拿人頭、得 MVP、升段位、拿三殺五殺會(huì)讓我們爽。如果玩的時(shí)間過(guò)長(zhǎng),這種對(duì)神經(jīng)高強(qiáng)度的刺激,既會(huì)讓我們爽,也會(huì)讓我們累,甚至不堪重負(fù)。

同理,如果大腦神經(jīng)長(zhǎng)時(shí)間受這種強(qiáng)“運(yùn)動(dòng)感” UI 風(fēng)格的刺激,用戶也會(huì)感到疲累,只是程度不同而已。

反而 Keep 這種淡雅寧?kù)o的風(fēng)格,帶給用戶的是一種放松的感覺(jué),是一種強(qiáng)度很低的積極情緒。這種潤(rùn)物細(xì)無(wú)聲的低強(qiáng)度積極情緒,即使用戶每天都打開(kāi) Keep 來(lái)用,也不會(huì)因?yàn)?UI 界面而產(chǎn)生疲累等負(fù)面情緒。

另外,根據(jù)王寧 2016 年在混沌研習(xí)社的分享,在中國(guó),很多人每周運(yùn)動(dòng),但每天運(yùn)動(dòng)的人很少;在美國(guó),每天運(yùn)動(dòng)和每周運(yùn)動(dòng)的人占總?cè)丝诘?90% 左右。Keep 希望更多中國(guó)人能夠每天運(yùn)動(dòng),這種淡雅寧?kù)o的風(fēng)格,一定程度上有利于這個(gè)愿望的實(shí)現(xiàn)。

2. 帶有一定的高級(jí)感,容易受人追隨

減少設(shè)計(jì)對(duì)用戶神經(jīng)和欲望的刺激,同時(shí)讓用戶感覺(jué)到放松,某種意義來(lái)講,這是一種做減法的設(shè)計(jì)。星巴克沒(méi)有像肯德基一樣,用紅色的店鋪裝修來(lái)激發(fā)顧客的食欲,而是用深色的裝修、原木材質(zhì)的桌椅和舒緩的音樂(lè),讓顧客感到放松和安靜,某種程度上也是一種做減法的設(shè)計(jì)。

像極簡(jiǎn)的、黑白的、獨(dú)特的設(shè)計(jì)一樣,Keep 這種做減法的、克制的設(shè)計(jì)也很容易給人一種高級(jí)感(當(dāng)然,這里我覺(jué)得還有設(shè)計(jì)美感和品牌精神的助力)的感覺(jué)。

帶有高級(jí)感的事物,會(huì)讓人感覺(jué)良好,所以很容易受到人們的追隨。就像很多人喜歡在星巴克里拍照一樣,很多用戶也喜歡把自己的 Keep 動(dòng)態(tài)分享到朋友圈,包括我自己。

3. 形成差異化,有利于品牌認(rèn)知和傳播

在包括耐克在內(nèi)的一眾運(yùn)動(dòng)類(lèi) App 都追求強(qiáng)“運(yùn)動(dòng)感”的大環(huán)境下,Keep 這種輕“運(yùn)動(dòng)感”搭配淡雅寧?kù)o的 UI 風(fēng)格,就顯得很獨(dú)特,一定程度上有利于品牌的認(rèn)知和傳播。

04 結(jié)語(yǔ)

最近的《明日之子》第 3 季,復(fù)古女孩洪一諾憑老歌《風(fēng)中有朵雨做的云》和《無(wú)聲的雨》唱醉六位評(píng)委,首奪六星,帶大家集體穿越回 90 年代。孫燕姿在評(píng)價(jià)她時(shí)這樣說(shuō)到:“大家可能到了一個(gè)時(shí)代是,砰砰砰砰砰……什么都在你面前的時(shí)候,大家其實(shí)是想要退一步。洪一諾,她就是剛好讓人退一步,看到的那顆星?!?/p>

同樣,在這樣一個(gè)高速發(fā)展的時(shí)代,什么都砰砰砰砰砰的出現(xiàn)在我們面前的時(shí)代,大家會(huì)想要安靜和放松一下。Keep 的 UI,就是靜謐夜空中,能讓人安靜和放松的那顆星。

以上。

 

本文由 @Snow Design 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來(lái)自網(wǎng)絡(luò)

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 想了解keep的交互設(shè)計(jì),期待您的這篇文章

    回復(fù)
    1. 關(guān)于Keep的交互設(shè)計(jì),可以參考《Keep用戶體驗(yàn)…》那篇文章,里面“Keep用戶體驗(yàn)的缺點(diǎn)”部分有涉及;另外,關(guān)于交互設(shè)計(jì),可以參考《…信息架構(gòu)》那篇文章;可能不會(huì)有專(zhuān)門(mén)關(guān)于Keep交互設(shè)計(jì)的文章了

      來(lái)自北京 回復(fù)
  2. 而且同理,個(gè)人覺(jué)得對(duì)于keep的商城模塊,這種相對(duì)高級(jí)冷靜的配色風(fēng)格不見(jiàn)得是一種劣勢(shì);相反,它有一種更強(qiáng)的信服力。在其他的APP上,不管主打什么功能,加入的商城模塊基本都沿用的是淘寶拼多多色系,一眼看過(guò)去都是那種商場(chǎng)大減價(jià)的感覺(jué)。但keep在用戶思維這一塊就比較聰明,它明白自己的主體用戶所在的消費(fèi)和精神層次,用戶更看重的不是價(jià)格折扣,而是品質(zhì)和高級(jí)感。

    來(lái)自湖北 回復(fù)
    1. 是的,個(gè)人覺(jué)得還有設(shè)計(jì)美感

      來(lái)自北京 回復(fù)
  3. 個(gè)人感性分析一下,別的APP都用跳躍的彩色,想要抓住 運(yùn)動(dòng)的‘動(dòng)感 跳躍’等關(guān)鍵詞表現(xiàn),想要刺激用戶動(dòng)起來(lái);但是keep給人的調(diào)性,更能給人‘堅(jiān)持’這樣的感覺(jué),灰色系介于黑白之間,感覺(jué)特別能代表成功路上堅(jiān)持的顏色~ 相較別的APP,keep品牌調(diào)性抓住了我精神層面的感官… 淺解

    來(lái)自北京 回復(fù)
    1. 精神層面的東西或者說(shuō)共鳴,是很有力量的…喜歡你的解讀…

      來(lái)自北京 回復(fù)
  4. 很喜歡看你寫(xiě)的文章,很有想法

    回復(fù)
    1. 謝謝,歡迎常來(lái)~

      回復(fù)
  5. 一直比較喜歡它的 Logo 設(shè)計(jì),很有意思~~最近在跑步,一直用 Keep,界面很友好,是我喜歡的風(fēng)格,其他類(lèi)似的APP沒(méi)用過(guò)~~

    來(lái)自江蘇 回復(fù)
    1. 它的 Logo 有意思,我覺(jué)得沒(méi)有往高級(jí)感的方向靠,圓潤(rùn)溫潤(rùn),K 都沒(méi)有用大寫(xiě),親切大眾。我以前用 Nike + 跑步,后來(lái)一直用 Keep~

      來(lái)自北京 回復(fù)
  6. 宏觀上淺談 Keep 的 UI 設(shè)計(jì),希望能拋磚引玉~

    來(lái)自北京 回復(fù)