一文讀懂微交互

一個(gè)深受喜愛的好產(chǎn)品和一個(gè)讓人覺得湊合用的一般產(chǎn)品,區(qū)別往往就在于微交互帶給人的體驗(yàn)丰辣。本文的目的就是深入分析微交互袍镀,幫助讀者設(shè)計(jì)出優(yōu)秀的產(chǎn)品评疗。



微交互的概念及構(gòu)成

什么是微交互?

微交互滞诺,就是產(chǎn)品中涉及一種使用場(chǎng)景的交互形导,只體現(xiàn)為一種功能,只完成一件事习霹,產(chǎn)品通過交互來實(shí)現(xiàn)功能的細(xì)節(jié)朵耕,細(xì)節(jié)可以讓用戶更方便,更愉快的使用產(chǎn)品淋叶。

舉個(gè)栗子阎曹,現(xiàn)在大家都習(xí)慣用微信或支付寶付款了,當(dāng)打開自己的付款碼時(shí)有沒有發(fā)現(xiàn),手機(jī)屏幕變亮了呢(只針對(duì)之前屏幕亮度過低的用戶)处嫌?較暗的屏幕會(huì)導(dǎo)致掃碼槍掃碼失敗栅贴,這就是一個(gè)很好的微交互實(shí)例。

微交互的組成


觸發(fā)器:任何微交互的第一部分都是觸發(fā)器熏迹,觸發(fā)器啟動(dòng)微交互檐薯。例如用戶想給手機(jī)設(shè)置靜音模式,那么下拉欄中靜音圖標(biāo)按鈕就是觸發(fā)器注暗。

?規(guī)則:微交互啟動(dòng)之后坛缕,就會(huì)引發(fā)一系列行為,這就需要一套規(guī)則來約定用戶進(jìn)行什么樣的操作就會(huì)獲得什么樣的反饋友存。就像每款游戲的核心是一組規(guī)則一樣祷膳,游戲規(guī)則決定了游戲該怎么玩,微交互規(guī)則決定了微交互能怎么用屡立。

?反饋:用戶所能看到直晨、聽到或者感受到的都能幫助用戶理解系統(tǒng)規(guī)則。反饋的目的就是幫助用戶理解微交互膨俐。比如手機(jī)在收到一條短信后通常會(huì)以震動(dòng)和響聲形式作為反饋勇皇。

?循環(huán)與模式:微交互隨時(shí)間的推移會(huì)怎樣呢?交互狀態(tài)是要等到手工關(guān)閉才結(jié)束焚刺,還是說等一小會(huì)兒就會(huì)退出敛摘?于是就需要給微交互設(shè)定持續(xù)時(shí)間。用戶在不同的環(huán)境或狀態(tài)下往往需要不同的交互模式乳愉,比如手機(jī)的免打擾模式適合用戶在休息兄淫、學(xué)習(xí)中使用,靜音模式適合用戶在會(huì)議蔓姚、上課時(shí)使用捕虽。


1.觸發(fā)器

觸發(fā)器的構(gòu)成及規(guī)則

觸發(fā)器由三部分組成,分別是控件坡脐、控件狀態(tài)泄私、文本或圖示標(biāo)簽。

觸發(fā)器應(yīng)當(dāng)包含的規(guī)則:

(1)觸發(fā)器必須讓用戶在使用情況下認(rèn)出了其是觸發(fā)器备闲;

(2)保證觸發(fā)器每次都觸發(fā)相同的動(dòng)作晌端;

(3) 提前展示數(shù)據(jù),觸發(fā)器本身可以反映微交互中包含的數(shù)據(jù)恬砂,展示內(nèi)部最有價(jià)值的信息咧纠;

(4)不要破壞視覺使用情況,如果觸發(fā)器看起來像按鈕泻骤,那應(yīng)該像按鈕一樣被按下去漆羔;

(5) 用得越多的觸發(fā)器越要引起人注目乳幸。


判斷觸發(fā)器需要多引人注目的黃金規(guī)則

(1)多數(shù)人經(jīng)常要用的微交互,應(yīng)該最引人注目钧椰;

(2)少數(shù)人有時(shí)會(huì)用的微交互粹断,應(yīng)該容易注意到;

(3)極少數(shù)人不常使用的微交互嫡霞,應(yīng)該通過搜索找到瓶埋。

