最近正在負(fù)責(zé)的一個(gè)項(xiàng)目已經(jīng)進(jìn)入第五期的需求迭代了，我認(rèn)為非常有必要對這個(gè)項(xiàng)目做一次設(shè)計(jì)小結(jié)，并且也借此機(jī)會將產(chǎn)品分享給各位小伙伴們。在這個(gè)項(xiàng)目中雖然我是從事交互設(shè)計(jì)的工作，但由于歷經(jīng)多個(gè)產(chǎn)品經(jīng)理的輪轉(zhuǎn)，因此多數(shù)需求和用研都是我在跟進(jìn)，從項(xiàng)目啟動到日活9000，我是唯一從頭至尾參與其中的產(chǎn)品成員，下面我會從產(chǎn)品的背景、使用場景、交互流程、頁面展示等各個(gè)方面娓娓道來。

1、產(chǎn)品背景

現(xiàn)有的群管軟件在市面上并不常見，免費(fèi)好用的更是少之又少，這并不是因?yàn)檫@類工具沒有需求。在研究競品的過程中，我對此現(xiàn)象總結(jié)了三點(diǎn)主要原因：1、該類產(chǎn)品容易受到微信官方的打壓和排斥；2、微信如果強(qiáng)化群功能也會導(dǎo)致這類工具的迅速死亡；3、存在第三方工具普遍存在的痛點(diǎn)——微信改變規(guī)則很可能將導(dǎo)致整體功能的調(diào)整，因此開發(fā)成本和維護(hù)成本都比較大。這三個(gè)原因?qū)е逻@類軟件收費(fèi)很貴，功能操作比較粗糙，學(xué)習(xí)成本高。而我們團(tuán)隊(duì)開發(fā)該產(chǎn)品旨在完善功能模塊、降低用戶的學(xué)習(xí)成本，提高用戶體驗(yàn)。群管工具的需求點(diǎn)較多、使用場景復(fù)雜，設(shè)計(jì)過程中遇到了很多阻礙，因此對我來說是不小的挑戰(zhàn)，讓我在項(xiàng)目推進(jìn)過程中有了不小的成長。

2、用戶類型

這款群管軟件是幫助微信社群運(yùn)營人員管理和裂變的協(xié)助型工具，提高他們的工作效率，以最低的時(shí)間成本得到最大的回報(bào)的一款社群管理工具。使用我們工具的大都有四類人群，一是淘客微商類運(yùn)營者，他們主要是在社群里推廣自己的商品，以盈利最大化為目的；二類是教育培訓(xùn)、知識分享型社群運(yùn)營者，他們將群作為一個(gè)班級體進(jìn)行線上培訓(xùn)，將群按照等級劃分設(shè)置入群權(quán)限，同時(shí)也舉辦線下活動擴(kuò)大規(guī)模；三類是娛樂游戲、興趣交友群，這類群大都采用線上推廣、線下活動的運(yùn)營模式。

3、產(chǎn)品目的

本次產(chǎn)品的目的主要有三個(gè)：

（1）幫助運(yùn)營微信群的用戶可以更高效的管理社群；

（2）幫助運(yùn)營微信群的用戶挖掘社群價(jià)值；

（3）幫助運(yùn)營人員拓展和擴(kuò)大群規(guī)模；

4、產(chǎn)品描述

4.1 產(chǎn)品框架

