1. <th id="fdehc"></th>
      1. <rp id="fdehc"><ruby id="fdehc"><input id="fdehc"></input></ruby></rp> <th id="fdehc"></th>

        <dd id="fdehc"></dd>
        <dd id="fdehc"><pre id="fdehc"></pre></dd>

        1. 咕嚕嚕

          UI設計師在做界面的時候,你還沒有考慮到用戶的交互體驗?動效場景還不知道怎么做嗎?看這邊篇文章的優秀案例,學以致用吧。

          小可愛們,我這里會定期推送插畫、UI設計、排版等相關文章教程,有事沒事來逛逛??;
          設計路上在學習,永不停歇,我們一起加油~

           

          動效在 UI 場景中的運用已經非常普遍,帶給用戶的體驗升級也是很直觀的。無論是一個圖標動效到界面間的轉場動效,還是聊天場景中的表情動效等,都證明了動效已經是無處不在。

          最近黑馬哥在體驗產品的過程中,發現了很多優秀的動效案例,今天選擇其中的 10 個和大家一起交流學習,希望能夠帶給大家一些靈感啟發。

           

          ?01.??

          動效,讓點贊與眾不同?

          動態表情為社交場景帶來更活躍的體驗,使得交流過程變得更加趣味性。一個動態的表情不僅活躍了氛圍,也使得通過簡單的一個符號代表了千言萬語。

          最近在使用釘釘 APP 進行聊天的過程中,發現輸入框的大拇指圖標在長按的時候結合了動效的變化,對話場景中出現的大拇指表情會隨著長按而增大。結合動效和長按手勢,為點贊的圖標增加了不一樣的趣味性,帶給用戶不一樣的社交體驗。

           

          [優化輸出圖像]

           

           

          02.??

          動態提醒,增強消息的關注度?

          各類通知/消息在產品中隨處可見,紅點提示剛出現的時候還引起了用戶強迫癥,短時間內也增強了消息的閱讀率。隨著紅點效應逐漸淡化,未讀消息的點擊率逐漸降低,大家都在嘗試更多提高關注度的形式。

          支付寶在消息模塊的服務提醒中,采用了動態形式提高關注度。當用戶點擊消息進入界面時,小鈴鐺圖標會左右晃動,以此來吸引用戶的目光,達到增加關注度的目的。

          圖片

           

          ?03.??

          圖標動效,讓你脫穎而出?

          在金剛區眾多的業務模塊中,想要突出重點模塊的關注度,采用動態圖標是比較常用的方式。采用動靜結合的形式,會讓動態表達得到突出。

          比如 Keep App 將活動挑戰圖標動效化,在不改變配色規則和圖標設計規范前提下,依然可以達到突出主題的作用。

          圖片

           

           

          ?04.??

          博人眼球的動態懸浮廣告?

          在不破壞產品結構的前提下,融入廣告的做法中,懸浮層廣告是較為明顯的形式。通常是靜態異形和動態異形較多,而動態的關注度相對更強一些。

          比如 Keep App 將活動的折扣信息以懸浮層的形式表達,既不會占用太多空間(隨著滑動會隱藏顯示),又能吸引用戶的關注度。如果用戶覺得影響操作,也可以直接關閉,就不會反復提醒而形成干擾。

          圖片

           

           

          ?05.??

          內容模塊結合動效替換突出存在感?

          在一些內容量比較多的產品中,比如電商產品,很多內容模塊都是百花齊放。都想要突出自己模塊的存在感,帶來更好的流量引入。而動效的結合也是不錯的選擇,但是需要考慮動效的干擾度。

          當當 App 在突出今日搶購欄目時,為了不影響臨近板塊的干擾度,利用動效轉場來替換展示的商品信息??s放替換商品時的動效既能達到差異化,也不會破壞整體的結構,算是一舉兩得的設計解決方案。

          圖片

           

           

          ?06.??

          微弱的動效也能呈現有溫度的設計?

          有時候在進行產品設計的時候,動效帶來的關注度并不是需要很強的表現力,一些微弱的動效依然可以提升產品體驗,帶給用戶更有溫度的設計。

          自如 App 整體的設計都是做得非常不錯的,在“我的”板塊頭部區域,結合背景插畫視覺感也是非常不錯。插畫中部分元素的微動效增強了生活氣息和真實感,讓用戶感受到這是一款有溫度的產品,提升用戶的好感度。

          圖片

          圖片

           

           

          ?07.??

          動態感十足的底部標簽欄?

          圖標動效運用到底部標簽欄十分普遍,在這個頻繁切換的操作中,動態的形式可以帶來更強的趣味性和關注度。

          優酷 App 底部標簽欄采用多種顏色變化轉場,結合路徑動效帶來動感十足的體驗。首頁圖標還結合了刷新的功能,方便用戶進行內容的刷新,增強用戶體驗感。

          圖片

           

           

          ?08.?

          ?拓展功能的動態指引設計?

          針對一些功能體量較大的產品,會經常結合一些隱藏式設計,拓展出更多功能操作。通常默認為展開狀態,在滑動瀏覽內容時隱藏,通過動效吸引點擊展開,不會造成主內容的干擾。

          比如平安口袋銀行底部標簽欄上方的拓展功能區,動態形式的展開與隱藏方便用戶瀏覽主頁內容。個別內容采用動態設計(點我抽獎),突出其點擊欲望。動態設計不僅提高了功能的曝光度,也能引導用戶操作,將繁瑣的操作變得更便利。

          圖片

           

           

          ?09.?

          ?結合動態 IP 的下拉刷新?

          針對下拉刷新這一常規操作,設計形式也是豐富多樣。結合 IP 形象進行動態演變完成刷新動作,被很多產品設計師所采納。

          美團外賣就將品牌 IP 形象結合得恰到好處,下拉刷新時兩只耳朵搖擺非常俏皮可愛,松開后 IP 形象露出,還配合眨眼睛等可愛的表情動效。情感化設計結合動態表現,拉近與用戶之間的親和力,帶給用戶更人性化的使用體驗。

          圖片

           

           

          ?10.?

          ?圖標動效帶動局部功能的關注度?

          對于一些局部功能或者模塊占比較小的欄目,為了提高曝光度,獲得用戶的關注度,動態的形式是比較常用的方法。通常會在圖標部分、文字部分、裝飾元素部分等進行動效設計,帶來的效果也是顯而易見。

          比如 QQ 音樂在“我的”模塊中,將活動中心、會員中心、每日簽到的圖標采用動態設計形式,雖然幾個模塊占比較小,但是依然能夠獲得用戶的關注度。

          圖片

           

           

          ?結?

          動效表達在產品設計中的應用越發普及,不僅可以強化功能的關注度,也能帶給用戶感官體驗上的升級。優秀案例的積累和分析,有助于我們掌握更多的表現形式,靈活的運用到項目設計中。

           

          原文地址:黑馬家族(公眾號)

          作者:黑馬青年

          轉載請注明:學UI網 » 發現了10個非常棒的UI動效案例

          登錄收藏
           
          你可能喜歡的:
          底部標簽欄動效設計 10 佳案例底部標簽欄動效設計 10 佳案例
          微交互設計一定要知道的8種類型!微交互設計一定要知道的8種類型!
          這逆天的效果,竟然是10秒鐘做出來的,真實大開眼界!這逆天的效果,竟然是10秒鐘做出來的,真實大開眼界!
          底部導航動效設計的3大形式總結!底部導航動效設計的3大形式總結!
          圖標動效設計的3大形式總結!圖標動效設計的3大形式總結!
          按鈕動效設計的3大方向!按鈕動效設計的3大方向!
          【AE教程】文字浮動教程!【AE教程】文字浮動教程!
          【大咖專訪】Jies_L:我的交互動效可以這樣玩!【大咖專訪】Jies_L:我的交互動效可以這樣玩!
          【AE教程】極簡液態動效教程【AE教程】極簡液態動效教程
          【藍湖有方】如何做出有效的設計,讓產品又好看又好用?【藍湖有方】如何做出有效的設計,讓產品又好看又好用?
          ?
          性xxxx18学生和老师
          1. <th id="fdehc"></th>
            1. <rp id="fdehc"><ruby id="fdehc"><input id="fdehc"></input></ruby></rp> <th id="fdehc"></th>

              <dd id="fdehc"></dd>
              <dd id="fdehc"><pre id="fdehc"></pre></dd>