最引人注目的觸發(fā)器:

(1)?移動(dòng)的物體,如脈動(dòng)目標(biāo)诊沪;

(2)?帶使用情境和標(biāo)簽的物體养筒,比如帶標(biāo)簽的按鈕;

(3)?帶標(biāo)簽的物體端姚,比如帶標(biāo)簽的圖標(biāo)晕粪;

(4)?只有一個(gè)物體,比如圖標(biāo)渐裸;

(5)?只有一個(gè)標(biāo)簽巫湘,比如菜單項(xiàng)。

系統(tǒng)觸發(fā)器

并非所有觸發(fā)器都是手動(dòng)的昏鹃。很多觸發(fā)器都是系統(tǒng)自己發(fā)起的尚氛,這類觸發(fā)器叫做系統(tǒng)觸發(fā)器。

系統(tǒng)觸發(fā)器的規(guī)則:

(1)觸發(fā)器多長(zhǎng)時(shí)間啟動(dòng)一次洞渤?

(2)已經(jīng)知道哪些與用戶相關(guān)的數(shù)據(jù)阅嘶,怎樣利用這些數(shù)據(jù)才能讓觸發(fā)器更高效,比如用戶時(shí)間是午夜载迄,就可以減少系統(tǒng)觸發(fā)器啟動(dòng)的次數(shù)讯柔。

(3)有沒有觸發(fā)器已經(jīng)啟動(dòng)的指示器。

(4)系統(tǒng)出錯(cuò)時(shí)會(huì)發(fā)生什么护昧?例如網(wǎng)絡(luò)斷開魂迄、數(shù)據(jù)無效時(shí),是嘗試重新啟動(dòng)還是再次嘗試捏卓?? ? ? ? ??

2.規(guī)則

每個(gè)微交互的核心同樣是一組規(guī)則极祸,設(shè)計(jì)規(guī)則時(shí)最重要的是確定目標(biāo)慈格。設(shè)計(jì)規(guī)則之前怠晴,需要確定一個(gè)最簡(jiǎn)單、最明確的說法浴捆,即微交互到底是什么蒜田。微交互越接近目標(biāo),成功的概率就越高选泻。

規(guī)則應(yīng)包含的內(nèi)容

(1)?用戶單機(jī)圖標(biāo)時(shí)會(huì)發(fā)生什么冲粤;

(2)?交互期間用戶可以進(jìn)行什么操作美莫;

(3)?動(dòng)作發(fā)生的順序及時(shí)間;

(4)?使用什么數(shù)據(jù)及數(shù)據(jù)來源梯捕;

(5)? 簡(jiǎn)潔的相關(guān)配置及參數(shù)厢呵;

(6)? 什么時(shí)候提供什么反饋;

(7)? 微交互處于什么模式傀顾;

(8)? 微交互是否重復(fù)以及多久重復(fù)一次襟铭;

(9)? 微交互結(jié)束時(shí)會(huì)發(fā)生什么。

設(shè)計(jì)規(guī)則的方式? ??

先把能想到的規(guī)則大體上記錄下來組織規(guī)則的大體框架短曾,再畫出整個(gè)交互的流程圖寒砖,梳理清楚用戶整個(gè)操作過程,按照操作先后順序在框架之中舔磚加瓦嫉拐,不斷完善細(xì)節(jié)哩都。制定好了規(guī)則,最好能給其他人演示一遍婉徘,畢竟一個(gè)人的思維會(huì)有局限性漠嵌,最好的方法就是利用大家的智慧不斷完善規(guī)則。


3.反饋

微交互反饋的目的盖呼,是幫助用戶理解微交互的規(guī)則献雅。

需要給用戶的反饋

(1)什么事情已經(jīng)開始做了;

(2) 用戶剛剛做了什么事情塌计;

(3) 哪些過程已經(jīng)開始了挺身;

(4) 哪些過程已經(jīng)結(jié)束了;

(5) 哪些過程正在進(jìn)行中锌仅;

(6) 用戶不能干什么章钾。

反饋需要遵循的原則

別讓反饋給用戶造成壓力,最好的反饋永遠(yuǎn)不會(huì)高深莫測(cè)热芹,用最少的反饋傳達(dá)最豐富的信息贱傀。可以使用被人忽視的東西作為傳達(dá)信息的手段伊脓,例如滾動(dòng)條府寒、光標(biāo)、進(jìn)度條报腔、懸浮層等株搔。

