編輯導(dǎo)語：無論是視覺設(shè)計(jì)師還是用戶，一個(gè)風(fēng)格新潮的應(yīng)用趨勢(shì)都是非常值得關(guān)注和使用的，Zenly就是一款設(shè)計(jì)十分新潮、把體驗(yàn)設(shè)計(jì)做到極致的APP，本篇文章作者介紹了Zenly 5.0版本更新的內(nèi)容，從視覺設(shè)計(jì)、動(dòng)效設(shè)計(jì)、玩法設(shè)計(jì)、彩蛋設(shè)計(jì)四個(gè)方面一一介紹了其新潮的設(shè)計(jì)，感興趣的一起來看一下吧。

Hi，我是彩云。最近在研究競(jìng)品時(shí)發(fā)現(xiàn)了一個(gè)動(dòng)效非常絲滑，設(shè)計(jì)非常新潮的 APP，叫 Zenly，里面還埋了很多彩蛋設(shè)計(jì)，把體驗(yàn)設(shè)計(jì)做到了極致。

嚴(yán)格來說，Zenly不算是一個(gè)新 APP，上線的時(shí)間還比較早，但這次 5.0 大版本更新后，設(shè)計(jì)風(fēng)格更加新潮大膽，它們不是在追隨趨勢(shì)，而是在引領(lǐng)趨勢(shì)。

我想作為一個(gè)視覺設(shè)計(jì)師，對(duì)這種風(fēng)格新潮的應(yīng)用趨勢(shì)，是必須加以關(guān)注并研究的，所以今天就跟隨彩云的視角對(duì)這款應(yīng)用做一個(gè)賞析吧。

實(shí)際上它上一個(gè)版本的設(shè)計(jì)也非常優(yōu)秀，所以我會(huì)把更新前后的設(shè)計(jì)變化也做一個(gè)介紹。

這次會(huì)重點(diǎn)介紹 5.0 更新的內(nèi)容，因?yàn)樯?jí)后的風(fēng)格更加有自己的個(gè)性了。

一、視覺設(shè)計(jì)

這次大版本更新，在風(fēng)格上改變很徹底，幾乎是截然不同的設(shè)計(jì)風(fēng)格了，從 APP 圖標(biāo)到界面里的功能圖標(biāo)、背景、圖形、顏色都做了很大的改變。

1. 扁平多彩的圖標(biāo)和界面

應(yīng)用主圖標(biāo)除了冰棍造型保持延續(xù)外，整體效果從清新可愛到暗黑潮酷，有了一個(gè)非常大的變化。

在上一個(gè)版本中 UI 風(fēng)格中規(guī)中矩，設(shè)計(jì)團(tuán)隊(duì)好像是在猶抱琵琶半遮面，壓抑著內(nèi)心情緒一樣，而到了這個(gè)版本，就徹底放飛自我了。

關(guān)于主圖標(biāo)還有一個(gè)小彩蛋的設(shè)計(jì)就是當(dāng)你完成了它的一些任務(wù)后，可以解鎖更多的主圖標(biāo)效果，算是給了用戶更多的個(gè)性化體驗(yàn)。

我目前已經(jīng)解鎖了 2 個(gè)圖標(biāo)了。其實(shí)這個(gè)應(yīng)用還藏了不少彩蛋設(shè)計(jì)，后面會(huì)講到。

這里做的好的地方之一是，主圖標(biāo)的風(fēng)格跟內(nèi)部界面保持了很好的一致性，從圖標(biāo)就能感受到內(nèi)部界面的風(fēng)格特點(diǎn)。

5.0 版本的圖標(biāo)風(fēng)格化更加明顯，用到了非常大膽的漸變色，具有很強(qiáng)的風(fēng)格特點(diǎn)。

2. 多重漸變顏色

APP 中的顏色體系也是跟隨整體調(diào)性做了巨大改變。

在上一個(gè)版本中，主要以白色加一些微漸變顏色為主，而到了最新 5.0 版本，主色調(diào)改為了暗色系。

