動(dòng)效是UI設(shè)計(jì)中最強(qiáng)有力的工具之一，它強(qiáng)化了界面的互動(dòng)性和生命力。動(dòng)效讓用戶可以更快地從界面獲取反饋，提供更快更有效的微交互，讓關(guān)鍵的要素脫穎而出，通過(guò)實(shí)時(shí)、動(dòng)態(tài)的方式創(chuàng)造引人入勝的體驗(yàn)。巧妙的運(yùn)用動(dòng)效，能給整個(gè)體驗(yàn)帶來(lái)更多的加成?？紤]到屏幕尺寸和使用場(chǎng)景，在移動(dòng)端上動(dòng)效的作用就顯得更加關(guān)鍵而有效了。

在我們之前的文章中曾經(jīng)探討過(guò)動(dòng)效和UI設(shè)計(jì)之間的關(guān)系，以及它是如何催生高效的微交互。移動(dòng)端設(shè)備的持續(xù)普及和流行，使得動(dòng)效的多樣性有了明顯的提升，積極的同用戶共鳴。因此，動(dòng)效設(shè)計(jì)應(yīng)該簡(jiǎn)單、清晰、明亮，并且以用戶為中心。

今天的文章，通過(guò) Tubik Studio 和相關(guān)設(shè)計(jì)師的15個(gè)概念設(shè)計(jì)項(xiàng)目來(lái)簡(jiǎn)單總結(jié)一下動(dòng)效常見(jiàn)的類(lèi)型、風(fēng)格和功能。

1、博客APP概念設(shè)計(jì)：震顫

這是一個(gè)博客APP的概念設(shè)計(jì)。考慮到博客通常包含大量的圖片、內(nèi)容摘要，所以我們?cè)谠O(shè)計(jì)的時(shí)候?qū)⑦@些部分作為內(nèi)容主體，還填充了不同主題的彩色磁貼。用戶可以通過(guò)點(diǎn)擊作者打開(kāi)相應(yīng)的信息流，信息流會(huì)呈現(xiàn)出作者近期發(fā)表的文章，更新的狀態(tài)，并且可以像社交媒體一樣關(guān)注/取關(guān)。整個(gè)概念設(shè)計(jì)在原有過(guò)渡動(dòng)效的基礎(chǔ)上，借用符合物理規(guī)則的輕微震動(dòng)回彈效果來(lái)強(qiáng)化體驗(yàn)，相比之下也許不夠顯眼，但是讓整體感覺(jué)更加自然生動(dòng)。

2、社交APP概念設(shè)計(jì)：直觀

這是一個(gè)社交類(lèi)APP的交互概念設(shè)計(jì)。通常人們希望這類(lèi)應(yīng)用快速、動(dòng)態(tài)且清晰。所以，整個(gè)界面被設(shè)計(jì)得色彩豐富，而動(dòng)畫(huà)的運(yùn)動(dòng)方式也多設(shè)計(jì)得簡(jiǎn)單直觀，這使得整個(gè)界面顯得可用性更強(qiáng)。些許回彈和震動(dòng)的加入令動(dòng)效顯得更富生機(jī)。

3、藝術(shù)圖庫(kù)APP概念設(shè)計(jì)：統(tǒng)一

正如同我們所熟知的，過(guò)多的動(dòng)效和UI元素都會(huì)讓用戶感到迷惑，但是如果使用一種動(dòng)效來(lái)支撐整個(gè)UI布局的話，所帶來(lái)的轉(zhuǎn)化率會(huì)明顯好很多。在這個(gè)藝術(shù)圖庫(kù)的APP中，交互和動(dòng)效融為一體，將事件預(yù)覽和詳細(xì)信息的展現(xiàn)以更加統(tǒng)一自然的方式呈現(xiàn)出來(lái)。每個(gè)區(qū)塊的標(biāo)題背景都采用了色塊來(lái)進(jìn)行區(qū)分，使得整個(gè)布局的結(jié)構(gòu)更加清晰。

4、運(yùn)動(dòng)APP概念設(shè)計(jì)：動(dòng)感