反饋的人性化設(shè)計(jì)

反饋可以作為一種體現(xiàn)微交互乃至整個(gè)產(chǎn)品的手段,通過反饋纯蛾,可以制造一點(diǎn)緊張或幽默的氣氛纤房,給產(chǎn)品賦予人性的氣息

例如:在上傳時(shí)間比較長(zhǎng)的情況下翻诉,云存儲(chǔ)服務(wù)Dropbox會(huì)建議你吃根巧克力棒炮姨,如果你的短信太長(zhǎng)捌刮,Google Voice 不再計(jì)算字?jǐn)?shù),而是會(huì)說“你當(dāng)真舒岸?”绅作。這種短暫又人性化的時(shí)刻不會(huì)讓人覺得討厭或無聊,而更可能是討人喜歡蛾派。??


這個(gè)微交互不讓你自己計(jì)算活動(dòng)的時(shí)長(zhǎng)棚蓄,而是會(huì)在選擇結(jié)束時(shí)間時(shí)自動(dòng)給出活動(dòng)的持續(xù)時(shí)間,是一個(gè)非常棒的微交互案例碍脏。

反饋的規(guī)則

反饋也有自己的生成規(guī)則梭依,這些規(guī)則如下:

(1)環(huán)境變化:需要考慮反饋會(huì)根據(jù)用戶的環(huán)境變化而變化嘛,比如到了晚上典尾,音量是否應(yīng)該減小

(2)持續(xù)時(shí)間:反饋需要持續(xù)多長(zhǎng)時(shí)間役拴?如何停止?

(3)強(qiáng)烈程度:反饋的效果有多亮钾埂、多快河闰、多劇烈?是為了烘托氣氛還是為了引人注目?

(4)重復(fù)次數(shù):反饋需要重復(fù)嘛褥紫?多久重復(fù)一次姜性?


4.循環(huán)與模式

模式

模式是規(guī)則的一個(gè)分支,而且對(duì)微交互來說髓考,模式應(yīng)該盡可能少用部念。模式最主要的目的是執(zhí)行一種不常用的動(dòng)作,這種動(dòng)作可能會(huì)妨礙微交互達(dá)成其主要目的氨菇。

例如:常見的模式就是設(shè)置儡炼,用戶可以在其中指定一些有關(guān)微交互的選項(xiàng),在進(jìn)入設(shè)置模式時(shí)查蓉,通常僅修改微交互乌询,而不會(huì)同時(shí)執(zhí)行主任務(wù),此時(shí)的操作與其他操作隔離豌研。

彈簧模式與一次性模式

彈簧模式:用戶按下鍵的情況下才會(huì)激活妹田,用戶停止上述動(dòng)作,模式就會(huì)消失鹃共。彈簧模式的價(jià)值在于鬼佣,用戶很少會(huì)忘記自己在不同模式里,因?yàn)樗麄儽仨毻ㄟ^實(shí)際操作才能切換到另一個(gè)模式里及汉。這種模式的缺點(diǎn)是不適合費(fèi)時(shí)的操作或復(fù)雜的輸入沮趣。

一次性模式:用戶在發(fā)起模式時(shí)屯烦,模式的持續(xù)時(shí)間與動(dòng)作執(zhí)行時(shí)間相等坷随,動(dòng)作結(jié)束后房铭,模式就結(jié)束。一次性模式最適合任務(wù)切換或上下文工具温眉。

循環(huán)

循環(huán)就是不斷重復(fù)的一段時(shí)間缸匪,通常用于設(shè)定持續(xù)時(shí)間。循環(huán)的核心是計(jì)時(shí)类溢,即確定微交互的速度持續(xù)時(shí)間凌蔬。可以使用循環(huán)來擴(kuò)展微交互的生命周期闯冷。

四種循環(huán)模式:

(1)技術(shù)循環(huán):重復(fù)既定次數(shù)的循環(huán)砂心,例如,當(dāng)網(wǎng)絡(luò)斷開時(shí)蛇耀,檢查10次是否有網(wǎng)絡(luò)連接辩诞。

(2)條件循環(huán):在滿足條件的情況下反復(fù)執(zhí)行的循環(huán),如果條件變化纺涤,則循環(huán)停止译暂。例如,如果有網(wǎng)絡(luò)連接撩炊,每30分鐘更新一次微博熱門榜

