大廠產(chǎn)品告訴你:8個(gè)技巧強(qiáng)化交互表現(xiàn)

17 評論 26938 瀏覽 354 收藏 9 分鐘

集合了淘寶/支付寶/QQ瀏覽器/百度瀏覽器/抖音/高德地圖/馬蜂窩 等眾多一線產(chǎn)品,整理了8個(gè)可以提升交互表現(xiàn)的方式和技巧,讓你在平時(shí)的產(chǎn)品設(shè)計(jì)時(shí),可以多一些思路去提升用戶的操作效率和業(yè)務(wù)目標(biāo)的轉(zhuǎn)化。

在我們?nèi)粘5漠a(chǎn)品設(shè)計(jì)中,交互上的表達(dá)(反饋、動效)能將信息很好地展示給用戶,而無論什么樣的交互表現(xiàn),都是對用戶的操作效率、業(yè)務(wù)目標(biāo)的提升有很大幫助的。所以本文集合了淘寶/支付寶/QQ瀏覽器/百度瀏覽器/抖音/高德地圖/馬蜂窩 等眾多一線產(chǎn)品,為你整理了8個(gè)可以提升交互表現(xiàn)的方式和技巧,讓你在平時(shí)的產(chǎn)品設(shè)計(jì)時(shí),可以多一些思路去提升用戶的操作效率和業(yè)務(wù)目標(biāo)的轉(zhuǎn)化。

01?實(shí)時(shí)更換效果

在需要用戶進(jìn)行多項(xiàng)內(nèi)容的選擇時(shí),可結(jié)合具體場景,向用戶展示選擇后的效果預(yù)覽。將用戶的選擇內(nèi)容‘可視化’,幫助用戶進(jìn)行決策與配對內(nèi)容。如首次進(jìn)入U(xiǎn)C瀏覽器,用戶在選擇不同的興趣類型時(shí),會同步展示對應(yīng)的標(biāo)簽形象。這種優(yōu)化方式,極大提升了用戶對資訊類型的篩選,方便產(chǎn)品推送對應(yīng)的資訊信息。

大廠產(chǎn)品告訴你:提升交互表現(xiàn)的8個(gè)技巧

02 跟隨用戶的操作

大部分產(chǎn)品的功能都是‘固定好位置’的,但用戶的手指操作區(qū)域卻是靈活多變的,為了進(jìn)一步提升用戶操作效率,有些產(chǎn)品會把功能設(shè)置跟隨用戶的操作而展示。如夸克瀏覽器,在觀看視頻時(shí)點(diǎn)擊屏幕右側(cè),就會出現(xiàn)操作圖標(biāo);而點(diǎn)擊屏幕左側(cè),操作圖標(biāo)則在左邊出現(xiàn)。

大廠產(chǎn)品告訴你:提升交互表現(xiàn)的8個(gè)技巧

還有抖音,會根據(jù)用戶手指的點(diǎn)擊/長按位置,來實(shí)時(shí)展示操作信息和入口。

大廠產(chǎn)品告訴你:提升交互表現(xiàn)的8個(gè)技巧

03 更直接的引導(dǎo)

很多APP會在用戶首次使用功能時(shí),用一張蒙層或GIF圖引導(dǎo)用戶操作,如向上/向下滑動屏幕、點(diǎn)擊某入口等等。但這種‘靜態(tài)’展示無法直觀、易懂地向用戶說明:操作后會有什么??因此,為了減少用戶思考、更準(zhǔn)確地傳達(dá)信息,可以將‘操作后’的效果直接展示給用戶。這種交互方式比單放一張gif圖來說,引導(dǎo)性更強(qiáng)。如抖音,首次進(jìn)入時(shí)會自動地下拉屏幕,向用戶明確說明可以下拉切換視頻。

大廠產(chǎn)品告訴你:提升交互表現(xiàn)的8個(gè)技巧

04 入口收縮

指提示的信息(廣告彈窗、浮層)展示完后,不再以透明度為0的方式進(jìn)行消失,而是通過縮小、位移等效果將特定內(nèi)容‘收縮’到入口中去。

大廠產(chǎn)品告訴你:提升交互表現(xiàn)的8個(gè)技巧

該方式好處在于:可以增加、強(qiáng)化用戶對于功能入口的認(rèn)知,很適合各種需要做‘用戶教育’的入口。如QQ瀏覽器的‘花草卡’、荔枝音樂的快捷菜單就采用該方式進(jìn)行信息引導(dǎo)。

大廠產(chǎn)品告訴你:提升交互表現(xiàn)的8個(gè)技巧

05 前置展示用戶目標(biāo)

根據(jù)用戶的操作行為,推導(dǎo)/預(yù)判出用戶下一步即將要執(zhí)行的目標(biāo),提前將用戶的操作目標(biāo)展示出來??梢赃M(jìn)一步地減少用戶的操作路徑。比如淘寶,當(dāng)復(fù)制完商品口令后,打開app時(shí)就立即彈出商品信息,免去發(fā)起搜索的操作成本;還有支付寶,在與好友聊天時(shí)若觸發(fā)到數(shù)字信息,則預(yù)判用戶有轉(zhuǎn)賬訴求,提前將金額和操作入口展示出來,方便用戶操作。

大廠產(chǎn)品告訴你:提升交互表現(xiàn)的8個(gè)技巧

06 特定的彩蛋效果