體育運(yùn)動(dòng)類(lèi)APP 是時(shí)下的熱門(mén)，越來(lái)越多的人開(kāi)始使用手頭的智能設(shè)備來(lái)輔助運(yùn)動(dòng)和訓(xùn)練，跟蹤數(shù)據(jù)，監(jiān)控運(yùn)動(dòng)過(guò)程是必不可少的。所以，在做運(yùn)動(dòng)APP的概念設(shè)計(jì)的時(shí)候，通過(guò)動(dòng)效來(lái)突出APP的展示功能就相當(dāng)重要了。應(yīng)用的布局并不復(fù)雜：側(cè)邊欄+內(nèi)容展示，側(cè)邊欄從左側(cè)彈出，承載不同的板塊導(dǎo)航的功能。設(shè)計(jì)動(dòng)效的時(shí)候，設(shè)計(jì)師希望營(yíng)造出橡膠一樣的質(zhì)感，而配色上也相應(yīng)的更加活潑。處于展示的目的，設(shè)計(jì)師希望即使側(cè)邊欄存在也能看到全部?jī)?nèi)容，所以布局更加自由靈活，加上動(dòng)感十足的過(guò)渡效果，整個(gè)UI顯得充滿能量，有激勵(lì)效果。

5、產(chǎn)品展示UI概念設(shè)計(jì)：視覺(jué)反饋

在購(gòu)物類(lèi)APP中，產(chǎn)品展示是相當(dāng)重要的一個(gè)需求。這個(gè)產(chǎn)品展示的UI設(shè)計(jì)中，將產(chǎn)品展示用卡片式設(shè)計(jì)來(lái)承載，尺寸和價(jià)格也直觀的展現(xiàn)出來(lái)了。在這個(gè)設(shè)計(jì)中，動(dòng)效的可用性相當(dāng)高：它以視覺(jué)反饋的方式，清晰的告知用戶他們的操作已經(jīng)完成。高效快速的微動(dòng)效和可用性極高的界面布局，讓整個(gè)界面顯得好用而易用。

6、日歷APP概念設(shè)計(jì)：協(xié)調(diào)

這個(gè)日歷APP的概念設(shè)計(jì)將日程管理和筆記的功能融為一體，并且加入了更加優(yōu)秀的視覺(jué)設(shè)計(jì)。豐富而有梯度的色彩設(shè)計(jì)賦予界面以足夠的豐度，而流暢的動(dòng)效則讓色彩由靜態(tài)變?yōu)閯?dòng)態(tài)，使之更加富有活力，也更加協(xié)調(diào)了。

7、計(jì)時(shí)APP概念設(shè)計(jì)：視覺(jué)化

這是一個(gè)相當(dāng)獨(dú)特的單頁(yè)計(jì)時(shí)APP應(yīng)用的UI設(shè)計(jì)，可以說(shuō)它的整個(gè)交互都包含在動(dòng)效當(dāng)中了。作為一個(gè)單一功能的計(jì)時(shí)應(yīng)用，設(shè)計(jì)師將它的動(dòng)效設(shè)計(jì)發(fā)揮到了最大化，通過(guò)有趣的動(dòng)畫(huà)展現(xiàn)了時(shí)間流逝的過(guò)程。用戶可以通過(guò)點(diǎn)擊按鈕開(kāi)始計(jì)時(shí)，也可以通過(guò)下拉開(kāi)始計(jì)時(shí)。當(dāng)然，這樣視覺(jué)化的設(shè)計(jì)可以更好的吸引對(duì)于視覺(jué)設(shè)計(jì)更加敏感的用戶。

8、UI導(dǎo)航概念設(shè)計(jì)：異化

對(duì)于一個(gè)新聞應(yīng)用的用戶中心而言，這這樣的導(dǎo)航概念設(shè)計(jì)是相當(dāng)?shù)莫?dú)特的。時(shí)尚的色彩如同水一樣流動(dòng)，操作按鈕像球一樣沿著傾斜的軌跡流動(dòng)出來(lái)，可以稱得上是驚艷。

9、UI側(cè)邊欄概念設(shè)計(jì)：交互性

