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

15 評(píng)論 10341 瀏覽 35 收藏 5 分鐘

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

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

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

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

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

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

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

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

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

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

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

在App內(nèi):

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

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

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

想法很簡(jiǎn)單

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      來(lái)自北京 回復(fù)
    3. 不好意思,沒(méi)看到視頻、、、、、無(wú)奈臉

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

      來(lái)自北京 回復(fù)