在這種顏色氛圍下，很適合增加一些比較酷炫的漸變色，這在 APP 中幾乎隨處可見，包括圖標(biāo)、背景、圖案、按鈕、文字等等。

3. 超大字體

上一個(gè)版本中字體字號(hào)相對(duì)還比較常規(guī)，而到了這個(gè)版本，字號(hào)設(shè)計(jì)變得非常大，幾乎是到了比較夸張的地步。

單純從字號(hào)上來看，在其他 APP 中就不太常見，也算是一個(gè)記憶點(diǎn)了。只是個(gè)人覺得有點(diǎn)大的過分了些，美觀度沒有太好。

4. 3D 質(zhì)感表情

表情設(shè)計(jì)也算是 Zenly 的一大特色之一了。在上一版中的質(zhì)感，整體來說是比較偏清爽可愛的，雖然也有一定的 3D 質(zhì)感，但總體來說做的都比較弱。

而到了這個(gè)版本，3D 質(zhì)感做的特別強(qiáng)，且顏色細(xì)節(jié)做的特別多，仿佛到了舞廳那種感覺，把潮酷風(fēng)拉滿了（上一個(gè)版本使用語音還會(huì)有一個(gè)同步的表情跟隨你一起說話，但到這個(gè)版本去掉了，有點(diǎn)可惜）。

而且它這里的表情不僅僅是設(shè)計(jì)上做的炫酷，還是有聲音的，當(dāng)你給好友頭像發(fā)表情的時(shí)候，會(huì)有相應(yīng)的表情配音，表情音其實(shí)是蠻少見的。結(jié)合聲音，也算是它的一個(gè)設(shè)計(jì)亮點(diǎn)了，值得學(xué)習(xí)。

二、動(dòng)效設(shè)計(jì)

動(dòng)效設(shè)計(jì)可以說是 Zenly 中的一大亮點(diǎn)了，它的動(dòng)效無處不在，且絲滑無比，是一個(gè)非常值得參考學(xué)習(xí)的地方。

其實(shí)，動(dòng)效設(shè)計(jì)現(xiàn)在越來越被重視，尤其在 UI 行業(yè)內(nèi)卷到這種程度的時(shí)候，絲滑的動(dòng)效越來越會(huì)影響用戶的使用體驗(yàn)。

在大廠，老板們對(duì)動(dòng)效的要求也越來越高，大家都在追求極致絲滑的感覺，這個(gè) APP 就是被推薦的參考之一。

Zenly 被 Snapchat 收購后，動(dòng)效體系的打通可能也是一個(gè)重要因素，母公司 Snapchat 的動(dòng)效也是極其優(yōu)秀。

我自己體驗(yàn)下來，感覺它們做的這些動(dòng)效有一個(gè)很關(guān)鍵的地方在于，動(dòng)效的風(fēng)格節(jié)奏和彈性度做得非常好。

整個(gè) Snapchat 動(dòng)效體系都是以 Q 彈為特征，Zenly 延續(xù)了這種動(dòng)效風(fēng)格，動(dòng)效風(fēng)格也是品牌的一部分，在這里得到了很好的應(yīng)用。

我們可以從這款應(yīng)用中學(xué)到動(dòng)效應(yīng)該用在哪些地方，以及這些動(dòng)畫的節(jié)奏和動(dòng)態(tài)曲線等等。

1. 融入品牌感的動(dòng)效設(shè)計(jì)

在添加好友這里有一個(gè)地球的酷炫動(dòng)效，跟應(yīng)用的核心功能有一個(gè)很強(qiáng)的結(jié)合，讓這個(gè)動(dòng)效有了更多價(jià)值。添加按鈕的確認(rèn)動(dòng)效也做了 Z 軸上的旋轉(zhuǎn)，雖然是一個(gè)細(xì)節(jié)設(shè)計(jì)，但也與整體的 3D 風(fēng)格保持了統(tǒng)一。

2. 符合物理規(guī)律的動(dòng)態(tài)設(shè)計(jì)

