<ruby id="aeuc0"></ruby>
  1. <s id="aeuc0"></s>
    <source id="aeuc0"></source>

    將想法與焦點和您一起共享

    App動效原理和應用設計發布者:本站     時間:2022-03-17 15:03:18

    時下對動效的追捧,瘋狂至可以用一句話形容——“沒有動效的APP,簡直不是好的APP”。優秀的動效設計在提升產品體驗、用戶粘性方面的積極作用有目共睹,已然成為現下Web、APP產品交互設計和界面設計必不可少的元素。筆者想從常見基礎動效、動效作用、動效的應用設計和動效評判四個方面簡單談談對動效理解。

     

    Part 1 基礎動效
    常見動效通常是由多個基礎動效組合而成。下面就讓我們來看看有哪些常見的基礎動效。
     

    位移和速度
    位移是物體從一個位置到另一個位置的距離。動畫中的元素通過位移的變化產生了動態的效果。

    App動效原理和應用設計

    速度是和位移密不可分的變量。相同的位移、不同的速度,元素可以呈現不同的動態效果(如:勻速、加速、減速和緩入緩出等)。速度的變化可以增加動感,更容易引起關注。
     

    放大和縮小
    界面元素等比放大或縮小的過程。

    放大

    App動效原理和應用設計

    縮小

    App動效原理和應用設計
     

    消失和出現
    界面元素從無到有或從有到無的過程。

    App動效原理和應用設計
     

    翻轉
    翻轉可以是界面元素呈現3D效果的180度轉動,也可以是界面元素90度的折疊效果。

    翻轉

    App動效原理和應用設計

    翻折

    App動效原理和應用設計
     

    旋轉
    旋轉可以是界面元素圍繞中心點在平面上的轉動,也可以整個界面所有元素的轉動,如移動設備橫屏和豎屏之間的切換。

    局部旋轉

    App動效原理和應用設計

    全部旋轉

    App動效原理和應用設計
     

    變形
    界面元素根據操作觸發或設計自發的形狀改變。
    App動效原理和應用設計
    App動效原理和應用設計
     

    變色
    變色是指動效中界面元素的色彩變化。
    App動效原理和應用設計
     

    其他
    更多基礎動效內容推薦,見本文附錄。

    App動效原理和應用設計

     

    Part 2 動效作用
    總結動效應用的眾多作用,可以將它們歸納為五個方面:友好、有趣、反饋、過渡、引導。以下一起來詳細了解下動效在這幾個方面起到的具體作用,同時欣賞一些優秀的動效案例。
     

    友好

    與手勢結合,增強操控感
    當界面的動態與用戶手指在屏幕上的運動一致時,用戶會感覺到自己控制了這個界面,仿佛不是在操控一個智能設備的界面,更不是被界面操控,而是作用于一個符合真實世界運動規則的物體。這種模擬現實操作的情境帶入,讓手勢操作更易于學習,體驗更流暢。

    App動效原理和應用設計
     

    讓錯誤不再令人沮喪
    無論是外部因素造成的網絡鏈接中斷、系統出錯,或者是用戶主動操作引起的用戶名、密碼輸入錯誤等等,出錯總是那么令人討厭。頻繁的出錯讓用戶覺得自己很愚蠢,這種感覺很糟糕。萌萌噠的動效可以中和失敗帶來的沮喪,讓出錯變得更友好可愛。

    App動效原理和應用設計
     

    有趣

    讓等待不再無聊
    等待文件下載、等待頁面刷新…傻傻的等待什么也不能做,真的好boring!有趣的動效分分鐘吸引你的眼球,當你還沉浸在創意無限、或是萌萌噠的動效中的時候,無聊的等待時間已經結束了呢。

    App動效原理和應用設計
     

    增添趣味性,創造超出預期的驚喜
    一直以來登錄是最常規的不可避免的操作,當我們在一個新網站上迫不及待想要發表評論時,對于它的出現是有一點厭煩的。但當我看到這個動效的時候,真的覺得太有趣了,驚喜之余第一次愉快地完成了登錄。

    App動效原理和應用設計
     

    讓界面充滿活力
    動效賦予了界面更多活力,甚至自帶了人格,而不再是機械、呆板的界面。

    App動效原理和應用設計
     

    過渡

    表現層級關系
    轉場動效是從一個界面切換到另一個界面的過渡。出色的轉場動效能夠通過空間即視感,很好地展現兩個界面之間的層級關系。

    App動效原理和應用設計
     

    增加界面轉場的延續感
    兩個可以相互切換的界面之間,存在某些共同的界面元素,在設計轉場動效時,保存共同界面元素的延續顯示,能夠使界面轉場更加流暢自然。

    App動效原理和應用設計
     

    隱藏和展示界面元素
    界面空間有限,需要展現的信息很多。這個時候,可以將當前任務下不需要的界面元素隱藏,將空間留給需要展示的元素。

    App動效原理和應用設計
     

    反饋

    讓反饋更高效觸達
    生硬的文字反饋和直觀的動效反饋相較比,高下立見。動效反饋還可以帶上一些情感的元素,抓住用戶的情緒。

    App動效原理和應用設計
     

    令人愉快的提示
    App動效原理和應用設計
     

     

    引導

    新手引導操作
    動效操作演示,讓新手用戶能夠快速學習上手。

    App動效原理和應用設計
     

     

    吸引注意力
    當有重要的信息需要用戶注意或嘗試操作時,恰當好處的動效能夠有效地吸引用戶的注意力。

    App動效原理和應用設計

     

    Part 3 動效應用
    利用基礎動效,并結合動效的作用,我們嘗試對京東的服飾APP《京致衣櫥》進行通用動效的設計。下面來看實例。
     

    等待動效

    頁面加載動效
    融入服飾元素,增加有趣的頁面加載動效,讓加載等待不再枯燥。

    App動效原理和應用設計
     

    操作等待動效
    增加簡潔耐看的小動效,讓通訊等待狀態良好地反饋給用戶。

    App動效原理和應用設計
     

    刷新動效

    首頁刷新
    設計首頁獨有的刷新動效,融入女性時尚購物元素,體現APP調性,還可以根據運營需要在節日、大促等更新符合主題的動效圖。

    App動效原理和應用設計
     

    普通頁面刷新
    刷新動效的設計需要符合app簡約時尚視覺風格。

    App動效原理和應用設計
     

    列表相關動效

    列表加載
    列表加載動效使用和頁面下拉刷新、操作等待相同的視覺元素,保持了APP整體風格一致。

    App動效原理和應用設計

     

    2.列表到底提示

    添加小彩蛋,列表到底連續上滑,會出現擬人的有趣提示文案。

    App動效原理和應用設計
     

    轉場動效
    保留兩個轉場界面之間的共同元素,使轉場過渡更加流暢自然。
     

    1.衣櫥-搭配商店查看商品大圖

    App動效原理和應用設計
     

    2.圈子-搭配大圖跳轉到搭配詳情頁

    App動效原理和應用設計
     

    3.搭配小圖跳轉到搭配詳情頁

    App動效原理和應用設計
     

    收藏動效
    增加社區Feeds或商品收藏/取消收藏的小動效,優化操作反饋體驗。

    App動效原理和應用設計

    彩色加載底圖
    這個不屬于動效,但仍是一個有趣的點。當網絡不暢時,給預加載的底圖增加豐富的色彩,不再是一片呆板的死灰。

    App動效原理和應用設計

     

    Part 4 動效評判
    如何評斷一個動效的好壞?從動效的作用來看,好的動效設計需要滿足以下幾個點:

    提供了更好的操作體驗
    提供了有效的信息、反饋等
    幫助用戶操作或完成任務
    觸發了積極的用戶情感
    除以上之外,動效的時間長度也是非常重要的因素。過長的、冗余的動效會影響用戶的操作,更嚴重的是還可能引起用戶負面的體驗。故恰到好處地掌握動效的播放時間也是制作好動效的必備技能之一。



    選擇我們,優質服務,不容錯過
    1. 優秀的網絡資源,強大的網站優化技術,穩定的網站和速度保證
    2. 15年上海網站建設經驗,優秀的技術和設計水平,更放心
    3. 全程省心服務,不必擔心自己不懂網絡,更省心。
    ------------------------------------------------------------
    24小時聯系電話:021-58370032
    關鍵詞標簽:上海網站建設 上海網站制作 網站優化 小程序開發
    性爱网站在线观看_免费无码国产_久久人91午夜亚洲精品无码区_久久精品国产99国产精品
    <ruby id="aeuc0"></ruby>
    1. <s id="aeuc0"></s>
      <source id="aeuc0"></source>