著名魔術(shù)師 Dariel Fitzkee 曾經(jīng)說(shuō)過(guò)：“魔術(shù)是表演和細(xì)節(jié)的藝術(shù)。”而交互設(shè)計(jì)同樣是如此。設(shè)計(jì)師大多能夠很好的控制設(shè)計(jì)的大方向，但是細(xì)節(jié)處理不當(dāng)?shù)脑?，?huì)讓優(yōu)秀的設(shè)計(jì)方案功虧一簣，要不怎么說(shuō)“細(xì)節(jié)當(dāng)中藏有魔鬼”呢？也正是因此，那些精心設(shè)計(jì)的微交互會(huì)讓用戶體驗(yàn)顯得精巧而到位。
想要了解微交互到底對(duì)你的設(shè)計(jì)有什么好處，那么你最好將你的設(shè)計(jì)思路勾勒出來(lái)。用來(lái)繪制原型和線框圖的工具有很多，這里推薦使用近期比較火的Adobe Experience，也就是Adobe XD，它是專門(mén)為線框圖和交互設(shè)計(jì)而生的。
當(dāng)你有了工具，也有了想法，接下來(lái)我們開(kāi)始進(jìn)入正題，一起來(lái)看看有哪些值得注意的微交互細(xì)節(jié)設(shè)計(jì)。
呈現(xiàn)系統(tǒng)狀態(tài)
對(duì)于UI的狀態(tài)設(shè)計(jì)，Jakob Nielsen 曾經(jīng)說(shuō)過(guò)，“系統(tǒng)應(yīng)當(dāng)始終通過(guò)合理的反饋告知用戶當(dāng)前正在發(fā)生的事情，所處的狀態(tài)。”這也就意味著界面需要通過(guò)反饋?zhàn)層脩裘靼装l(fā)生了什么，而無(wú)需用戶猜測(cè)。而帶有動(dòng)效的微交互正是以提供視覺(jué)反饋而聞名。
想要展現(xiàn)創(chuàng)意十足的微交互動(dòng)效，數(shù)據(jù)的上傳和下載過(guò)程都是不錯(cuò)的選擇。
另外一個(gè)經(jīng)典的案例就是下來(lái)刷新，這是目前移動(dòng)端UI中內(nèi)容更新最常見(jiàn)的交互手段，一個(gè)暢快的下拉刷新微交互動(dòng)效能夠讓用戶欲罷不能。
讓按鈕和控件容易被感知
即使隔著手機(jī)的玻璃屏幕，界面上的按鈕和控件也應(yīng)當(dāng)是易于被感知，讓人覺(jué)得它們是真實(shí)有形的。運(yùn)動(dòng)軌跡和視覺(jué)線索能夠以即時(shí)反饋的形式，彌合這種現(xiàn)實(shí)和虛擬圖像之間的界限，讓人看起來(lái)、感覺(jué)上都是在直接操作。UI界面中的按鈕能夠模仿現(xiàn)實(shí)中的按鈕反饋來(lái)強(qiáng)化交互，簡(jiǎn)單的說(shuō)來(lái)，就是讓用戶輸入和操作的視覺(jué)反饋更加明顯一些。
視覺(jué)反饋之所以有用，是因?yàn)樗嫌脩魧?duì)于交互的期望，當(dāng)用戶針對(duì)某個(gè)控件進(jìn)行了操作，而它們給予了對(duì)應(yīng)的反饋，這種感覺(jué)是非常良好的。
構(gòu)建有意義的過(guò)渡
動(dòng)效一個(gè)很重要的功能，是展現(xiàn)狀態(tài)和內(nèi)容的轉(zhuǎn)變與過(guò)渡，用來(lái)解釋屏幕上各種元素的排布和層次。
圖標(biāo)可能會(huì)從一個(gè)形狀變?yōu)榱硗庖粋€(gè)形狀，在不同的時(shí)間以不同的功能呈現(xiàn)，而這種過(guò)渡和轉(zhuǎn)變就是靠動(dòng)效來(lái)表現(xiàn)的。
動(dòng)效設(shè)計(jì)的優(yōu)勢(shì)不僅僅是單純的引導(dǎo)，它讓轉(zhuǎn)變和過(guò)渡的等待過(guò)程變得更加有趣，愉悅用戶。在移動(dòng)端設(shè)備上，過(guò)渡動(dòng)效顯得尤為重要，它使得大量的信息呈現(xiàn)不再那么單調(diào)。這種情況在Apple Watch 上表現(xiàn)的尤為明顯。
Apple iOS系統(tǒng)的UI設(shè)計(jì)中就很好的利用了這些有意義的過(guò)渡動(dòng)效。下面的案例中，用戶點(diǎn)擊文件夾或者APP，圖標(biāo)當(dāng)大擴(kuò)展到整個(gè)屏幕，展現(xiàn)出細(xì)節(jié)和詳情。
另外一個(gè)案例則來(lái)自Material Design，過(guò)渡動(dòng)效不僅呈現(xiàn)出控件和不同界面之間的關(guān)系，還通過(guò)色彩點(diǎn)名兩者的關(guān)系，并且展現(xiàn)出了狀態(tài)的改變。這樣的過(guò)渡過(guò)程是流暢、輕松且高效的。
幫助用戶快速入門(mén)
動(dòng)效和微交互在用戶快速入門(mén)的時(shí)候是非常有用的。當(dāng)用戶初次使用應(yīng)用的時(shí)候，流暢的用戶體驗(yàn)和貼心而不繁復(fù)的引導(dǎo)對(duì)于用戶的初次使用和交互有著直接的影響。設(shè)計(jì)師將最關(guān)鍵、最重要的信息通過(guò)引導(dǎo)告知用戶，同時(shí)還要控制好整個(gè)引導(dǎo)流程足夠簡(jiǎn)明而舒適。
這個(gè)過(guò)程中，動(dòng)效和微交互讓信息展現(xiàn)更加順暢，幫助用戶更加高效地抵達(dá)目標(biāo)。
凸顯UI中的變化
微交互能夠直接吸引用戶的注意力。在絕大多數(shù)情況下，設(shè)計(jì)師通過(guò)動(dòng)效化的微交互將用的注意力吸引到某個(gè)重要的細(xì)節(jié)上去（比如通知推送）。不過(guò)，在這個(gè)過(guò)程中，要確保動(dòng)效是功能性的，并且對(duì)于用戶而言是合理而能接受的。
增加令人愉悅的細(xì)節(jié)
動(dòng)效在APP中的主要是以過(guò)渡的形式呈現(xiàn)，而那些真正讓用戶感到愉悅的動(dòng)效大多是非標(biāo)準(zhǔn)和非常規(guī)的，它們的不同和令人意外的體驗(yàn)是取悅用戶的關(guān)鍵。下面的案例中，觸發(fā)按鈕之后，動(dòng)效提供了兩重功能：告知用戶按鈕已經(jīng)觸發(fā)，然后見(jiàn)證一段有趣的動(dòng)畫(huà)。
雖然有人認(rèn)為這樣的動(dòng)畫(huà)有炫技之嫌，但是最重要的是照顧到用戶的情緒和體驗(yàn)，能夠調(diào)動(dòng)用戶的情緒，這個(gè)動(dòng)效在整個(gè)UI交互中就稱職了。
設(shè)計(jì)微動(dòng)效中值得思考的問(wèn)題
當(dāng)你按照上面提及的思路來(lái)設(shè)計(jì)微交互的時(shí)候，有幾個(gè)問(wèn)題需要注意：
·微交互幾乎不可見(jiàn)，但是又是功能性的。確保你所設(shè)計(jì)的動(dòng)效和功能、目標(biāo)是保持一致的，不會(huì)讓用戶感到尷尬或者煩躁。對(duì)于頻繁的小幅度的操作，盡量讓反饋和響應(yīng)快速而適度，對(duì)于較大的變化則應(yīng)當(dāng)讓動(dòng)效明顯而充實(shí)。
·有長(zhǎng)期的構(gòu)思。微交互是需要長(zhǎng)期、持續(xù)使用的，有些看起來(lái)好玩的嘗試可能會(huì)在持續(xù)使用過(guò)程中讓人覺(jué)得不舒服。
·過(guò)度的設(shè)計(jì)可能會(huì)讓你的微交互成為致命的缺陷。微交互的加載過(guò)程不能耗時(shí)過(guò)長(zhǎng)，不要占據(jù)過(guò)多的系統(tǒng)資源，展現(xiàn)過(guò)程也不要太花費(fèi)時(shí)間。相反，它應(yīng)當(dāng)呈現(xiàn)有價(jià)值的內(nèi)容，并且盡量節(jié)省時(shí)間，降低用戶等待的時(shí)長(zhǎng)。
·不要從零開(kāi)始。對(duì)于你的目標(biāo)用戶和受眾多少還是有一些了解的，利用好這些信息和知識(shí)，確保你的微交互是精準(zhǔn)而有效的。
·使用其他的UI元素構(gòu)建視覺(jué)層次。微交互應(yīng)當(dāng)與整體界面風(fēng)格保持一致。
結(jié)語(yǔ)

