用戶界面中狀態(tài)改變在默認情況下大多是生硬而直接的,這使得用戶有時候很難立刻理解。在現(xiàn)實生活中,事物不會突然出現(xiàn)突然消失,通常它們都會有一個轉(zhuǎn)變的過程。當界面有兩個甚至更多狀態(tài)的時候,狀態(tài)之間的變化使用過渡動效來填充,讓用戶明白它們是怎么來的,而非一個瞬間的過程?纯聪旅娴陌咐脩粼诹斜碇羞x取一個條目查看詳細細節(jié),小卡片展開為大卡片,其中動效的變化規(guī)則源自于現(xiàn)實世界。
一個層次分明的動效通常能夠清晰地展示狀態(tài)的變化,抓住用戶的注意力。這一點和人類的意識有關系,用戶對焦點的關注和持續(xù)性都與此相關。良好的過渡動效有助于在正確的時間點,將用戶的注意到吸引到關鍵的內(nèi)容上,而這取決于動效是否能夠在正確的時間強調(diào)對的內(nèi)容。圓形的懸浮按鈕(FAB)經(jīng)由動效變化擴展成為三個導航按鈕。用戶在動效發(fā)生之前,并清楚動效變化的結(jié)果,但是動效的運動趨勢和變化趨勢讓用戶對于后續(xù)的發(fā)展有了預期,其后產(chǎn)生的結(jié)果也不會距離預期太遠。與此同時,紅色的按鈕在視覺上也足夠擁有吸引力,這個動效有助于引導用戶進行下一步的交互。既然是過渡,自然就牽涉到變化前后元素之間的關聯(lián)。良好的過渡動效連接著新出現(xiàn)的界面元素和之前的交互與觸發(fā)元素,這種關聯(lián)邏輯讓用戶清楚變化的過程,以及界面中所發(fā)生的前后變化。
當元素在不同狀態(tài)之間切換的時候,運動過程在讓人看得清、容易理解的情況下盡量快,這樣才是最佳的狀態(tài)。為了兼顧動效的效率、理解的便捷以及用戶體驗,動效應該在用戶觸發(fā)之后的0.1s內(nèi)開始,在300ms 內(nèi)結(jié)束,這樣不會浪費用戶的時間,還恰到好處。轉(zhuǎn)場動效在UI界面中所起到的作用無疑是顯著的。相比于靜態(tài)的界面,動態(tài)的轉(zhuǎn)場動效更符合人類的自然認知體系,有效地降低了用戶的認知負載,屏幕上元素的變化過程,前后界面的變化邏輯,以及層次結(jié)構之間的變化關系,都在動效的加持之下,變得更加清晰自然。從這個角度上來說,動效不僅是界面的重要支持元素,也是用戶交互的基礎。
過渡動效始終是圍繞著用戶交互和界面元素而存在的,無論你要成效的是怎樣的動態(tài)效果,可愛抑或是自然,都始終是服務于功能,然后才是情緒和氛圍。動效本質(zhì)上是作為視覺傳達的一個組成部分而存在的,對于視覺障礙用戶而言,他們不一定能夠從動效中得到好處、獲取信息。所以,考慮到這一部分用戶的需求,你應該提供額外的信息幫助他們明白界面變化。webacessibility.com 中提供了不少關于動效設計的內(nèi)容和建議。本文來源于南京logo設計公司
動效設計,尤其是協(xié)助交互的轉(zhuǎn)場動效,如今日趨成熟。通過大量的案例分析和過來人的經(jīng)驗,我們逐步總結(jié)出優(yōu)秀轉(zhuǎn)場動效的5個核心的規(guī)則,不止是動效,清晰是幾乎所有好設計都有的共通點。動效是功能性優(yōu)先、視覺傳達為核心的視覺元素,太過復雜的動效除了有炫技之嫌,還會讓人難于理解,甚至在操作過程中失去方向感,這對于用戶體驗而言絕對是一個退步,而非優(yōu)化。請務必記住,屏幕上的每一個變化都會讓用戶注意到,它們都會成為影響用戶體驗和用戶決策的因素,不必要的動效會讓用戶感到混亂。
動效應該避免一次呈現(xiàn)過多效果,尤其當動效同時存在多重、復雜的變化的時候,會自然地呈現(xiàn)出混亂的態(tài)勢,少即是多的原則對于動效同樣是金科玉律。如果某個動效的簡化能夠讓整個UI更加清晰直觀,那么這個修改方案一定是個好主意。當動效中同時包含形狀、大小和位移變化的時候,請務必保持路徑的清晰以及變化的直觀性。