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

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

每天偷偷看大神秀文采的我終于發(fā)了篇字?jǐn)?shù)不多的帖子…

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

在瀏覽朋友圈時(shí)有新消息!而我們必須返回,點(diǎn)擊第一個(gè)Tab『微信』,才能收發(fā)消息。

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

  • 微信 -> 發(fā)現(xiàn) -> 朋友圈微信 -> 發(fā)現(xiàn) -> 小程序
  • QQ -> 動態(tài) -> 子功能(看點(diǎn)、購物、閱讀、直播)

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

而淘寶,右上角導(dǎo)航的擴(kuò)展按鈕,基本存在于所有子頁面,內(nèi)部有消息頁入口,使用相對方便一些。

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

提出了這樣一個(gè)解決方案:

如上圖,位于『QQ – 動態(tài) – 看點(diǎn)』功能中,左下角增加懸浮小窗,在任意時(shí)刻,可通過點(diǎn)擊收發(fā)消息,可以想象成QQ第一個(gè)Tab最小化在window最上層了。

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

在App內(nèi):

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

寫到這里,其實(shí)這個(gè)小想法已經(jīng)表達(dá)清楚了

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

想法很簡單

好吧,必須承認(rèn),只是想在刷朋友圈看新聞時(shí),不要來回反復(fù)的回到首頁查看消息~

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

這個(gè)想法或許做技術(shù)的同學(xué)更易理解,至于交互細(xì)節(jié)、能力細(xì)節(jié),還是由有興趣并專業(yè)的PM同學(xué)去細(xì)思吧。

 

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 想起了在這里留的貼,功能實(shí)現(xiàn)很久了,來還個(gè)愿

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

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

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

    回復(fù)
    1. 不是的哈,是App內(nèi)的浮窗。

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

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

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

      感覺不拿給用戶使用,通過用戶的行為數(shù)據(jù)分析,反饋分析,難以得到可靠的優(yōu)劣比啊~

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

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

    來自日本 回復(fù)
    1. 這點(diǎn)很抱歉,我的確沒用過安卓手機(jī),之后按您說的體驗(yàn)下,感謝提示

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

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

    最后想想,你這樣設(shè)計(jì),跟原本的設(shè)計(jì)比起來呢。。PS 三星 S6有這個(gè)設(shè)計(jì)

    來自四川 回復(fù)
    1. 感謝評論指點(diǎn),2條我統(tǒng)一回復(fù)哈~

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

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

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

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

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

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

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

      來自北京 回復(fù)