大廠産品告訴你:8個技巧強化交互表現

不懂技術怎麼做産品?15天在線學習,補齊産品經理必備技術知識,再也不被開發忽悠。了解一下>

集合了淘寶/支付寶/QQ浏覽器/百度浏覽器/抖音/高德地圖/馬蜂窩 等衆多一線産品,整理了8個可以提升交互表現的方式和技巧,讓你在平時的産品設計時,可以多一些思路去提升用戶的操作效率和業務目标的轉化。

在我們日常的産品設計中,交互上的表達(反饋、動效)能将信息很好地展示給用戶,而無論什麼樣的交互表現,都是對用戶的操作效率、業務目标的提升有很大幫助的。所以本文集合了淘寶/支付寶/QQ浏覽器/百度浏覽器/抖音/高德地圖/馬蜂窩 等衆多一線産品,為你整理了8個可以提升交互表現的方式和技巧,讓你在平時的産品設計時,可以多一些思路去提升用戶的操作效率和業務目标的轉化。

01 實時更換效果

在需要用戶進行多項内容的選擇時,可結合具體場景,向用戶展示選擇後的效果預覽。将用戶的選擇内容‘可視化’,幫助用戶進行決策與配對内容。如首次進入UC浏覽器,用戶在選擇不同的興趣類型時,會同步展示對應的标簽形象。這種優化方式,極大提升了用戶對資訊類型的篩選,方便産品推送對應的資訊信息。

大廠産品告訴你:提升交互表現的8個技巧

02 跟随用戶的操作

大部分産品的功能都是‘固定好位置’的,但用戶的手指操作區域卻是靈活多變的,為了進一步提升用戶操作效率,有些産品會把功能設置跟随用戶的操作而展示。如誇克浏覽器,在觀看視頻時點擊屏幕右側,就會出現操作圖标;而點擊屏幕左側,操作圖标則在左邊出現。

大廠産品告訴你:提升交互表現的8個技巧

還有抖音,會根據用戶手指的點擊/長按位置,來實時展示操作信息和入口。

大廠産品告訴你:提升交互表現的8個技巧

03 更直接的引導

很多APP會在用戶首次使用功能時,用一張蒙層或GIF圖引導用戶操作,如向上/向下滑動屏幕、點擊某入口等等。但這種‘靜态’展示無法直觀、易懂地向用戶說明:操作後會有什麼??因此,為了減少用戶思考、更準确地傳達信息,可以将‘操作後’的效果直接展示給用戶。這種交互方式比單放一張gif圖來說,引導性更強。如抖音,首次進入時會自動地下拉屏幕,向用戶明确說明可以下拉切換視頻。

大廠産品告訴你:提升交互表現的8個技巧

04 入口收縮

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

大廠産品告訴你:提升交互表現的8個技巧

該方式好處在于:可以增加、強化用戶對于功能入口的認知,很适合各種需要做‘用戶教育’的入口。如QQ浏覽器的‘花草卡’、荔枝音樂的快捷菜單就采用該方式進行信息引導。

大廠産品告訴你:提升交互表現的8個技巧

05 前置展示用戶目标

根據用戶的操作行為,推導/預判出用戶下一步即将要執行的目标,提前将用戶的操作目标展示出來。可以進一步地減少用戶的操作路徑。比如淘寶,當複制完商品口令後,打開app時就立即彈出商品信息,免去發起搜索的操作成本;還有支付寶,在與好友聊天時若觸發到數字信息,則預判用戶有轉賬訴求,提前将金額和操作入口展示出來,方便用戶操作。

大廠産品告訴你:提升交互表現的8個技巧

06 特定的彩蛋效果

在展示一些特定的功能模塊、業務價值更重的内容時,可用于一些驚喜的彩蛋吸引用戶。一方面能渲染氛圍、吸引用戶注意力。另一方面又能對産品的PV、UV等業務指标起到一個促進效果。如愛奇藝,在切換到近期熱播的節目時,會飄落與之相關的視覺元素,能對用戶的當前操作起很好的‘止步’效果。

大廠産品告訴你:提升交互表現的8個技巧

07 更拟物化的表現

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

大廠産品告訴你:提升交互表現的8個技巧

08 利用好手機陀螺儀

陀螺儀是手機系統裡的功能之一,能給手機提供準确的位置、速度、水平等信号。如玩賽車遊戲時,翻動屏幕就能實現車輛的轉彎。而利用陀螺儀,也能對頁面元素的交互進行優化。比如‘好好住’和某閱讀APP(名字忘了~),當把手機往屏幕左邊/右邊翻動時,視覺元素也跟着往左/右旋轉、滾動,能很好地增加産品的趣味性。

大廠産品告訴你:提升交互表現的8個技巧

其他

當然優化交互反饋的方式不止上面幾種而已,對于用戶使用頻率較高的、業務價值更重的信息,我們也可以适當做一些交互優化。比如馬蜂窩的tab滑動效果、百度浏覽器的點贊反饋等,都能提升用戶操作過程中的趣味性。

大廠産品告訴你:提升交互表現的8個技巧

結尾

以上就是可提升産品交互表現的一些總結。可能有些效果目前來說,暫時還應用不到你的産品中去,但你又怎麼保證以後就不會用到呢??

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

 

作者:和出此嚴,微信ID:elffzh,公衆号:和出此嚴

本文由 @和出此嚴 原創發布于人人都是産品經理。未經許可,禁止轉載

題圖來自Unsplash, 基于CC0協議

給作者打賞,鼓勵TA抓緊創作!
評論
歡迎留言讨論~!
  1. 很有意思,寫這篇文章一定費了不少心思和時間

    回複
  2. 厲害👍

    回複
  3. 小黃

    回複
  4. 學習了~贊

    回複
    1. 謝謝大佬~

      回複
  5. 想問一下您知道什麼公衆号或者專欄會定時推薦一些優質的app?

    回複
    1. 《最美應用》APP會每日推薦一些優質的産品

      回複
  6. 老和

    回複
    1. 來了老弟~

      回複
  7. 請教一下有沒有可以用到小程序和h5裡的交互?現在我們很多産品都不在進軍app市場了~

    回複
    1. 有的,下篇就是準備寫這個哦
      ~

      回複
    2. 很多有趣的微交互效果,其實用GIF就可以實現。比如文中馬蜂窩選項卡切換的動畫。

      回複
    3. 好哎,期待中~

      回複
  8. 強,學習了!剛好有個交互表現可以用到我們公司的産品上~

    回複
    1. 謝謝哈,有些交互表現現在用不到,總有一天會用到的,或者啟發大佬的一些思路。

      回複