產品交互控件:社交App中的「消息」功能窗口化

15 評論 10232 瀏覽 35 收藏 5 分鐘

每天偷偷看大神秀文采的我終于發了篇字數不多的帖子…

開門見山,相信everyone如今每天必做的一件事就是刷朋友圈了,我也一樣,但在刷刷刷的過程中呢,有時會有新消息進來,或者說和someone聊天時,由于對方回復慢,不自主就進入朋友圈看了起來,好的,無論怎樣,其實就是一個場景:

在瀏覽朋友圈時有新消息!而我們必須返回,點擊第一個Tab『微信』,才能收發消息。

其實這種場景普遍存在于各類App中,被迫終止當前功能使用,去使用另一個功能。以類似上例的社交App為例:

  • 微信 -> 發現 -> 朋友圈微信 -> 發現 -> 小程序
  • QQ -> 動態 -> 子功能(看點、購物、閱讀、直播)

這些功能用戶在使用時,一旦來了新消息,如想回復消息,都需要被迫中斷瀏覽。

而淘寶,右上角導航的擴展按鈕,基本存在于所有子頁面,內部有消息頁入口,使用相對方便一些。

所以想要實現用戶在看新聞、看直播、逛商品、刷朋友圈的同時,可以輕松查看并回復消息這種能力,

提出了這樣一個解決方案:

如上圖,位于『QQ – 動態 – 看點』功能中,左下角增加懸浮小窗,在任意時刻,可通過點擊收發消息,可以想象成QQ第一個Tab最小化在window最上層了。

在這里,暫將此控件定義為『消息窗』,綁定一些簡單規則:

在App內:

  • 只要App脫離主Tab頁面,消息窗立即自動顯示至當前window最上層;
  • 消息窗可拖動,類似iPhone的AssistiveTouch;
  • 點擊消息窗 – 展開,再次點擊 – 最小化;
  • 消息窗內,只能進行簡易的查看、發送消息,無法進入其他子功能頁面;
  • 無論用戶處于什么深層功能中,當有新消息是,消息窗跳動提示, 并顯示新消息條數;

寫到這里,其實這個小想法已經表達清楚了

  • 在技術實現方面,如果小窗內僅僅是收發消息,相信開發量并不大;
  • 考慮到當前環境下的移動設備配置,相信多個窗口,只要管理好內存,性能不會有問題;(當然,可能有很多中老年用戶使用的設備還比較老舊,需要針對設備做版本功能管理,這個肯定已有的)
  • 此種窗口設計,對于用戶在使用App時的影響,會許只有真正做出來,上線了,根據用戶行為數據分析,以及用戶的使用反饋,才能有一個定論,到底是否適合移動設備;
  • 可能并不是所有App都適合添加這種小窗,還是要根據不同場景下的需求。

想法很簡單

好吧,必須承認,只是想在刷朋友圈看新聞時,不要來回反復的回到首頁查看消息~

寫到這里,萬一有微信或者QQ等App的PM同學看到,如果覺得可行,還是希望可以嘗試一下

這個想法或許做技術的同學更易理解,至于交互細節、能力細節,還是由有興趣并專業的PM同學去細思吧。

 

