新聞中心

新聞中心

帶你了解網絡營銷

這12個指向動效和適用場景UI設計師一定要知道

2017-09-11 09:31來源:網絡作者:小卓卓網址:http://www.zcwlkj.net/瀏覽數:250 


什么是指向性動效,它是指能夠有效的描述物體之間的邏輯關系,同時通過視覺效果,可視化的描述用戶操作時候當前的狀態。用戶可以通過指向性動效,很清晰的感受到物體之間的位置或者層級關系。

1、滑動

信息列表會跟隨著用戶的交互手勢而動,然后卡片到相應的位置上,保持整齊感,它屬于指向型動畫,物體的滑動取決于用戶是用那種手勢滑動的。它的作用就是通過指向型轉場,有效幫助用戶清理頁面層級的排列情況。

適合場景:當你設計的元素需要導航以列表方式呈現的時候可以使用滑動效果。例如一些明星的選擇,款式的選擇,適合用這樣的方式呈現。

2、擴大彈出

頁面中的卡片會從縮略圖轉化為全屏視圖(一般這個卡片的中心點也會跟隨移動到屏幕的中央)。反向動效就是卡片從全屏視圖轉換為縮略圖。它的優點是能清楚的告訴用戶點擊的地方被放大了。

適合場景:當你設計的元素是需要和用戶進行單一交互的時候。例如點開圖片查看詳情,讓轉場過渡更自然。

3、最小化

頁面元素點擊之后縮小,然后移動到屏幕上相應的位置,相反的動效就是擴大,從縮略圖重新變為全屏。這樣做的好處是能夠清楚的告訴用戶,最小化的元素可以在哪里被找到,如果沒有動效引導,可能用戶需要花時間去尋找。

適合場景:當用戶想要最小化某個元素的時候。例如搜索、添加快捷按鈕的點擊事件,符合從哪來到哪去的原理。

4、切換對象

當前頁面移動到后面,新的頁面移動到前面,這樣能夠清楚解釋頁面之間是進行切換的,不會顯得轉換的太突兀和莫名其妙。

適合場景:當用戶在元素之間切換?;瑒有Ч鄬碚f比較單一和常見,使用動效切換可以讓用戶產生眼前一亮的效果,例如一些商品款式的切換,就可以使用這樣的效果。

5、展開推疊

堆疊在一起的元素被展開。能夠清楚的告訴用戶每個元素的排列情況,從哪里來到哪里去,也顯得更加有趣。

適合場景:當用戶打開一堆功能選項的時候。例如一個功能里面隱藏了好幾個二級功能時,就可以使用這樣的效果,利于用戶引導。

6、翻頁

當用戶實施滑動手勢的時候,出現像現實生活中翻頁一般的效果。真正動效轉場也能夠清晰的展現列表層級的信息架構,并且模仿現實生活中的動效更加富有情感。

適合場景:當用戶進行一些翻頁操作時。例如看小說,讀長篇文章,使用這樣的效果會更貼近現實生活,引起用戶共鳴。

7、添加到列表

新的元素加入到原有的列表中,舊的元素被推開而不是替換,從而有現實中騰出位置的感覺,這種轉場效果能夠清楚的展現列表重新排列的過程,讓用戶知道新舊信息的位置,不會產生迷惑。

適合場景:當用戶需要進行新操作時。有一些頁面呈現的是將新的事件替換掉舊的,而使用這樣的動效可以讓用戶更清晰的知道自己做了什么,例如點贊,打賞。

8、導航標簽轉換

根據內容的轉換,按鈕相應的在視覺上做出改變,而標題是隨著內容移動而改變的,這樣能夠清晰的展示標簽和內容之間的從屬關系,讓用戶能夠清晰理解頁面之間的架構。

適合場景:同一層級頁面之間的切換。例如切換導航,或者進度流程。使用動效可以讓用戶更了解架構,是標簽而不是按鈕的感覺。

9、融合

元素會根據用戶的點擊交互而分離或者是結合,用戶可以感受到元素與元素之間的關聯,比起直接切換,顯然用融合動畫更加有趣。

適合場景:當用戶操作一個功能點時可能會處罰其他功能。例如運動app開始健身或者跑步的時候,點擊開始后會出現暫定或是結束。

10、滾動

根據用戶的手勢進行滾動操作,非常使用與列表信息的查看。這個交互方式是我們用的最頻繁的,仙子我們也可以加入一些動效使這個交互更加的有趣和豐富。

適合場景:當用戶垂直或者水平移動頁面時。例如列表,圖片,很多場景下都可以使用,也因此過于平凡,可以加一些動效讓頁面活起來。

11、平移

當一張圖片在我們有限的屏幕里沒有辦法看完的時候,會使用這樣的效果。除了放大效果,這樣的平移還可以加上動效配合一些功能使用。

適合場景:移動大于界面的的頁面。例如地圖,可以配合其他功能滾動產生平移效果。

12、保存指示器

用戶一旦進行保存、下載某個物體,物體會復制一份,同時縮小、移動到保存指示器中。這樣可以提示用戶下載或者是收藏的內容在哪里可以找到,能夠告訴用戶對象已經被添加。

適合場景:當用戶添加書簽、下載、保存,加入等行為的時候使用。

總結:仔細觀察我們手機中的動效,很多無非是多種基本動效的結合,因此研究這些基礎指向性動效很有價值。希望上面的12種基礎動效能夠幫助大家在今后的設計中舉一反三,做出功能性更強的UI動效。