一個(gè)好的用戶體驗(yàn)設(shè)計(jì)師可以很容易地解釋每一個(gè)決策背后的邏輯設(shè)計(jì)理念。 這包括信息架構(gòu)、頁面內(nèi)容的層次結(jié)構(gòu),流動(dòng)和假設(shè)。

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

功能性動(dòng)畫是什么?

功能性動(dòng)畫是微妙的動(dòng)畫,我們嵌入在一個(gè)用戶界面設(shè)計(jì)作為我們的過程的一部分。

動(dòng)畫與動(dòng)畫由迪斯尼工作室或電腦游戲,功能性動(dòng)畫有一個(gè)明確的、邏輯的目的。 他們的目的是為設(shè)計(jì)服務(wù)的概念通過支持解決方案我們正在試圖傳達(dá)。 功能性動(dòng)畫是我們用戶體驗(yàn)設(shè)計(jì)阿森納的另一個(gè)工具。

在完美的世界里,我們應(yīng)該能夠驗(yàn)證功能性動(dòng)畫對一組定義良好的邏輯的目的。 如果某個(gè)動(dòng)畫在我們設(shè)計(jì)一個(gè)邏輯的目的,那么它就是一個(gè)有效的功能性動(dòng)畫和它的存在在我們的設(shè)計(jì)可能是合理的。 但如果它沒有目的,那么這可能是冗余的,需要重新考慮。

在過去一年左右的時(shí)間,在不同的項(xiàng)目上工作時(shí),我收集了家族的九個(gè)邏輯目的,今天幫我驗(yàn)證功能性動(dòng)畫。 我意識到,通過檢查一個(gè)定義良好的動(dòng)畫,我可以很容易地適應(yīng)它在這個(gè)家庭在一個(gè)或多個(gè)組。

它也以另一種方式產(chǎn)生:當(dāng)一個(gè)動(dòng)畫不適合功能的目的,通常也感到尷尬或討厭。 以下是家庭組到目前為止我已經(jīng)收集了。 我希望你找到有用的驗(yàn)證自己的設(shè)計(jì)動(dòng)畫。

取向

方向照明結(jié)構(gòu)。 在這一組中,我們發(fā)現(xiàn)在我們的導(dǎo)航中扮演角色動(dòng)畫,鑄造網(wǎng)站的信息架構(gòu)。 這種類型的動(dòng)畫背后的邏輯是保持用戶的方向感覺,幫助用戶理解的變化已經(jīng)發(fā)生在頁面的布局,改變引發(fā)了什么以及如何啟動(dòng)以后再次改變。

一個(gè)典型的例子是一個(gè)按鈕,切換隱藏內(nèi)容。 當(dāng)你點(diǎn)擊它,就會(huì)出現(xiàn)一個(gè)隱藏的面板。 當(dāng)你關(guān)閉面板,它收縮回操作按鈕。

第一次,一個(gè)用戶不能預(yù)測將要發(fā)生的交互。 開場動(dòng)畫發(fā)展隱藏面板的大小幫助用戶保持面向,而不是覺得他們已經(jīng)離開的頁面或內(nèi)容突然消失了。 他們?nèi)匀豢刂浦诎l(fā)生的一切。 關(guān)閉動(dòng)畫幫助用戶將減少面板操作按鈕,所以,下次他們會(huì)記得再次打開面板。

邏輯的目的: 避免一個(gè)令人驚訝的轉(zhuǎn)變,東方用戶。

例子視頻

同一位置,新的行動(dòng)

一個(gè)眾所周知的可用性規(guī)則是一致的在這兩個(gè)網(wǎng)站的設(shè)計(jì)和內(nèi)容。 一個(gè)一致的網(wǎng)站是可以預(yù)測的,因此可以習(xí)得的。 這條規(guī)則適用于操作按鈕,等等。

在某些情況下,我們不得不設(shè)計(jì)一個(gè)操作按鈕的功能變化在一定條件下。 我們通常在設(shè)計(jì)整體空間是有限的。 因此,用戶已經(jīng)學(xué)會(huì)操作按鈕的功能可能需要學(xué)習(xí)新功能。

