網頁動畫只有炫是沒有用的，重要的是其背後所深藏的意義

Neil

Published in

uwillx

10 min readJul 3, 2016

生活中的經驗

舉最簡單的例子：漫畫與動畫。

這是七龍珠超級達爾對上賽魯第二階段時打鬥的劇情：
看清賽魯尾巴攻擊 > 跳躍至賽魯臉部附近 > 身體轉向後方舉起腳 > 踢飛賽魯 > 飛過去緊追在後。

即便每一格中間過程作者並未將其中的細節補足，但讀者其實會不知不覺中，依據生活中的經驗，將缺少的過程做資訊整理並補齊，在腦中形成自己特有的動畫。

為什麼我會說 ” 自己特有的動畫 ” ？因為每個人的想像力不同，而且若有特殊的生活經驗或是有限制的條件也會影響大腦自動補齊資訊的能力。舉例來說，大部分的讀者應該會覺得，這個飛踢過程就是很簡單的垂直起跳並側踢，但如果有個會炫風飛踢的跆拳道的讀者，在達爾踢飛賽魯的過程當中，他的腦海裡也許是一個華麗的旋轉720度側踢。

目的一樣是踢飛賽魯，但過程完全不同，一個簡潔明瞭，一個華麗絢爛。但若加上作者給予的條件限制，結果就又不一樣了，例如達爾的個性就是追求簡單高效的戰鬥方式，那就不會有華麗720度轉身飛踢。

談完漫畫，動畫的現象就很簡單。直接看動畫的朋友們，就不會有看漫畫問題，因為動畫會引導你的大腦，瞭解達爾所有的連續動作是什麼樣子的，甚至不需要思考就瞭解了達爾的個性並完成踢飛賽魯的目的。
https://youtu.be/FzA7qucdgaE?t=20m39s

花了一整段講了我最愛的超級達爾就是為了說明：
為了要達到同一個目的，初始照理來說每個人的想法都會不一樣，但是在經過生活上的經驗以及社會學得的通常知識，除非擁有特殊經驗的人，不然大部分的人最終會有同樣的想法與經驗(但還是會有個體差異，這是必定的)，或是有人直接告訴他們。

所以網頁設計師在製作動畫的時候，需要瞭解到日常生活人們的文化、生活經驗、行為舉止、心理預期等等的面向，並且藉由不經意的限制條件，暗喻地引導使用者在其操作過程中，都是清楚明瞭且每個人的操作都是一致的，並且更重要的是幫助他們順利達成目的，不管是生理或是心理。或是也可以用更直接的方式，清清楚楚明白告知使用者如何使用而達成目的。至於採用何種方式比較好，也是設計師需要根據狀況去抉擇。

網頁上的動畫

在現今的網頁裡，動畫效果是無所不在的。您可能在某個網頁填寫表單，漏寫一個必填欄位時，該欄位會「顏色漸變為紅色」且「急促震動」的來提示；又或是iPhone的使用者們，當您要解除螢幕鎖定時，您會看到slide to unlock的文字裡會有「由左向右的發亮」提示您應該要滑動的解鎖方向。以上您可能未曾詳加注意，但實際上已經被影響行為或認知，這些都是動畫藉由隱喻性的引導所帶來的效果，也是為什麼需要有動畫的原因。

網頁動畫最主要的功能是輔助使用者順利地達成他們的目的

藉由不同動畫的呈現方式，盡可能讓使用者在不知不覺的情形下，消除他們的疑慮並且提示他們下一步的動作，然後順利地讓使用者達成您想要他們達成的目的，並且這個目的需要跟使用者想像的一致。

在交互設計上這是很重要的一環，少了這個環節，使用者在操作時可能遇到阻礙無法完成任務，甚至會影響使用者的心理狀態。例如對網站厭惡感或是責怪自己等情形，在商業網站上來說這樣的影響可能就會喪失訂單與客戶。

為了避免使用者產生負面情緒及帶領他順利完成目標，設計師們在設計時需要考量語言學、認知心理學、色彩學等各方面的知識，在特定環節特定時間點適當地使用動畫，如果最後反而造成使用者的困惑而無法達成任務，這個動畫就是多餘且失敗的，無論它如何的絢麗耀眼。

輸入文字時，提示文字淡入且變成小字與藍色。淡入讓視覺舒適緩和，小字則因為把提示文字保留避免忘了目前正在輸入什麼欄位且避免佔據太多空間，藍色則提示目前所在欄位。輸入完成後Next亮起，提示使用者可前往下一步。此範例只是注重在輸入時的情況，並無必填項目的流程展示。From Dribbble https://dribbble.com/shots/1254439--GIF-Float-Label-Form-Interaction

