UI 炫技要不得！設計師別求花俏，簡單明瞭才最重要

要知道使用者介面裡的動畫不全都是壞事，壞的是那些過度濫用動畫以至於影響使用者體驗的設計師。一個好的設計師應該要知道該如何取捨使用的時機，以下幾點將會告訴各位，在什麼樣的情況適合使用動畫，讓你在未來不會再不必要的時機亂用動畫。

• 太過刻意

以下的例子指的是現在迪士尼化的 UI 動態設計，看起來是有點誇張沒錯，但還真的這樣設計的 UI 其實不在少數。

這樣的設計看起來就好像我們用隱形的橡皮筋把這些符號 Icon 垂吊在半空中讓它一直晃，一點都不好看。

• 過度使用

動畫就像殺蟲劑一樣，你用太多就會失去它的效果。

• 動畫原則

很多 UI 設計師常常會建議大家多去看看迪士尼的動畫製作原則，但其實這種東西只會讓使用者的介面使用起來更緩慢而已。

很多 UI 設計師常常把介面當成動畫展示區，但除非你真的是想進到皮克斯當動畫家，最好還是少用那些太過卡通化的動畫效果。

• 到底什麼才是介面

介面存在的目的就是將不斷流通的資訊傳達出去，對於設計師來說，他們的工作就是決定何時是他們介入流通資訊中的最好時機。

• 動畫在 UI 設計中扮演的角色

以下是幾個使用動畫的基本原則:

你是否能確定使用動畫能幫助到使用者。「看起來很好看」不是一個正當的理由

盡量讓動畫出現的時間少於 300 毫秒

避免使用線性移動的動畫，因為這會讓整個介面看起來遲緩無趣

99% 的動畫都應該使用簡單的緩入緩出效果

只有在極少數的情況下才會使用彈簧 (Spring)，彈跳 (Bounce) 等效果

• 通知動畫

簡單的通知動畫最常不要超過 300 毫秒，這樣的設計才能真正幫助使用者，因為它能吸引到使用者的目光。

• 吸引你的使用者

從以上的例子我們可以看到，通知的強度在第二次點擊的時候大大的增強。

1. 第一次點擊時，通知緩慢地出現。

2. 第二次點擊時，通知列的訊息激烈的震動。

當使用者不斷的點擊按鈕時，介面會出現另外的訊息通知使用者。

設計師也可以改變安鈕的顏色來吸引使用者的注意。

• 擴張訊息

這個設計非常的簡單且有效，常常在行動裝置上能看到它的蹤跡。它特別的點是，使用者即使在擴張列表之後，原先的畫面還是維持在原本的狀態。

在上方的案例中，我刻意將關閉鍵的出現時間稍微延長，我也使用轉折的動畫讓使用者把目光聚集在較重要的資訊上。

• 訊息重要性的優先順序

身為一位設計師與軟體開發者最重要的就是決定 UI 上哪個設計元素才是優先選擇， 以下方法可以用來強調:

1. 使用標題

2. 畫底線或是加上粗黑字體

3. 使用顏色

4. 使用形狀與圖片

5. 動畫

沒有人會把文件裡每一段文字都改成標題大小，同樣的，也沒有人會把介面裡的每一個符號元素都改成動畫。請把動畫當成一隻螢光筆，只在重點的部分運用。過多的使用會讓人很難抓到重點，造成你想傳達的訊息流失掉。

• 功能性 vs 美觀

如果你開始聽到團隊裡有人提到他的 UI 動畫能讓使用者 「賞心悅目」，那你就該當心了，因為單純為了美觀而設計的動畫幾乎都不是什麼好設計。

記住，簡潔就是美，功能性的設計永遠勝過純粹為了美觀的動畫。

不要讓你的動畫影響使用者的體驗，想想看為什麼飛機的導航介面為什麼從不使用動畫。你也許會覺得 300 毫秒的動畫又無傷大雅，但對於使用者來說，你多餘的動畫只會煩死大家，不會讓任何人 「賞心悅目」！

• 結語

你就盡情的運用動畫吧，把動畫當成一個能更快傳達資訊的工具，但記得，功能性遠比美觀更重要，多為使用者著想，不要讓他們在你的介面上多浪費那幾毫秒。

( 資料來源: 翻譯自 Sophie Paxton ；圖片來源: Pixabay、Sophie Paxton、Wikipedia )