遲早,動畫將被引入,以線框的概念,然后設計決策或解釋他們變得更加困難。 原因,如“這將是太酷了! ”或“新潮”或“令人興奮”的完全設計開始失去力量的領域。 動畫應該得到更好的在我們的設計考慮。 我們應該合理定義動畫和解釋他們的目的——同樣的方式,我們將解釋所有其他元素的設計。

功能性動畫是微妙的動畫,我們嵌入在一個用戶界面設計作為我們的過程的一部分。
在完美的世界里,我們應該能夠驗證功能性動畫對一組定義良好的邏輯的目的。 如果某個動畫在我們設計一個邏輯的目的,那么它就是一個有效的功能性動畫和它的存在在我們的設計可能是合理的。 但如果它沒有目的,那么這可能是冗余的,需要重新考慮。

它也以另一種方式產生:當一個動畫不適合功能的目的,通常也感到尷尬或討厭。 以下是家庭組到目前為止我已經收集了。 我希望你找到有用的驗證自己的設計動畫。

方向照明結構。 在這一組中,我們發現在我們的導航中扮演角色動畫,鑄造網站的信息架構。 這種類型的動畫背后的邏輯是保持用戶的方向感覺,幫助用戶理解的變化已經發生在頁面的布局,改變引發了什么以及如何啟動以后再次改變。
第一次,一個用戶不能預測將要發生的交互。 開場動畫發展隱藏面板的大小幫助用戶保持面向,而不是覺得他們已經離開的頁面或內容突然消失了。 他們仍然控制著正在發生的一切。 關閉動畫幫助用戶將減少面板操作按鈕,所以,下次他們會記得再次打開面板。

例子視頻

一個眾所周知的可用性規則是一致的在這兩個網站的設計和內容。 一個一致的網站是可以預測的,因此可以習得的。 這條規則適用于操作按鈕,等等。

?

“保存”和“編輯”按鈕可切換的按鈕可能是最常見的例子。 但這是一個簡單的例子,因為行為是相互矛盾的,它們具有相同的上下文。 在其他情況下,當兩個動作沒有明顯關系,我們面臨一個可用性的挑戰。 功能性動畫可以幫助。

例子視頻

第三個家庭與取向組我們之前看到一些相似之處。 在這些動畫,用戶選擇列表中的一個條目來放大其詳細視圖(趕上列表視圖)和能夠回到完整的列表視圖。

?

這里的挑戰是確保用戶感覺他們仍在控制和保持在給定的上下文中。 功能性動畫通常是一個必須在這種情況下。

邏輯的目的: 把一個縮略圖和它的詳細視圖。

視覺提示

這種功能性動畫很容易檢測到當我們打開一個頁面,一個快速的一次性動畫突然觸發,演示了如何在設計操作某些功能。

例子視頻

視頻來源: 邁克爾Martinho

這個家庭協助用戶組在這些不幸的情況下,當有需要超過一個嘈雜的布局。

減少噪音的一個接口的一個方法是通過消除雜亂。 然而,有時這個任務不是那么簡單。 考慮一個新聞網站的所有者想要刪除的文本從主頁新聞或圖片。

在下面的動畫示例中,我們看到一個項目添加到購物車不夠明顯由于擁擠的背景。 因此,動畫是必要的。

例子視頻

有時在設計分析和用戶訪談,我們發現用戶有需要,我們可以地址只有一個定制的模擬。

?

邏輯的目的: 模擬的話題,否則難以傳達。

視覺反饋

但請記住,功能性動畫這個家庭組需要非常微妙的,應該設計感動地。 按鈕反饋是廣泛使用在每一個接口,所以使用動畫功能,它不是真的需要將導致弊大于利。 觸摸設備上,功能性動畫可以作為替代最有利的滾動效果。

例子視頻

這一組是關于控制。 用戶,控制意味著了解和理解當前上下文的系統在任何給定的時間。

?

有效的功能性動畫這個家庭組通常遵循這種模式:

1.顯示明確的反饋表明,這個過程已經啟動。

2.目前正在進行的反饋過程是在進步。

3.估計的完成過程(步驟,順便說一下,紡紗失敗)。

4.顯示清晰的反饋,過程終止。

?

邏輯的目的: 傳授一種控制在一個線性過程。

市場營銷工具
假設我們需要顯示產品的行為,強調一個特定的功能,促進一個獨特的能力,甚至包一個品牌的價值和風格產品。

邏輯的目的: 支持公司的品牌價值或突出產品的優勢。

總結
Aarron沃爾特的MailChimp在他的書中寫了用戶需求的層次 設計的情感 。 這是類似于馬斯洛的需求層次理論,但而不是描述我們的個人需求,Aarron描述我們作為用戶的需求。 沃爾特的層級職位的功能需要金字塔的基礎,而對快樂的需求之上,適用只有基本已經完成。 在本文中,我只處理這個功能基礎,沒有快樂和高興的進入方面,應該有自己的一篇文章。

然而,這項研究正在進行中。 所以,下次你遇到一個功能性動畫,繼續測試它對其中一個九組。 如果它不符合其中任何一個整齊且動畫有一個明確的目的,與我們分享,也許你已經找到第十家庭規則。

?