本文由 @Tiny 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 想起了在這里留的貼,功能實現很久了,來還個愿

    來自北京 回復
  2. 作者說的這個問題確實存在,就是必要的時候無法快速多任務處理。這是移動小屏幕用層級換尺寸的天然缺陷。
    但是作者的解決方法有點粗暴了,相當于每個模塊都與主頁有快速切換按鈕,會不會導致軟件的整體架構變化,產品價值引導變化?

    1.是否換一種思路,把沒看完的內容遷移到某個觸手可及的位置?
    2.或者再換一種思路,是否每條來的信息我們都需要回復?我不知道大多數人的微信推送是否顯示對話內容,我就沒有開啟,這導致了來信息我知道,但我不知道是否當前急需回復?所以瀏覽朋友圈內容時顯示誰發了什么信息,用戶可以自己判斷是否需要立刻退出回復。

    來自廣東 回復
  3. 如果是qq微信同時出來信息是不是要好幾個那種消息懸浮按鈕,這種懸浮按鈕還是要看用戶,感覺懸浮的東西太礙視線了,個人理解

    回復
    1. 不是的哈,是App內的浮窗。

      回復
  4. 看到了demo,出發點是好的,解決被迫中斷當前操作,提升任務切換路徑。但是有的顧慮:從產品設計層面講,當前頁面增加一個懸浮按鈕,邏輯上即為 彈出頁面時 是懸浮在當前頁面的,懸浮頁面不宜出現兩層,意味著需要在一個懸浮頁面上完成查看信息、回復信息、發送信息。這種是優化了閱讀瀏覽體驗,但是作為社交溝通為核心主題的APP,卻犧牲了信息反饋的溝通體驗,這種是否有點得不償失呢?

    來自北京 回復
    1. 感謝透徹的理解和寶貴建議!

      我考慮在設計上發發力會不會體驗更佳,
      彈出的頁面做的更像一個立體、獨立懸浮于上層的窗口,通過『消息窗』按鈕快捷的 展開 – 收起,,浮層內至多2-3層,不能過于深入
      浮層內操作與『消息窗』按鈕工作獨立,前者等同于聊天列表首頁(功能缺?。?,后者只負責開合。

      感覺不拿給用戶使用,通過用戶的行為數據分析,反饋分析,難以得到可靠的優劣比啊~

      來自北京 回復
  5. https://pan.baidu.com/s/1kUZkyYN,網盤可下載 demo演示視頻,供參考
    文章內發了兩次都被刪掉了,大家可以在這里看

    來自北京 回復
  6. 提醒一下:
    安卓版微信
    在任意窗口輸入://multiwebview
    你再試試看文章的時候,如果想查看消息,調出多任務,看看會出現什么情況

    來自日本 回復
    1. 這點很抱歉,我的確沒用過安卓手機,之后按您說的體驗下,感謝提示

      來自北京 回復
  7. 適用場景:
    1.顯示級別比較高
    2.數量級比較少
    3.頻率比較低
    4.建議設置成特別關注的人

    來自四川 回復
  8. 看來,你可能比較宅。。。數量級你考慮了嗎?2個人,一個人給你發了1條消息,一個人給你發了9條消息,該如何顯示,你回復哪條?群消息,不停的彈呢?

    最后想想,你這樣設計,跟原本的設計比起來呢。。PS 三星 S6有這個設計

    來自四川 回復
    1. 感謝評論指點,2條我統一回復哈~

      適用場景:其實這只是個粗糙的idea,針對不同場景是可以優化設計的;
      1、此控件的顯示級別高,這點贊同;也表示此類窗口內的功能即時性較強,最好可以第一時間處理的,所以舉了社交-微信消息為例
      4、考慮過,例如QQ收到關注的朋友的消息,聲音是不同的,異曲同工,取決于具體的App場景,獨立設計

      2和3以及第二條評論,能感受到您的意思是如果一直來消息怎么辦?垃圾消息?多種類消息?分2點說明:
      1、對于提示,動效、靜態紅點、靜態紅點數字都OK的啊,可以區分消息種類,在『小窗』上顯示不同的符號、數字,并沒有定死哈,這個應該是PM+UE+UI針對自己產品場景發揮的點吧
      2、關于頻率和量級,無所謂的呀,您可以下視頻看一下,雖然demo做的簡單,但是最后一頁的展開效果應該還是能夠看懂

      最后,這只是一個idea哈,我覺得可以是現在微信非首頁的其他應用場景內,類似的設計很多的,如:
      騰訊新聞的視頻類新聞最小化窗口效果,斗魚直播 – 直播小窗口,都是此類設計的應用

      然而,怎么看出我比較宅的 ?

      來自北京 回復
    2. 而且,其實此種窗口也正解決了您說的『一個人給你發了1條消息,一個人給你發了9條消息,該如何顯示,你回復哪條?群消息,不停的彈呢?』這個問題
      展開,愛回哪個回哪個,愛看哪個看哪個,看完收起來就好啦,參考視頻模擬的點擊效果哈

      來自北京 回復
    3. 不好意思,沒看到視頻、、、、、無奈臉

      來自四川 回復
    4. 再次嘗試發布文章后,下載demo視頻的網盤連接還是被B掉了,https://pan.baidu.com/s/1kUZkyYN

      來自北京 回復