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

Mickey_Mouse_-_The_Mad_Doctor

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

  • 太過刻意

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

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

1KNDtrZZKN5-bNQ7YVB8_fQ
  • 過度使用

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

  • 動畫原則

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

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

  • 到底什麼才是介面

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

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

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

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

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

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

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

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

  • 通知動畫
1UJdmc7IUuOjJFSNnpUmH0w

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

  • 吸引你的使用者
1bX8hBD6PmbjedK0SYzBSlA

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

  1. 第一次點擊時,通知緩慢地出現。
  2. 第二次點擊時,通知列的訊息激烈的震動。

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

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

  • 擴張訊息

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

1YaoMTOLjuUBRrfBATGzSxA

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

  • 訊息重要性的優先順序

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

  1. 使用標題
  2. 畫底線或是加上粗黑字體
  3. 使用顏色
  4. 使用形狀與圖片
  5. 動畫

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

  • 功能性 vs 美觀

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

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

hh

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

  • 結語

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

( 資料來源: 翻譯自 Sophie Paxton ;圖片來源: PixabaySophie PaxtonWikipedia )

說點什麼吧!

SPONSOR

熱門 未分類 分類文章