這12個常用動效方法,很適合用到你的介面裡
如今對使用者來說,好的體驗是介面一致、易讀和簡單。設計師要如何才能讓 UI 更加符合使用者的自然直覺呢?
動效,可以讓介面變得更加自然,填補部分體驗上的隔閡。今天這篇文章會講到常用的 12 個 UI/UX 動畫原則,幫你做出富有樂趣的介面設計。
1. 緩動
”緩動“指的是在一個動作在過渡中進行的方式。你可以把緩動理解為加速或減速。一個物體可以從介面的一側緩慢啟動,然後加速,最後到另一側突然停止。或者,物體可以快速啟動,然後逐漸減速到停止。關鍵幀表示了動畫的開始和結束,緩動決定了中間過程。
將緩動應用於補間動畫的一種簡單方法是使用“屬性”面板(彩雲注:這裡彩雲還專門去查了下資料,這個功能是 AE 的一個 Beta 版本的功能,叫 Properties panel,可以很方便的修改屬性) 。緩動值的範圍從 –100 到 100。負值會從起始位置產生更平緩的變化(稱為緩入), 正值會導致逐漸減速(稱為緩出)。
(彩雲注:在我們現在用的 AE 正式版中,可以直接修改緩動屬性然後配合曲線也可以修改緩動幅度,如果有體驗過 Beta 版本的同學歡迎文末留言交流呀)。
Saptarshi Prakash
2. 偏移和延遲
當多個 UI 元素同時移動時,使用者傾向於將它們分組在一起,而忽略了每個元素都可能有自己的功能。
偏移和延遲在同時移動的 UI 元素之間建立了層次結構,並說明它們是相關的,但又是不同的。不同於完全的同步,元素的時間、速度和間隔是交錯的,從而產生了微妙的“一個接一個”的效果。(彩雲注:動效本質上也是為了打造層次感,其實這又是上 2 期講的底層設計原則的應用之一了。所以,我們在看一個知識點的時候,要學會系統性地去思考)
當用戶在螢幕之間切換時,偏移和延遲表明存在多個互動元素。
3. 父子關係
”父子關係“意思是將一個 UI 元素的屬性連結到其他元素的屬性。當父元素中的屬性發生變化時,子元素的連結屬性也會發生變化。所有元素屬性都可以相互連結。
例如,父元素的位置可以繫結到子元素的比例。當父元素移動時,子元素的大小會增大或減少。
父子級建立了 UI 元素之間的關係,建立了層次結構,這樣方便使用者同時與多個元素互動。在實際互動中,這種形式非常有影響力。
Ayoub Kada
4. 變換
變換髮生在一個 UI 元素過渡到另一個 UI 元素時。例如,一個下載按鈕變換到一個進度條,進度條完成後轉換成完成圖示。
從使用者的角度來看,變換是顯示使用者與目標相關狀態的有效方法(保證系統狀態的可見性)。特別是對於 UI 元素有從開始到結束狀態變換時,這種變換動效尤其有用。比如說這裡的檔案下載動效。(彩雲注:做這樣的動效是有效的,對於使用者體驗的 ROI 很高)
Y.J.Y
5. 數值變化
數值變化動效(數字、文字或圖形)在介面中非常常見,比如在銀行 APP,日曆,電商網站等等各類產品中。這些變化與現實中使用者的需求產生關聯,所以可以隨時被調整變化。
這種數值變化表明了資料的動態性質,動效告訴使用者資料是可互動的。如果沒有這些動態變化時,使用者的參與意願會降低。
Creative jeff
6. 滑動和變焦
滑動和變焦這樣的動效可以讓使用者在介面的 UI 元素中”旅行“,能增加畫面的層次細節。
- 滑動: 當用戶的視角接近(或遠離)一個 UI 元素時,就會產生滑動。想象一個人拿著相機走到一朵花前想要近距離拍攝。
- 變焦:通過變焦,使用者的視角和 UI 元素保持不變,但元素在使用者螢幕中的大小會增加(或減少)。現在想象這個人呆在原地,用相機的變焦功能讓花看起來更大。
7. 維度
維度使 UI 元素看起來好像有多個互動面,就像物理世界中的物件一樣。這種行為是通過使元素看起來像是可摺疊的、可翻轉的、浮動的,或賦予現實的深度屬性來實現的。
作為一種敘事手段,維度意味著 UI 元素的不同側面是連線的,並有助於無縫的螢幕轉換。
Sang Nguyen
8. 視差
當兩個(或更多)UI 元素同時移動但速度不同時,會產生視差,其目的是建立層次結構。
- 互動元素在前景中出現的更快
- 非互動元素在背景中出現的更慢
視差將使用者引向互動 UI 元素,同時允許非互動元素留在螢幕上,並保持設計的統一性。
Netrix
9. 模糊
想象一扇磨砂玻璃門, 它需要互動才能開啟,但也可以隱約看到門後面的東西。
模糊效果也是如此。它為使用者提供了一個需要互動的介面,同時顯示螢幕提示,引導使用者聚集。導航選單、鎖屏和資料夾/檔案視窗中都有經常被使用到。
magazineduwebdesign
10. 克隆
克隆是一種動態行為,把一個 UI 元素分裂成其他元素。這是一種突出重要資訊或互動選項的聰明方法。
當 UI 元素在介面中具體化時,它們需要一個清晰的原點,用來連結到已經在介面上的元素。如果元素突然出現或消失,使用者就很難清楚地記住上下文。
Interface Market
11. 疊加
在 2D 空間中,沒有所謂的深度,UI 元素只能在 X 和 Y 軸上移動。疊加在 UI 的 2D 空間中創造出前景/背景區分的錯覺。通過模擬深度,疊加可以根據使用者需要隱藏和顯示元素。
在使用疊加時,資訊層次結構是一個重要的考慮因素。例如,使用者在筆記應用中首先看到的應該是他們的筆記列表。然後,疊加可以用來為每條訊息提供次要選項——比如刪除或儲存。
12. 蒙版
蒙版是對 UI 元素的部分進行顯示和隱藏。通過改變元素的顯示區域,蒙版區域產生變化,同時允許元素本身保持可識別。因此,照片和插圖等視覺元素非常適合用在這種動效上。
從可用性的角度來看,設計師可以使用蒙版,給使用者反饋,讓使用者知道每一步操作的反饋和進度。
By Min-Sang Choi
歡迎關注作者的微信公眾號:「彩雲譯設計」
- PPT超全自學指南(14):進擊的版式之Logo頁處理和科技風拆解
- 超過200張插圖免費商用,還提供向量格式的Illustration Kit
- 這12個常用動效方法,很適合用到你的介面裡
- 校驗報錯如何設計更科學?2個方面幫你輕鬆搞定!
- 百萬首免費可商用音樂下載!線上素材網站dig.ccMixter
- D5 渲染器 2.3 強勢更新!50 功能更新和優化直戳使用者需求
- 免費開放!人人都能輕鬆上手的AI繪畫工具DreamStudio
- 如何寫出優秀的UX文案?來看高手的總結!
- 網易大咖出品!從5個方面分析如何提高遊戲耐玩性
- NVIDIA Studio 創意加速:三位 3D 藝術家對歐洲經典建築進行再創作
- 優秀設計的背後,離不開這11個應該掌握的底層理論
- 檢查網頁配色是否符合WCAG規範的神器「Color review」
- 要質感疊紋理!5個設計師必備的免費高清紋理素材網站
- 設計師不會做總結匯報,執行再好也很難提升!
- 掌握這5個Ai小技巧,幫你快速提升文字排版效率(四)
- PPT超全自學指南(13):進擊的版式之人物介紹頁面和圖表處理
- 大廠出品!教你一招搞定體驗設計方案
- PPT超全自學指南(12):進擊的版式之時間軸頁面和文字排版
- PPT超全自學指南(11):進擊的版式之關鍵詞頁面(下)
- 3種常見網格系統的用法,這篇幫你搞清楚!