最搶眼的6個(gè)方法！如何讓交互過程變得驚喜有趣？

今天的交互，就像是引誘小孩子吃藥的方糖，不但味道得甜，過程還要潤(rùn)物無聲，是個(gè)不小的考驗(yàn)。有了好的創(chuàng)意，我們還需要有好的方法去表現(xiàn)它，下面就來介紹一下娛樂化設(shè)計(jì)的方法。

一、目標(biāo)的激勵(lì)

在游戲中，保持有目標(biāo)，是玩家不停去玩一個(gè)游戲的核心驅(qū)動(dòng)力。目標(biāo)對(duì)用戶的吸引力很大，達(dá)成目標(biāo)會(huì)很開心，激發(fā)成就感，失敗了則會(huì)不甘心，想要再次嘗試。最后玩厭了、不玩了，往往是因?yàn)槟繕?biāo)達(dá)成了，找不到新目標(biāo)了，也就找不到再玩下去的理由了。從各種游戲中我們都可以發(fā)現(xiàn)，目標(biāo)往往是漸進(jìn)的。首先有一個(gè)用戶可以輕易達(dá)到的目標(biāo)，讓用戶產(chǎn)生一些成就感，是激發(fā)起繼續(xù)玩下去的動(dòng)力，然后會(huì)有一個(gè)有點(diǎn)難度，多次嘗試才能達(dá)到的目標(biāo)，最后有一個(gè)終極的大目標(biāo)，往往是通關(guān)打boss什么的，達(dá)成目標(biāo)后會(huì)非常有成就感。這些漸進(jìn)的目標(biāo)，就是黏住用戶的吸引力。

漸進(jìn)的目標(biāo)

超級(jí)瑪麗這個(gè)游戲很多人都玩過，它最簡(jiǎn)單的目標(biāo)就是打怪物，不要被怪物碰到，然后是過關(guān)、達(dá)到每一關(guān)的城堡、打過每一關(guān)的火龍，最后一個(gè)終極的目標(biāo)，就是通關(guān)以后救公主。這個(gè)目標(biāo)是單線程的，非常簡(jiǎn)單明確，但一旦通關(guān)就會(huì)失去動(dòng)力。很多很多游戲，我們剛開始玩得時(shí)候非常有興趣，但是一旦通關(guān)，就再也不會(huì)玩了。

單線程目標(biāo)

植物大戰(zhàn)僵尸也是大家非常熟悉的游戲，它也有一個(gè)很明確的主要目標(biāo)，打僵尸—過關(guān)—打boss通關(guān)，但它在中間還引入了其他一些次級(jí)目標(biāo)。比如你要過關(guān)，就要收集金幣，買更多的植物和道具，這樣才能增強(qiáng)戰(zhàn)斗力，應(yīng)對(duì)不同類型的僵尸。在植物大戰(zhàn)僵尸2中，不同的關(guān)卡是有星級(jí)的，要收集到足夠的星星，才能解鎖新的模式，更出色的完成任務(wù)，收集星星，也成了一個(gè)次級(jí)目標(biāo)。

引入次級(jí)目標(biāo)

如果說主要目標(biāo)是一個(gè)核心的驅(qū)動(dòng)力，那么引入次級(jí)目標(biāo)就可以更好的吸引玩家，增強(qiáng)游戲的趣味性。

二、靈動(dòng)的動(dòng)效

如今動(dòng)效設(shè)計(jì)越來越被重視，尤其是在ios 7發(fā)布之后，一個(gè)優(yōu)雅、靈動(dòng)的動(dòng)效，成為很多優(yōu)秀app的標(biāo)配。

首先讓我們來一起思考一下，為什么要設(shè)計(jì)動(dòng)效？是為了好看、酷炫、還是流行？這些當(dāng)然都是，但是最重要的是，有意義的動(dòng)效，可以解釋應(yīng)用的邏輯、層次和交互機(jī)制。動(dòng)效是可以幫助用戶理解應(yīng)用的。恰當(dāng)?shù)膽?yīng)用動(dòng)效，可以替代大段的文字，闡述應(yīng)用的含義。比如ios 6中刪除圖片的那個(gè)動(dòng)效，照片飛入垃圾桶，然后垃圾桶蓋上蓋子抖一抖，非常生動(dòng)的傳達(dá)了刪除照片的含義。

