【2016.2.19】UI動畫中的微交互詳解{譯}

在UI/UX設計中,微交互(Microinteraction)是其中的重要關注點之一。這些微交互也許能夠最好的證明:注意細節可以給(用戶)很好的效果。大多數UI/UX相關的書籍或者文章都在試圖說明一個基本信息:當設計過程已經結束時,你應該最終得到的不僅僅是美觀,而且首先得到的是好用和有用。

在之前的Tubik的工作組的一些文章和實例研究中,我們也支持一個觀點:UI/UX designers do not create just a piece of art: they make a product that solves the problem of the target audience, preferably in fast and easy way(UI/UX設計師不是再是僅僅設計一個藝術品:他們做的產品最好能夠通過快速,簡潔的方式來解決目標群體).這是經過深思熟慮得出的來自微交互是能夠給設計成功的產品提供關鍵特征:易用,實用,可用。


微交互的精髓

總的來說,微交互是指在一個特定的情況下用戶的交互隨著產品完成特定的一個動作或者行為.舉個例子,當你按下喜歡這個按鈕時,你可以看到你做的這個喜歡動作可以被計算到。(該號碼已更改,按鈕改變顏色或變得不活躍,該副本上的按鈕通知你,你已經做了行動,該按鈕或其他互動元素的副本通知,你是在那些誰喜歡,等)這就是微交互的情況.當你在適當的文字欄目上寫上搜索要求和發送到服務器,這就是一個案例。在社交網絡中,在你關注和取消關注一個人時就發生了微交互,在大多數情況下我們所做的設計中,不愿意去想那些簡單的步驟。

因此,很容易理解到用戶體驗主要是:接受理解微交互。這些神奇的種子,如果得到適當的照顧,可以成長為偉大的可用性,效率和普及的產品。

在大多數情況下,微交互不由自主的固定了用戶的行為,在用戶使用的時候,設計師需要非常注意,讓用戶使用起來更加的自然,簡潔,快捷。在微交互設計中界面動畫就是很多方法中的一種使用和提高的方式.

今天我和樂意通過用戶界面的動畫效果來提供更多的細節想法和一些例子.


微交互的動畫效果

按鈕的動畫效果

顯然,各式各樣的按鈕是最受歡迎的交互要素。更多的按鈕被用戶視為喚醒屏幕或者使用網絡功能的要素,甚至對于低水平的計算機的用戶來說,因為虛擬按鈕實際上是模仿著普通物理按鈕的交互,所以,按鈕是影響用戶體驗本質的因素之一。按鈕可以讓用戶感覺容易或者煩惱和困惑,而在很多情況下,按鈕是最常用的微交互和導航的重要因素觸發。因此,他們被用戶嚴重的關注,從設計師的決定,不僅顏色,形狀,特殊效果,紋理和布局,但也要考慮必要性,適宜性和合適的動畫效果.




下拉刷新動畫

這種動畫現在在用戶界面中是最為流行,對于移動端產品,用戶在第一次上手使用時經常提及到這個動畫.

一方面,它同時提供了兩個互動的步驟,一個是互動的應用程序顯示,另一個是用戶已經達到了內容滾動的上限使之讓屏幕的應用程序發生交互。

另一方面,在圖形用戶界面設計階段,在微交互過程中激活的元素,可以打開令人難以置信的廣闊的空間,這不僅是提供信息,而且還讓人感覺到時尚,美觀和有趣。此外,這種類型的界面動畫可以有效地使用特定的品牌元素,提高品牌知名度,使品牌的標志或吉祥物更令人難忘和可識別。



過程狀態動畫

有些種類的微交互立即發生,有的當然需要一些時間來完成。不管怎樣,為了積極的體驗,用戶需要了解他們每一步都會發生什么。因此,加載過程和類似等待,應該向用戶展示,他們也是能夠讓設計師展現創造力的巨大空間。

正如在過去的情況,一些標準的解決方案可以使用,以及有趣的細節和影響或品牌的元素可以在這里推廣。在這種情況下,設計人員應該分析核心目標的觀眾來決定什么樣的動畫可以放在這里,如果它需要一種加載欄或圓形或任何其他數據,如數字所示的百分比或任何解釋。


還有一點要提的是,使用任何類型的數碼互動產品,哪些用戶真正需要的是通過從系統快速反饋溝通。即使用戶必須等待,他/她應該清楚地了解軟件情況。它是對上述特征的所有類型的動畫的基礎。動畫的最重要的和最初的目的是為了澄清,緩解和加快相互作用的過程中,只有在此之后,以美化和創建所謂的“哇 - 效應”。解決方案的動畫應該可用性,而不是純粹的裝飾和娛樂的基礎上完成。

所以,以及在以前的帖子上的動畫,我們在用動畫作為微交互時。經常呼吁的一個常識,動畫應該支持的用戶,幫助他們,可以增加在應用中讓他真正與可用性相結合,而不是煩人或過度占用屏幕。

關于微交互動畫的思考

它不應該過度占用頁面或屏幕太多這樣會造成長期等待和惱人的加載過程.

在不同的設備和目標用戶下應該思考可以使用它們的條件.

在屏幕或網頁上它不應該出現在最重要的功能或內容中造成干擾.

在應用程序或網站中,它應該符合一般的文體觀念,以提供特殊的對產品的感覺.

對于設計有效的微交互這個問題,設計師不得不在設計,心理學,編程,有時語言學,科學和人類活動的其他領域的十字路口不知如何行動。目標受眾和測試的思想和觀念使微交互通常開門更高可用性的深入分析。在接口使用得當可以成為有效加快高效通過微步的互動,使一般更自然,當它需要在同一時間創造愉快而時尚的視覺設計的方法之一動畫。

來源:Tubik Studio

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,362評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,577評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,486評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,852評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,600評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,944評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,944評論 3 447
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,108評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,652評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,385評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,616評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,111評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,798評論 3 350
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,205評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,537評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,334評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,570評論 2 379

推薦閱讀更多精彩內容