如何設(shè)計直播間玩法插件交互？這里有超多案例！

大屏幕在移動設(shè)備上的應(yīng)用，使得插件得到了廣泛的應(yīng)用。在iOS 14的發(fā)布會中，蘋果甚至將小組件作為非常重要的部分來介紹。用戶在系統(tǒng)里的行為是復(fù)雜的，通常是多線程的，小插件起到的作用是將關(guān)鍵信息在一個公共區(qū)域展示給用戶，同時提供入口或關(guān)鍵交互。插件逐漸被視為一種重要的用戶界面。

△ iOS插件截圖

插件非常適合直播平臺

直播平臺的用戶場景非常特殊，主播和觀眾在會長時間待在同一個頁面，平臺通過給這個場景創(chuàng)造一些玩法來豐富單一場景行為，延遲用戶產(chǎn)生乏味感。隨著直播平臺運營的時間越長，玩法的創(chuàng)新性逐步被數(shù)量取代，這就造成現(xiàn)在的直播平臺，尤其是國內(nèi)的直播間內(nèi)充斥著各種形形色色的活動入口。而插件的發(fā)展一定程度上是一種升級，相比原來干巴巴的活動banner或入口按鈕，插件不僅是入口，更是關(guān)鍵信息的便捷看板。插件使得活動的進度能夠?qū)崟r地給用戶反饋，是對用戶對一種實時召喚，有助于提升活動留存。插件給活動玩法帶來了2個最重要的提升：

1. 提升玩法入口的曝光率

用戶大部分的活躍時間在直播間，直播間內(nèi)的入口是最重要的活動曝光位之一。

2. 提升玩法信息的時效性

互動玩法需要給用戶實時的反饋才能抓住用戶的焦點，插件可以將關(guān)鍵信息及時反饋。

3. 提升直播間的互動性

在直播間內(nèi)加入更多玩法入口，為主播和觀眾互動提供更多可能性

如何設(shè)計活動玩法插件

1. 選擇合適的插件

插件本身沒有分類，是基于特定功能而做的支撐類產(chǎn)品。在實際工作中，我們?yōu)榱朔奖銋f(xié)作而將插件根據(jù)某種維度來分類處理。例如根據(jù)形態(tài)來分：

△ 3種類型的插件

靜態(tài)icon型插件

此類入口僅起到快速拉起玩法頁面的作用，只有一種交互行為，也無需承載更多玩法本身的信息。此類插件通常用在一些玩法簡單、時效性要求低的玩法入口。有一些日常類的入口也可以使用該類型的插件，例如每日簽到等。

動態(tài)icon型插件

有一些玩法本身不復(fù)雜，但需要適時跟蹤玩法的狀態(tài)，此時需要在入口插件上承載某個狀態(tài)，甚至交互行為。此類插件樣式也可以是一個icon，但狀態(tài)變化時，icon的樣式、點擊的交互也相應(yīng)的跟隨變化，例如“觀看時長滿1分鐘后，獎勵金幣”這類簡單又需要即時反饋狀態(tài)，最好能在插件上完成交互的玩法。

卡片型插件

由于卡片擁有更多的展示面積，因此卡片型插件適用于需要復(fù)雜信息實時呈現(xiàn)的玩法。卡片可以根據(jù)玩法需要，定義不同區(qū)域的交互操作。由于這類插件面積大，因此它通常顯示在聊天公屏的空白區(qū)域。卡片大小也可以在不影響公屏聊天的情況下，根據(jù)實際訴求來調(diào)整。

插件類型可以有很多種變形，可以根據(jù)業(yè)務(wù)實際需要進行擴展設(shè)計。例如，在插件上做tab，可以用極小的屏幕代價增加更多的玩法入口；以輪播的方式增加更多入口的曝光；可收起的插件能減少對直播間用戶的干擾。

2. 處理信息布局

靜態(tài)或動態(tài)icon型的插件信息容量較小，往往只有1~2個信息點，處理時只需要選擇最重要的信息展示即可，同時是展示玩法宣傳的標(biāo)識或獎勵標(biāo)識，額外信息可能還會展示數(shù)值、倒計時等。

△ 插件信息優(yōu)先級和比重示意圖

卡片型的插件信息處理起來則會復(fù)雜得多。插件有限的信息容量意味著設(shè)計者在布局設(shè)計上需要有明確的優(yōu)先級，盲目的信息堆疊會大大降低插件的顯示效率。信息量較小從用戶的關(guān)注點來看，玩法結(jié)果、玩法狀態(tài)變化、時間和階段等信息是相對重要的。這些信息是玩法的核心體現(xiàn)，需要格外突出以吸引用戶的目光，同時起到玩法“第二頁面”的作用。

△ 插件信息優(yōu)先級和比重示意圖

玩法標(biāo)志：形式可以是圖形也可以是文字，作用是告訴用戶這個插件屬于哪個玩法，是用戶的第一印象觸達點，因此常出現(xiàn)在插件的頭部；

過程信息：大部分玩法是持續(xù)性的，用戶通過過程信息把握玩法的進度，包括排名、任務(wù)進度、進行階段等，是卡片型插件的信息主體；

玩法結(jié)果信息：整個玩法的最終結(jié)果或階段性結(jié)果，是用戶參與活動最重要的反饋，因此，結(jié)果信息也是卡片型插件的信息主體；

玩法時間：通過時間營造緊迫感，起到提醒用戶及時參與的作用，同時也可與過程信息起到呼應(yīng)的效果；

便捷熱區(qū)：非必選項，在玩法內(nèi)有需要強引導(dǎo)的即時性操作，才會在插件中體現(xiàn)；