動(dòng)效設(shè)計(jì)要想給用戶帶來自然流暢的感覺，符合物理運(yùn)動(dòng)規(guī)律是一個(gè)很重要的點(diǎn)，像這里的冰棍彈起的動(dòng)態(tài)效果就好像很多冰棍湊到一塊兒，因?yàn)楹芄饣由蠜_擊力比較大，被高速彈起然后由于重力下落直至靜止后，再出現(xiàn)一個(gè)點(diǎn)贊的動(dòng)效，整體看下來就很自然。

因?yàn)樵?Zenly 中，冰棍就是代表了一個(gè)個(gè)用戶，所以動(dòng)效元素也融入了品牌元素，每一個(gè)元素的運(yùn)用都是有意義的。

3. Q 彈的動(dòng)效設(shè)計(jì)

在 Zenly 中有大量的動(dòng)態(tài)元素，甚至包括了很多文字內(nèi)容。比如在注冊(cè)環(huán)節(jié)，文字是一串串錯(cuò)位出現(xiàn)，然后又同時(shí)增加了明顯的回彈效果，整體看下來顯得非常 Q 彈，符合它們年輕的品牌個(gè)性。

在回彈設(shè)計(jì)中也用了一些迪士尼動(dòng)畫 12 原則中的形變規(guī)律，對(duì)動(dòng)態(tài)圖標(biāo)做了夸張的設(shè)計(jì)，讓動(dòng)畫有趣又真實(shí)。

比如在首頁中的小房子圖標(biāo)，大家仔細(xì)看這個(gè)圖標(biāo)的扭動(dòng)，是由一個(gè)預(yù)備動(dòng)作+擠壓變形+旋轉(zhuǎn)組合而成的，這樣就能讓這個(gè)動(dòng)畫變得更加生動(dòng)有趣。

4. 呼吸感的動(dòng)效設(shè)計(jì)

在核心功能路徑上，Zenly 把動(dòng)效做得更加極致。因?yàn)檎麄€(gè)應(yīng)用的核心玩法是基于定位來的，所以 Zenly 把定位圖標(biāo)做了非?？鋸埖脑O(shè)計(jì)，用到了多種動(dòng)態(tài)效果進(jìn)行疊加，用了略快的呼吸節(jié)奏不斷給用戶反饋當(dāng)前的位置。

5. 充滿生機(jī)的動(dòng)效設(shè)計(jì)

在 Zenly 中做的特別好的一點(diǎn)就是對(duì)于反饋的設(shè)計(jì)，幾乎沒有哪一個(gè)地方是完全靜止的，讓整個(gè)應(yīng)用充滿了生機(jī)和活力。

就算當(dāng)前頁面本不會(huì)有動(dòng)態(tài)變化，也會(huì)將你做的手勢(shì)交互盡可能的給你一些動(dòng)態(tài)反饋。

在游戲中，及時(shí)反饋是一個(gè)非常核心的設(shè)計(jì)，可以說游戲就是靠不斷的給玩家反饋?zhàn)屓顺撩云渲械?，?Zenly 中這一點(diǎn)也得到了運(yùn)用。

比如在這個(gè)地圖頁面，你用手滑動(dòng)側(cè)面，也會(huì)給你反饋，而且跟隨力度大小，反饋的形態(tài)也會(huì)有相應(yīng)的動(dòng)態(tài)變化，值得我們學(xué)習(xí)。

再比如這里的卡片和信息提示，在你拖動(dòng)的時(shí)候都會(huì)給到你即時(shí)的反饋，這種反饋對(duì)用戶來說是非常友好的，可以算是一種驚喜體驗(yàn)。

6. 動(dòng)態(tài)分享背景

在分享的時(shí)候可以預(yù)覽不同的分享模板，并且背景上添加了動(dòng)感的文字，顯得動(dòng)感十足。在一些背景設(shè)計(jì)上，如果期望能動(dòng)態(tài)生成背景，文字可能是一個(gè)很好的方式，又一個(gè)學(xué)習(xí)點(diǎn)。

