<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          動效讓這些設計更驚艷

          2025-2-24    天宇

          微動效在產品設計中的運用已經非常普及了,無論是在圖標還是界面場景中,都運用得很普遍。通過動效的輔助不僅可以提升設計情感化,也能解決更為復雜的交互場景,讓設計更驚艷。
           
          最近在體驗一些產品的過程中,黑馬哥也發現了幾個借助動效表達的設計方案,效果十分的驚艷,分享出來和大家一起學習一下。
          動效讓這些設計更驚艷
           
           
           
           
          目錄
          一、3D 動效呈現會員等級
          二、情感化 IP 提升搜索關注度
          三、結合場景的情感化動效
          四、3D 空間感的 Banner 設計
          五、通過動效引導用戶操作
          六、微動效引導 VIP 續費
          七、動態還原實時天氣
          八、動態 IP 引導按鈕設計
          九、微動效賦予品牌活力
           
           
           
          一、3D 動效呈現會員等級
          會員中心通常會通過 3D 圖標來助力會員等級設計,除了靜態的表達也會通過動效和新穎的交互形式呈現,以此提高會員中心的視覺表現力。
           
          最近在體驗騰訊視頻 APP 時,會員專區在表現用戶會員等級的設計中,沒有使用傳統的徽章形式,而是以 3D 數字結合動效的形式表達。3D 動效的設計使得會員等級區別于常規形式,更有吸引力。 
          動效讓這些設計更驚艷
           
           
           
           
          二、情感化 IP 提升搜索關注度
          IP 形象是成就品牌的關鍵因素之一,被廣泛運用到產品感官體驗的設計中,帶來的情感化共勉也是顯而易見的。
           
          在使用悟空瀏覽器 APP 時,啟動產品進入首頁后搜索框上方出現悟空的 IP 形象,悟空呈現出左右環顧、上下打量,最后看向搜索框的系列動作等表現。不僅提高了搜索功能的關注度,也使得產品設計更具情感化。
          動效讓這些設計更驚艷
           
           
           
           
          三、結合場景的情感化動效
          根據不同的業務場景進行設計表達,可以更好的服務目標用戶,而情感化的設計提升,可以拉近產品與用戶之間的親和力。
           
          為了降低用戶等餐過程中出現的負面情緒,餓了么 APP 下單之后在詳情頁中根據點餐的不同設計了情感化的動效表達。無論是快餐還是冷飲等,都針對性地設計了微動效的元素,以此來表現當前狀態。
          動效讓這些設計更驚艷
           
           
          動效讓這些設計更驚艷
           
           
           
           
          四、3D 空間感的 Banner 設計
          通過突出設計、交互、布局結構等的創意性,可以使得 Banner 具備更強的差異化,以此來突出 Banner 的存在感。
           
          騰訊視頻 APP 首頁的 Banner 布局也會經常呈現出一些很有創意的方案,比如之前體驗到一個結合 3D 空間感營造的設計案例,就非常有吸引力。通過動態過度到立體空間,再恢復到默認形式,這個動態的過程演變就能讓用戶過目不忘。
          動效讓這些設計更驚艷
           
           
           
           
          五、通過動效引導用戶操作
          針對一些使用頻次不高或者過于隱藏的功能,為了提高用戶的操作概率,會通過一些特殊的設計表達來提升用戶的關注度,引導用戶進行相關操作。
           
          比如麥當勞 APP 首頁中,為了吸引用戶下拉進入二層樓,通過動效的形式設計了一個搖擺的鈴鐺,以此來吸引用戶的注意力。用戶看到像是隨風飄動的鈴鐺,就會忍不住去拉動,這就達到了引導用戶操作的目的,提高了二層樓內容的曝光度。
          動效讓這些設計更驚艷
           
           
           
           
          六、微動效引導 VIP 續費
          針對一些無法通過占比面積進行突出的元素,運用微動效的形式設計是常見的設計手法。
           
          網易云音樂 APP “我的”板塊中,為了突出 VIP 續費按鈕,黑膠唱片以動效的形式在按鈕中來回滾動,以此強化續費按鈕的關注度。
          動效讓這些設計更驚艷
           
           
           
           
          七、動態還原實時天氣
          天氣類產品從簡單的靜態預告升級為動態實時還原,可以讓用戶更加直觀的判斷天氣變化,也能提高界面設計的感官體驗。
           
          比如 iPhone 自帶的天氣 APP,以動態還原實時天氣作為界面背景,不僅便于用戶識別天氣,也使得產品設計更具情感化體驗。
          動效讓這些設計更驚艷
           
           
           
           
          八、動態 IP 引導按鈕設計
          按鈕設計樣式可以發揮的空間很大,除了在造型、配色、空間感等方面突出設計以外,也能通過按鈕微動效或者動態引導等形式強化。
           
          比如智行火車票 APP “搶票”板塊中,為了突出“添加搶票”按鈕的存在感,以動效 IP 引導進行設計。不僅使得按鈕更突出,設計感也顯得俏皮可愛,凸顯親和力。
          動效讓這些設計更驚艷
           
           
           
           
          九、微動效賦予品牌活力
          立足于品牌做設計是突出產品差異化的關鍵,這也是產品設計未來的演變趨勢之一,如何提高品牌的曝光度和記憶度,成為設計師不斷探索的方向。
           
          最近在使用夸克 APP 時,微動效賦予品牌 LOGO 的活力感讓人印象深刻。在眾多特殊節慶等時間段,夸克也會以動效的形式賦予品牌更多變化,不僅使得產品更具年輕化屬性,也能更好的傳遞品牌基因。
          動效讓這些設計更驚艷
           
           
          動效讓這些設計更驚艷
           
           
           
           
          小結
          動效使得產品具備更多的變化,也能輔助解決更多復雜功能的交互場景,探索動效的場景運用可以提升設計靈感,希望本期的分享可以帶給大家更多設計靈感。本文描述屬于個人體驗總結,不足之處我們努力改進。
           
          本文由 @黑馬青年 原創發布。未經許可,禁止轉載。


          作者:黑馬青年
          鏈接:https://www.zcool.com.cn/article/ZMTYzOTIyOA==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
           

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合