微交互怎么玩?一份簡(jiǎn)單實(shí)用的微交互設(shè)計(jì)指南

      作者:
      2016-04-05
      1371

      功能差不多的情況下,如何讓用戶(hù)一見(jiàn)傾心?微交互是決定用戶(hù)印象的關(guān)鍵之一,今天這篇好文列舉了使用微交互的注意點(diǎn),以及五個(gè)最常見(jiàn)的使用場(chǎng)景,全是干貨,來(lái)收!

      好的產(chǎn)品往往做好了兩點(diǎn):功能和細(xì)節(jié)設(shè)計(jì)。

      功能吸引用戶(hù)使用你的產(chǎn)品,細(xì)節(jié)設(shè)計(jì)將你的用戶(hù)留下。優(yōu)秀的細(xì)節(jié)設(shè)計(jì)能夠使你的產(chǎn)品在眾多競(jìng)品中脫穎而出,優(yōu)秀的微交互設(shè)計(jì)往往能夠讓用戶(hù)在初次使用產(chǎn)品時(shí)就能夠留下深刻的印象。作為一個(gè)交互設(shè)計(jì)師,在設(shè)計(jì)微交互方案的時(shí)候不僅要考慮視覺(jué)上的沖擊力,還要想辦法賦予其信息傳遞的功能。

      什么是微交互?

      微交互是產(chǎn)品中存在的某一個(gè)時(shí)刻,它完成了某一個(gè)小的任務(wù)。Dan Saffer在他的書(shū)中(Microinteractions)第一次描述了微交互的概念,這些小細(xì)節(jié)專(zhuān)注于服務(wù)這些必要的功能:

      1. 交流回饋或者動(dòng)作的結(jié)果回饋

      2. 完成某個(gè)單獨(dú)的任務(wù)

      3. 增強(qiáng)直接操作的感覺(jué)

      4. 幫助用戶(hù)在視覺(jué)上展示操作的結(jié)果,以及避免錯(cuò)誤

      一些明顯的微交互例子包括:

      當(dāng)你將iPhone設(shè)置成靜音時(shí)伴隨出現(xiàn)的的震動(dòng)提醒、屏幕上的靜音icon。

      7yw20160316

      界面動(dòng)畫(huà)提示是否能夠點(diǎn)擊(當(dāng)鼠標(biāo)移到按鈕上方時(shí)按鈕的顏色改變)。

      6yw20160316

      為什么使用微交互?

      微交互是在對(duì)用戶(hù)一些自然的需求/欲望的認(rèn)知和反饋。用戶(hù)從微交互提供的視覺(jué)、觸覺(jué)等反饋中確認(rèn)他們的行為被接受。微交互還可以引導(dǎo)用戶(hù)正確的使用系統(tǒng)/產(chǎn)品。

      定義微交互的使用情景

      微交互的一個(gè)特點(diǎn)是它可以被放置在很多的場(chǎng)景下,輔助不同的動(dòng)作行為。總體來(lái)說(shuō),微交互的使用場(chǎng)景包括:

      展示系統(tǒng)/產(chǎn)品的狀態(tài)

      Jacob Nielsen在“可用性啟發(fā)原則”中指出:讓你的用戶(hù)時(shí)刻了解發(fā)生的事情,用戶(hù)期望對(duì)自己的行為立即得到反饋。但是有些情況下,app需要時(shí)間來(lái)等待行為處理完成后才能向用戶(hù)發(fā)出反饋。因此,產(chǎn)品界面需要向用戶(hù)指明此刻正在發(fā)生的事。

      5yw20160316

      ▲ 下載進(jìn)度表

      或者標(biāo)明用戶(hù)所在的位置:

      4yw20160316

      Tips:不要讓你的用戶(hù)感到無(wú)助,讓你的用戶(hù)了解實(shí)時(shí)的狀態(tài)并且向其展示進(jìn)度(比如進(jìn)度條能夠讓用戶(hù)了解進(jìn)度,消除疑惑)

      提示更新

      我們有時(shí)需要向用戶(hù)推送通知來(lái)保證用戶(hù)了解到事態(tài)的更新。動(dòng)畫(huà)可以做到這一點(diǎn),動(dòng)畫(huà)可以吸引用戶(hù)的注意力,避免用戶(hù)忽視掉重要的信息。

      3yw20160316

      Tips:微交互里的動(dòng)效應(yīng)該遵循KISS原則(keep it simple, stupid),應(yīng)該盡量簡(jiǎn)單直接。

      關(guān)聯(lián)上下文

      使用動(dòng)效來(lái)將用戶(hù)的注意力平滑的在導(dǎo)航頁(yè)面間切換,向用戶(hù)解釋頁(yè)面里元素之間的關(guān)系,以及頁(yè)面跳轉(zhuǎn)的來(lái)龍去脈。這對(duì)于移動(dòng)設(shè)備非常有用,因?yàn)槠聊坏某叽缦拗疲苿?dòng)界面中每一頁(yè)的內(nèi)容都很緊湊,使用動(dòng)效來(lái)闡述內(nèi)容之間的聯(lián)系非常實(shí)用。

      Tips:盡量讓每個(gè)頁(yè)面的導(dǎo)航簡(jiǎn)潔,這樣可以有效避免用戶(hù)在頁(yè)面跳轉(zhuǎn)中迷失。兩個(gè)狀態(tài)之間的卻換應(yīng)該清晰、平滑、快捷。在視覺(jué)上統(tǒng)一所有的交互形式,降低用戶(hù)的學(xué)習(xí)成本。

      輸入可視化

      數(shù)據(jù)輸入是應(yīng)用中非常重要的環(huán)節(jié),微交互可以使用現(xiàn)有的元素來(lái)展示數(shù)據(jù)輸入的反饋,從而將這步操作變得更加高效。

      2yw20160316

      Tips:微交互能夠幫助用戶(hù)理解信息格式,來(lái)源,幫助用戶(hù)便捷輸入信息。

      引導(dǎo)互動(dòng)

      微交互可以鼓勵(lì)用戶(hù)、吸引用戶(hù)與產(chǎn)品交互。它可以在用戶(hù)體驗(yàn)中產(chǎn)生同理心。但是需要謹(jǐn)慎使用微交互,保證其在感官上不會(huì)冒犯你的用戶(hù)。

      時(shí)刻謹(jǐn)記:不要讓用戶(hù)感到厭煩,Keep it simple, stupid.

      1yw20160316

      Tips:關(guān)注用戶(hù)的情感反饋,因?yàn)樗谟脩?hù)體驗(yàn)中起到很重要的作用。多做用戶(hù)研究和情景調(diào)研,設(shè)計(jì)能被用戶(hù)頻繁使用的微交互方案。

      值得謹(jǐn)記的

      1. 微交互向用戶(hù)展示動(dòng)作反饋,通知以及信息框架結(jié)構(gòu)

      2. 微交互應(yīng)該通過(guò)轉(zhuǎn)移用戶(hù)的注意力、愉悅用戶(hù)等來(lái)達(dá)到加快/縮短信息數(shù)據(jù)的傳輸

      3. 了解你的用戶(hù)以及使用微交互的背景,能夠讓你的微交互方案更加的精準(zhǔn)與高效

      4. 微交互必須能夠支持長(zhǎng)時(shí)效的使用,在第一次使用時(shí)感到驚喜的方案,可能在第一百次使用時(shí)就變成了困擾。

      5. 微交互方案應(yīng)該人性化一些,并且在視覺(jué)上保持和諧。用戶(hù)在使用的時(shí)候應(yīng)該感到流暢,微交互的方案應(yīng)該盡可能的從現(xiàn)實(shí)生活中獲得啟發(fā),比如使用擬物化等手段,從而降低學(xué)習(xí)成本。

      總結(jié)

      用心設(shè)計(jì),思考用戶(hù)使用產(chǎn)品的情景,再設(shè)計(jì)這些微交互時(shí)多運(yùn)用一些生活中常見(jiàn)的操作模式、物體的運(yùn)動(dòng)軌跡、常見(jiàn)的行為方式等。產(chǎn)品的易用性來(lái)源于對(duì)細(xì)節(jié)的打磨,偉大的設(shè)計(jì)不僅僅在功能上滿(mǎn)足用戶(hù)的需求,還要在微交互的設(shè)計(jì)上打動(dòng)人心。


      0
      2
      分享到:

      0

      喜歡他,就推薦他上首頁(yè)吧^_^

      推薦閱讀

      ×

      賽事服務(wù)聯(lián)系方式

      0371-86068866

      4008887269

      cndesign@163.com

      好的,我知道了

      官方微信

      聯(lián)系我們

      • QQ:33143335 QQ:1904200230
      • 電話:18569912460
      • 投稿:cndesign@163.com
      • 地址:鄭州市國(guó)家大學(xué)科技園東區(qū)9號(hào)樓2層

      版權(quán)信息

        移動(dòng) Android 版 豫 ICP 備16038122號(hào)-2 豫公網(wǎng)安備 41019702002261號(hào)

      主站蜘蛛池模板: 波多野结衣一区二区三区高清av| 少妇一夜三次一区二区| 台湾无码AV一区二区三区| 国产一区二区三区小向美奈子 | 任你躁国产自任一区二区三区| 精品亚洲一区二区三区在线观看 | 精品一区二区三区视频在线观看| 中文字幕在线观看一区| 一区二区三区无码被窝影院| 国产一区二区精品久久凹凸| 久久精品国产一区二区三| 色一乱一伦一图一区二区精品 | 国产午夜精品一区二区| 精品亚洲一区二区| 亚洲av色香蕉一区二区三区| 无码毛片一区二区三区中文字幕 | 日本一区二区三区中文字幕| 不卡一区二区在线| 久久久久人妻一区二区三区| 日韩国产一区二区| 无码人妻精品一区二区在线视频| 人成精品视频三区二区一区 | 福利国产微拍广场一区视频在线| 亚洲视频在线观看一区| 中文字幕亚洲乱码熟女一区二区| 一区三区三区不卡| 亚洲综合在线成人一区| 无码人妻精品一区二区蜜桃百度| 精品久久久久久中文字幕一区| 91一区二区三区四区五区 | 亚洲AV噜噜一区二区三区| 国产精品毛片一区二区| 日韩免费一区二区三区在线播放| 亚洲av成人一区二区三区 | AV无码精品一区二区三区| 精品日本一区二区三区在线观看| 日韩精品一区二区三区影院| 亚洲综合无码一区二区| 一区二区三区福利视频免费观看| 麻豆一区二区99久久久久| 成人一区二区免费视频|