最典型的利用動(dòng)效表現(xiàn)產(chǎn)品邏輯的地方，就是轉(zhuǎn)場(chǎng)動(dòng)畫，大家對(duì)于這樣的動(dòng)畫再熟悉不過了，下一層級(jí)的頁(yè)面，一般會(huì)從右側(cè)覆蓋進(jìn)入，返回上一層級(jí)頁(yè)面，會(huì)向右側(cè)滑動(dòng)退出，這種轉(zhuǎn)場(chǎng)動(dòng)畫很好的營(yíng)造出一種空間感和邏輯感。

Yep是一個(gè)基于地理位置的交友a(bǔ)pp，用戶可以發(fā)起一個(gè)聚會(huì)，吃飯、喝茶、運(yùn)動(dòng)或者其他什么。比如用戶選擇了“就餐”，其他選項(xiàng)收縮淡出，“就餐”圖標(biāo)移位并變成地圖上的一個(gè)圖釘。“就餐”圖標(biāo)的變化過程可以將前后兩個(gè)界面無縫的銜接起來，闡明了基于地理位置的篩選機(jī)制，表達(dá)出“在這個(gè)位置就餐”的明確概念。在地圖界面中點(diǎn)擊“OK”按鈕，界面元素淡出，地圖整體向后退去，融入到雷達(dá)一樣的動(dòng)效當(dāng)中，圓形掃描區(qū)域所代表的就是以用戶當(dāng)前位置為中心的50 公里半徑范圍。這一連串的動(dòng)效，實(shí)現(xiàn)了界面之間的平滑過渡，也闡明了應(yīng)用所要表達(dá)的邏輯。

Yep用動(dòng)效表達(dá)邏輯

視覺設(shè)計(jì)可以還原物理世界的真實(shí)感，動(dòng)效也可以。比如Flipboard的翻頁(yè)動(dòng)效，給人一種硬紙板的感覺，iBook的翻頁(yè)動(dòng)效，給人一種柔軟紙張的感覺，這種不同的材質(zhì)感，都是通過動(dòng)效來表現(xiàn)的。

用動(dòng)效表現(xiàn)材質(zhì)

用動(dòng)效表現(xiàn)材質(zhì)，不會(huì)增加用戶的視覺負(fù)擔(dān)，在操控上更有真實(shí)感，所以就算擬物化的視覺設(shè)計(jì)已經(jīng)慢慢在衰退，具有真實(shí)意義的動(dòng)效卻得以保留。

細(xì)節(jié)處的小動(dòng)效可以為產(chǎn)品增加亮點(diǎn)，帶來驚喜的體驗(yàn)。就像Tumblr點(diǎn)贊的動(dòng)畫，紅心飄起來時(shí)，就像飛了一個(gè)吻，讓人感覺心花怒放，取消點(diǎn)贊時(shí)，心都碎了。這種小細(xì)節(jié)讓人愛不釋手。

Tumblr的動(dòng)效設(shè)計(jì)

利用動(dòng)效速度的微妙變化，可以表現(xiàn)出應(yīng)用的風(fēng)格。快速可以體現(xiàn)靈活輕盈，慢速可以體現(xiàn)優(yōu)雅委婉。如卯榫體現(xiàn)傳統(tǒng)文化，動(dòng)效緩慢優(yōu)雅，slingshot是一款閱后即焚的即時(shí)通app，快速的動(dòng)效體現(xiàn)了它敏捷迅速的風(fēng)格。

無論是快是慢，兩款app的動(dòng)效都有慢入慢出的效果，體現(xiàn)出真實(shí)世界物體的慣性規(guī)律。不同的動(dòng)效節(jié)奏會(huì)給用戶帶來不同的感受，但運(yùn)動(dòng)規(guī)律應(yīng)該遵循現(xiàn)實(shí)的運(yùn)動(dòng)規(guī)律和節(jié)奏。符合基本運(yùn)動(dòng)規(guī)律，先快后慢、先慢后快、勻速、自由落體等，基本都有現(xiàn)實(shí)的運(yùn)動(dòng)事件做參照。

三、情緒的調(diào)動(dòng)