(3)集合循環(huán):與計(jì)數(shù)循環(huán)類似外永,這種循環(huán)會(huì)遍歷集合中的每個(gè)值,然后停止拧咳。例如:對(duì)沒封未讀的郵件伯顶,給未讀計(jì)數(shù)器加1。

(4)無窮循環(huán):循環(huán)開始后骆膝,除非出錯(cuò)或被人強(qiáng)制停止砾淌,否則永遠(yuǎn)不會(huì)結(jié)束。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末谭网,一起剝皮案震驚了整個(gè)濱河市汪厨,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌愉择,老刑警劉巖劫乱,帶你破解...
    沈念sama閱讀 206,311評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異锥涕,居然都是意外死亡衷戈,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門层坠,熙熙樓的掌柜王于貴愁眉苦臉地迎上來殖妇,“玉大人,你說我怎么就攤上這事破花∏ぃ” “怎么了疲吸?”我有些...
    開封第一講書人閱讀 152,671評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)前鹅。 經(jīng)常有香客問我摘悴,道長(zhǎng),這世上最難降的妖魔是什么舰绘? 我笑而不...
    開封第一講書人閱讀 55,252評(píng)論 1 279
  • 正文 為了忘掉前任蹂喻,我火速辦了婚禮,結(jié)果婚禮上捂寿,老公的妹妹穿的比我還像新娘口四。我一直安慰自己,他們只是感情好秦陋,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,253評(píng)論 5 371
  • 文/花漫 我一把揭開白布窃祝。 她就那樣靜靜地躺著,像睡著了一般踱侣。 火紅的嫁衣襯著肌膚如雪粪小。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,031評(píng)論 1 285
  • 那天抡句,我揣著相機(jī)與錄音探膊,去河邊找鬼。 笑死待榔,一個(gè)胖子當(dāng)著我的面吹牛逞壁,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播锐锣,決...
    沈念sama閱讀 38,340評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼腌闯,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了雕憔?” 一聲冷哼從身側(cè)響起姿骏,我...
    開封第一講書人閱讀 36,973評(píng)論 0 259
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎斤彼,沒想到半個(gè)月后分瘦,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,466評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡琉苇,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,937評(píng)論 2 323
  • 正文 我和宋清朗相戀三年嘲玫,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片并扇。...
    茶點(diǎn)故事閱讀 38,039評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡去团,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情土陪,我是刑警寧澤昼汗,帶...
    沈念sama閱讀 33,701評(píng)論 4 323
  • 正文 年R本政府宣布,位于F島的核電站旺坠,受9級(jí)特大地震影響乔遮,放射性物質(zhì)發(fā)生泄漏扮超。R本人自食惡果不足惜取刃,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,254評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望出刷。 院中可真熱鬧璧疗,春花似錦、人聲如沸馁龟。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽坷檩。三九已至却音,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間矢炼,已是汗流浹背系瓢。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評(píng)論 1 262
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留句灌,地道東北人夷陋。 一個(gè)月前我還...
    沈念sama閱讀 45,497評(píng)論 2 354
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像胰锌,于是被迫代替她去往敵國(guó)和親骗绕。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,786評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理资昧,服務(wù)發(fā)現(xiàn)酬土,斷路器,智...
    卡卡羅2017閱讀 134,599評(píng)論 18 139
  • 1格带、通過CocoaPods安裝項(xiàng)目名稱項(xiàng)目信息 AFNetworking網(wǎng)絡(luò)請(qǐng)求組件 FMDB本地?cái)?shù)據(jù)庫(kù)組件 SD...
    陽明先生_x閱讀 15,968評(píng)論 3 119
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,506評(píng)論 25 707
  • 白淺升為上神以來践惑,不知何故法力竟損耗如此之多腹泌,以至于她都無法運(yùn)用自如,為此還專門跑去問過折顏尔觉,老鳳凰卻是...
    檸檬淚小野喵閱讀 132評(píng)論 0 0
  • 日有所思夜有所夢(mèng) 夢(mèng)的世界永遠(yuǎn)都是千變?nèi)f化凉袱,千奇百怪 入眠時(shí),做的夢(mèng)都是各式各樣 或是預(yù)測(cè)以后會(huì)發(fā)生的事 或是之前...
    北地游人閱讀 309評(píng)論 0 0