“保存”和“編輯”按鈕可切換的按鈕可能是最常見的例子。 但這是一個(gè)簡單的例子,因?yàn)樾袨槭窍嗷ッ艿?它們具有相同的上下文。 在其他情況下,當(dāng)兩個(gè)動(dòng)作沒有明顯關(guān)系,我們面臨一個(gè)可用性的挑戰(zhàn)。 功能性動(dòng)畫可以幫助。

邏輯的目的: 強(qiáng)調(diào)操作按鈕的功能變化。

例子視頻

放大

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

我們經(jīng)?？吹竭@種圖像畫廊,卡片和項(xiàng)目選擇器。 用戶選擇一個(gè)條目,并將立即看到詳細(xì)的屏幕,與選擇。

這里的挑戰(zhàn)是確保用戶感覺他們?nèi)栽诳刂坪捅３衷诮o定的上下文中。 功能性動(dòng)畫通常是一個(gè)必須在這種情況下。

在研究了大量的功能主義動(dòng)畫在這個(gè)家族,我注意到一個(gè)共同的模式,實(shí)現(xiàn)準(zhǔn)確時(shí),增強(qiáng)動(dòng)畫的效果:

初始狀態(tài)是原始的產(chǎn)品清單。

每個(gè)項(xiàng)目指定了一個(gè)獨(dú)特的視覺線索,比如主導(dǎo)顏色,一個(gè)符號,一個(gè)大膽的標(biāo)題或縮略圖圖像。

當(dāng)用戶選擇,創(chuàng)建一個(gè)新頁面,選中的視覺線索是著名的搬遷,主導(dǎo)地位。 例如,整個(gè)頁面可能與一個(gè)項(xiàng)目獨(dú)特的彩色顏色;項(xiàng)的符號將擴(kuò)大和被定位在頁面的標(biāo)題;項(xiàng)目的名稱會(huì)大,出現(xiàn)在頁面的標(biāo)題。

明顯的操作按鈕將出現(xiàn)在新頁面,比如“取消”,“,”“返回”或“x”。

邏輯的目的: 把一個(gè)縮略圖和它的詳細(xì)視圖。

例子視頻

視覺提示

視覺提示幫助用戶更好地理解如何與產(chǎn)品的交互界面。 尤其需要設(shè)計(jì),包含一個(gè)非傳統(tǒng)的對象或一個(gè)獨(dú)特的導(dǎo)航方法。

這種功能性動(dòng)畫很容易檢測到當(dāng)我們打開一個(gè)頁面,一個(gè)快速的一次性動(dòng)畫突然觸發(fā),演示了如何在設(shè)計(jì)操作某些功能。

邏輯的目的: 提示展覽非常規(guī)功能或一個(gè)隱藏的行動(dòng)。

例子視頻

視頻來源: 邁克爾Martinho

突出

這個(gè)家庭協(xié)助用戶組在這些不幸的情況下,當(dāng)有需要超過一個(gè)嘈雜的布局。

設(shè)計(jì)師通常盡量避免嘈雜的布局,與各種加載屏幕文本和視覺內(nèi)容,互相爭奪用戶的注意力。

減少噪音的一個(gè)接口的一個(gè)方法是通過消除雜亂。 然而,有時(shí)這個(gè)任務(wù)不是那么簡單。 考慮一個(gè)新聞網(wǎng)站的所有者想要?jiǎng)h除的文本從主頁新聞或圖片。

運(yùn)動(dòng),就其本質(zhì)而言,在一個(gè)用戶界面的最高水平。 文本段落和靜態(tài)圖像都無法與運(yùn)動(dòng)。 我們可以利用這一功能動(dòng)畫組。 記住,雖然界面增加噪聲通過添加一個(gè)對象與更高層次的突出是一個(gè)斜坡。

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

邏輯的目的: 抓住用戶的注意力,超越一個(gè)嘈雜的布局。

