生活中的經驗
舉最簡單的例子:漫畫與動畫。
這是七龍珠超級達爾對上賽魯第二階段時打鬥的劇情:
看清賽魯尾巴攻擊 > 跳躍至賽魯臉部附近 > 身體轉向後方舉起腳 > 踢飛賽魯 > 飛過去緊追在後。
即便每一格中間過程作者並未將其中的細節補足,但讀者其實會不知不覺中,依據生活中的經驗,將缺少的過程做資訊整理並補齊,在腦中形成自己特有的動畫。
為什麼我會說 ” 自己特有的動畫 ” ?因為每個人的想像力不同,而且若有特殊的生活經驗或是有限制的條件也會影響大腦自動補齊資訊的能力。舉例來說,大部分的讀者應該會覺得,這個飛踢過程就是很簡單的垂直起跳並側踢,但如果有個會炫風飛踢的跆拳道的讀者,在達爾踢飛賽魯的過程當中,他的腦海裡也許是一個華麗的旋轉720度側踢。
目的一樣是踢飛賽魯,但過程完全不同,一個簡潔明瞭,一個華麗絢爛。但若加上作者給予的條件限制,結果就又不一樣了,例如達爾的個性就是追求簡單高效的戰鬥方式,那就不會有華麗720度轉身飛踢。
談完漫畫,動畫的現象就很簡單。直接看動畫的朋友們,就不會有看漫畫問題,因為動畫會引導你的大腦,瞭解達爾所有的連續動作是什麼樣子的,甚至不需要思考就瞭解了達爾的個性並完成踢飛賽魯的目的。
https://youtu.be/FzA7qucdgaE?t=20m39s
花了一整段講了我最愛的超級達爾就是為了說明:
為了要達到同一個目的,初始照理來說每個人的想法都會不一樣,但是在經過生活上的經驗以及社會學得的通常知識,除非擁有特殊經驗的人,不然大部分的人最終會有同樣的想法與經驗(但還是會有個體差異,這是必定的),或是有人直接告訴他們。
所以網頁設計師在製作動畫的時候,需要瞭解到日常生活人們的文化、生活經驗、行為舉止、心理預期等等的面向,並且藉由不經意的限制條件,暗喻地引導使用者在其操作過程中,都是清楚明瞭且每個人的操作都是一致的,並且更重要的是幫助他們順利達成目的,不管是生理或是心理。或是也可以用更直接的方式,清清楚楚明白告知使用者如何使用而達成目的。至於採用何種方式比較好,也是設計師需要根據狀況去抉擇。
網頁上的動畫
在現今的網頁裡,動畫效果是無所不在的。您可能在某個網頁填寫表單,漏寫一個必填欄位時,該欄位會「顏色漸變為紅色」且「急促震動」的來提示;又或是iPhone的使用者們,當您要解除螢幕鎖定時,您會看到slide to unlock的文字裡會有「由左向右的發亮」提示您應該要滑動的解鎖方向。以上您可能未曾詳加注意,但實際上已經被影響行為或認知,這些都是動畫藉由隱喻性的引導所帶來的效果,也是為什麼需要有動畫的原因。
網頁動畫最主要的功能是輔助使用者順利地達成他們的目的
藉由不同動畫的呈現方式,盡可能讓使用者在不知不覺的情形下,消除他們的疑慮並且提示他們下一步的動作,然後順利地讓使用者達成您想要他們達成的目的,並且這個目的需要跟使用者想像的一致。
在交互設計上這是很重要的一環,少了這個環節,使用者在操作時可能遇到阻礙無法完成任務,甚至會影響使用者的心理狀態。例如對網站厭惡感或是責怪自己等情形,在商業網站上來說這樣的影響可能就會喪失訂單與客戶。
為了避免使用者產生負面情緒及帶領他順利完成目標,設計師們在設計時需要考量語言學、認知心理學、色彩學等各方面的知識,在特定環節特定時間點適當地使用動畫,如果最後反而造成使用者的困惑而無法達成任務,這個動畫就是多餘且失敗的,無論它如何的絢麗耀眼。
最好符合自然的運動過程
在設計物件的移動過程當中,符合現實世界運動定律會是比較理想的狀況,這是為了讓使用者在操作網頁時的體驗與日常運動定律一致,否則可能會出現不自然現象讓使用者困惑而停止操作跳出情境,形成一個斷點。
例如在現實世界中,讓圓球從高處落下:
- 速度會越來越快
- 觸地瞬間球變扁
- 反彈後速度越來越慢
- 制高點時球恢復原狀
- 再落下越來越快
- 靜止前的快速碎步彈跳
- 最後靜止
且圓球隨著不同材質,運動軌跡與球體變化也會不太一樣。倘若在網頁設計上是一個沒有加速度、永遠正方的圓球,那我們便不會視這個圓球是在彈跳中,它只是在規律地移動位置而已。若設計師再加上影子,那使用者可以再進一步了解光源從何而來,以及落地的真正位置和其平面是否平滑等(若這是有必要的話)。上圖範例作者更利用了撞擊平面產生的回饋與運動軌跡,讓觀看者了解每顆球大概的特性,相當高明!
經常受生活、社會、文化、習慣、趣味性等各種原因影響
這邊筆者挑幾個好範例與大家分享:
簡易測驗加入一個動畫是否帶來好的效果
- 動畫目的為何?
- 動畫是否具備可達成引導或提示效果?
- 是否違反生活常理?
- 是否違反常見網頁習慣?
- 是否有反面效果?(例如動畫過程太久,特效過多等)
- 是否會因為文化上差異而有不同行為?
以上是比較攏統的一些問題,基本的動畫順暢、效能就不贅述,詳細其實還得配合產品風格、特性等條件加以探究細部問題而決定。
動畫需要反覆的測試與驗證
在做完動畫之後,仍舊需要不斷的反覆測試與驗證,且需要常常跟上最新趨勢,因為我們可能在第一次做完動畫之後,隨著環境條件改變就必須要更改動畫,這時候會常常陷入兩難的時候,例如大廠商推出的產品或服務明明就跟生活常理或使用習慣相違背時,設計師就必須考量究竟哪個才是對產品與使用者是最好的方案,因為大廠推出後有可能改變人們的日常經驗,也有可能被人們所唾棄而不使用,更要考量產品使用者們已經習慣目前的方式,變更後是否會是好的。筆者無法在這裡給出答案,但我相信參與在其中的設計師們能做出最好的選擇。
總結
筆者並不是就認定華麗、絢麗、酷炫的動畫效果就是不好、沒用的,這部分需要再重申一下,畢竟大部分時候吸引使用者的目光仍舊是設計師重要的事,但如同上述文章一直在強調的,更重要的是能不能幫助使用者清楚明瞭下一步或獲取他想知道的事情與感受,以完成目的,這才是動畫真正的意義所在,否則達不成目的,辛苦做的動畫也等於做了白工。
雖然本篇關於網頁動畫講得很淺,但每次遇到讓我困擾或是達不到目的的動畫出現,便會很惱怒,尤其是出自自己的手所設計出來的東西讓別人有如此感受,簡直想就地挖個洞快埋進去。人總是偶爾會犯傻,所以把這些基本重點謹記在心、反覆練習、時刻提醒自己,內化於設計,才會越來越進步降低犯傻的機率!
參考資料
Material Design
https://material.google.com/motion/material-motion.html#material-motion-what-makes-a-good-transition
Stop Gratuitous UI Animation
https://medium.com/@sophie_paxtonUX/stop-gratuitous-ui-animation-9ece9aa9eb97#.y4mjfqsuu
网页界面设计的交互式因素分析
http://www.xuehuile.com/thesis/e29ff7e47f2d4ec58487cca9f32c8ae3.html
當操作錯誤時,為什麼使用者總是先責怪自己?
https://designtongue.me/how-bad-ux-makes-users-blame-themselves/
腾讯高手出品!动效设计基础(一):运动曲线与缓动
http://www.uisdc.com/motion-design-curve-movement