實用幹貨！UI界麵中常見的動效類型解析

當我們在完成一個Demo動效的時候，通常我們就對照著參考樣式做出來就好，但互聯網產品的動效和一般意義上的動效會有很大區別。

我們需要動態的合理表達，讓我們的設計作品在“時間”和“空間”中讓用戶產生視覺上的真實感，當用戶意識到這個動作是合理的，才能更清晰愉悅的使用我們的產品。才能為我們的產品在設計和體驗中創造更多的價值。所以不同的使用場景決定了我們需要用不同的方式來表現對應的內容。

總結出來，大致可以分為這樣的一些類別：

1.品牌演繹

針對不同品牌的風格和特點，有針對性的結合產品、場景、服務和空間轉換等元素，喚醒用戶的情緒，更好的呈現品牌故事。而品牌形象或者擬人化等角度出發，對品牌進行有效的宣傳和表現，可以提高公司的專業性。從而提高品牌的識別度，給人留下令人愉悅的第一印象。這些內容可以普遍應用於社交網絡、企業網站、演示和發布促銷視頻等方麵。

2.產品界麵內的交互動效

層級展示

當界麵中的元素存在不同層級時，合理的動效可以幫助用戶理解清楚頁麵中元素的前後關係位置，提升整個頁麵的空間感。

空間表現

當一個產品在某個頁麵中，需要去承載大量的信息內容時，就可以通過這種折疊翻轉或者是縮放的形式，漸進展示其中的內容，來降低用戶的學習成本。其中也包括頁麵內的刷新和加載，從優先級的角度對同類的內容進行折疊，當用戶對某一部分感興趣時，隻需要滑動屏幕，就可以得到同類的更新的更多內容。

聚焦關注

部分頁麵中，我們可以通過元素的動作變化，提醒用戶需要去特別注意的一些信息內容，這種提醒方式可以降低視覺元素的幹擾，很輕鬆的就能讓用戶的注意力集中在我們想讓他關注的元素中。而這裏大部分都是針對某一個功能而言。

比如當前頁麵中通過元素的縮放位移等，我們成功的注意到了它們。

內容展示

我們在做內容展示的時候，通常會按照優先級對相關元素或功能進行逐級展示，引導用戶視覺焦點，幫助用戶更好的認知頁麵中的布局，層級和展示重點，同時也能夠讓頁麵變得生動活潑。

當我們使用動態的數值變化時，用戶會覺得自己與這些數值是有關聯的。讓用戶感知到自己可能有能力影響到數據，提升了參與活動的意願。反之，如果這些值是靜態的，就感覺與現實的聯係會減少。

控件動畫

不同於我們額外安裝的第三方軟件，在係統中，為了更好的突出強調係統的流暢，針對係統中的部分操作，我們會在“提示條、導航切換、分享或選擇”等這類控件轉場時的流暢度進行優化，從而保證用戶能清晰的知道操作的流程。簡單有規則的“出現-消失，出現-操作-消失”即可。

細節展示

當我們在閱讀或查看視頻或文章時，會用點讚的方式進行內容的鼓勵，其中，包括持續點讚和單次點讚。

3.產品界麵間的交互動效

頁麵間的層級跳轉或場景切換，能夠幫助用戶更好地去理解界麵間的變化和功能層級之間的關係，可以避免因瞬間切換導致用戶產生突兀或阻斷信息的感覺。

能夠讓用戶在頁麵切換中有一個心理的預期，看到內容的變化（新增或刪減）的同時還保證了舒適和流暢，而經常使用的方式有縮放不透明度旋轉等。

總結：

在了解了上述分類後，我們會發現表現形式和方法並不唯一，但從以上的分類中，可見動效的表現形式可以依據場景的變化做出不同的個性化的表現，但不變的是最終的輸出都依托於需求，所以我們需要站在更長遠的角度去了解一個動效需求，合理的解讀才能更好的展示。

來源：視覺半徑公眾號

作者：張瑞岩