成都手機網(wǎng)站制作：理解移動應用程序設計中的微交互

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

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

微觀相互作用的力量

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

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

圖片：運球

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

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

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

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

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

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

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

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

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

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

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

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

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

行動

--

用戶做某事

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

反應

--

接口響應

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

反饋

-這就是

用戶實際看到

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

這些非常小的動作可以在沒有動畫的情況下完成，但是巨大的微交互提供了現(xiàn)實感的數(shù)字接口，其主要形式是真實動畫效果..它們?yōu)榻缑孀⑷牖盍Γ⒐膭罡嗟挠脩艚换ァ?/p>

尋找細節(jié)

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

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

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

看一些例子

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

每個應用程序?qū)⑹遣煌?，并有不同的需求，根?jù)應用程序所做的。最后，大多數(shù)用戶都想要同樣的東西：一個應用程序直覺和提供優(yōu)質(zhì)的用戶體驗與用戶行為相關的微交互。

1.動畫事件AppUI

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

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

2.交互式練習屏幕

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

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

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

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

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

4.健身目標的微觀互動

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

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

5.拉回動畫

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

這，這個注重細節(jié)正是在移動應用程序的微交互中展現(xiàn)了真正的美。

6.TAB微觀互動

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

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

7.預壓動畫

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

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

成都手機網(wǎng)站制作

新聞名稱：成都手機網(wǎng)站制作：理解移動應用程序設計中的微交互
文章起源：http://muchs.cn/news/224644.html

網(wǎng)站建設、網(wǎng)絡推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡營銷seo公司；服務項目有網(wǎng)站制作等

廣告

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