根據(jù)產(chǎn)品的目的我們分析了用戶行為，按照功能優(yōu)先級來架構(gòu)產(chǎn)品，產(chǎn)品初期只能按照用戶的單一的使用場景來規(guī)劃功能模塊，隨著功能模塊的不斷增加，我們就需要對功能模塊做出合理整合，按照用戶完整的操作場景來規(guī)劃模塊，到目前為止四期的需求已經(jīng)架構(gòu)了不少的功能模塊，現(xiàn)在的版本也是經(jīng)過多次整合的結(jié)果，模塊架構(gòu)雖然很有指向性，但是依然不能清晰引導(dǎo)用戶去完成操作閉環(huán)。這是因?yàn)槲覀兠嫦虻挠脩舨⒎菃我活愋停煌愋偷挠脩羰褂脠鼍案鞑幌嗤?，因此下面的?guī)劃是將這些模塊插件化，讓用戶去組合搭建他們需要的使用場景。基于后期規(guī)劃，在設(shè)計(jì)過程中逐漸將完整和關(guān)聯(lián)的功能模塊整合在一起，將單獨(dú)場景功能作為獨(dú)立模塊，各個(gè)功能模塊之間可以關(guān)聯(lián)使用也可以獨(dú)立使用，用戶可以根據(jù)需求來自定義模塊。

1.3.0版本的客戶端主要分為六個(gè)模塊：

1. 客服群管：使用場景主要是為了讓用戶可以更好的回復(fù)群成員的問題，防止遺漏信息，提高回復(fù)效率，這個(gè)模塊淘客微商類運(yùn)營用戶使用較多；
2. 群發(fā)模塊：便于用戶給多群推送多條信息，還可以定時(shí)推送，更加便捷高效，這個(gè)模塊各類社群運(yùn)營人員都比較頻繁使用；
3. 檢測僵尸粉：有效清理死粉
4. 加好友：拓展粉絲群
5. 群管機(jī)器人：自動化管理社群
6. 統(tǒng)計(jì)查詢：挖掘社群價(jià)值

前兩個(gè)模塊功能都是給群成員發(fā)送消息，但是使用場景截然不同；第三第四項(xiàng)都屬于好友功能；第五項(xiàng)提供了自動服務(wù)，在用戶不在電腦前也能有效管理社群；第六項(xiàng)的目的是挖掘社群價(jià)值，運(yùn)營人員可以有針對性的去展開工作。

4.2 產(chǎn)品模塊流程

每個(gè)模塊都有獨(dú)立的操作流程，但是又相互關(guān)聯(lián)，不同類型的用戶需要串聯(lián)使用才能形成完整的操作流程。下面是每個(gè)模塊的具體操作流程（某些模塊較復(fù)雜，無法用樹形圖展示清楚，所以這里做了省略，有興趣的朋友可以去體驗(yàn)產(chǎn)品）：

4.3 產(chǎn)品交互操作

這里主要從兩個(gè)設(shè)計(jì)難點(diǎn)剖析，一是群管設(shè)置項(xiàng)的交互問題，二是長進(jìn)度交互展示，三是批量篩選交互集錦。

（1）設(shè)置項(xiàng)交互設(shè)計(jì)集錦

群管設(shè)置項(xiàng)是程序執(zhí)行命令和修改命令的入口，根據(jù)不同的場景我們需要采用不同的交互方式，下面我介紹一下每一種交互方式的使用場景，并且闡釋在群管軟件中的各個(gè)場景我采用的交互方式。

① 開關(guān)的利用

開關(guān)一般是一個(gè)總功能的快捷操作項(xiàng)，它可以及時(shí)阻止錯(cuò)誤程序的執(zhí)行，類似電流總閘在緊急時(shí)刻可以阻止危險(xiǎn)；它也可以讓用戶在不破壞自己設(shè)置好的復(fù)雜流程的情況下控制程序的啟動和關(guān)閉，操作更加自由和快捷。下面是設(shè)計(jì)過程中遇到一些難點(diǎn)：

1. 設(shè)置過程中遇到父子級功能開關(guān)，需要注意啟用和關(guān)閉狀態(tài)區(qū)分，例如父級開關(guān)打開，子級選擇可以任意選擇，父級開關(guān)關(guān)閉，子級選擇不可勾選，以此來讓用戶分辨邏輯關(guān)系；
2. 在設(shè)計(jì)層級較為復(fù)雜的父子級設(shè)置項(xiàng)時(shí)，需要拆解層級，一般用戶只能接受兩個(gè)層級關(guān)系，過多的嵌套層級會讓用戶迷惑。

