最搶眼的6個(gè)方法!如何讓交互過(guò)程變得驚喜有趣?(上)

3 評(píng)論 6104 瀏覽 8 收藏 11 分鐘

今天的交互,就像是引誘小孩子吃藥的方糖,不但味道得甜,過(guò)程還要潤(rùn)物無(wú)聲,是個(gè)不小的考驗(yàn)。今天網(wǎng)易的美女交互設(shè)計(jì)大神@子木yoyo 分享了6個(gè)最流行的交互設(shè)計(jì)方法,附優(yōu)秀案例,通俗易懂,可以幫你盡快實(shí)現(xiàn)這個(gè)目標(biāo),來(lái)加油吧!有了好的創(chuàng)意,我們還需要有好的方法去表現(xiàn)它,下面就來(lái)介紹一下娛樂(lè)化設(shè)計(jì)的方法。

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

在游戲中,保持有目標(biāo),是玩家不停去玩一個(gè)游戲的核心驅(qū)動(dòng)力。目標(biāo)對(duì)用戶的吸引力很大,達(dá)成目標(biāo)會(huì)很開(kāi)心,激發(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),就是黏住用戶的吸引力。

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

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

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

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

單線程目標(biāo)

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

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

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

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

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

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

首先讓我們來(lái)一起思考一下,為什么要設(shè)計(jì)動(dòng)效?是為了好看、酷炫、還是流行?這些當(dāng)然都是,但是最重要的是,有意義的動(dòng)效,可以解釋?xiě)?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)畫(huà),大家對(duì)于這樣的動(dòng)畫(huà)再熟悉不過(guò)了,下一層級(jí)的頁(yè)面,一般會(huì)從右側(cè)覆蓋進(jìn)入,返回上一層級(jí)頁(yè)面,會(huì)向右側(cè)滑動(dòng)退出,這種轉(zhuǎn)場(chǎng)動(dòng)畫(huà)很好的營(yíng)造出一種空間感和邏輯感。

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

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

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

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

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

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

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

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

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

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

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

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

無(wú)論是快是慢,兩款app的動(dòng)效都有慢入慢出的效果,體現(xiàn)出真實(shí)世界物體的慣性規(guī)律。不同的動(dòng)效節(jié)奏會(huì)給用戶帶來(lái)不同的感受,但運(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ò)關(guān)卡或挑戰(zhàn)成功,熱烈的氣氛烘托會(huì)讓用戶有一種勢(shì)不可擋的感覺(jué),這種適當(dāng)夸張的效果,會(huì)讓用戶更有成就感。熱烈的氣氛,也可以更加調(diào)動(dòng)用戶的情感,產(chǎn)生一種沉浸感。

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

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

積極的反饋

人們?cè)诒磉_(dá)之后,總是希望得到反饋和認(rèn)可,積極的反饋可以增強(qiáng)用戶的信心,提升用戶體驗(yàn)的愉悅感,我們可以適當(dāng)夸大這種積極的反饋。Lumosity是一款訓(xùn)練用戶記憶力、注意力、應(yīng)變力等大腦核心能力的移動(dòng)應(yīng)用。通過(guò)鼓勵(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ù)的速度。

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

貼心的提醒

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

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

下文鏈接>>

最搶眼的6個(gè)方法!如何讓交互過(guò)程變得驚喜有趣?(下)

http://www.aharts.cn/it/107363.html

本文來(lái)源:uisdc

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 其實(shí)交互設(shè)計(jì)就是通過(guò)電子設(shè)備(電腦、移動(dòng)設(shè)備、其他)告訴用戶他們究竟應(yīng)該干什么,明確了這一點(diǎn)就是一個(gè)很優(yōu)秀的交互,不過(guò)其中包含的內(nèi)容很多(信息架構(gòu)、交互細(xì)節(jié)、人性化提示),讓用戶覺(jué)得簡(jiǎn)單易用,并且用戶的體驗(yàn)與設(shè)計(jì)師的期望達(dá)到一致,就是很好的交互!我們永遠(yuǎn)都在探索更好的交互,而探索交互的最終目標(biāo)就是讓用戶更好的體驗(yàn)交互。

    來(lái)自陜西 回復(fù)
  2. Ipad mini上都無(wú)法收藏,好爛的網(wǎng)站

    來(lái)自廣東 回復(fù)