例子視頻

模擬

有時(shí)在設(shè)計(jì)分析和用戶訪談,我們發(fā)現(xiàn)用戶有需要,我們可以地址只有一個(gè)定制的模擬。

對于這些特殊的情況,我們將創(chuàng)建一個(gè)定制的功能動(dòng)畫。 在下面的示例中,足球的方式分析了數(shù)字,數(shù)字、表格和圖表無法競爭。 在第二個(gè)示例中,用戶可以監(jiān)控溫度在地圖上根據(jù)時(shí)間和地理——一個(gè)特定的用例,幾乎任何其他方式加以解決。

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

例子視頻

視覺反饋

用戶界面設(shè)計(jì)的視覺反饋是非常重要的。 在現(xiàn)實(shí)生活中,按鈕,控制和對象響應(yīng)我們的互動(dòng),這是人們期望的事情是如何工作的。

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

邏輯的目的: 確認(rèn)用戶的行動(dòng)。

例子視頻

系統(tǒng)狀態(tài)

這一組是關(guān)于控制。 用戶,控制意味著了解和理解當(dāng)前上下文的系統(tǒng)在任何給定的時(shí)間。

功能性動(dòng)畫提供了實(shí)時(shí)監(jiān)控的系統(tǒng)狀態(tài),讓用戶快速了解一個(gè)動(dòng)作開始時(shí),剩下的時(shí)間,什么時(shí)候結(jié)束。 也許第一個(gè)功能性動(dòng)畫,這個(gè)角色在HTML網(wǎng)站是旋轉(zhuǎn)式GIF,仍被用于許多接口,指示一個(gè)行動(dòng)進(jìn)展。

有效的功能性動(dòng)畫這個(gè)家庭組通常遵循這種模式:

顯示明確的反饋表明,這個(gè)過程已經(jīng)啟動(dòng)。

目前正在進(jìn)行的反饋過程是在進(jìn)步。

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

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

著名的動(dòng)畫在這組是“下拉刷新”,發(fā)起一個(gè)移動(dòng)設(shè)備上的內(nèi)容更新的過程。 檢查這些動(dòng)畫的實(shí)現(xiàn)在各種應(yīng)用程序中,你很快就會(huì)注意到動(dòng)畫,并不完全符合上述四個(gè)步驟制定感覺錯(cuò)了。 例如,不確定性因缺乏明確的反饋,過程終止可以提示用戶再次發(fā)起刷新操作。

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

例子視頻

市場營銷工具

這一組是關(guān)于營銷,它有一些有趣的動(dòng)畫! 而在我們家前面的八組的動(dòng)畫很邏輯,這是充滿感情的!

假設(shè)我們需要顯示產(chǎn)品的行為,強(qiáng)調(diào)一個(gè)特定的功能,促進(jìn)一個(gè)獨(dú)特的能力,甚至包一個(gè)品牌的價(jià)值和風(fēng)格產(chǎn)品。

在這些場景中,動(dòng)畫可以很好地服務(wù)于公司的營銷策略。 顯然可能不是以用戶為中心的方法,但它確實(shí)有一個(gè)功能的目的。

邏輯的目的: 支持公司的品牌價(jià)值或突出產(chǎn)品的優(yōu)勢。

例子視頻

總結(jié)

提供快樂或高興時(shí)在我們的網(wǎng)站和應(yīng)用,動(dòng)畫貢獻(xiàn)很多。但他們必須永遠(yuǎn)記住 功能第一。

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

到目前為止,我已經(jīng)收集了9個(gè)規(guī)則的家庭。 這九規(guī)則映射到每一個(gè)動(dòng)畫到目前為止我遇到過。 他們幫我評估的動(dòng)畫,我看到接口,和他們是一個(gè)強(qiáng)大的指導(dǎo)原則在決定如何添加動(dòng)畫一個(gè)線框圖設(shè)計(jì)。 我希望你在你的設(shè)計(jì)過程中以同樣的方式他們?yōu)槲曳?wù)。

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