數字接口是用戶和他們期望的目標之間的中間人。界面設計人員創建幫助用戶的體驗。執行某些任務..例如，待辦事項列表應用程序有一個界面，可以幫助用戶組織他們的任務。就像Facebook應用程序給用戶提供了一個與其Facebook賬戶交互的界面。

在本指南中，我將進一步研究移動應用程序的微交互..小的交互可能看起來很瑣碎，但是它們可以有一個巨大影響用戶體驗的質量。如果操作得當，微交互就像是總體移動用戶體驗中真正的一部分。成都手機網站制作

微觀相互作用的力量

在大多數情況下，微交互的目標是提供反饋基于用戶的操作。這可以幫助用戶。可視化界面的移動或行為即使它是純數字的在一個平面屏幕上。

微相互作用是有力量的，因為它們創造一種虛幻的體驗..開/關滑塊實際上并不像物理開關那樣移動，但它們可以在動畫中以這種方式移動。

圖片：運球

我在這個職位討論移動應用程序微交互的巨大價值：

“最好的產品有兩件事做得很好：特性和細節。功能是吸引人們對你的產品。細節是讓他們留在那里的原因。細節是我們的應用在競爭中脫穎而出的真正原因。“

這個小細節從開發的角度看，可能微不足道，但從用戶體驗的角度來看，它們確實是微不足道的。使不同在OK應用UI和非凡的應用UI之間。

巨大的微交互使用戶感到報償因為他采取了行動。這些動作可以是重復和在用戶行為中根深蒂固..他們可以學習如何使用基于這些較小的微交互的應用程序。當用戶執行一種行為時，這些小的交互意味著“是的，您可以與我交互！”

看看谷歌的例子材料設計規范..文檔實際上有一整節專門討論物質運動.空間關系是這個等式的很大一部分，但是運動可以支配的不僅僅是空間關系。

以下是動畫和運動最常見的用途在移動UI/UX設計中：

在不同頁面之間指導用戶通過界面引導用戶教授某些行為建議在任何給定頁面上可以采取的行動/行為

移動應用程序更不用說屏幕空間了而不是網站。這可能會導致一些困難，教用戶如何使用應用程序。但是，如果你知道如何正確地實現微交互，它可能會非常簡單。

微觀相互作用是如何工作的

每當用戶使用接口的某一部分時，單個微交互就會觸發。大多數微觀相互作用是對用戶手勢的動畫響應..因此，一個滑動動作的反應將不同于一個輕拍或一部電影。

眨眼UX做了一個偉大職位討論微觀互動的細節。這些小動畫應該遵循可預測過程用戶可以學習的對于應用程序中的每一個交互.

微交互引導用戶通過一個界面對行為作出反應..一旦用戶知道開/關滑塊可以移動，他們就知道它是交互式的。根據響應，他們還會知道設置是打開還是關閉。當一個按鈕看起來像是可以點擊的時候，用戶就可以點擊它了。本能地知道他們可以和它互動。

據UXPin說，每一個基本的微交互都可以分為四個步驟，但我已經將這個過程總結為三步.

行動

--

用戶做某事

像電影，滑動，點擊和保持，或其他一些互動。

反應

--

接口響應

基于需要發生的事情。在瀏覽器歷史記錄中滑動屏幕可能會移動，或者點擊打開/關閉滑塊可能會關閉設置。

反饋

-這就是

用戶實際看到

作為相互作用的結果。當用戶在移動瀏覽器中滑動時，它可能會將前一頁浮動到屏幕的“頂部”。當壓力施加到屏幕上時，開/關滑塊可能會平穩地滑行或變大。

這些非常小的動作可以在沒有動畫的情況下完成，但是巨大的微交互提供了現實感的數字接口，其主要形式是真實動畫效果..它們為界面注入活力，并鼓勵更多的用戶交互。

尋找細節

通過查看設計中較小的部分，您將了解應用程序應該如何響應特定的行為。