在游戲中，如果你通過關(guān)卡或挑戰(zhàn)成功，熱烈的氣氛烘托會(huì)讓用戶有一種勢(shì)不可擋的感覺，這種適當(dāng)夸張的效果，會(huì)讓用戶更有成就感。熱烈的氣氛，也可以更加調(diào)動(dòng)用戶的情感，產(chǎn)生一種沉浸感。

我們?cè)赼pp設(shè)計(jì)中，也可以借鑒這種氛圍。比如網(wǎng)易彩票app中，如果用戶中了獎(jiǎng)，以打開客戶端，就有一個(gè)巨大的閃閃發(fā)光的獎(jiǎng)杯撲面而來，熱烈的氣氛烘托讓用戶更有中獎(jiǎng)的喜悅。

網(wǎng)易彩票中獎(jiǎng)提示

人們?cè)诒磉_(dá)之后，總是希望得到反饋和認(rèn)可，積極的反饋可以增強(qiáng)用戶的信心，提升用戶體驗(yàn)的愉悅感，我們可以適當(dāng)夸大這種積極的反饋。Lumosity是一款訓(xùn)練用戶記憶力、注意力、應(yīng)變力等大腦核心能力的移動(dòng)應(yīng)用。通過鼓勵(lì)用戶堅(jiān)持每天完成一系列益智訓(xùn)練的小游戲，幫助用戶提升大腦的能力。為了使用戶可以增強(qiáng)信心，堅(jiān)持每天鍛煉，Lumosity在每一個(gè)環(huán)節(jié)都給予用戶積極的反饋。在完成游戲的每一個(gè)小關(guān)卡時(shí)，閃動(dòng)出的綠色對(duì)勾告訴你離成功又近了一步；完成一個(gè)游戲時(shí)，會(huì)有對(duì)話框彈出“你太棒了”或是“繼續(xù)加油”等鼓勵(lì)的話語(yǔ)；當(dāng)用戶完成一天的任務(wù)時(shí)，Lumosity用一個(gè)大大的對(duì)勾符號(hào)祝賀用戶完成了訓(xùn)練。這一系列的積極反饋，都讓用戶感到信心倍增，加快了他們完成任務(wù)的速度。

積極的反饋

NoomWeigth是一款幫助用戶節(jié)食瘦身的app，它在界面下拉的地方巧妙的設(shè)置了一個(gè)小彩蛋。用戶每次下拉界面，都會(huì)看到一句鼓勵(lì)你繼續(xù)堅(jiān)持減肥的話，“繼續(xù)堅(jiān)持下去，這一切都是值得的”“相信你自己！”“保持積極”，這些鼓勵(lì)的話語(yǔ)可以調(diào)動(dòng)起用戶堅(jiān)持下去的積極性，在節(jié)食瘦身期間保持動(dòng)力。

貼心的提醒

四、故事化的內(nèi)容

講故事是人類最自然的一種表達(dá)方式，也最易于被人們理解。當(dāng)我們給小孩子講道理時(shí)，也很傾向用講故事的方式。為產(chǎn)品設(shè)計(jì)一個(gè)故事情節(jié)，通過視覺、動(dòng)畫和音效的烘托，可以把用戶帶入到一個(gè)情境中。這種講故事的方式可以很有趣味性，也可以很感人，能夠有效吸引用戶的注意力，調(diào)動(dòng)起用戶的情感。

BenThe Bodyguard 是一款保護(hù)手機(jī)隱私數(shù)據(jù)的iPhone應(yīng)用，產(chǎn)品設(shè)定了一個(gè)手機(jī)私家保鏢Ben的角色，讓他時(shí)刻保護(hù)著手機(jī)的安全。這款產(chǎn)品的Web官方介紹頁(yè)面讓這名私家保鏢穿梭在黑暗的街道上，他會(huì)一邊行走一邊告訴用戶“現(xiàn)在是一個(gè)危險(xiǎn)的時(shí)代”，“如果有一天你的手機(jī)被搶了，手機(jī)中的秘密將會(huì)公之于眾”，“我可以保護(hù)你，無論是你的照片、密碼，還是其他”。隨著故事情節(jié)的發(fā)展，讓用戶沉浸其中，慢慢了解這款應(yīng)用的功能特色。

