數字接口
這個 小細節從開發的角度看,可能微不足道,但從用戶體驗的角度來看,它們確實是微不足道的。 使不同在OK應用UI和非凡的應用UI之間。
巨大的微交互使用戶 感到報償因為他采取了行動。這些動作可以是 重復和 在用戶行為中根深蒂固..他們可以學習如何使用基于這些較小的微交互的應用程序。當用戶執行一種行為時,這些小的交互意味著“是的,您可以與我交互!”
看看谷歌的例子 材料設計規范..文檔實際上有一整節專門討論 物質運動. 空間關系是這個等式的很大一部分,但是運動可以支配的不僅僅是空間關系。
以下是 動畫和運動最常見的用途在移動UI/UX設計中:
在不同頁面之間指導用戶 通過界面引導用戶教授某些行為 建議在任何給定頁面上可以采取的行動/行為
移動應用程序 更不用說屏幕空間了而不是網站。這可能會導致一些困難,教用戶如何使用應用程序。但是,如果你知道如何正確地實現微交互,它可能會非常簡單。
微觀相互作用是如何工作的
每當用戶使用接口的某一部分時,單個微交互就會觸發。大多數微觀相互作用是 對用戶手勢的動畫響應..因此,一個滑動動作的反應將不同于一個輕拍或一部電影。
眨眼UX做了一個 偉大職位討論微觀互動的細節。這些小動畫應該遵循 可預測過程用戶可以學習的 對于應用程序中的每一個交互.
微交互引導用戶通過一個界面 對行為作出反應..一旦用戶知道開/關滑塊可以移動,他們就知道它是交互式的。根據響應,他們還會知道設置是打開還是關閉。當一個按鈕看起來像是可以點擊的時候,用戶就可以點擊它了。 本能地知道他們可以和它互動。 據UXPin說
,每一個基本的微交互都可以分為四個步驟,但我已經將這個過程總結為 三步.
行動
-- 用戶做某事
像電影,滑動,點擊和保持,或其他一些互動。 反應
-- 接口響應
基于需要發生的事情。在瀏覽器歷史記錄中滑動屏幕可能會移動,或者點擊打開/關閉滑塊可能會關閉設置。 反饋
-這就是 用戶實際看到
作為相互作用的結果。當用戶在移動瀏覽器中滑動時,它可能會將前一頁浮動到屏幕的“頂部”。當壓力施加到屏幕上時,開/關滑塊可能會平穩地滑行或變大。
這些非常小的動作可以在沒有動畫的情況下完成,但是巨大的微交互提供了 現實感的數字接口,其主要形式是 真實動畫效果..它們為界面注入活力,并鼓勵更多的用戶交互。 尋找細節
通過查看設計中較小的部分,您將了解應用程序應該如何響應特定的行為。 拉刷新
是現在流行的微互動的一個很好的例子。當iOS剛推出的時候,它并不是iOS的一個組成部分,但是很多應用程序都接受了這個想法,并開始使用它?,F在,拉到刷新是眾所周知的行為,大多數用戶只是知道在瀏覽提要UI時使用。移動也可以這樣說。 漢堡包菜單已經大受歡迎了。
使每一個微互動 現實與簡單..不要過分渲染動畫,因為它們可以 變得乏味如果它們太詳細而且經常被使用的話。用戶不希望每次點擊菜單圖標時都會出現火花。 取得平衡用真正的價值傳達 接口應該如何工作而不上船寧波手機網站制作。
看一些例子
我認為最好的學習方法是做一些事情,第二個最好的方法是學習別人的工作。我收集了一小部分 UI/UX微交互動畫從才華橫溢的Dribbble用戶向您展示這些看起來如何在一個真正的模型。
每個應用程序將是不同的,并有不同的需求,根據應用程序所做的。最后,大多數用戶都想要同樣的東西:一個應用程序 直覺和 提供優質的用戶體驗與用戶行為相關的微交互。
1.動畫事件AppUI
第一個例子是漂亮的 卡片動畫由Ivan Martynenko創作的特寫。你會注意到 少量的微相互作用在這個設計中,特別是刷卡和移動的細節。
當敲擊卡片時,它的大小會增大。當敲擊 訂閱 按鈕將用戶的個人資料照片滑到訂閱者列表中。所有的感覺都非常直觀,界面也很自然。
2.交互式練習屏幕
這款創意手機 運動動畫來自設計師維塔利·魯布佐夫。它演示一個用戶保存他們的鍛煉為一組蹲。
注意,每個動畫都有相同的 彈性彈跳效應當菜單打開和關閉時。當活動被檢查為“已完成”時,這也是正確的。 一致性是微交互的關鍵,因為他們都應該感覺到 連接到同一接口.
3.搜索應用程序的微交互
短短的,甜蜜的,切中要害的。我認為這最好地描述了 搜索應用程序微交互 由Lukas Horak設計。每一個動畫 快速但仍然引人注目.
這就是您應該如何設計微交互 避免過于復雜..如果界面在沒有動畫的情況下會加載得更快,那么為什么還要添加它呢? 快速動畫保持用戶通過,而不陷入困境的經驗。
4.健身目標的微觀互動
我認為Jakub antal?真的用他的 健身目標微觀互動..屏幕上都有一種晃動的果凍的感覺,因為 形狀流動得如此流暢.
但是界面也感覺到 實心實用..它表明,與一個目的微觀互動仍然可以是有趣和娛樂,但也功能和務實。
5.拉回動畫
這是我最喜歡的 拉刷新動畫由團隊創建 拉穆..這不僅是 模仿流體具有拉動作,但響應動畫 平滑連接從一滴液體飛濺到一個裝載圈。
這,這個 注重細節正是在移動應用程序的微交互中展現了真正的美。
6.TAB微觀互動 選項卡小部件
由于屏幕較小,移動應用程序非常常見。我真的很喜歡 這種微觀相互作用由JohnNoussis創作,雖然我認為它會更有效,以更快的速度,但動畫本身是光榮和深思熟慮的。
選項卡錨箭頭滑向右邊,就像新內容從右邊彈進來一樣。它給人一種錯覺 全屏幕物理移動在右邊。動畫很精致,但由于速度太慢,我想大多數用戶會在幾天后感到厭煩。
7.預壓動畫
我沒說太多關于 加載桿在這篇文章中,但它們對整體經驗也同樣有價值。大多數用戶不想等待數據加載,但他們肯定不想在加載時盯著一個空白屏幕。
布雷特·庫爾茨做了這么驚人的事 預壓篩這既有趣又豐富。用戶實際上可以 娛樂看這個小小的動畫重復。他們也可以 放心應用程序是 仍在加載他們的數據也沒有墜毀。 寧波手機網站制作