細(xì)致的細(xì)節(jié)設(shè)計(jì)能夠讓整個(gè)產(chǎn)品更有生命力。正如同Charles Eames 曾經(jīng)所說(shuō)，“細(xì)節(jié)并不只是細(xì)節(jié)，它是構(gòu)建起整個(gè)設(shè)計(jì)的基本元素?！蹦愕腢I和交互設(shè)計(jì)中的每一個(gè)元素都是至關(guān)重要的，一個(gè)又一個(gè)細(xì)節(jié)設(shè)計(jì)讓你的產(chǎn)品最終脫穎而出，而真正讓人難忘的產(chǎn)品，靠的是這一個(gè)個(gè)精致到位的細(xì)節(jié)堆出來(lái)的。真正優(yōu)秀的設(shè)計(jì)，從功能到元素，從交互到過(guò)渡，都是可靠的。

本文來(lái)自創(chuàng)新互聯(lián)品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)
標(biāo)簽：創(chuàng)新互聯(lián),重慶網(wǎng)站建設(shè),成都網(wǎng)頁(yè)設(shè)計(jì),成都網(wǎng)站設(shè)計(jì),成都網(wǎng)站建設(shè)公司

分享標(biāo)題：優(yōu)秀的移動(dòng)端UI應(yīng)當(dāng)如何用微交互打磨細(xì)節(jié)
標(biāo)題路徑：http://www.rwnh.cn/news/165387.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、ChatGPT、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、網(wǎng)站改版、云服務(wù)器、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

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