動效是UI設計中最強有力的工具之一，它強化了介面的互動性和生命力。動效讓使用者可以更快地從介面獲取反饋，提供更快更有效的微互動，讓關鍵的要素脫穎而出，通過實時、動態的方式創造引人入勝的體驗。巧妙的運用動效，能給整個體驗帶來更多的加成。考慮到螢幕尺寸和使用場景，在移動端上動效的作用就顯得更加關鍵而有效了。
在我們之前的文章中曾經探討過動效和UI設計之間的關係，以及它是如何催生高效的微互動。移動端裝置的持續普及和流行，使得動效的多樣性有了明顯的提升，積極的同使用者共鳴。因此，動效設計應該簡單、清晰、明亮，並且以使用者為中心。
今天的文章，通過 Tubik Studio 和相關設計師的15個概念設計專案來簡單總結一下動效常見的型別、風格和功能。
1、部落格APP概念設計：震顫
這是一個部落格APP的概念設計。考慮到部落格通常包含大量的圖片、內容摘要，所以我們在設計的時候將這些部分作為內容主體，還填充了不同主題的彩色磁貼。使用者可以通過點選作者開啟相應的資訊流，資訊流會呈現出作者近期發表的文章，更新的狀態，並且可以像社交媒體一樣關注/取關。整個概念設計在原有過渡動效的基礎上，借用符合物理規則的輕微震動回彈效果來強化體驗，相比之下也許不夠顯眼，但是讓整體感覺更加自然生動。
2、社交APP概念設計：直觀
這是一個社交類APP的互動概念設計。通常人們希望這類應用快速、動態且清晰。所以，整個介面被設計得色彩豐富，而動畫的運動方式也多設計得簡單直觀，這使得整個介面顯得可用性更強。些許回彈和震動的加入令動效顯得更富生機。
3、藝術相簿APP概念設計：統一
正如同我們所熟知的，過多的動效和UI元素都會讓使用者感到迷惑，但是如果使用一種動效來支撐整個UI佈局的話，所帶來的轉化率會明顯好很多。在這個藝術相簿的APP中，互動和動效融為一體，將事件預覽和詳細資訊的展現以更加統一自然的方式呈現出來。每個區塊的標題背景都採用了色塊來進行區分，使得整個佈局的結構更加清晰。
4、運動APP概念設計：動感
體育運動類APP 是時下的熱門，越來越多的人開始使用手頭的智慧裝置來輔助運動和訓練，跟蹤資料，監控運動過程是必不可少的。所以，在做運動APP的概念設計的時候，通過動效來突出APP的展示功能就相當重要了。應用的佈局並不複雜：側邊欄+內容展示，側邊欄從左側彈出，承載不同的板塊導航的功能。設計動效的時候，設計師希望營造出橡膠一樣的質感，而配色上也相應的更加活潑。處於展示的目的，設計師希望即使側邊欄存在也能看到全部內容，所以佈局更加自由靈活，加上動感十足的過渡效果，整個UI顯得充滿能量，有激勵效果。
5、產品展示UI概念設計：視覺反饋
在購物類APP中，產品展示是相當重要的一個需求。這個產品展示的UI設計中，將產品展示用卡片式設計來承載，尺寸和價格也直觀的展現出來了。在這個設計中，動效的可用性相當高：它以視覺反饋的方式，清晰的告知使用者他們的操作已經完成。高效快速的微動效和可用性極高的介面佈局，讓整個介面顯得好用而易用。
6、日曆APP概念設計：協調
這個日曆APP的概念設計將日程管理和筆記的功能融為一體，並且加入了更加優秀的視覺設計。豐富而有梯度的色彩設計賦予介面以足夠的丰度，而流暢的動效則讓色彩由靜態變為動態，使之更加富有活力，也更加協調了。
7、計時APP概念設計：視覺化
這是一個相當獨特的單頁計時APP應用的UI設計，可以說它的整個互動都包含在動效當中了。作為一個單一功能的計時應用，設計師將它的動效設計發揮到了最大化，通過有趣的動畫展現了時間流逝的過程。使用者可以通過點選按鈕開始計時，也可以通過下拉開始計時。當然，這樣視覺化的設計可以更好的吸引對於視覺設計更加敏感的使用者。
8、UI導航概念設計：異化
對於一個新聞應用的使用者中心而言，這這樣的導航概念設計是相當的獨特的。時尚的色彩如同水一樣流動，操作按鈕像球一樣沿著傾斜的軌跡流動出來，可以稱得上是驚豔。
9、UI側邊欄概念設計：互動性
這是同一個城市新聞應用的互動設計，只不過這個是借用了iOS的Force Touch 功能同動態效果更好的呈現側邊欄設計。同樣是流動的色彩，但是Force Touch 讓這種動效具有了更強的互動性。
10、美食設計APP概念設計：展示與引導
這是一個基於美食的社交類應用，這個APP的UI設計希望通過更加快速便捷的方式以話題為中心，進行資訊更新。設計者希望其中包含分享、討論、聊天、關注、上傳、點贊和收藏等功能，這個時候，流暢的動效成了引導互動、展示功能的手段了。
11、動態滾動概念設計：輔助展現
這個概念設計的亮點在於動態時間軸的展示。這個動態滾動的資訊流同頂部的插畫風時間軸整合到了一起，時間軸被設計成為一個動態的資訊圖，當你向下滾動資訊流的時候，時間軸也隨之變化，輔助資訊流展現更為豐富的資訊。
12、咖啡優惠券APP概念設計：微互動
美食是世界上最美好的事情之一，所以美食也是設計中最常見的元素之一。這個APP 為使用者提供咖啡優惠券，所以設計師藉助動效來強化微動效，加上對於美食的聯想，創造讓使用者難以忘懷的體驗。
13、聯絡人列表概念設計：強化互動
這個聯絡人列表的概念設計中加入了不少橫向和縱向的滾動操作，相比於傳統的設計有著更強的互動性。動效成為了展現並聯通不同環節的橋樑，充滿電子意味的失真特效也讓整個設計顯得情懷十足。
14、多介面UI概念設計：物理規則
這個移動端APP的概念設計中囊括一系列不同功能的介面，包括地圖、聯絡人、搜尋框。這一系列介面展現了多種不同的互動以及控制元件的變化，這些複雜的互動過程中控制元件的運動規則都儘量模擬物理規則。
15、健康美食APP 概念設計：組織
這款APP是關於如何健康飲食的，提供了諸如生活方式、飲食技巧之類的資訊。整個APP 為不同的主題分配了不同的色彩，採用簡約直觀的佈局來突出視覺特色。APP中的動效設計則旨在體現不同元素之間的關係，並不顯眼，但是一系列微小的過渡將整個介面組織到了一起。
結語
動效設計千變萬化，但是動效設計始終是服務於UI的，你得時刻記住這一點。它終究是功能性的，你的目的是什麼，使用者的需求又如何，你想要營造的效果是什麼，這些因素可以引導你思考並設計出真正合理的動效。