7. 抖動(dòng)與活力的反饋設(shè)計(jì)

抖動(dòng)也是 Zenly 的一大特點(diǎn)，會(huì)在很多關(guān)鍵路徑上給用戶即時(shí)的觸感反饋。看，又講到了反饋機(jī)制，大量的反饋?zhàn)寫?yīng)用有了更多活力。

三、玩法設(shè)計(jì)

1. 解鎖模式

應(yīng)用中模仿了很多游戲的做法，利用上癮機(jī)制，讓用戶通過一個(gè)個(gè)小任務(wù)去解鎖更的體驗(yàn)玩法。

2. 表情連續(xù)發(fā)射

在地圖上，點(diǎn)擊好友頭像可以連續(xù)對(duì)他發(fā)射表情，這個(gè)表情還可以累積計(jì)數(shù)，是一個(gè)讓用戶很有點(diǎn)擊欲望的設(shè)計(jì)，每個(gè)表情還有完全不同的配音，我就經(jīng)常喜歡連擊這些表情。對(duì)方收到這些表情時(shí)，如果數(shù)量比較多，會(huì)直接在他屏幕上爆開，是一個(gè)蠻有意思的設(shè)計(jì)。

3. 地圖標(biāo)記

地圖標(biāo)記應(yīng)該是它的一個(gè)核心玩法設(shè)計(jì)之一了，它會(huì)根據(jù)你在某個(gè)對(duì)方停留的時(shí)長(zhǎng)以及時(shí)間段，判斷你是在家還是在公司。

這也就是為什么它不斷的提醒你要把手機(jī)定位功能改為始終允許，不然它的很多設(shè)計(jì)就沒法正常玩耍了。

四、彩蛋設(shè)計(jì)

在應(yīng)用中還預(yù)埋了不少彩蛋設(shè)計(jì)，在一定的條件下會(huì)觸發(fā)，給用戶創(chuàng)造驚喜感。

不同距離的導(dǎo)航提示也有做區(qū)別設(shè)計(jì)。我們可能會(huì)對(duì)附近的定位提示習(xí)以為常，但當(dāng)在定位距離很遠(yuǎn)的地方，比如我在深圳，如果搜索美國的話，要想去到那邊的話，規(guī)劃的路線提示會(huì)出現(xiàn)飛機(jī)動(dòng)效，出乎意料。

再比如在上一個(gè)版本中，當(dāng)你在地面上的縮放比例已經(jīng)是很小時(shí)，雙擊或者雙手持續(xù)放大，會(huì)出現(xiàn)裂縫到地心，且每次觸發(fā)后看到的地心場(chǎng)景居然還是不一樣的，當(dāng)時(shí)發(fā)現(xiàn)這個(gè)彩蛋的時(shí)候簡(jiǎn)直驚訝到我了。

只可惜在新版本中，這個(gè)彩蛋設(shè)計(jì)被去掉了，我猜可能是這個(gè)彩蛋埋的太深了，用的人過少所以就去掉了，設(shè)計(jì)最終還是要服務(wù)于用戶。

五、總結(jié)

最后總結(jié)一下，這款應(yīng)用非常值得設(shè)計(jì)師朋友們體驗(yàn)學(xué)習(xí)，設(shè)計(jì)風(fēng)格上做的非常大膽和新潮，尤其是動(dòng)效設(shè)計(jì)上做的非常體系化，體驗(yàn)起來非常絲滑。

如果你平時(shí)也有體驗(yàn)產(chǎn)品的習(xí)慣，那么這個(gè) APP 一定不要錯(cuò)過了，也歡迎你在體驗(yàn)過程中把你覺得比較驚喜的地方留言和大家一起分享吧。

#專欄作家#

彩云sky，騰訊高級(jí)視覺設(shè)計(jì)師；公眾號(hào)：彩云譯設(shè)計(jì)。

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

題圖來自Unsplash，基于CC0協(xié)議。