要知道使用者介面裡的動畫不全都是壞事，壞的是那些過度濫用動畫以至於影響使用者體驗的設計師。一個好的設計師應該要知道該如何取捨使用的時機，以下幾點將會告訴各位，在什麼樣的情況適合使用動畫，讓你在未來不會再不必要的時機亂用動畫。
- 太過刻意
以下的例子指的是現在迪士尼化的 UI 動態設計，看起來是有點誇張沒錯，但還真的這樣設計的 UI 其實不在少數。
這樣的設計看起來就好像我們用隱形的橡皮筋把這些符號 Icon 垂吊在半空中讓它一直晃，一點都不好看。
- 過度使用
動畫就像殺蟲劑一樣，你用太多就會失去它的效果。
- 動畫原則
很多 UI 設計師常常會建議大家多去看看迪士尼的動畫製作原則，但其實這種東西只會讓使用者的介面使用起來更緩慢而已。
很多 UI 設計師常常把介面當成動畫展示區，但除非你真的是想進到皮克斯當動畫家，最好還是少用那些太過卡通化的動畫效果。
- 到底什麼才是介面
介面存在的目的就是將不斷流通的資訊傳達出去，對於設計師來說，他們的工作就是決定何時是他們介入流通資訊中的最好時機。
- 動畫在 UI 設計中扮演的角色
你是否能確定使用動畫能幫助到使用者。「看起來很好看」不是一個正當的理由
盡量讓動畫出現的時間少於 300 毫秒
避免使用線性移動的動畫，因為這會讓整個介面看起來遲緩無趣
99% 的動畫都應該使用簡單的緩入緩出效果
只有在極少數的情況下才會使用彈簧 (Spring)，彈跳 (Bounce) 等效果
- 通知動畫
簡單的通知動畫最常不要超過 300 毫秒，這樣的設計才能真正幫助使用者，因為它能吸引到使用者的目光。
- 吸引你的使用者
從以上的例子我們可以看到，通知的強度在第二次點擊的時候大大的增強。
-
第一次點擊時，通知緩慢地出現。
-
第二次點擊時，通知列的訊息激烈的震動。
當使用者不斷的點擊按鈕時，介面會出現另外的訊息通知使用者。
設計師也可以改變安鈕的顏色來吸引使用者的注意。
- 擴張訊息
這個設計非常的簡單且有效，常常在行動裝置上能看到它的蹤跡。它特別的點是，使用者即使在擴張列表之後，原先的畫面還是維持在原本的狀態。
在上方的案例中，我刻意將關閉鍵的出現時間稍微延長，我也使用轉折的動畫讓使用者把目光聚集在較重要的資訊上。
- 訊息重要性的優先順序
身為一位設計師與軟體開發者最重要的就是決定 UI 上哪個設計元素才是優先選擇， 以下方法可以用來強調:
-
使用標題
-
畫底線或是加上粗黑字體
-
使用顏色
-
使用形狀與圖片
-
動畫
沒有人會把文件裡每一段文字都改成標題大小，同樣的，也沒有人會把介面裡的每一個符號元素都改成動畫。請把動畫當成一隻螢光筆，只在重點的部分運用。過多的使用會讓人很難抓到重點，造成你想傳達的訊息流失掉。
- 功能性 vs 美觀
如果你開始聽到團隊裡有人提到他的 UI 動畫能讓使用者 「賞心悅目」，那你就該當心了，因為單純為了美觀而設計的動畫幾乎都不是什麼好設計。
記住，簡潔就是美，功能性的設計永遠勝過純粹為了美觀的動畫。
不要讓你的動畫影響使用者的體驗，想想看為什麼飛機的導航介面為什麼從不使用動畫。你也許會覺得 300 毫秒的動畫又無傷大雅，但對於使用者來說，你多餘的動畫只會煩死大家，不會讓任何人 「賞心悅目」！
- 結語
你就盡情的運用動畫吧，把動畫當成一個能更快傳達資訊的工具，但記得，功能性遠比美觀更重要，多為使用者著想，不要讓他們在你的介面上多浪費那幾毫秒。
沒有留言:
張貼留言