這是同一個(gè)城市新聞應(yīng)用的交互設(shè)計(jì)，只不過(guò)這個(gè)是借用了iOS的Force Touch 功能同動(dòng)態(tài)效果更好的呈現(xiàn)側(cè)邊欄設(shè)計(jì)。同樣是流動(dòng)的色彩，但是Force Touch 讓這種動(dòng)效具有了更強(qiáng)的交互性。

10、美食設(shè)計(jì)APP概念設(shè)計(jì)：展示與引導(dǎo)

這是一個(gè)基于美食的社交類(lèi)應(yīng)用，這個(gè)APP的UI設(shè)計(jì)希望通過(guò)更加快速便捷的方式以話題為中心，進(jìn)行信息更新。設(shè)計(jì)者希望其中包含分享、討論、聊天、關(guān)注、上傳、點(diǎn)贊和收藏等功能，這個(gè)時(shí)候，流暢的動(dòng)效成了引導(dǎo)交互、展示功能的手段了。

11、動(dòng)態(tài)滾動(dòng)概念設(shè)計(jì)：輔助展現(xiàn)

這個(gè)概念設(shè)計(jì)的亮點(diǎn)在于動(dòng)態(tài)時(shí)間軸的展示。這個(gè)動(dòng)態(tài)滾動(dòng)的信息流同頂部的插畫(huà)風(fēng)時(shí)間軸整合到了一起，時(shí)間軸被設(shè)計(jì)成為一個(gè)動(dòng)態(tài)的信息圖，當(dāng)你向下滾動(dòng)信息流的時(shí)候，時(shí)間軸也隨之變化，輔助信息流展現(xiàn)更為豐富的信息。

12、咖啡優(yōu)惠券APP概念設(shè)計(jì)：微交互

美食是世界上最美好的事情之一，所以美食也是設(shè)計(jì)中最常見(jiàn)的元素之一。這個(gè)APP 為用戶提供咖啡優(yōu)惠券，所以設(shè)計(jì)師借助動(dòng)效來(lái)強(qiáng)化微動(dòng)效，加上對(duì)于美食的聯(lián)想，創(chuàng)造讓用戶難以忘懷的體驗(yàn)。

13、聯(lián)系人列表概念設(shè)計(jì)：強(qiáng)化交互

這個(gè)聯(lián)系人列表的概念設(shè)計(jì)中加入了不少橫向和縱向的滾動(dòng)操作，相比于傳統(tǒng)的設(shè)計(jì)有著更強(qiáng)的交互性。動(dòng)效成為了展現(xiàn)并聯(lián)通不同環(huán)節(jié)的橋梁，充滿電子意味的失真特效也讓整個(gè)設(shè)計(jì)顯得情懷十足。

14、多界面UI概念設(shè)計(jì)：物理規(guī)則

這個(gè)移動(dòng)端APP的概念設(shè)計(jì)中囊括一系列不同功能的界面，包括地圖、聯(lián)系人、搜索框。這一系列界面展現(xiàn)了多種不同的交互以及控件的變化，這些復(fù)雜的交互過(guò)程中控件的運(yùn)動(dòng)規(guī)則都盡量模擬物理規(guī)則。

15、健康美食APP 概念設(shè)計(jì)：組織

這款A(yù)PP是關(guān)于如何健康飲食的，提供了諸如生活方式、飲食技巧之類(lèi)的信息。整個(gè)APP 為不同的主題分配了不同的色彩，采用簡(jiǎn)約直觀的布局來(lái)突出視覺(jué)特色。APP中的動(dòng)效設(shè)計(jì)則旨在體現(xiàn)不同元素之間的關(guān)系，并不顯眼，但是一系列微小的過(guò)渡將整個(gè)界面組織到了一起。

結(jié)語(yǔ)

動(dòng)效設(shè)計(jì)千變?nèi)f化，但是動(dòng)效設(shè)計(jì)始終是服務(wù)于UI的，你得時(shí)刻記住這一點(diǎn)。它終究是功能性的，你的目的是什么，用戶的需求又如何，你想要營(yíng)造的效果是什么，這些因素可以引導(dǎo)你思考并設(shè)計(jì)出真正合理的動(dòng)效。