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

Hi，我是彩云。最近在研究競品時發現了一個動效非常絲滑，設計非常新潮的 APP，叫 Zenly，里面還埋了很多彩蛋設計，把體驗設計做到了極致。

嚴格來說，Zenly不算是一個新 APP，上線的時間還比較早，但這次 5.0 大版本更新后，設計風格更加新潮大膽，它們不是在追隨趨勢，而是在引領趨勢。

我想作為一個視覺設計師，對這種風格新潮的應用趨勢，是必須加以關注并研究的，所以今天就跟隨彩云的視角對這款應用做一個賞析吧。

實際上它上一個版本的設計也非常優秀，所以我會把更新前后的設計變化也做一個介紹。

這次會重點介紹 5.0 更新的內容，因為升級后的風格更加有自己的個性了。

一、視覺設計

這次大版本更新，在風格上改變很徹底，幾乎是截然不同的設計風格了，從 APP 圖標到界面里的功能圖標、背景、圖形、顏色都做了很大的改變。

1. 扁平多彩的圖標和界面

應用主圖標除了冰棍造型保持延續外，整體效果從清新可愛到暗黑潮酷，有了一個非常大的變化。

在上一個版本中 UI 風格中規中矩，設計團隊好像是在猶抱琵琶半遮面，壓抑著內心情緒一樣，而到了這個版本，就徹底放飛自我了。

關于主圖標還有一個小彩蛋的設計就是當你完成了它的一些任務后，可以解鎖更多的主圖標效果，算是給了用戶更多的個性化體驗。

我目前已經解鎖了 2 個圖標了。其實這個應用還藏了不少彩蛋設計，后面會講到。

這里做的好的地方之一是，主圖標的風格跟內部界面保持了很好的一致性，從圖標就能感受到內部界面的風格特點。

5.0 版本的圖標風格化更加明顯，用到了非常大膽的漸變色，具有很強的風格特點。

2. 多重漸變顏色

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

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

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

3. 超大字體

上一個版本中字體字號相對還比較常規，而到了這個版本，字號設計變得非常大，幾乎是到了比較夸張的地步。

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

4. 3D 質感表情

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

而到了這個版本，3D 質感做的特別強，且顏色細節做的特別多，仿佛到了舞廳那種感覺，把潮酷風拉滿了（上一個版本使用語音還會有一個同步的表情跟隨你一起說話，但到這個版本去掉了，有點可惜）。

而且它這里的表情不僅僅是設計上做的炫酷，還是有聲音的，當你給好友頭像發表情的時候，會有相應的表情配音，表情音其實是蠻少見的。結合聲音，也算是它的一個設計亮點了，值得學習。

二、動效設計

動效設計可以說是 Zenly 中的一大亮點了，它的動效無處不在，且絲滑無比，是一個非常值得參考學習的地方。

其實，動效設計現在越來越被重視，尤其在 UI 行業內卷到這種程度的時候，絲滑的動效越來越會影響用戶的使用體驗。

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

Zenly 被 Snapchat 收購后，動效體系的打通可能也是一個重要因素，母公司 Snapchat 的動效也是極其優秀。

我自己體驗下來，感覺它們做的這些動效有一個很關鍵的地方在于，動效的風格節奏和彈性度做得非常好。

整個 Snapchat 動效體系都是以 Q 彈為特征，Zenly 延續了這種動效風格，動效風格也是品牌的一部分，在這里得到了很好的應用。

我們可以從這款應用中學到動效應該用在哪些地方，以及這些動畫的節奏和動態曲線等等。

1. 融入品牌感的動效設計

在添加好友這里有一個地球的酷炫動效，跟應用的核心功能有一個很強的結合，讓這個動效有了更多價值。添加按鈕的確認動效也做了 Z 軸上的旋轉，雖然是一個細節設計，但也與整體的 3D 風格保持了統一。

2. 符合物理規律的動態設計

動效設計要想給用戶帶來自然流暢的感覺，符合物理運動規律是一個很重要的點，像這里的冰棍彈起的動態效果就好像很多冰棍湊到一塊兒，因為很光滑加上沖擊力比較大，被高速彈起然后由于重力下落直至靜止后，再出現一個點贊的動效，整體看下來就很自然。