② 手動保存

即用戶操作完設(shè)置項(xiàng)后需要手動點(diǎn)擊保存才會生效

• 問題：需要手動觸發(fā)保存，操作路徑較長，影響用戶體驗(yàn)；適用于一次性設(shè)置，操作頻率較少的情況；
• 優(yōu)勢：避免誤操作造成的程序運(yùn)行錯(cuò)誤；

手動保存的兩種設(shè)計(jì)方式：

• 逐項(xiàng)保存：適用于設(shè)置項(xiàng)較為復(fù)雜，設(shè)置路徑較長的情況，可以實(shí)時(shí)反饋給用戶是否輸入錯(cuò)誤以及危險(xiǎn)提示，也可以很好的防止丟失的危險(xiǎn)；
• 總保存：適用于設(shè)置項(xiàng)簡單，用戶花費(fèi)較少的時(shí)間可以一次性操作完成的情況；

③ 即時(shí)生效

即使生效即自動保存：用戶設(shè)置的過程中程序自從記住設(shè)置狀態(tài)

• 問題：立馬生效，用戶容易誤操作導(dǎo)致功能運(yùn)行錯(cuò)誤；適用于間歇性運(yùn)行的程序，否則容易造成出錯(cuò)；
• 優(yōu)勢：實(shí)時(shí)保存可以減少他們的輸入以及＂所見即所得＂，讓他們看到設(shè)置所帶來的變化，讓他們覺得你的程序很cool?

在群管軟件中比較少采用這種交互方式，我們的設(shè)置項(xiàng)內(nèi)容較為復(fù)雜，有很多輸入和編輯的選項(xiàng)，如果采用即時(shí)生效的交互方式往往會造成執(zhí)行錯(cuò)誤。

④ 保存狀態(tài)和修改狀態(tài)的切換

這里說的保存修改狀態(tài)一般是針對手動保存的交互方式。在移動端，一般會將其分為兩個(gè)頁面，而在桌面端的設(shè)計(jì)中，往往會避免多頁面的跳轉(zhuǎn)，因此在同一個(gè)頁面需要展示多種狀態(tài)，所以在設(shè)置項(xiàng)的設(shè)計(jì)過程中需要將保存狀態(tài)和修改狀態(tài)明晰地區(qū)分開，這樣能夠減少用戶對當(dāng)前狀態(tài)的混亂感，防止出現(xiàn)忘記保存或者多次重復(fù)保存的狀況。

設(shè)計(jì)實(shí)例

層級較多，設(shè)置項(xiàng)復(fù)雜的情況下，就需要合理的采用以上三種交互方式，群管軟件的設(shè)置項(xiàng)（更名群管機(jī)器人）模塊就相當(dāng)?shù)湫偷年U釋了各種不同場景下采用的不同交互方式，下面我采用頁面交互的方式來闡釋各種場景的操作交互。

從頁面邏輯可以看出整個(gè)操作的流程為：

關(guān)閉功能開關(guān)→ 啟動修改→ 修改配置→ 保存配置→ 開啟功能開關(guān)

這樣的功能流程看似十分復(fù)雜，但確是防止高頻用戶誤操作的最好方式，也能滿足普通用戶的快捷修改。經(jīng)過用戶調(diào)研，用戶在使用踢人設(shè)置的過程中經(jīng)常會遇到以下幾個(gè)操作場景：

場景一：踢人操作出現(xiàn)問題，但不知道具體原因，用戶需要及時(shí)停止后進(jìn)行具體排查，總功能的開關(guān)可以很好的滿足這種緊急需求；

在場景一中一般采用的操作流程為：關(guān)閉功能開關(guān)→ 啟動修改→ 修改配置→ 保存配置→ 開啟功能開關(guān)

