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

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

微觀相互作用的力量

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

微相互作用是有力量的，因?yàn)樗鼈儎?chuàng)造一種虛幻的體驗(yàn)..開/關(guān)滑塊實(shí)際上并不像物理開關(guān)那樣移動(dòng)，但它們可以在動(dòng)畫中以這種方式移動(dòng)。

圖片：運(yùn)球

我在這個(gè)職位討論移動(dòng)應(yīng)用程序微交互的巨大價(jià)值：

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

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

巨大的微交互使用戶感到報(bào)償因?yàn)樗扇×诵袆?dòng)。這些動(dòng)作可以是重復(fù)和在用戶行為中根深蒂固..他們可以學(xué)習(xí)如何使用基于這些較小的微交互的應(yīng)用程序。當(dāng)用戶執(zhí)行一種行為時(shí)，這些小的交互意味著“是的，您可以與我交互！”

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

以下是動(dòng)畫和運(yùn)動(dòng)最常見的用途在移動(dòng)UI/UX設(shè)計(jì)中：

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

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

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

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

眨眼UX做了一個(gè)偉大職位討論微觀互動(dòng)的細(xì)節(jié)。這些小動(dòng)畫應(yīng)該遵循可預(yù)測過程用戶可以學(xué)習(xí)的對(duì)于應(yīng)用程序中的每一個(gè)交互.

微交互引導(dǎo)用戶通過一個(gè)界面對(duì)行為作出反應(yīng)..一旦用戶知道開/關(guān)滑塊可以移動(dòng)，他們就知道它是交互式的。根據(jù)響應(yīng)，他們還會(huì)知道設(shè)置是打開還是關(guān)閉。當(dāng)一個(gè)按鈕看起來像是可以點(diǎn)擊的時(shí)候，用戶就可以點(diǎn)擊它了。本能地知道他們可以和它互動(dòng)。

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

行動(dòng)

--

用戶做某事

像電影，滑動(dòng)，點(diǎn)擊和保持，或其他一些互動(dòng)。

反應(yīng)

--

接口響應(yīng)

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

反饋

-這就是

用戶實(shí)際看到

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

這些非常小的動(dòng)作可以在沒有動(dòng)畫的情況下完成，但是巨大的微交互提供了現(xiàn)實(shí)感的數(shù)字接口，其主要形式是真實(shí)動(dòng)畫效果..它們?yōu)榻缑孀⑷牖盍Γ⒐膭?lì)更多的用戶交互。

尋找細(xì)節(jié)

通過查看設(shè)計(jì)中較小的部分，您將了解應(yīng)用程序應(yīng)該如何響應(yīng)特定的行為。

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

使每一個(gè)微互動(dòng)現(xiàn)實(shí)與簡單..不要過分渲染動(dòng)畫，因?yàn)樗鼈兛梢宰兊梅ξ度绻鼈兲敿?xì)而且經(jīng)常被使用的話。用戶不希望每次點(diǎn)擊菜單圖標(biāo)時(shí)都會(huì)出現(xiàn)火花。取得平衡用真正的價(jià)值傳達(dá)接口應(yīng)該如何工作而不上船成都手機(jī)網(wǎng)站制作。

看一些例子

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

每個(gè)應(yīng)用程序?qū)⑹遣煌模⒂胁煌男枨螅鶕?jù)應(yīng)用程序所做的。最后，大多數(shù)用戶都想要同樣的東西：一個(gè)應(yīng)用程序直覺和提供優(yōu)質(zhì)的用戶體驗(yàn)與用戶行為相關(guān)的微交互。

1.動(dòng)畫事件AppUI

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

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

2.交互式練習(xí)屏幕

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

注意，每個(gè)動(dòng)畫都有相同的彈性彈跳效應(yīng)當(dāng)菜單打開和關(guān)閉時(shí)。當(dāng)活動(dòng)被檢查為“已完成”時(shí)，這也是正確的。一致性是微交互的關(guān)鍵，因?yàn)樗麄兌紤?yīng)該感覺到連接到同一接口.

3.搜索應(yīng)用程序的微交互

短短的，甜蜜的，切中要害的。我認(rèn)為這最好地描述了搜索應(yīng)用程序微交互由Lukas Horak設(shè)計(jì)。每一個(gè)動(dòng)畫快速但仍然引人注目.

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

4.健身目標(biāo)的微觀互動(dòng)

我認(rèn)為Jakub antal?真的用他的健身目標(biāo)微觀互動(dòng)..屏幕上都有一種晃動(dòng)的果凍的感覺，因?yàn)樾螤盍鲃?dòng)得如此流暢.

但是界面也感覺到實(shí)心實(shí)用..它表明，與一個(gè)目的微觀互動(dòng)仍然可以是有趣和娛樂，但也功能和務(wù)實(shí)。

5.拉回動(dòng)畫

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

這，這個(gè)注重細(xì)節(jié)正是在移動(dòng)應(yīng)用程序的微交互中展現(xiàn)了真正的美。

6.TAB微觀互動(dòng)

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

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

7.預(yù)壓動(dòng)畫

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

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

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

網(wǎng)頁名稱：成都手機(jī)網(wǎng)站制作：理解移動(dòng)應(yīng)用程序設(shè)計(jì)中的微交互
文章URL：http://www.js-pz168.com/news44/224644.html

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

廣告

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