• 常見的交互動畫效果及各自適用的場景

      UI界面動畫設計能夠有效地表達頁面或者內容之間的邏輯關系,通過視覺效果直接清晰地展示用戶在UI界面中操作的狀態。動畫的應用能夠為用戶提供更加清晰的操作指引,表現出界面和內容的位置或者層級關系。
      本節將向分享UI界面中常見的多種交互動畫效果及各自適用的場景,供讀者進行參考。
    1. 滑動效果
      滑動效果即信息列表跟隨用戶的交互手勢而動,然后回到相應的位置上。保持頁面整齊,這種交互動畫屬于指向型動畫,內容的滑動取決于用戶是使用那種手勢滑動的。它的作用就是通過指向型轉場,有效幫助用戶理清頁面內容的層級排列情況。圖5-142所示為滑動效果在UI界面中的應用。
    圖5-142
      如果UI界面中的元素需要以列表的方式呈現,就可以使用滑動效果,例如一些人物的選擇、款式的選擇等,都適合使用滑動效果呈現。
    2. 擴大彈出效果
      界面中的內容會從縮略圖轉化為全屏視圖(一般這個內容的中心點也會移動到屏幕的中央),反向動畫效果就是內容從全屏視圖轉換為縮略圖。擴大彈出效果的優點是能清楚地告訴用戶點擊的地方被放大了。圖5-143所示為擴大彈出效果在UI界面中的應用。
    圖5-143
      如果UI界面中的元素需要與用戶進行單一交互(如點擊圖片查看詳情),就可以使用擴大彈出效果,使轉場過渡更加自然。
    3. 最小化效果
      界面元素在點擊之后縮小,然后移動到屏幕上相應的位置,相反的動效就是擴大,從某個圖標或縮略圖重新切換為全屏。這樣做的好處是能夠清楚地告訴用戶,最小化的元素可以在哪里被找到,如果沒有動畫效果的引導,可能用戶需要花時間去尋找。圖5-144所示為最小化效果在UI界面中的應用。
    圖5-144
      如果用戶想要在界面中最小化某個元素,就可以使用最小化效果,符合從哪來到哪去的原理。
    4. 對象切換效果
      對象切換效果是指當前界面移動到后面,新的界面移動到前面,這樣能夠清楚解釋界面之間是進行切換的,不會顯得轉換得太突兀和莫名其妙。圖5-145所示為對象切換效果在UI界面中的應用。
    圖5-145
      使用對象切換效果可以讓用戶產生眼前一亮的感覺,常應用于一些商品圖片的切換等。
    5. 展開堆疊效果
      界面中堆疊在一起的元素被展開,能夠清楚地告訴用戶每個元素的排列情況,從哪里來到哪里去,也顯得更加有趣。圖5-146所示為展開堆疊效果在UI界面中的應用。
    圖5-146
      如果某個UI界面中需要展示較多的功能選項,就可以使用展開堆疊效果。例如一個功能中隱藏了好幾個二級功能,使用展開堆疊效果,有利于引導用戶。
    6. 翻頁效果
      翻頁效果是指當用戶在UI界面中實施滑動手勢的時候,出現類似現實生活中翻頁一樣的動畫效果。翻頁的動畫轉場效果也能夠清晰地展現列表層級的信息架構,并且模仿現實生活中的動畫效果更加富有情感。圖5-147所示為翻頁效果在UI界面中的應用。
    圖5-147
      當用戶進行一些翻頁操作(如看小說、讀長篇文章等)時,應用程序使用翻頁效果會更貼近現實生活,引起用戶共鳴。
    7. 標簽轉換效果
      標簽轉換效果是指根據界面中內容的切換,標簽按鈕相應地在視覺上做出改變,而標題是隨著內容移動而改變的,這樣能夠清晰地展示標簽和內容之間的從屬關系,讓用戶能夠清晰理解界面之間的架構。圖5-148所示為標簽轉換效果在UI界面中的應用。
    圖5-148
      標簽轉換效果適用于同一層級界面之間的切換,例如切換導航或者操作進度流程。在UI界面中使用標簽切換效果可以讓用戶更了解架構。
    8. 融合效果
      融合效果是指UI界面中的元素會根據用戶的點擊交互而分離或者結合,用戶可以感受到元素與元素之間的關聯。比起直接切換,顯然用融合動畫更加有趣。圖5-149所示為融合效果在UI界面中的應用。
    圖5-149
      融合效果適用于當用戶在界面中操作某一個功能圖標時可能會觸發其他功能的情況。例如用戶在使用運動App開始健身或跑步的時候,點擊開始功能圖標,應用會同時出現暫停和結束功能操作圖標。
    9. 平移效果
      當一張圖片在有限的屏幕里不能被完整查看的時候,就可以在界面中加入平移的交互動畫,與此同時,還可以在平移的基礎上配合放大等動畫效果一起使用,從而使界面動畫的表現更加實用。圖5-150所示為平移動畫效果在UI界面中的應用。
    圖5-150
      通??梢栽谝恍┙缑鎯热荽笥谄聊坏慕缑嬷惺褂闷揭苿赢嬓Ч?,最常見的就是地圖應用。
    10. 滾動效果
      滾動效果是指根據用戶的操作手勢,界面內容進行滾動操作,該動畫效果非常適用于UI界面中列表信息的查看。滾動交互動畫是UI界面中使用最頻繁的交互動畫效果,也可以在滾動效果的基礎上加入其他的動畫效果,使界面的交互更加有趣和豐富。圖5-151所示為滾動效果在UI界面中的應用。
      當用戶在UI界面中需要進行垂直或水平滑動操作時,都可以使用滾動效果,例如界面中的列表、圖片等都可以使用。
    十八禁动漫露内裤扒开腿图片