故事化的app介紹

這樣的應(yīng)用介紹方式，比起生硬的展示app的功能點(diǎn)，要生動(dòng)許多。

五、驚喜的彩蛋

驚喜通常會(huì)令人開心，因?yàn)檫@是超出預(yù)期的體驗(yàn)。有些網(wǎng)站在一些小角落中隱藏著一些小驚喜，這些彩蛋雖然在功能方面沒有什么實(shí)際的用處，但用戶偶然間發(fā)現(xiàn)后，會(huì)增添一份特殊的喜悅和樂趣。這些驚喜還可以引發(fā)用戶的好奇心，增強(qiáng)他們的探索欲望。

彩蛋是一份隱藏的驚喜，一般都不會(huì)輕易讓用戶找到。它一般出現(xiàn)在app中隱蔽的角落，如頁(yè)面的最上方、最下方，或是整個(gè)界面的底部。使用隱藏的手勢(shì)操作，往往可以呼出彩蛋。

例如網(wǎng)易新聞4.0在下拉頁(yè)面時(shí)可以看到一個(gè)精致的小彩蛋，彩蛋的主要元素“燈塔”與4.0開機(jī)引導(dǎo)頁(yè)相同，隨著用戶的下拉，燈塔的燈光開始慢慢的旋轉(zhuǎn)，最后出現(xiàn)“4.0為你而生”的Slogan。這個(gè)彩蛋增強(qiáng)了app的品牌感，也增加了產(chǎn)品的趣味性，給用戶耳目一新的感覺。

網(wǎng)易新聞的下拉彩蛋

進(jìn)行一些特定的操作，或輸入一些特定的內(nèi)容，也可以發(fā)現(xiàn)一些小彩蛋。如微信中有很多讓人津津樂道的彩蛋，在聊天時(shí)發(fā)送特定關(guān)鍵詞，會(huì)觸發(fā)一些絢麗的背景特效。這些彩蛋并不是固定的，會(huì)在特殊的日子根據(jù)特定事件為用戶送去新的彩蛋，在不打擾用戶的情況下給人們帶來一些小驚喜。在馬年春節(jié)時(shí)，網(wǎng)易新聞也設(shè)計(jì)了一個(gè)有趣的彩蛋，當(dāng)用戶發(fā)跟貼時(shí)輸入“馬上有”+一個(gè)漢字，發(fā)布出去的跟貼會(huì)變成一匹駿馬的形狀，馬背上會(huì)出現(xiàn)“馬上有”后面的那個(gè)漢字。

微信和網(wǎng)易新聞的彩蛋

這些令人驚喜的小細(xì)節(jié)，會(huì)讓用戶深深記住這些產(chǎn)品，記住這些帶來愉悅感受的美好體驗(yàn)，并會(huì)愿意將這些體驗(yàn)分享給他人。

六、技術(shù)的附加

技術(shù)的發(fā)展會(huì)給設(shè)計(jì)更多的空間，利用設(shè)備的特性，可以讓設(shè)計(jì)有更多的拓展性。設(shè)計(jì)師們可以盡情的運(yùn)用移動(dòng)端設(shè)備的各種傳感器和各種硬件，如方向傳感器、加速傳感器、重力感應(yīng)器、震動(dòng)感應(yīng)器、環(huán)境光感應(yīng)器、距離感應(yīng)器、GPS、攝像頭、話筒等等，為設(shè)計(jì)探索更多的可能性。

移動(dòng)端設(shè)備的各種傳感器

由于各種傳感器的運(yùn)用，移動(dòng)端也可以做出更多好玩的設(shè)計(jì)。用戶可以不單單只用輸入文字與設(shè)備進(jìn)行交互，還可以運(yùn)用聲音、搖晃、吹氣、光線、圖像、甩動(dòng)等更多的交互方式與產(chǎn)品互動(dòng)。

用戶與產(chǎn)品的交互方式

如Facebook的paper就是利用了方向傳感器實(shí)現(xiàn)了全景照片的功能，用戶查看全景照片時(shí)不再需要?jiǎng)潉?dòng)屏幕，只要將手機(jī)輕輕左右移動(dòng)，照片也會(huì)隨之移動(dòng)，看照片就像在窗口中看風(fēng)景。