引導(dǎo)：引導(dǎo)文案起到的作用是配合主信息來引導(dǎo)用戶參與，提升點擊率；

描述：玩法本身難以通過圖案或玩法數(shù)據(jù)來體現(xiàn)如何參與時，一句描述性文案的的信息傳遞能力可能更直接。

3. 梳理插件狀態(tài)

由于插件是動態(tài)展示信息的入口，它不僅像按鈕一樣有各種交互狀態(tài)，根據(jù)玩法進行的不同階段還有不同的信息狀態(tài)。梳理插件狀態(tài)是插件交互設(shè)計過程中最基礎(chǔ)也是最重要的一環(huán)。

以時間為維度遍歷

時間是天然的發(fā)展線索，很多活動的進程都與時間線存在直接相關(guān)性，以時間為維度可以非常線性地遍歷插件狀態(tài)。

△ 以日期為線索梳理插件狀態(tài)

以角色+時間為維度遍歷

在直播間活動中，通常參與者會涉及到主播和觀眾，而插件在兩種角色上的呈現(xiàn)有時候需要作區(qū)分。另外，部分活動的參與門檻也決定了有些用戶是無法參與的，此時需要考慮是否在這些用戶的界面中顯示插件。當(dāng)然，我們在設(shè)計的過程中優(yōu)先考慮多角色統(tǒng)一的插件界面，因為這樣可以節(jié)約很多美術(shù)、技術(shù)成本。

△ 以角色+時間為線索梳理插件狀態(tài)

以玩法進度+時間為維度遍歷

玩法進度實際上也是一種時間線，但由于在不同進度過程中會出現(xiàn)分支，并隨著玩法的復(fù)雜度的增加而呈現(xiàn)出盤根錯節(jié)的狀態(tài)，但這又是我們在設(shè)計插件時最常見的，因此這里拿來單獨講。以簡易模型為例，不僅涉及到玩法狀態(tài)，還涉及到主播是否晉級、是否有展示期、結(jié)果是否有多樣性等。

△ 以玩法進度+時間為線索梳理插件狀態(tài)

其他注意點

多端的適配。PC/web端和移動端的尺寸不一樣，交互方式也不一樣，因此在設(shè)計時可以考慮更利于該平臺的形式，以達到更好的效果。此時，選擇展示的信息時就需要考慮在不同平臺的展示/交互方式，必要時允許多端之間存在一定的差異，但核心信息則應(yīng)保持一致。

4. 注意交互引導(dǎo)

本質(zhì)上，插件還是一個入口，點擊率依然是插件設(shè)計的重要衡量指標(biāo)。動態(tài)icon型由于天生有吸引用戶焦點的特性，因此只要平衡好與直播間內(nèi)的其他元素的關(guān)系，相對來說更簡單些。在無法增加更多復(fù)雜動效的情況下，靜態(tài)圖標(biāo)和卡片的點擊引導(dǎo)顯得更為困難的。在PC端可使用一些簡單的微動效來吸引用戶點擊，或增加熱區(qū)的三態(tài)告知用戶此處可以點擊等。而移動端則可以做一些常見的點擊輔助設(shè)計，如tips、引導(dǎo)文案、設(shè)置按鈕等。

△ 引導(dǎo)點擊的方式

設(shè)計難點

插件容量有限和信息展示量多的矛盾。在有限的空間里選擇最優(yōu)的信息展示給用戶，并不是一件容易的事。更多時候大家都是選擇盡可能展示多，以此來減小犯錯的概率。這種做法事實上是非常懶的，且由于太多信息導(dǎo)致插件空間的信息失去了主次，最終插件又變成“復(fù)雜頁面”，背離了插件設(shè)計的初衷。

狀態(tài)多且復(fù)雜是困擾交互設(shè)計師的另一個難題。隨著現(xiàn)有玩法的逐漸開發(fā)，挖掘創(chuàng)新玩法變的越來越困難，因此將現(xiàn)有玩法疊加并包裝成一個全新的玩法，是常規(guī)做法。玩法的疊加必然帶來更復(fù)雜的邏輯、更多的狀態(tài)、更多的信息，此時插件的處理就難上加難了。

△ 插件信息越來越多，狀態(tài)越來越復(fù)雜

插件規(guī)范

當(dāng)活動玩法積累到一定程度的時候，設(shè)計師應(yīng)該尋求一種更簡單的辦法來處理復(fù)雜的重復(fù)活動。常人所知的玩法畢竟數(shù)量有限，在不斷和插件“斗爭”中總結(jié)規(guī)律，形成組件庫，可減少交互設(shè)計師一次又一次的遍歷，從而使設(shè)計師從低價值的重復(fù)勞動中解放，把精力投入到更需要創(chuàng)意的玩法設(shè)計中。

插件的規(guī)范建設(shè)也可以從多個維度去思考，例如從通用用戶界面層去規(guī)定視覺風(fēng)格、尺寸、排版原則、公用圖標(biāo)、公用三態(tài)等。而交互則可以規(guī)定插件的跳轉(zhuǎn)邏輯、信息選擇原則、狀態(tài)的梳理等。更小顆粒度可以做到根據(jù)玩法分類，制作整套模板，復(fù)用時可以根據(jù)實際情況調(diào)取該部分的交互稿，從而大大降低設(shè)計制作的時間。

用戶界面規(guī)范制定之后，除了日常迭代、技術(shù)封裝和維護之外，最重要的是向合作部門進行宣講，實現(xiàn)信息的互通，在復(fù)用時才能減少由于信息不對稱帶來的返工和溝通成本。