足彩网

移動端UI如何用微交互打磨細節

荊門百捷丨 2016-10-21 21:50:49

UI設計的細節很重要,它不僅僅體現在靜態的元素上,動效和微交互也是如今UI和UX設計中最重要的細節。想要打造優秀的移動端UI設計,微交互和動效設計是繞不開的問題,今天的文章我們來聊聊這個~


著名魔術師 Dariel Fitzkee 曾經說過:“魔術是表演和細節的藝術。”而交互設計同樣是如此。設計師大多能夠很好的控制設計的大方向,但是細節處理不當的話,會讓優秀的設計方案功虧一簣,要不怎么說“細節當中藏有魔鬼”呢?也正是因此,那些精心設計的微交互會讓用戶體驗顯得精巧而到位。


想要了解微交互到底對你的設計有什么好處,那么你最好將你的設計思路勾勒出來。用來繪制原型和線框圖的工具有很多,這里推薦使用近期比較火的Adobe Experience,也就是Adobe XD,它是專門為線框圖和交互設計而生的。


關于Adobe XD,你可以從這篇文章《Experience Design CC 體驗版使用詳細評測》了解它的基本特色。當你有了工具,也有了想法,接下來我們開始進入正題,一起來看看有哪些值得注意的微交互細節設計。


呈現系統狀態


對于UI的狀態設計,Jakob Nielsen 曾經說過,“系統應當始終通過合理的反饋告知用戶當前正在發生的事情,所處的狀態。”這也就意味著界面需要通過反饋讓用戶明白發生了什么,而無需用戶猜測。而帶有動效的微交互正是以提供視覺反饋而聞名。


想要展現創意十足的微交互動效,數據的上傳和下載過程都是不錯的選擇。


讓按鈕和控件容易被感知


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


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


構建有意義的過渡


動效一個很重要的功能,是展現狀態和內容的轉變與過渡,用來解釋屏幕上各種元素的排布和層次。


動效設計的優勢不僅僅是單純的引導,它讓轉變和過渡的等待過程變得更加有趣,愉悅用戶。在移動端設備上,過渡動效顯得尤為重要,它使得大量的信息呈現不再那么單調。這種情況在Apple Watch 上表現的尤為明顯。


幫助用戶快速入門


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


凸顯UI中的變化


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


增加令人愉悅的細節


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


設計微動效中值得思考的問題


當你按照上面提及的思路來設計微交互的時候,有幾個問題需要注意:


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


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


·過度的設計可能會讓你的微交互成為致命的缺陷。微交互的加載過程不能耗時過長,不要占據過多的系統資源,展現過程也不要太花費時間。相反,它應當呈現有價值的內容,并且盡量節省時間,降低用戶等待的時長。


·不要從零開始。對于你的目標用戶和受眾多少還是有一些了解的,利用好這些信息和知識,確保你的微交互是精準而有效的。


·使用其他的UI元素構建視覺層次。微交互應當與整體界面風格保持一致。


結語


細致的細節設計能夠讓整個產品更有生命力。正如同Charles Eames 曾經所說,“細節并不只是細節,它是構建起整個設計的基本元素。”你的UI和交互設計中的每一個元素都是至關重要的,一個又一個細節設計讓你的產品最終脫穎而出,而真正讓人難忘的產品,靠的是這一個個精致到位的細節堆出來的。真正優秀的設計,從功能到元素,從交互到過渡,都是可靠的。


問題咨詢 您的企業現在面臨的問題?

聯系我們

客服部:0724-6508630

技術部:0724-6805653    人事部:0724-2366806

地址:湖北省荊門市東方家電六樓百捷網絡服務有限公司

郵箱:[email protected]
查看詳細聯系信息

荊門百捷PC端碼

荊門百捷公眾號

足彩网