7個(gè)GIF圖例,來證明動(dòng)效設(shè)計(jì)并不復(fù)雜
這篇文章希望通過7個(gè)GIF圖例來證明動(dòng)效設(shè)計(jì)并不復(fù)雜,只需在關(guān)鍵之處增加一點(diǎn)點(diǎn)變化,就能讓效果大大提升一個(gè)境界。
通過這些范例,你會(huì)發(fā)現(xiàn)狀態(tài)連續(xù)性、元素關(guān)聯(lián)性,以及用戶注意力控制的重要性。
在做動(dòng)效設(shè)計(jì)中,我參考的設(shè)計(jì)規(guī)范有:Material Motion、IBM’s Animation Principles、The UX in Motion Manifesto。
我使用的工具是早期版本 InVision Studio ,你可以從 Dropbox 下載源文件。
滑動(dòng)切換頁簽
左圖內(nèi)容區(qū)域漸變切換;右圖內(nèi)容區(qū)域與頁簽下橫杠一起滑動(dòng)
- 優(yōu)秀的動(dòng)效會(huì)用漸變切換頁面元素
- 出色的動(dòng)效會(huì)在切換時(shí)保持狀態(tài)的持續(xù)性
設(shè)計(jì)頁簽或多級(jí)菜單時(shí),可以嘗試將界面元素的位置和其打開的方式關(guān)聯(lián)起來。這樣動(dòng)效可以涉及的,除了可見性之外,還增加了位置。這樣一來,滑動(dòng)手勢(shì)也可以有了。
將卡片元素關(guān)聯(lián)起來
左圖新開的頁面從下滑出;右圖新開的頁面由上一級(jí)卡片原地展開來
- 優(yōu)秀的動(dòng)效會(huì)利用滑動(dòng)打開新頁面
- 出色的動(dòng)效會(huì)將不同狀態(tài)的相同元素關(guān)聯(lián)起來
在設(shè)計(jì)狀態(tài)切換的動(dòng)效時(shí),可以看看兩者之間是否有相同元素,如果有的話可以把它們關(guān)聯(lián)起來。在 InVision Studio 創(chuàng)建 Motion transition 時(shí),兩個(gè)屏幕之間的重復(fù)元素會(huì)自動(dòng)關(guān)聯(lián)起來,這個(gè)功能讓原型動(dòng)效變得簡單多了。
如果想知道哪些動(dòng)效可以使用,建議你去看《十二條動(dòng)效體驗(yàn)原則》(Z Yuhan:剛好我有翻譯過)。上圖我給的范例中,用到了遮罩、過渡、父子關(guān)系和緩動(dòng)原則。
瀑布流效果
左圖的卡片通過滑動(dòng)和漸變出現(xiàn);右圖的基本動(dòng)效是一樣的,但是每張卡片的延時(shí)時(shí)間不同
- 優(yōu)秀的動(dòng)效通過控制所有元素的位置和可見度的變化來展示載入過程
- 出色的動(dòng)效會(huì)錯(cuò)開不同元素和分組的出現(xiàn)時(shí)間
在統(tǒng)一的緩動(dòng)和速度的前提下,通過延時(shí)設(shè)置來實(shí)現(xiàn)瀑布效果,這樣能夠保證一致性的視覺感受。不用為每一個(gè)小部件都設(shè)置延時(shí),保證恰當(dāng)?shù)姆纸M顆粒度能夠讓動(dòng)效更加高效快速。Google 建議瀑布流效果的元素出現(xiàn)間隔不超過 20ms 。更多范例: choreography principle in Material Motion 。
元素間的作用力
左圖的卡片在頁面頂層浮出;右圖的卡片撐大時(shí)將周圍元素推開
- 優(yōu)秀的動(dòng)效控制元素本身的變化
- 出色的動(dòng)效關(guān)注元素對(duì)周圍環(huán)境的影響
體現(xiàn)元素之間的作用力,即讓它們相互吸引或排斥。如果想了解更多,可以去 Material Design 的Aware motion 。
讓菜單“生長”出來
左圖的菜單從下至上浮出;右圖的菜單從按鈕上“生長”出來
- 優(yōu)秀的動(dòng)效讓元素從觸發(fā)的方向出現(xiàn)
- 出色的動(dòng)效讓元素從母體“生長”出來
利用按鈕展示狀態(tài)
左圖利用按鈕外的文本展示狀態(tài);右圖利用按鈕框本身展示狀態(tài)
- 優(yōu)秀的動(dòng)效將提示放在按鈕附近
- 出色的動(dòng)效使用按鈕本身展示狀態(tài)變化
嘗試?yán)冒粹o展示狀態(tài)的變化,例如用按鈕文字展示提示;或用按鈕框來展示進(jìn)程。無論哪種方式,目的都是充分利用用戶的注意力(Z Yuhan:了解更多可以去看《谷歌 Material Design 從這些方面打破了我思維局限》的“不是視線追蹤元素,而是元素追蹤視線”)。
嚴(yán)肅對(duì)待注意力這個(gè)東西
左圖利用顏色和位置來讓元素脫穎而出;右圖利用微動(dòng)畫來吸引用戶注意力
- 優(yōu)秀的設(shè)計(jì)用顏色、尺寸和位置來突出重要元素
- 出色的設(shè)計(jì)用動(dòng)效吸引用戶注意,從而避免打破既定框架
當(dāng)用戶需要進(jìn)行某些重要操作時(shí),嘗試用動(dòng)效吸引他們的注意力。根據(jù)重要性來判斷需要多強(qiáng)的動(dòng)效(如尺寸、顏色和速度)。但是確保只用在重要操作上——因?yàn)橛玫脑蕉嘈Ч饺酢瑫r(shí)用戶也會(huì)更加厭煩。
總結(jié)
我希望以上的這些范例能夠給你的動(dòng)效設(shè)計(jì)提供決策幫助。在像是 InVision Studio 這類新型動(dòng)效原型工具的幫助下,創(chuàng)意交互這一領(lǐng)域會(huì)很快火起來,千萬不要忘記了對(duì)動(dòng)效的關(guān)注。
我們?cè)谧鲈O(shè)計(jì)時(shí),不要忘記用動(dòng)效來解釋狀態(tài)變化、適當(dāng)吸引用戶注意、闡釋元素關(guān)聯(lián),以及為產(chǎn)品增加一點(diǎn)樂趣和個(gè)性。以上的這些設(shè)計(jì)原則足以將我們的動(dòng)效從快速有效地優(yōu)秀升級(jí)到出色。
讓我們愉快地進(jìn)行動(dòng)效創(chuàng)作吧!
原文地址:Good to great UI animation tips
原文作者:喲嘿,小伙伴們,我是 Pablo Stanley , Carbon Health 的設(shè)計(jì)師兼聯(lián)合創(chuàng)始人。我在創(chuàng)作一個(gè)幽默漫畫故事叫做 The Design Team ,同時(shí)也在 Twitter 發(fā)布一些設(shè)計(jì)相關(guān)的內(nèi)容。你還可以去我的 YouTube 頻道 Sketch Together 看看,那兒有超多的設(shè)計(jì)教程。感謝你的閱讀(西班牙語)。
譯者:Z Yuhan,鵝廠?·?交互設(shè)計(jì)
譯文地址:https://zhuanlan.zhihu.com/p/35204204?group_id=964100644554166272
本文由 @Z Yuhan 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
題圖來自 Pexels,基于 CC0 協(xié)議
在UI中國看過了