越來越多的設(shè)計師意識到動效設(shè)計在用戶體驗中的重要性。動效不再僅僅是讓使用我們產(chǎn)品的人感到愉快的一種方式像屋,而是一種讓體驗變得輕松而有趣的功能性工具。我們大多數(shù)人都聽說過古老的(并且仍然如此)說法:“優(yōu)秀的設(shè)計就是講故事”边篮。那么運動可以幫助我們以更少的時間和更清晰的方式來講述這個故事己莺。
用戶界面中的動效使我們能夠:
1. 直接焦點;
2. 建立對象之間的層次和空間關(guān)系;
3. 建立品牌個性;
用戶界面中的動效仍然是一個非常新的領(lǐng)域。幾乎沒有任何資源可以傳授頁面轉(zhuǎn)換的最佳實踐或顯示加載屏幕的常用模式幾乎沒有資源苟耻。我們可以通過研究傳統(tǒng)動畫原理并學(xué)習(xí)如何將其應(yīng)用于抽象形狀和圖案(如我們在數(shù)字界面中看到的圖案)來開發(fā)可用的動畫庫篇恒。
“Motion不再僅僅是讓使用我們產(chǎn)品的人感到滿意的方式扶檐,而是一種讓體驗變得輕松而有趣的功能性工具凶杖。”
動畫技術(shù)最常被引用的資源之一是迪士尼的動畫原則款筑,由Frank Thomas和Ollie Johnston在20世紀(jì)80年代引入智蝠。這些原則的目的是為了創(chuàng)造角色動畫中自然運動的幻覺。盡管運動設(shè)計人員很好地理解了這些原理奈梳,但通過用戶界面的視角來看待它們杈湾,可以讓我們在以前沒有的原則上添加一個方面:功能。使用它們作為指導(dǎo)攘须,我們可以提供反饋并提供清晰的信息漆撞,以便與我們的用戶進(jìn)行更有效的溝通。
相關(guān):用Pixar的22個故事講述規(guī)則改進(jìn)用戶體驗
通過更深入地了解這些原則于宙,我們可以獲取關(guān)于如何在功能上使用每種方法的寶貴信息浮驳,為我們的用戶創(chuàng)造更好的體驗:
立面體
立面體是指將形狀看作是立體物體,因此受物理學(xué)的自然規(guī)律支配捞魁。使用實體繪圖的概念對于開發(fā)面板或信息之間的空間關(guān)系至關(guān)重要至会。所有物體都保持一定的重量和體積,并受到重力谱俭,摩擦和慣性等因素的影響奉件,所以任何移動的結(jié)果都應(yīng)該反映出這一點。當(dāng)物體遵守自然法則時昆著,它們屬于哪里县貌,它們往往對用戶來說更直觀,而普通感覺更好凑懂。
隨著面板的交互窃这,陰影,圖層和速度根據(jù)物理定律而變化。
弧
物體移動的方向告訴物體的類型杭攻。通常只有機(jī)械物體以完美的直線移動祟敛,而具有更多有機(jī)質(zhì)量的物體則以弧形移動。無論您希望您的產(chǎn)品以技術(shù)性兆解,愚蠢性還是優(yōu)雅的姿態(tài)被接受馆铁,改變弧形動作都可以使其對品牌的特征產(chǎn)生真實感。
直線運動使這個應(yīng)用程序保持干凈和專業(yè)锅睛,同時增加柔軟的松弛使運動感覺更自然埠巨。
分段
分段就是為即將發(fā)生的事情設(shè)定場景。良好的運動設(shè)計引導(dǎo)人們注意重要的內(nèi)容现拒。當(dāng)他們通過屏幕過渡時辣垒,分段動畫將重點放在下一個應(yīng)該解決的問題上,或者引起人們對可能發(fā)起的潛在互動的關(guān)注印蔬。這有助于建立層次結(jié)構(gòu)并闡明用戶的操作流程勋桶。
只在用戶開始輸入評論后出現(xiàn)的提交按鈕才會為他們接下來應(yīng)采取的操作設(shè)定舞臺。
夸張
夸大其實就是:讓事情變得更加戲劇化侥猬,以喚起對某事的注意或說出一個觀點例驹。這可以表現(xiàn)在搖動的通知鈴中,或者響應(yīng)于交互錯誤退唠【樾猓夸張引導(dǎo)焦點,并明確指出用戶應(yīng)該注意瞧预。
夸大可以強調(diào)確認(rèn)和錯誤狀態(tài)屎债。
次要動畫
當(dāng)涉及到轉(zhuǎn)換時,如果它太快或突然移動垢油,很容易讓用戶感到困惑; 輔助動畫確保不會發(fā)生盆驹。它重申了主要行動,以便用戶可以確定發(fā)生了什么秸苗。這是一種輕微的召娜,有時不肯定。
屏幕向上移動惊楼,我的收藏類別的主要運動被選中并移動到頂部玖瘸。
吸引
如果你的動畫讓用戶放大了他們的眼睛,轉(zhuǎn)動他們嘴唇的角落檀咙,或者發(fā)出一聲輕笑雅倒,你已經(jīng)做出了吸引人的互動。這給交互帶來了更難忘的體驗弧可,并為品牌塑造品格蔑匣。吸引力將產(chǎn)品提示到一個新的水平,它不僅解決了問題,而且還解決了情緒問題裁良,讓人們回來使用你的產(chǎn)品凿将,而不是另一種能夠幫助他們實現(xiàn)相同目標(biāo)的產(chǎn)品。
吸引力使互動更有趣
了解這些原則會讓你事半功倍
學(xué)習(xí)這些原則會讓你在UI動畫的門戶中占據(jù)一席之地价脾,但有時甚至當(dāng)你遵循所有的規(guī)則時牧抵,你的動畫仍然顯得不可靠。作為動作設(shè)計師學(xué)習(xí)最重要的經(jīng)驗教訓(xùn)之一是開發(fā)品味的重要性 - 即在你的大腦中能夠告訴你何時感覺正確侨把。密切關(guān)注事物如何在現(xiàn)實世界中移動可以顯著改善您對運動的注意力犀变。當(dāng)潮汐流入時它看起來像什么?你周圍的物體如何對自己的運動做出反應(yīng)秋柄?開始接受日常生活中的動作获枝,它會以令人驚訝的方式轉(zhuǎn)化為您的數(shù)字作品。
? ?“每一個動作都應(yīng)該是有意的骇笔,并以某種方式使用戶體驗受益省店。”
結(jié)論
這些動畫原理是永久的蜘拉,因為有充分的理由 - 在設(shè)計用戶界面時可以牢記它們可以極大地提高產(chǎn)品的功能萨西。如果使用得當(dāng)有鹿,動畫甚至可以對整個產(chǎn)品和品牌的成功產(chǎn)生積極影響旭旭。在為產(chǎn)品設(shè)計動畫時,請始終記住動作的功能 - 每個動作都應(yīng)該是有意的葱跋,并以某種方式為用戶體驗帶來好處持寄。利用物理學(xué)的自然規(guī)律來指導(dǎo)物體如何相互移動和互動。
最后娱俺,保持樂趣稍味!有意義的設(shè)計不應(yīng)該是無聊的。 設(shè)計一個愉快的體驗荠卷,你的用戶會不斷地回來模庐。