全球爆火應(yīng)用 Zenly 5.0 大改版,有哪些設(shè)計細節(jié)值得學習?

1 評論 3018 瀏覽 6 收藏 14 分鐘

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

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

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

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

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

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

一、視覺設(shè)計

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

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

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

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

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

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

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

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

2. 多重漸變顏色

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

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

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

3. 超大字體

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

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

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

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

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

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

二、動效設(shè)計

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

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

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

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

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

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

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

1. 融入品牌感的動效設(shè)計

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

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

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

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

3. Q 彈的動效設(shè)計

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

在回彈設(shè)計中也用了一些迪士尼動畫 12 原則中的形變規(guī)律,對動態(tài)圖標做了夸張的設(shè)計,讓動畫有趣又真實。

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

4. 呼吸感的動效設(shè)計

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

5. 充滿生機的動效設(shè)計

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

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

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

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

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

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

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

7. 抖動與活力的反饋設(shè)計

抖動也是 Zenly 的一大特點,會在很多關(guān)鍵路徑上給用戶即時的觸感反饋???,又講到了反饋機制,大量的反饋讓應(yīng)用有了更多活力。

三、玩法設(shè)計

1. 解鎖模式

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

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

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

3. 地圖標記

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

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

四、彩蛋設(shè)計

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

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

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

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

五、總結(jié)

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

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

#專欄作家#

彩云sky,騰訊高級視覺設(shè)計師;公眾號:彩云譯設(shè)計。

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 作者從視覺設(shè)計、動效設(shè)計、玩法設(shè)計、彩蛋設(shè)計四個方面拆析產(chǎn)品設(shè)計很透徹。

    來自江蘇 回復