場景二：用戶發(fā)現(xiàn)某一個(gè)項(xiàng)配置有誤，但是影響不大，可以在功能執(zhí)行的同時(shí)去修改配置項(xiàng)，修改的過程中程序依然按照修改之前的配置項(xiàng)執(zhí)行操作，當(dāng)用戶觸發(fā)保存按鈕時(shí)才會按照新的配置項(xiàng)執(zhí)行；

在場景二中一般采用的操作流程為：啟動修改→ 修改配置→ 保存配置

場景三：用戶需要一定時(shí)間段內(nèi)接觸踢人設(shè)置，但是不想修改任何設(shè)置項(xiàng)，此時(shí)只需要關(guān)閉總功能開關(guān)，簡單快捷。

在場景三中一般采用的操作流程為：關(guān)閉功能開關(guān)

（2）長進(jìn)度交互設(shè)計(jì)集錦

所謂長進(jìn)度，即程序執(zhí)行操作需要一個(gè)較長的過程，這個(gè)過程需要很好的反饋給用戶，讓其能夠明確程序的進(jìn)度從而明白自己的下一步操作，這里的交互方式會密切影響用戶體驗(yàn)。群管工具中的長進(jìn)程隨處可見，在設(shè)計(jì)初始就需要一個(gè)統(tǒng)一規(guī)劃，例如哪些場景需要暫停；哪些場景需要查看具體進(jìn)程；多個(gè)長進(jìn)度同時(shí)進(jìn)行時(shí)的界面反饋；長進(jìn)程發(fā)生錯(cuò)誤或者程序意外退出時(shí)的界面反饋等等。

設(shè)計(jì)實(shí)例：

① 實(shí)例一 單任務(wù)進(jìn)程

下面展示的是群管工具中“檢測僵尸粉”模塊的頁面進(jìn)度，以此作為案例來說明長進(jìn)度的交互操作：

除了給用戶標(biāo)明每個(gè)步驟的進(jìn)程狀態(tài)以外，這里還涉及用戶在其他頁面操作過程中對此進(jìn)度的提示，例如在檢測僵尸粉的進(jìn)程中去修改群管機(jī)器人的設(shè)置項(xiàng)，頂部tab會標(biāo)注出正在loading中的狀態(tài)，提示用戶該模塊下的功能正處于長進(jìn)程中。

② 實(shí)例二 多任務(wù)進(jìn)程

當(dāng)用戶在等待長進(jìn)程的過程中將軟件關(guān)閉或者最小化，去操作其它工作，一段時(shí)間后進(jìn)程就容易被用戶忽視和忘記，因此可能會錯(cuò)過很多及時(shí)重要信息，例如群發(fā)進(jìn)度：定時(shí)群發(fā)有沒有定時(shí)發(fā)送，去查看用戶相應(yīng)的信息反饋。但是又不能每個(gè)任務(wù)都強(qiáng)制提醒用戶，這會造成信息打擾，引起用戶的煩躁情緒。因此我們采用了一個(gè)比較中庸的設(shè)計(jì)方案——“任務(wù)球”。桌面任務(wù)球是當(dāng)程序在后臺運(yùn)行時(shí)始終懸浮在桌面上一個(gè)任務(wù)進(jìn)度反饋球，體積很小，不會打擾和干擾用戶的正常工作，用戶可以在進(jìn)行其它工作時(shí)隨時(shí)隨地查看進(jìn)程狀態(tài)，并且對其作出及時(shí)操作。這個(gè)任務(wù)球功能還沒有上線，還在設(shè)計(jì)階段，下面是一個(gè)初步方案：

該任務(wù)球有兩個(gè)主要功能：

1. 為了提示用戶長進(jìn)程的及時(shí)狀態(tài)；
2. 遇到突發(fā)狀況，方便用戶及時(shí)在任務(wù)球上作出快速操作：暫?；蛘呷∠?/li>

因此在設(shè)計(jì)過程中不會存取歷史記錄，完成的和取消的任務(wù)都會及時(shí)告知用戶后自動消失，保證任務(wù)球的展示清晰明了。想查看具體進(jìn)度的用戶也可以點(diǎn)擊相應(yīng)的list進(jìn)入軟件的對應(yīng)功能模塊查看詳情后再施行操作。