最好符合自然的運動過程

在設計物件的移動過程當中，符合現實世界運動定律會是比較理想的狀況，這是為了讓使用者在操作網頁時的體驗與日常運動定律一致，否則可能會出現不自然現象讓使用者困惑而停止操作跳出情境，形成一個斷點。

例如在現實世界中，讓圓球從高處落下:

from Dribbble https://dribbble.com/shots/2327065-Bouncing-Balls

速度會越來越快
觸地瞬間球變扁
反彈後速度越來越慢
制高點時球恢復原狀
再落下越來越快
靜止前的快速碎步彈跳
最後靜止

且圓球隨著不同材質，運動軌跡與球體變化也會不太一樣。倘若在網頁設計上是一個沒有加速度、永遠正方的圓球，那我們便不會視這個圓球是在彈跳中，它只是在規律地移動位置而已。若設計師再加上影子，那使用者可以再進一步了解光源從何而來，以及落地的真正位置和其平面是否平滑等(若這是有必要的話)。上圖範例作者更利用了撞擊平面產生的回饋與運動軌跡，讓觀看者了解每顆球大概的特性，相當高明！

經常受生活、社會、文化、習慣、趣味性等各種原因影響

這邊筆者挑幾個好範例與大家分享：

可愛與趣味性十足的app資料刷新動畫，將枯燥等待的時間變成心靈療癒！ from dribbble : https://dribbble.com/shots/2323982-Pull-To-Refresh

將原本看到這頁應該會很憤怒的心情，藉由設計與動畫來弭平使用者內心的不滿，將使用者留在網站裡。from dribbble : https://dribbble.com/shots/2597126-404-Got-Lost

facebook從生活中提煉出常用的各種不同表情動畫，讓使用者們可以更深刻的感受這些表情所帶出的心理影響力。 from dribbble : https://dribbble.com/shots/2548560-Facebook-Reactions

從平常很難想像的心電圖，轉化成容易感受的心跳頻率動畫。from bechance : https://www.behance.net/gallery/31408311/Heart-Rate-Monitor-App-Animation

這是從Github上，開發者在ionic提問了一個issue的內容找到的。在不同文化裡，平常我們常看見的由右至左轉場動畫，就必須相反。from Github : https://github.com/driftyco/ionic/issues/5826

點擊後向上浮動展開接著帶出所屬項目，讓使用者點擊主題後可以很容易地進到該主題情境裡。from https://mobileappninjas.files.wordpress.com/2015/08/mobile-trends1.gif?w=842

簡易測驗加入一個動畫是否帶來好的效果

動畫目的為何？
動畫是否具備可達成引導或提示效果？
是否違反生活常理？
是否違反常見網頁習慣？
是否有反面效果？(例如動畫過程太久，特效過多等)
是否會因為文化上差異而有不同行為？

以上是比較攏統的一些問題，基本的動畫順暢、效能就不贅述，詳細其實還得配合產品風格、特性等條件加以探究細部問題而決定。

動畫需要反覆的測試與驗證

在做完動畫之後，仍舊需要不斷的反覆測試與驗證，且需要常常跟上最新趨勢，因為我們可能在第一次做完動畫之後，隨著環境條件改變就必須要更改動畫，這時候會常常陷入兩難的時候，例如大廠商推出的產品或服務明明就跟生活常理或使用習慣相違背時，設計師就必須考量究竟哪個才是對產品與使用者是最好的方案，因為大廠推出後有可能改變人們的日常經驗，也有可能被人們所唾棄而不使用，更要考量產品使用者們已經習慣目前的方式，變更後是否會是好的。筆者無法在這裡給出答案，但我相信參與在其中的設計師們能做出最好的選擇。

總結

筆者並不是就認定華麗、絢麗、酷炫的動畫效果就是不好、沒用的，這部分需要再重申一下，畢竟大部分時候吸引使用者的目光仍舊是設計師重要的事，但如同上述文章一直在強調的，更重要的是能不能幫助使用者清楚明瞭下一步或獲取他想知道的事情與感受，以完成目的，這才是動畫真正的意義所在，否則達不成目的，辛苦做的動畫也等於做了白工。

雖然本篇關於網頁動畫講得很淺，但每次遇到讓我困擾或是達不到目的的動畫出現，便會很惱怒，尤其是出自自己的手所設計出來的東西讓別人有如此感受，簡直想就地挖個洞快埋進去。人總是偶爾會犯傻，所以把這些基本重點謹記在心、反覆練習、時刻提醒自己，內化於設計，才會越來越進步降低犯傻的機率！