- 相關(guān)推薦
簡單實(shí)用的微交互設(shè)計(jì)指南
產(chǎn)品的易用性來源于對(duì)細(xì)節(jié)的打磨，偉大的設(shè)計(jì)不僅僅在功能上滿足用戶的需求，還要在微交互的設(shè)計(jì)上打動(dòng)人心。以下是小編分享的一份簡單實(shí)用的微交互設(shè)計(jì)指南，希望對(duì)您的學(xué)習(xí)所幫助!
好的產(chǎn)品往往做好了兩點(diǎn)：功能和細(xì)節(jié)設(shè)計(jì)。
功能吸引用戶使用你的產(chǎn)品，細(xì)節(jié)設(shè)計(jì)將你的用戶留下。優(yōu)秀的細(xì)節(jié)設(shè)計(jì)能夠使你的產(chǎn)品在眾多競品中脫穎而出，優(yōu)秀的微交互設(shè)計(jì)往往能夠讓用戶在初次使用產(chǎn)品時(shí)就能夠留下深刻的印象。作為一個(gè)交互設(shè)計(jì)師，在設(shè)計(jì)微交互方案的時(shí)候不僅要考慮視覺上的沖擊力，還要想辦法賦予其信息傳遞的功能。
什么是微交互?
微交互是產(chǎn)品中存在的某一個(gè)時(shí)刻，它完成了某一個(gè)小的任務(wù)。Dan Saffer在他的書中(Microinteractions)第一次描述了微交互的概念，這些小細(xì)節(jié)專注于服務(wù)這些必要的功能：
1、交流回饋或者動(dòng)作的結(jié)果回饋
2、完成某個(gè)單獨(dú)的任務(wù)
3、增強(qiáng)直接操作的感覺
幫助用戶在視覺上展示操作的結(jié)果，以及避免錯(cuò)誤
一些明顯的微交互例子包括：
當(dāng)你將iPhone設(shè)置成靜音時(shí)伴隨出現(xiàn)的的震動(dòng)提醒、屏幕上的靜音icon。
界面動(dòng)畫提示是否能夠點(diǎn)擊(當(dāng)鼠標(biāo)移到按鈕上方時(shí)按鈕的顏色改變)。
為什么使用微交互?
微交互是在對(duì)用戶一些自然的需求/欲望的認(rèn)知和反饋。用戶從微交互提供的視覺、觸覺等反饋中確認(rèn)他們的行為被接受。微交互還可以引導(dǎo)用戶正確的使用系統(tǒng)/產(chǎn)品。
定義微交互的使用情景
微交互的一個(gè)特點(diǎn)是它可以被放置在很多的場景下，輔助不同的動(dòng)作行為。總體來說，微交互的使用場景包括：
展示系統(tǒng)/產(chǎn)品的狀態(tài)
Jacob Nielsen在“可用性啟發(fā)原則”中指出：讓你的用戶時(shí)刻了解發(fā)生的事情，用戶期望對(duì)自己的行為立即得到反饋。但是有些情況下，app需要時(shí)間來等待行為處理完成后才能向用戶發(fā)出反饋。因此，產(chǎn)品界面需要向用戶指明此刻正在發(fā)生的事。
▲ 下載進(jìn)度表
或者標(biāo)明用戶所在的位置：
Tips：不要讓你的用戶感到無助，讓你的用戶了解實(shí)時(shí)的狀態(tài)并且向其展示進(jìn)度(比如進(jìn)度條能夠讓用戶了解進(jìn)度，消除疑惑)
提示更新
我們有時(shí)需要向用戶推送通知來保證用戶了解到事態(tài)的更新。動(dòng)畫可以做到這一點(diǎn)，動(dòng)畫可以吸引用戶的注意力，避免用戶忽視掉重要的信息。
Tips：微交互里的動(dòng)效應(yīng)該遵循KISS原則(keep it simple, stupid),應(yīng)該盡量簡單直接。
關(guān)聯(lián)上下文
使用動(dòng)效來將用戶的注意力平滑的在導(dǎo)航頁面間切換，向用戶解釋頁面里元素之間的關(guān)系，以及頁面跳轉(zhuǎn)的來龍去脈。這對(duì)于移動(dòng)設(shè)備非常有用，因?yàn)槠聊坏某叽缦拗�，移�?dòng)界面中每一頁的內(nèi)容都很緊湊，使用動(dòng)效來闡述內(nèi)容之間的聯(lián)系非常實(shí)用。
Tips：盡量讓每個(gè)頁面的導(dǎo)航簡潔，這樣可以有效避免用戶在頁面跳轉(zhuǎn)中迷失。兩個(gè)狀態(tài)之間的卻換應(yīng)該清晰、平滑、快捷。在視覺上統(tǒng)一所有的交互形式，降低用戶的學(xué)習(xí)成本。
輸入可視化
數(shù)據(jù)輸入是應(yīng)用中非常重要的環(huán)節(jié)，微交互可以使用現(xiàn)有的元素來展示數(shù)據(jù)輸入的反饋，從而將這步操作變得更加高效。
Tips：微交互能夠幫助用戶理解信息格式，來源，幫助用戶便捷輸入信息。
引導(dǎo)互動(dòng)
微交互可以鼓勵(lì)用戶、吸引用戶與產(chǎn)品交互。它可以在用戶體驗(yàn)中產(chǎn)生同理心。但是需要謹(jǐn)慎使用微交互，保證其在感官上不會(huì)冒犯你的用戶。
時(shí)刻謹(jǐn)記：不要讓用戶感到厭煩，Keep it simple, stupid.
Tips：關(guān)注用戶的情感反饋，因?yàn)樗谟脩趔w驗(yàn)中起到很重要的作用。多做用戶研究和情景調(diào)研，設(shè)計(jì)能被用戶頻繁使用的微交互方案。
值得謹(jǐn)記的
微交互向用戶展示動(dòng)作反饋，通知以及信息框架結(jié)構(gòu)
微交互應(yīng)該通過轉(zhuǎn)移用戶的注意力、愉悅用戶等來達(dá)到加快/縮短信息數(shù)據(jù)的傳輸
了解你的用戶以及使用微交互的背景，能夠讓你的微交互方案更加的精準(zhǔn)與高效
微交互必須能夠支持長時(shí)效的使用，在第一次使用時(shí)感到驚喜的方案，可能在第一百次使用時(shí)就變成了困擾。
微交互方案應(yīng)該人性化一些，并且在視覺上保持和諧。用戶在使用的時(shí)候應(yīng)該感到流暢，微交互的方案應(yīng)該盡可能的從現(xiàn)實(shí)生活中獲得啟發(fā)，比如使用擬物化等手段，從而降低學(xué)習(xí)成本。
【簡單微交互設(shè)計(jì)指南】相關(guān)文章：
交互設(shè)計(jì)原則有哪些08-24
網(wǎng)頁設(shè)計(jì)中常見的交互設(shè)計(jì)錯(cuò)誤09-26
響應(yīng)交互式網(wǎng)頁設(shè)計(jì)06-29
交互設(shè)計(jì)新手該如何學(xué)習(xí)10-20
如何畫交互設(shè)計(jì)流程圖09-15