（3）批量篩選交互設(shè)計(jì)集錦

在做篩選對象的交互設(shè)計(jì)時(shí)，往往需要考慮兩個(gè)層面，一是用戶操作成本，二是用戶學(xué)習(xí)成本；操作成本是指同樣達(dá)到一個(gè)終點(diǎn)的路程，用戶走哪條比較快和方便；學(xué)習(xí)成本是方便和快速的捷徑用戶能否快速理解，是否需要用戶更多的時(shí)間去學(xué)習(xí)和習(xí)慣。在設(shè)計(jì)過程中需要兼顧二者是一個(gè)很大的挑戰(zhàn)。

設(shè)計(jì)實(shí)例：

①實(shí)例一 多層級的篩選

下面就結(jié)合加好友功能給大家詳細(xì)剖析設(shè)計(jì)方案的推進(jìn)。首先，我先介紹一下加好友功能的使用場景：

• 場景一：微商等營銷人員需要擴(kuò)充自己的朋友圈做一對一的銷售和廣告，需要加所有相關(guān)群內(nèi)的成員為好友；
• 場景二：微信號導(dǎo)流，把營銷號上的好友引流到門檻更高的個(gè)人大號，分流管理和推銷；
• 場景三：加回檢測出的僵尸粉，爭取再次寵幸的機(jī)會。

在設(shè)計(jì)之前除了研究各個(gè)場景以外，還有一個(gè)很重要事情是研究微信客戶端的加好友規(guī)則，由于我們的軟件屬于第三方軟件，因此設(shè)計(jì)和開發(fā)之前需要弄清楚微信的加好友規(guī)則。我們的軟件是為用戶提供批量加好友的服務(wù)，a所以還需要去探究微信批量加好友的潛在規(guī)則和風(fēng)險(xiǎn)。在開發(fā)推進(jìn)中我們遇到了很多阻礙，例如微信在不斷改變每天有效發(fā)出好友驗(yàn)證的數(shù)量，發(fā)送頻率過快容易封號等等。基于以上種種條框，在有效空間內(nèi)畫原型是一件十分艱難和頭疼的事，需要平衡用戶體驗(yàn)、程序可實(shí)現(xiàn)性以及微信平臺的規(guī)則限制等多種因素。

下面我從兩個(gè)方面闡述加好友模塊的篩選對象設(shè)計(jì)：

1）展示vs篩選

展示和篩選看起來沒有對立性，但在加好友的設(shè)計(jì)中是一個(gè)非常重要的平衡點(diǎn)。加好友模塊不是簡單的選擇好友然后發(fā)送驗(yàn)證的過程，它涉及兩個(gè)操作場景：一是無差別的針對群對象進(jìn)行選擇操作，向群內(nèi)所有成員發(fā)送好友驗(yàn)證；二是有針對性的選擇群內(nèi)部分成員發(fā)送好友驗(yàn)證。針對兩種操作場景展示的界面可以說是完全不一樣，前者需要以群作為主要展示對象，后者以群內(nèi)成員作為主要展示對象。需要同時(shí)滿足以上兩種操作場景，并且還需要滿足一些其它功能需求，例如針對場景一需要剔除一些對象（見第三點(diǎn)），這樣會導(dǎo)致展示上相對復(fù)雜，即一個(gè)頁面就要讓兩種需求的用戶快速找到達(dá)到目的地的路線。下面我給出我的設(shè)計(jì)方案，也希望大家可以指正：