拉刷新是現在流行的微互動的一個很好的例子。當iOS剛推出的時候，它并不是iOS的一個組成部分，但是很多應用程序都接受了這個想法，并開始使用它。現在，拉到刷新是眾所周知的行為，大多數用戶只是知道在瀏覽提要UI時使用。移動也可以這樣說。漢堡包菜單已經大受歡迎了。

使每一個微互動現實與簡單..不要過分渲染動畫，因為它們可以變得乏味如果它們太詳細而且經常被使用的話。用戶不希望每次點擊菜單圖標時都會出現火花。取得平衡用真正的價值傳達接口應該如何工作而不上船成都手機網站制作。

看一些例子

我認為最好的學習方法是做一些事情，第二個最好的方法是學習別人的工作。我收集了一小部分UI/UX微交互動畫從才華橫溢的Dribbble用戶向您展示這些看起來如何在一個真正的模型。

每個應用程序將是不同的，并有不同的需求，根據應用程序所做的。最后，大多數用戶都想要同樣的東西：一個應用程序直覺和提供優質的用戶體驗與用戶行為相關的微交互。

1.動畫事件AppUI

第一個例子是漂亮的卡片動畫由Ivan Martynenko創作的特寫。你會注意到少量的微相互作用在這個設計中，特別是刷卡和移動的細節。

當敲擊卡片時，它的大小會增大。當敲擊訂閱按鈕將用戶的個人資料照片滑到訂閱者列表中。所有的感覺都非常直觀，界面也很自然。

2.交互式練習屏幕

這款創意手機運動動畫來自設計師維塔利·魯布佐夫。它演示一個用戶保存他們的鍛煉為一組蹲。

注意，每個動畫都有相同的彈性彈跳效應當菜單打開和關閉時。當活動被檢查為“已完成”時，這也是正確的。一致性是微交互的關鍵，因為他們都應該感覺到連接到同一接口.

3.搜索應用程序的微交互

短短的，甜蜜的，切中要害的。我認為這最好地描述了搜索應用程序微交互由Lukas Horak設計。每一個動畫快速但仍然引人注目.

這就是您應該如何設計微交互避免過于復雜..如果界面在沒有動畫的情況下會加載得更快，那么為什么還要添加它呢？快速動畫保持用戶通過，而不陷入困境的經驗。

4.健身目標的微觀互動

我認為Jakub antal?真的用他的健身目標微觀互動..屏幕上都有一種晃動的果凍的感覺，因為形狀流動得如此流暢.

但是界面也感覺到實心實用..它表明，與一個目的微觀互動仍然可以是有趣和娛樂，但也功能和務實。

5.拉回動畫

這是我最喜歡的拉刷新動畫由團隊創建拉穆..這不僅是模仿流體具有拉動作，但響應動畫平滑連接從一滴液體飛濺到一個裝載圈。

這，這個注重細節正是在移動應用程序的微交互中展現了真正的美。

6.TAB微觀互動

選項卡小部件由于屏幕較小，移動應用程序非常常見。我真的很喜歡這種微觀相互作用由JohnNoussis創作，雖然我認為它會更有效，以更快的速度，但動畫本身是光榮和深思熟慮的。

選項卡錨箭頭滑向右邊，就像新內容從右邊彈進來一樣。它給人一種錯覺全屏幕物理移動在右邊。動畫很精致，但由于速度太慢，我想大多數用戶會在幾天后感到厭煩。

7.預壓動畫

我沒說太多關于加載桿在這篇文章中，但它們對整體經驗也同樣有價值。大多數用戶不想等待數據加載，但他們肯定不想在加載時盯著一個空白屏幕。

布雷特·庫爾茨做了這么驚人的事預壓篩這既有趣又豐富。用戶實際上可以娛樂看這個小小的動畫重復。他們也可以放心應用程序是仍在加載他們的數據也沒有墜毀。

成都手機網站制作

網頁名稱：成都手機網站制作：理解移動應用程序設計中的微交互
文章URL：http://m.newbst.com/news44/224644.html

網站建設、網絡推廣公司-創新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有網站制作等

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