藍藍設(shè)計( www.alimai.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù) 

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

UI設(shè)計的細節(jié)很重要，它不僅僅體現(xiàn)在靜態(tài)的元素上，動效和微交互也是如今UI和UX設(shè)計中最重要的細節(jié)。想要打造優(yōu)秀的移動端UI設(shè)計，微交互和動效設(shè)計是繞不開的問題，今天的文章我們來聊聊這個~

呈現(xiàn)系統(tǒng)狀態(tài)

        對于UI的狀態(tài)設(shè)計，“系統(tǒng)應(yīng)當始終通過合理的反饋告知用戶當前正在發(fā)生的事情，所處的狀態(tài)?！边@也就意味著界面需要通過反饋讓用戶明白發(fā)生了什么，而無需用戶猜測。而帶有動效的微交互正是以提供視覺反饋而聞名。

       想要展現(xiàn)創(chuàng)意十足的微交互動效，數(shù)據(jù)的上傳和下載過程都是不錯的選擇。

 

        另外一個經(jīng)典的案例就是下來刷新，這是目前移動端UI中內(nèi)容更新最常見的交互手段，一個暢快的下拉刷新微交互動效能夠讓用戶欲罷不能。

 

讓按鈕和控件容易被感知

        即使隔著手機的玻璃屏幕，界面上的按鈕和控件也應(yīng)當是易于被感知，讓人覺得它們是真實有形的。運動軌跡和視覺線索能夠以即時反饋的形式，彌合這種現(xiàn)實和虛擬圖像之間的界限，讓人看起來、感覺上都是在直接操作。UI界面中的按鈕能夠模仿現(xiàn)實中的按鈕反饋來強化交互，簡單的說來，就是讓用戶輸入和操作的視覺反饋更加明顯一些。

 

        視覺反饋之所以有用，是因為它符合用戶對于交互的期望，當用戶針對某個控件進行了操作，而它們給予了對應(yīng)的反饋，這種感覺是非常良好的。

構(gòu)建有意義的過渡

        動效是一個很重要的功能，是展現(xiàn)狀態(tài)和內(nèi)容的轉(zhuǎn)變與過渡，用來解釋屏幕

 

        

圖標可能會從一個形狀變?yōu)榱硗庖粋€形狀，在不同的時間以不同的功能呈現(xiàn)，而這種過渡和轉(zhuǎn)變就是靠動效來表現(xiàn)的。

        動效設(shè)計的優(yōu)勢不僅僅是單純的引導(dǎo)，它讓轉(zhuǎn)變和過渡的等待過程變得更加有趣，愉悅用戶。在移動端設(shè)備上，過渡動效顯得尤為重要，它使得大量的信息呈現(xiàn)不再那么單調(diào)。這種情況在Apple Watch 上表現(xiàn)的尤為明顯。

 

Apple iOS系統(tǒng)的UI設(shè)計中就很好的利用了這些有意義的過渡動效。下面的案例中，用戶點擊文件夾或者APP，圖標當大擴展到整個屏幕，展現(xiàn)出細節(jié)和詳情。

 

另外一個案例則來自Material Design，過渡動效不僅呈現(xiàn)出控件和不同界面之間的關(guān)系，還通過色彩點名兩者的關(guān)系，并且展現(xiàn)出了狀態(tài)的改變。這樣的過渡過程是流暢、輕松且的。

幫助用戶快速入門

動效和微交互在用戶快速入門的時候是非常有用的。當用戶初次使用應(yīng)用的時候，流暢的用戶體驗和貼心而不繁復(fù)的引導(dǎo)對于用戶的初次使用和交互有著直接的影響。設(shè)計師將最關(guān)鍵、最重要的信息通過引導(dǎo)告知用戶，同時還要控制好整個引導(dǎo)流程足夠簡明而舒適。

 

       這個過程中，動效和微交互讓信息展現(xiàn)更加順暢，幫助用戶更加地抵達目標。

凸顯UI中的變化

微交互能夠直接吸引用戶的注意力。在絕大多數(shù)情況下，設(shè)計師通過動效化的微交互將用的注意力吸引到某個重要的細節(jié)上去（比如通知推送）。不過，在這個過程中，要確保動效是功能性的，并且對于用戶而言是合理而能接受的。

 

增加令人愉悅的細節(jié)

動效在APP中的主要是以過渡的形式呈現(xiàn)，而那些真正讓用戶感到愉悅的動效大多是非標準和非常規(guī)的，它們的不同和令人意外的體驗是取悅用戶的關(guān)鍵。下面的案例中，觸發(fā)按鈕之后，動效提供了兩重功能：告知用戶按鈕已經(jīng)觸發(fā)，然后見證一段有趣的動畫。

 

雖然有人認為這樣的動畫有炫技之嫌，但是最重要的是照顧到用戶的情緒和體驗，能夠調(diào)動用戶的情緒，這個動效在整個UI交互中就稱職

設(shè)計微動效中值得思考的問題

當你按照上面提及的思路來設(shè)計微交互的時候，有幾個問題需要注意：

微交互幾乎不可見，但是又是功能性的。確保你所設(shè)計的動效和功能、目標是保持一致的，不會讓用戶感到尷尬或者煩躁。對于頻繁的小幅度的操作，盡量讓反饋和響應(yīng)快速而適度，對于較大的變化則應(yīng)當讓動效明顯而充實。

有長期的構(gòu)思。微交互是需要長期、持續(xù)使用的，有些看起來好玩的嘗試可能會在持續(xù)使用過程中讓人覺得不舒服。

過度的設(shè)計可能會讓你的微交互成為致命的缺陷。微交互的加載過程不能耗時過長，不要占據(jù)過多的系統(tǒng)資源，展現(xiàn)過程也不要太花費時間。相反，它應(yīng)當呈現(xiàn)有價值的內(nèi)容，并且盡量節(jié)省時間，降低用戶等待的時長。

不要從零開始。對于你的目標用戶和受眾多少還是有一些了解的，利用好這些信息和知識，確保你的微交互是精準而有效的。使用其他的UI元素構(gòu)建視覺層次。微交互應(yīng)當與整體界面風(fēng)格保持一致。

結(jié)語

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