在展示一些特定的功能模塊、業(yè)務(wù)價(jià)值更重的內(nèi)容時(shí),可用于一些驚喜的彩蛋吸引用戶。一方面能渲染氛圍、吸引用戶注意力。另一方面又能對產(chǎn)品的PV、UV等業(yè)務(wù)指標(biāo)起到一個(gè)促進(jìn)效果。如愛奇藝,在切換到近期熱播的節(jié)目時(shí),會飄落與之相關(guān)的視覺元素,能對用戶的當(dāng)前操作起很好的‘止步’效果。

大廠產(chǎn)品告訴你:提升交互表現(xiàn)的8個(gè)技巧

07 更擬物化的表現(xiàn)

產(chǎn)品的內(nèi)容與功能展示,可以盡量貼近‘現(xiàn)實(shí)生活’來設(shè)計(jì),給用戶一種更強(qiáng)的代入感(親民、有趣、真實(shí)),突出該功能/內(nèi)容的品質(zhì)感。如高德地圖,根據(jù)當(dāng)前天氣情況展示真實(shí)效果,給用戶的出行決策進(jìn)行‘提醒’。還有飛豬的‘會員卡’,會用一層‘反光’來突顯出卡的質(zhì)感,同時(shí)能起到吸引用戶注意力的作用。

大廠產(chǎn)品告訴你:提升交互表現(xiàn)的8個(gè)技巧

08 利用好手機(jī)陀螺儀

陀螺儀是手機(jī)系統(tǒng)里的功能之一,能給手機(jī)提供準(zhǔn)確的位置、速度、水平等信號。如玩賽車游戲時(shí),翻動屏幕就能實(shí)現(xiàn)車輛的轉(zhuǎn)彎。而利用陀螺儀,也能對頁面元素的交互進(jìn)行優(yōu)化。比如‘好好住’和某閱讀APP(名字忘了~),當(dāng)把手機(jī)往屏幕左邊/右邊翻動時(shí),視覺元素也跟著往左/右旋轉(zhuǎn)、滾動,能很好地增加產(chǎn)品的趣味性。

大廠產(chǎn)品告訴你:提升交互表現(xiàn)的8個(gè)技巧

其他

當(dāng)然優(yōu)化交互反饋的方式不止上面幾種而已,對于用戶使用頻率較高的、業(yè)務(wù)價(jià)值更重的信息,我們也可以適當(dāng)做一些交互優(yōu)化。比如馬蜂窩的tab滑動效果、百度瀏覽器的點(diǎn)贊反饋等,都能提升用戶操作過程中的趣味性。

大廠產(chǎn)品告訴你:提升交互表現(xiàn)的8個(gè)技巧

結(jié)尾

以上就是可提升產(chǎn)品交互表現(xiàn)的一些總結(jié)。可能有些效果目前來說,暫時(shí)還應(yīng)用不到你的產(chǎn)品中去,但你又怎么保證以后就不會用到呢??

所以若該文章有幫到你、啟發(fā)你一些思路的,請動動手指關(guān)注我(下載體驗(yàn)近30個(gè)app不容易),謝謝!

 

作者:和出此嚴(yán),微信ID:elffzh,公眾號:和出此嚴(yán)

本文由 @和出此嚴(yán) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash, 基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 推薦一個(gè)我做的學(xué)習(xí)網(wǎng)站:
    有蛋案例 youdananli.com
    有多個(gè)大廠、各個(gè)行業(yè)里有意思的設(shè)計(jì)案例,還有近百條產(chǎn)品/設(shè)計(jì)知識方法、理論模型
    感興趣的可以看看

    來自廣東 回復(fù)
  2. 你這個(gè)花了多久時(shí)間整理成文的?

    回復(fù)
  3. 很有意思,寫這篇文章一定費(fèi)了不少心思和時(shí)間

    來自湖南 回復(fù)
  4. 厲害??

    回復(fù)
  5. 小黃

    回復(fù)
  6. 學(xué)習(xí)了~贊

    來自北京 回復(fù)
    1. 謝謝大佬~

      來自廣東 回復(fù)
  7. 想問一下您知道什么公眾號或者專欄會定時(shí)推薦一些優(yōu)質(zhì)的app?

    來自廣東 回復(fù)
    1. 《最美應(yīng)用》APP會每日推薦一些優(yōu)質(zhì)的產(chǎn)品

      來自廣東 回復(fù)
  8. 老和

    回復(fù)
    1. 來了老弟~

      來自廣東 回復(fù)
  9. 請教一下有沒有可以用到小程序和h5里的交互?現(xiàn)在我們很多產(chǎn)品都不在進(jìn)軍app市場了~

    來自遼寧 回復(fù)
    1. 有的,下篇就是準(zhǔn)備寫這個(gè)哦
      ~

      來自廣東 回復(fù)
    2. 很多有趣的微交互效果,其實(shí)用GIF就可以實(shí)現(xiàn)。比如文中馬蜂窩選項(xiàng)卡切換的動畫。

      來自北京 回復(fù)
    3. 好哎,期待中~

      來自遼寧 回復(fù)
  10. 強(qiáng),學(xué)習(xí)了!剛好有個(gè)交互表現(xiàn)可以用到我們公司的產(chǎn)品上~

    來自廣東 回復(fù)
    1. 謝謝哈,有些交互表現(xiàn)現(xiàn)在用不到,總有一天會用到的,或者啟發(fā)大佬的一些思路。

      來自廣東 回復(fù)