看似花哨的UI概念動效，並不只是為了耍酷而存在

在 UI 界面當中使用動效已經成為這幾年一直被討論的熱門話題了。動效要怎麼用，什麼樣的動效更優秀等等，這樣的探討層出不窮。在 UI 所涉及到的各種動畫和動效當中，概念動效是被討論的最多的話題。充滿實驗性的概念動效是動效設計最前沿的領域，是開發和實現上最具有挑戰性的部分，也是新產品上線之後，用戶最容易注意到，也討論得最多的東西。

在 Tubik Studio 的博客上，我們已經分享過很多關於 UI 動效的文章和內容了。關於概念動效/動畫對於 UI 設計與開發的影響，我想 Tubik 的動畫設計師 Kirill Yerokhin 是最有發言權的。

概念動效是什麼？

概念動效應該算是概念設計領域的一個分支。總的來說，概念動效還是在做動效和動畫的設計，不過它是為了在真實的產品上線之前，基於特定的想法、構思而進行創建的東西。在進行用戶界面設計的時候，動效可以存在於交互、轉場和具體的控制項操作上，動效作為一種狀態轉變、交互反饋和視覺引導的工具而存在。動效設計師會使用各種各樣的工具來進行動效的設計，我們常常提到的工具包括 Adobe After Effects，Principle，Figma 和 InVision。

為什麼UI設計需要概念動效

這其實是目前最富有爭議的話題。很多概念動效和現有的、成型的動效/動畫解決方案，在步驟、效果、執行和開發上都不盡相同，超出了通常的限制和常見的規則。這種動效技術在剛剛開始接觸的時候，會覺得不夠真實，沒有必要，甚至有人會認為無法實現。

重點在於，UI 動效其實和我們常見的靜態元素（字體、圖標、控制項、色彩和形狀）同樣能夠讓產品從激烈的競爭當中脫穎而出。

GIF

所有開發者討厭概念動效且不想去實現的說法其實是不夠準確的。實際上，這樣的事情要依情況來看。在很多創意設計領域當中，經常有人說某種創新或者創意是不可能實現的，然而實際上，總會有人竭盡所能發現新的解決方案，找到新的方法。

需求決定供應。如果「市場」看到了一個全新的設計理念，尤其是在動畫和動效領域，就會有人想辦法在實際的產品當中將它實現出來。而這個時候，設計師的構思就不再停留在概念上。在 Tubik Studio，我們在很多時候會提出新的概念動效，這些概念動效甚至可能會極其複雜，但是需求一旦確定，總會有第三方的開發接手並且將他們實現出來。

實踐表明，在技術上，概念動效的實現幾乎僅僅就是時間和花銷上的問題，解決和實現的可能性其實非常之高。

UI 概念動效設計實例

列表滾動

GIF

第一個案例展示了和列表交互的動畫，左邊的列表只是單純的滾動，而右邊的則明顯的加入了漸進的動效，模擬現實中拉動卡片的微妙動作。右邊的變體看起來更加生動活潑，為滾動交互體驗增加了樂趣。更有趣的地方在於，右邊的變體在運動的過程中產生了卡片之間有更多空間的視覺幻象，這讓整個界面充滿了呼吸感和動感。

列表和詳情頁之間的過渡

GIF

上面的案例當中，左邊只是簡單的左右切換過渡，而右邊則帶有放大和轉變的過渡，不僅讓動效的指向性更為明顯，而且更加富有動態。

側邊欄菜單

GIF

概念動效往往會力圖讓最常規的交互效果更加生動，比如側邊欄展開這樣常見的操作。

概念動效在 UI 中實現的實例

概念動效是 UI 設計階段最具有創造性的階段之一，動效設計師會提供不同的方案和選項來同開發者和客戶進行討論。下面的案例都是 Kinill 和 UI 設計師一同實現的一些實例。

GIF

這是一個財務管理類應用動效，採用不同色彩來實現餅狀圖來進行數據展示，整個效果時髦值很高。

GIF

這是音樂新聞應用中的過渡動效。

GIF

這是為家庭預算 APP 設計的菜單打開概念動效。

GIF

這是商務名片 APP 的 UI 概念動效。

GIF

這個日曆 APP 的概念動效想必大家都見過很多次了，多彩的設計和流暢的動效至今令人難忘。

GIF

這個充滿流動性側邊欄動效非常有意思。

概念動效的主要優點

事實上，從最基本的構思和概念開始創新和創造幾乎是每個行業都遵循的流程。包括汽車行業和建築設計，大多都是從基本的概念設計著手，才有之後的實現和發展。概念設計最初常常以「這只是和現實無關的幻想」的樣子出現，但是最終實現出來並且走入日常生活的案例，比比皆是。不管怎樣，無論好壞，它們都在推動我們的生活逐步前進。

在 UI 設計領域，概念動效的優勢和意義也是一樣的。前不久有不少人認為我們所設計的動效是不真實的、過於花俏的，但是實現出來，上手之後，往往和預期不盡相同。在平面設計的年代，靜態的設計追求的是持久的價值，簡約和清爽讓這種價值得以維繫。但是在這個用戶注意力資源極其有限的今天，多樣的需求和緊張的競爭使得動效設計師需要竭盡全力抓住用戶的每一點注意力，至少，越來越腦洞大開的動效正在證明它們在這件事上無可替代的價值。

原文地址：https://tubikstudio.com/conceptual-animation-making-ui-design-stand-out/

譯文地址：https://www.uisdc.com/conceptual-animation-making-ui

譯者：陳子木

交互設計學堂已經開設了新的欄目-行知書院，旨在幫助小夥伴們來高效的學習現在市面上優秀的用戶體驗書籍比如《交互設計精髓》等等，同時結合老D的工作經驗來幫助你們從不同的高度和角度來解讀書中的內容。每天一課，積少成多。已有222位小夥伴加入。詳細了解行知書院

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！