UI設計 如何讓你的設計更「值錢」

UI動效現如今在 APP 和網頁中幾乎已經成為了基本的組成部分，經過仔細打磨的 UI動效對於整個界面的提升是顯著的。

動效呈現出狀態切換的過程，展現了元素之間的邏輯關係，並且吸引用戶的注意力，引導他們執行有效的交互。

在設計動效的過程中， Material Motion 的設計原則，IBM 動畫設計規則和 UX動效宣言都是不錯的設計參考和指引。

遵循這些現有的規範，能夠很好地提升動效本身的體驗和效果，從優秀走向卓越。今天的動效設計都是遵循著這些規範使用 InVision Studio 來進行製作的。

卡片的展開動效

卡片是最常見的 UI 元素，左側的界面中，點擊卡片之後，展開新的界面；右側界面中，點擊卡片之後，卡片擴展並填充整個屏幕。

點擊卡片之後，詳情頁向上滑出或者從左側滑出的設計很不錯。

通過展開動效從卡片直接過渡到詳情頁是更卓越的設計。

最好的動效往往能夠通過變化讓人明白兩種狀態之間的內在關聯。

在製作不同狀態之間變化的動效的時候，注意兩個界面中共享的元素，並且將它作為橋樑，將兩個界面狀態連接到一起。

在使用 InVision Studio 創建原型的時候，這種同時存在前後兩屏中的控制項會自動連接起來，構成動效。這一功能使得動效的構建更加便捷。

在列表中使用瀑布式展開動效

左邊的列表使用了較為迅速的淡入淡出動效，而右邊的列表當中，淡入淡出以延時的方式呈現，效果類似瀑布的展開方式。

淡入淡出的動效讓元素遞次出現加上輕微的位移，比較自然，看起來不錯。

列表元素通過延時次第出現，位移更加明顯，形同瀑布，在視覺和體驗上更為卓越。

瀑布式的展開動效只需要通過明顯的延時就能夠實現，適當地控制節奏，讓整個載入速度適當的減緩而不會太慢，讓用戶能夠感知到這個過程即可。

谷歌建議每個元素的延時不超過20毫秒。你可以在 Material Motion 中看到設計的原理和更多的實例。

展開時的擴展動效

左側的動效是內容在頂層覆蓋列表，而右側的動效是從中間擴展將上下內容頂開。

通過移動、覆蓋、展開的方式來呈現詳情頁的動效，視覺上看起來不錯。

而點擊之後展開頂掉周圍的元素，和周圍的其他的元素有所互動，這樣的動效更加優秀。

界面中所有的元素都應該是有「重量」的，某個 UI 控制項隨著動效變化的時候，和周圍的元素髮生互動，則能夠強化這種實體感。

菜單的展開動效

左側的動效中，菜單從底部淡入界面，而右側的動效中，菜單是從被點擊的按鈕中擴展開的。

菜單從按鈕的位置淡入進入界面的方式展現了兩者的關聯，這樣的設計還不錯。

通過擴展動效的方式來呈現菜單的展開，讓按鈕和菜單之間的關係得到了進一步的加強，這樣的設計更加優秀。

使用按鈕展現不同狀態

左側的按鈕通過文本說明和色彩變化來指示狀態改變，而右側按鈕則通過載入控制項來展示不同的事件的發生。

好的按鈕會指示狀態的改變，哪怕是通過文本來呈現。

通過按鈕本身，視覺化地呈現載入的狀態變化，比起文本說明更加自然，也更加易於理解，這樣的設計更加優秀。

嘗試使用載入指示器來指示狀態的變化和進度，類似的方式有很多，重點是在於視覺化的、自然的呈現狀態的變化過程，如果搭配上色彩的變化，那麼就更好了。

吸引用戶注意的動效

左側僅僅是通過色彩、符號和位置來吸引注意力，而右側加入了微妙的動效來吸引用戶注意。

使用色彩、標識和位置來吸引用戶注意力是頗為有效的手段。

藉助微妙自然的動效，不僅能夠吸引用戶注意力，而且不會造成干擾，這樣的設計更優秀。

對於一些重要的組件、事件或者信息，使用類似呼吸式的動效來強化效果是自然且干擾性較低的，這樣的動效設計讓元素的重要性得到凸顯，還不會讓用戶感到反感。

結語

希望今天所提到的這些技巧能夠讓你在設計交互動畫的時候，拿出更加自然、優秀的方案。

從優秀到卓越，有的時候只需要進行微小的改變。值得一提的是，像 InVision Studio 這樣的工具，對於動效本身的提升是很明顯的，它能夠提供更多自然而富有直覺性的動效。

總之，在設計動效的時候，注意狀態變化的指示，元素之間關係的強化，適當地增加一些樂趣。遵循這樣的原則，總能讓動效更上一層樓。

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