以上的展示方式可以滿足兩種操作場景，無差別操作只需要對左側(cè)的群列表實(shí)施操作，就可以進(jìn)行下一步的發(fā)送；也可以方便的查看各個(gè)群內(nèi)的成員，實(shí)施針對性操作。但由于這種設(shè)計(jì)將勾選群和全選成員的操作合二為一，導(dǎo)致少部分用戶反饋使用過程中不會全選群成員。由于軟件操作場景的特殊性導(dǎo)致的篩選操作過多，盡量減少勾選項(xiàng)有利于用戶對操作層級的認(rèn)知，所以我認(rèn)為這個(gè)認(rèn)知點(diǎn)可以通過新手引導(dǎo)的方式告知用戶，簡單的學(xué)習(xí)和認(rèn)知就能換取用戶更加快捷方便的操作便可以被認(rèn)為是合格的設(shè)計(jì)，設(shè)計(jì)并非死板教條地應(yīng)用模版，需要根據(jù)場景來找到相對最優(yōu)的解決問題的路徑。

2）層級的遞進(jìn)

在一個(gè)頁面上展示較為復(fù)雜的層級關(guān)系往往會讓用戶迷茫，但是分頁一步一步引導(dǎo)用戶去操作又不能完美滿足各種場景的用戶需求，因此在確保功能完整的情況下我采用了在一個(gè)頁面內(nèi)完成所有篩選操作的交互方式。話不多說，上個(gè)動圖大家感受下操作邏輯：

這個(gè)操作邏輯大致分為三步：選擇群對象→ 篩選群成員→ 剔除對象→ 開始發(fā)送驗(yàn)證→ 進(jìn)入進(jìn)程

將群作為tab列表切換查看，用戶可以在查看群成員的同時(shí)自由選擇，無論是無差別的針對群做操作，還是針對性的對群內(nèi)成員操作，都可以高效的滿足用戶的操作場景。發(fā)送前的剔除是針對以上操作的所有群內(nèi)成員的剔除，可以剔除群主身份和已發(fā)送過驗(yàn)證的群成員對象。最后進(jìn)入發(fā)送流程，在發(fā)送流程的進(jìn)程中還可以追加發(fā)送對象。這個(gè)進(jìn)程可以根據(jù)賬號的實(shí)際情況設(shè)置發(fā)送頻率和每日的發(fā)送上線，防止出現(xiàn)操作過于頻繁而導(dǎo)致封號的現(xiàn)象。在發(fā)送進(jìn)程中還能查看具體的發(fā)送狀態(tài)，例如已發(fā)送對象、待發(fā)送對象和已通過對象。

② 實(shí)例二 ?對象的搜索和篩選

篩選對象和搜索對象需要共存一般發(fā)生在多選篩選的情況下，正常情況下，搜索的對象就是即將篩選的對象，然而在多選操作的情況下，模糊搜索的對象可能其中部分幾個(gè)是用戶需要選擇的有效對象，因此在搜索列表中需要展示一下幾個(gè)重要信息：

1. 全部對象；
2. 搜索后的對象；
3. 選擇的對象。

開始的設(shè)計(jì)比較簡單粗暴，僅僅在列表中給了一個(gè)搜索入口（如左圖），用戶反饋篩選起來比較不方便，經(jīng)過對用戶行為的深度研究，發(fā)現(xiàn)用戶有二次篩選的習(xí)慣。因此在接下來的改版會將列表篩選做如右圖的優(yōu)化，加入僅顯示已選的入口，用戶可以在選擇部分對象后，在列表中進(jìn)行二次篩選，并且我將搜索入口和二次篩選入口做了分割，二者互不干擾，邏輯也更加清晰。

結(jié)語

以上的交互方式會應(yīng)用在各個(gè)操作模塊，為此做了一套設(shè)計(jì)規(guī)范，讓開發(fā)提高效率，為用戶降低學(xué)習(xí)成本。除了以上的交互分享，還有很多細(xì)節(jié)需要改進(jìn)和總結(jié)，這款軟件馬上會迎來2.0的重大升級，整個(gè)視覺體驗(yàn)和交互體驗(yàn)都會有很好的升級，最后在這里自賣自夸一下，給大家推薦這個(gè)微信群管工具——wetool，做微商和社群的朋友可以來體驗(yàn)一下。

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

題圖來自 Pexels，基于 CC0 協(xié)議