遲早,動(dòng)畫(huà)將被引入,以線框的概念,然后設(shè)計(jì)決策或解釋他們變得更加困難。 原因,如“這將是太酷了! ”或“新潮”或“令人興奮”的完全設(shè)計(jì)開(kāi)始失去力量的領(lǐng)域。 動(dòng)畫(huà)應(yīng)該得到更好的在我們的設(shè)計(jì)考慮。 我們應(yīng)該合理定義動(dòng)畫(huà)和解釋他們的目的——同樣的方式,我們將解釋所有其他元素的設(shè)計(jì)。
功能性動(dòng)畫(huà)是微妙的動(dòng)畫(huà),我們嵌入在一個(gè)用戶界面設(shè)計(jì)作為我們的過(guò)程的一部分。
在完美的世界里,我們應(yīng)該能夠驗(yàn)證功能性動(dòng)畫(huà)對(duì)一組定義良好的邏輯的目的。 如果某個(gè)動(dòng)畫(huà)在我們?cè)O(shè)計(jì)一個(gè)邏輯的目的,那么它就是一個(gè)有效的功能性動(dòng)畫(huà)和它的存在在我們的設(shè)計(jì)可能是合理的。 但如果它沒(méi)有目的,那么這可能是冗余的,需要重新考慮。
它也以另一種方式產(chǎn)生:當(dāng)一個(gè)動(dòng)畫(huà)不適合功能的目的,通常也感到尷尬或討厭。 以下是家庭組到目前為止我已經(jīng)收集了。 我希望你找到有用的驗(yàn)證自己的設(shè)計(jì)動(dòng)畫(huà)。
方向照明結(jié)構(gòu)。 在這一組中,我們發(fā)現(xiàn)在我們的導(dǎo)航中扮演角色動(dòng)畫(huà),鑄造網(wǎng)站的信息架構(gòu)。 這種類(lèi)型的動(dòng)畫(huà)背后的邏輯是保持用戶的方向感覺(jué),幫助用戶理解的變化已經(jīng)發(fā)生在頁(yè)面的布局,改變引發(fā)了什么以及如何啟動(dòng)以后再次改變。
第一次,一個(gè)用戶不能預(yù)測(cè)將要發(fā)生的交互。 開(kāi)場(chǎng)動(dòng)畫(huà)發(fā)展隱藏面板的大小幫助用戶保持面向,而不是覺(jué)得他們已經(jīng)離開(kāi)的頁(yè)面或內(nèi)容突然消失了。 他們?nèi)匀豢刂浦诎l(fā)生的一切。 關(guān)閉動(dòng)畫(huà)幫助用戶將減少面板操作按鈕,所以,下次他們會(huì)記得再次打開(kāi)面板。
例子視頻
一個(gè)眾所周知的可用性規(guī)則是一致的在這兩個(gè)網(wǎng)站的設(shè)計(jì)和內(nèi)容。 一個(gè)一致的網(wǎng)站是可以預(yù)測(cè)的,因此可以習(xí)得的。 這條規(guī)則適用于操作按鈕,等等。
?
“保存”和“編輯”按鈕可切換的按鈕可能是最常見(jiàn)的例子。 但這是一個(gè)簡(jiǎn)單的例子,因?yàn)樾袨槭窍嗷ッ艿?它們具有相同的上下文。 在其他情況下,當(dāng)兩個(gè)動(dòng)作沒(méi)有明顯關(guān)系,我們面臨一個(gè)可用性的挑戰(zhàn)。 功能性動(dòng)畫(huà)可以幫助。
例子視頻
第三個(gè)家庭與取向組我們之前看到一些相似之處。 在這些動(dòng)畫(huà),用戶選擇列表中的一個(gè)條目來(lái)放大其詳細(xì)視圖(趕上列表視圖)和能夠回到完整的列表視圖。
?
這里的挑戰(zhàn)是確保用戶感覺(jué)他們?nèi)栽诳刂坪捅３衷诮o定的上下文中。 功能性動(dòng)畫(huà)通常是一個(gè)必須在這種情況下。
邏輯的目的: 把一個(gè)縮略圖和它的詳細(xì)視圖。
視覺(jué)提示
這種功能性動(dòng)畫(huà)很容易檢測(cè)到當(dāng)我們打開(kāi)一個(gè)頁(yè)面,一個(gè)快速的一次性動(dòng)畫(huà)突然觸發(fā),演示了如何在設(shè)計(jì)操作某些功能。
例子視頻
視頻來(lái)源: 邁克爾Martinho
這個(gè)家庭協(xié)助用戶組在這些不幸的情況下,當(dāng)有需要超過(guò)一個(gè)嘈雜的布局。
減少噪音的一個(gè)接口的一個(gè)方法是通過(guò)消除雜亂。 然而,有時(shí)這個(gè)任務(wù)不是那么簡(jiǎn)單。 考慮一個(gè)新聞網(wǎng)站的所有者想要?jiǎng)h除的文本從主頁(yè)新聞或圖片。
在下面的動(dòng)畫(huà)示例中,我們看到一個(gè)項(xiàng)目添加到購(gòu)物車(chē)不夠明顯由于擁擠的背景。 因此,動(dòng)畫(huà)是必要的。
例子視頻
有時(shí)在設(shè)計(jì)分析和用戶訪談,我們發(fā)現(xiàn)用戶有需要,我們可以地址只有一個(gè)定制的模擬。
?
邏輯的目的: 模擬的話題,否則難以傳達(dá)。
視覺(jué)反饋
但請(qǐng)記住,功能性動(dòng)畫(huà)這個(gè)家庭組需要非常微妙的,應(yīng)該設(shè)計(jì)感動(dòng)地。 按鈕反饋是廣泛使用在每一個(gè)接口,所以使用動(dòng)畫(huà)功能,它不是真的需要將導(dǎo)致弊大于利。 觸摸設(shè)備上,功能性動(dòng)畫(huà)可以作為替代最有利的滾動(dòng)效果。
例子視頻
這一組是關(guān)于控制。 用戶,控制意味著了解和理解當(dāng)前上下文的系統(tǒng)在任何給定的時(shí)間。
?
有效的功能性動(dòng)畫(huà)這個(gè)家庭組通常遵循這種模式:
1.顯示明確的反饋表明,這個(gè)過(guò)程已經(jīng)啟動(dòng)。
2.目前正在進(jìn)行的反饋過(guò)程是在進(jìn)步。
3.估計(jì)的完成過(guò)程(步驟,順便說(shuō)一下,紡紗失敗)。
4.顯示清晰的反饋,過(guò)程終止。
?
邏輯的目的: 傳授一種控制在一個(gè)線性過(guò)程。
市場(chǎng)營(yíng)銷(xiāo)工具
假設(shè)我們需要顯示產(chǎn)品的行為,強(qiáng)調(diào)一個(gè)特定的功能,促進(jìn)一個(gè)獨(dú)特的能力,甚至包一個(gè)品牌的價(jià)值和風(fēng)格產(chǎn)品。
邏輯的目的: 支持公司的品牌價(jià)值或突出產(chǎn)品的優(yōu)勢(shì)。
總結(jié)
Aarron沃爾特的MailChimp在他的書(shū)中寫(xiě)了用戶需求的層次 設(shè)計(jì)的情感 。 這是類(lèi)似于馬斯洛的需求層次理論,但而不是描述我們的個(gè)人需求,Aarron描述我們作為用戶的需求。 沃爾特的層級(jí)職位的功能需要金字塔的基礎(chǔ),而對(duì)快樂(lè)的需求之上,適用只有基本已經(jīng)完成。 在本文中,我只處理這個(gè)功能基礎(chǔ),沒(méi)有快樂(lè)和高興的進(jìn)入方面,應(yīng)該有自己的一篇文章。
然而,這項(xiàng)研究正在進(jìn)行中。 所以,下次你遇到一個(gè)功能性動(dòng)畫(huà),繼續(xù)測(cè)試它對(duì)其中一個(gè)九組。 如果它不符合其中任何一個(gè)整齊且動(dòng)畫(huà)有一個(gè)明確的目的,與我們分享,也許你已經(jīng)找到第十家庭規(guī)則。
?