因為在 Zenly 中，冰棍就是代表了一個個用戶，所以動效元素也融入了品牌元素，每一個元素的運用都是有意義的。

3. Q 彈的動效設計

在 Zenly 中有大量的動態元素，甚至包括了很多文字內容。比如在注冊環節，文字是一串串錯位出現，然后又同時增加了明顯的回彈效果，整體看下來顯得非常 Q 彈，符合它們年輕的品牌個性。

在回彈設計中也用了一些迪士尼動畫 12 原則中的形變規律，對動態圖標做了夸張的設計，讓動畫有趣又真實。

比如在首頁中的小房子圖標，大家仔細看這個圖標的扭動，是由一個預備動作 擠壓變形 旋轉組合而成的，這樣就能讓這個動畫變得更加生動有趣。

4. 呼吸感的動效設計

在核心功能路徑上，Zenly 把動效做得更加極致。因為整個應用的核心玩法是基于定位來的，所以 Zenly 把定位圖標做了非常夸張的設計，用到了多種動態效果進行疊加，用了略快的呼吸節奏不斷給用戶反饋當前的位置。

5. 充滿生機的動效設計

在 Zenly 中做的特別好的一點就是對于反饋的設計，幾乎沒有哪一個地方是完全靜止的，讓整個應用充滿了生機和活力。

就算當前頁面本不會有動態變化，也會將你做的手勢交互盡可能的給你一些動態反饋。

在游戲中，及時反饋是一個非常核心的設計，可以說游戲就是靠不斷的給玩家反饋讓人沉迷其中的，在 Zenly 中這一點也得到了運用。

比如在這個地圖頁面，你用手滑動側面，也會給你反饋，而且跟隨力度大小，反饋的形態也會有相應的動態變化，值得我們學習。

再比如這里的卡片和信息提示，在你拖動的時候都會給到你即時的反饋，這種反饋對用戶來說是非常友好的，可以算是一種驚喜體驗。

6. 動態分享背景

在分享的時候可以預覽不同的分享模板，并且背景上添加了動感的文字，顯得動感十足。在一些背景設計上，如果期望能動態生成背景，文字可能是一個很好的方式，又一個學習點。

7. 抖動與活力的反饋設計

抖動也是 Zenly 的一大特點，會在很多關鍵路徑上給用戶即時的觸感反饋。看，又講到了反饋機制，大量的反饋讓應用有了更多活力。

三、玩法設計

1. 解鎖模式

應用中模仿了很多游戲的做法，利用上癮機制，讓用戶通過一個個小任務去解鎖更的體驗玩法。

2. 表情連續發射

在地圖上，點擊好友頭像可以連續對他發射表情，這個表情還可以累積計數，是一個讓用戶很有點擊欲望的設計，每個表情還有完全不同的配音，我就經常喜歡連擊這些表情。對方收到這些表情時，如果數量比較多，會直接在他屏幕上爆開，是一個蠻有意思的設計。

3. 地圖標記

地圖標記應該是它的一個核心玩法設計之一了，它會根據你在某個對方停留的時長以及時間段，判斷你是在家還是在公司。

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

四、彩蛋設計

在應用中還預埋了不少彩蛋設計，在一定的條件下會觸發，給用戶創造驚喜感。

不同距離的導航提示也有做區別設計。我們可能會對附近的定位提示習以為常，但當在定位距離很遠的地方，比如我在深圳，如果搜索美國的話，要想去到那邊的話，規劃的路線提示會出現飛機動效，出乎意料。

再比如在上一個版本中，當你在地面上的縮放比例已經是很小時，雙擊或者雙手持續放大，會出現裂縫到地心，且每次觸發后看到的地心場景居然還是不一樣的，當時發現這個彩蛋的時候簡直驚訝到我了。

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

五、總結

最后總結一下，這款應用非常值得設計師朋友們體驗學習，設計風格上做的非常大膽和新潮，尤其是動效設計上做的非常體系化，體驗起來非常絲滑。

如果你平時也有體驗產品的習慣，那么這個 APP 一定不要錯過了，也歡迎你在體驗過程中把你覺得比較驚喜的地方留言和大家一起分享吧。

#專欄作家#

彩云sky，騰訊高級視覺設計師；公眾號：彩云譯設計。

本文原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。