UI中的動效原則

越來越多的設(shè)計師意識到動效設(shè)計在用戶體驗中的重要性。動效不再僅僅是讓使用我們產(chǎn)品的人感到愉快的一種方式像屋,而是一種讓體驗變得輕松而有趣的功能性工具。我們大多數(shù)人都聽說過古老的(并且仍然如此)說法:“優(yōu)秀的設(shè)計就是講故事”边篮。那么運動可以幫助我們以更少的時間和更清晰的方式來講述這個故事己莺。


https://dribbble.com/Visual-CHEN


用戶界面中的動效使我們能夠:

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è)計一個愉快的體驗荠卷,你的用戶會不斷地回來模庐。

原文鏈接

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市油宜,隨后出現(xiàn)的幾起案子掂碱,更是在濱河造成了極大的恐慌,老刑警劉巖慎冤,帶你破解...
    沈念sama閱讀 217,084評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件疼燥,死亡現(xiàn)場離奇詭異,居然都是意外死亡蚁堤,警方通過查閱死者的電腦和手機(jī)醉者,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,623評論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人撬即,你說我怎么就攤上這事立磁。” “怎么了剥槐?”我有些...
    開封第一講書人閱讀 163,450評論 0 353
  • 文/不壞的土叔 我叫張陵息罗,是天一觀的道長。 經(jīng)常有香客問我才沧,道長迈喉,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,322評論 1 293
  • 正文 為了忘掉前任温圆,我火速辦了婚禮挨摸,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘岁歉。我一直安慰自己得运,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,370評論 6 390
  • 文/花漫 我一把揭開白布锅移。 她就那樣靜靜地躺著熔掺,像睡著了一般。 火紅的嫁衣襯著肌膚如雪非剃。 梳的紋絲不亂的頭發(fā)上置逻,一...
    開封第一講書人閱讀 51,274評論 1 300
  • 那天,我揣著相機(jī)與錄音备绽,去河邊找鬼券坞。 笑死,一個胖子當(dāng)著我的面吹牛肺素,可吹牛的內(nèi)容都是我干的恨锚。 我是一名探鬼主播,決...
    沈念sama閱讀 40,126評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼倍靡,長吁一口氣:“原來是場噩夢啊……” “哼猴伶!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起塌西,我...
    開封第一講書人閱讀 38,980評論 0 275
  • 序言:老撾萬榮一對情侶失蹤他挎,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后雨让,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體雇盖,經(jīng)...
    沈念sama閱讀 45,414評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,599評論 3 334
  • 正文 我和宋清朗相戀三年栖忠,在試婚紗的時候發(fā)現(xiàn)自己被綠了崔挖。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片贸街。...
    茶點故事閱讀 39,773評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖狸相,靈堂內(nèi)的尸體忽然破棺而出薛匪,到底是詐尸還是另有隱情,我是刑警寧澤脓鹃,帶...
    沈念sama閱讀 35,470評論 5 344
  • 正文 年R本政府宣布逸尖,位于F島的核電站,受9級特大地震影響瘸右,放射性物質(zhì)發(fā)生泄漏娇跟。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,080評論 3 327
  • 文/蒙蒙 一太颤、第九天 我趴在偏房一處隱蔽的房頂上張望苞俘。 院中可真熱鬧,春花似錦龄章、人聲如沸吃谣。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,713評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽岗憋。三九已至,卻和暖如春锚贱,著一層夾襖步出監(jiān)牢的瞬間仔戈,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,852評論 1 269
  • 我被黑心中介騙來泰國打工惋鸥, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留杂穷,地道東北人悍缠。 一個月前我還...
    沈念sama閱讀 47,865評論 2 370
  • 正文 我出身青樓卦绣,卻偏偏與公主長得像,于是被迫代替她去往敵國和親飞蚓。 傳聞我的和親對象是個殘疾皇子滤港,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,689評論 2 354

推薦閱讀更多精彩內(nèi)容