案例解析｜如何入手設(shè)計(jì)復(fù)雜的B端產(chǎn)品？

▲點(diǎn)擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們

歡迎來(lái)到專業(yè)設(shè)計(jì)師學(xué)習(xí)交流社區(qū)

三分設(shè)｜連接知識(shí)，助力全球 1 億設(shè)計(jì)師成長(zhǎng)

轉(zhuǎn)自：Alibaba Cloud TXD

編輯：益達(dá)

共 4340 字 21 圖  預(yù)計(jì)閱讀 11 分鐘

各位好，我是新晉B類產(chǎn)品的體驗(yàn)設(shè)計(jì)師寸雨，伴隨著半年左右的時(shí)間與云效 · AppStack（應(yīng)用交付）產(chǎn)品的共同成長(zhǎng)，在本期談一談自己在相對(duì)較為復(fù)雜的 B 類 Saas 業(yè)務(wù)場(chǎng)景下是如何進(jìn)行設(shè)計(jì)工作開(kāi)展的。

所謂 B 類業(yè)務(wù)，大概興起于 2015 年以后，前身是各類 C 類業(yè)務(wù)背后的后臺(tái)產(chǎn)品，伴隨著敏捷研發(fā)、協(xié)作等概念的興起，逐漸的 “ B ” 和 “ C ” 的概念區(qū)別開(kāi)來(lái)，相對(duì)于直接向用戶、消費(fèi)者提供產(chǎn)品服務(wù)，B 類業(yè)務(wù)多是為向企業(yè)、團(tuán)隊(duì)提供各個(gè)場(chǎng)景需求的服務(wù)，為企業(yè)增進(jìn)協(xié)作研發(fā)效率、節(jié)省管理成本、提高盈利，常見(jiàn)的例子有財(cái)務(wù)系統(tǒng)、銷售管理系統(tǒng)等 (通俗的說(shuō)，就是幫助企業(yè)“管理員工、分配任務(wù)、分配資源”)。

Part 1

AppStack是什么？

云效 · AppStack 是一款云效產(chǎn)品矩陣內(nèi)的全新子產(chǎn)品，踐行阿里云先進(jìn)的 DevOps 理念的重要一環(huán)，補(bǔ)齊研發(fā)域能力的 “最后一塊拼圖”，集應(yīng)用發(fā)布、環(huán)境管理、應(yīng)用編排、變量組管理、版本管理、工單管理、資源管理等為一體的較為復(fù)雜的研發(fā)域交付平臺(tái)產(chǎn)品。

面對(duì)自身復(fù)雜的業(yè)務(wù) AppStack，單純的去理解業(yè)務(wù)邏輯概念就是一個(gè)非常困難的事情，半年多的業(yè)務(wù)實(shí)踐、復(fù)盤(pán)、整理，想從用戶和業(yè)務(wù)場(chǎng)景的角度總結(jié)一些應(yīng)對(duì)此類復(fù)雜業(yè)務(wù)的認(rèn)知和理解。

圖 / 云效·AppStack

Part 2

AppStack的體驗(yàn)設(shè)計(jì)難點(diǎn)？

AppStack 是作為一款公有云 Saas 產(chǎn)品，主要面向企業(yè)和團(tuán)隊(duì)的敏捷研發(fā)需求。企業(yè)研發(fā)領(lǐng)域的運(yùn)作系統(tǒng)自成一體、專業(yè)壁壘比較高，設(shè)計(jì)側(cè)對(duì)于此領(lǐng)域的用戶鏈路、心智邏輯、產(chǎn)品形態(tài)的分析理解難度都遠(yuǎn)遠(yuǎn)高于其他 C 端產(chǎn)品（畢竟我們不是直接用戶、甚至除了測(cè)試之外完全不會(huì)用到這個(gè)產(chǎn)品），如果不負(fù)責(zé)這個(gè)業(yè)務(wù)，可能永遠(yuǎn)不會(huì)接觸這個(gè)行業(yè)與其用戶，常規(guī)的同理心甚至?xí)`導(dǎo)我們對(duì)該產(chǎn)品的設(shè)計(jì)把控 。

從AppStack的業(yè)務(wù)實(shí)踐上來(lái)看，主要有以下4個(gè)特性是設(shè)計(jì)難點(diǎn)：

① 涉及多個(gè)角色，他們關(guān)注的重點(diǎn)不同、角色任務(wù)也不同，但是要在產(chǎn)品中 “平等對(duì)話”；

② 主線操作鏈路長(zhǎng)（從導(dǎo)入資源到部署環(huán)境）、且往往伴隨不同支線任務(wù)；

③ 非獨(dú)立產(chǎn)品，需要考慮與其他產(chǎn)品的能力對(duì)接、體驗(yàn)一致；

④ CI/CD業(yè)務(wù)壁壘高，術(shù)語(yǔ)復(fù)雜難理解；

具體怎么做呢？

---

首先我們需要厘清

對(duì)于用戶角色的認(rèn)知

面對(duì)使用一個(gè) C 類產(chǎn)品的不同用戶角色時(shí)，我們常常采用年齡、喜好、性別、地區(qū)等描述一個(gè)人的“生活屬性”的詞語(yǔ)來(lái)進(jìn)行角色劃分，對(duì)于 B 端產(chǎn)品而言，我們無(wú)法以相同的方法對(duì)用戶進(jìn)行分類，而是要從整個(gè)產(chǎn)品形態(tài)下負(fù)責(zé)不同任務(wù)的角色各自的角色特質(zhì)進(jìn)行分類，即 以 “職能屬性” 作為角色的主要考量，這個(gè)職位的用戶主要價(jià)值是什么、關(guān)心什么、擔(dān)心什么、要和誰(shuí)配合什么，而職位背后的“人”的喜好則顯得并不重要，在 AppStack 中，一個(gè)典型的產(chǎn)品運(yùn)行流程與其涉及的角色如下圖：

圖 / 客戶研發(fā)工作流 

設(shè)計(jì)的目的在于解決不同角色的需要、訴求和使用情緒，實(shí)現(xiàn)其 “職能價(jià)值” 。類似于 C 端產(chǎn)品的用戶畫(huà)像（Persona），在 B 類業(yè)務(wù)中我們同樣可以建立類似的定性分析描述，本質(zhì)上都是 通過(guò)對(duì)使用者的“側(cè)寫(xiě)”來(lái)幫助設(shè)計(jì)師理解用戶關(guān)注、操作阻礙等體驗(yàn)關(guān)鍵點(diǎn) ，同時(shí)還要區(qū)別于 C 類業(yè)務(wù)中不同用戶角色之間的 “ 割裂性 ”（互相獨(dú)立使用），在 B 類業(yè)務(wù)中，角色之間往往是協(xié)同、帶有一定上下游關(guān)系的。尤其是 AppStack 作為敏捷研發(fā)產(chǎn)品的重要一環(huán)，協(xié)同是產(chǎn)品重要的能力體現(xiàn)

圖 / 角色的“職能價(jià)值”是設(shè)計(jì)主要關(guān)注點(diǎn)

---

其次看看

角色的協(xié)同、操作鏈路

業(yè)務(wù)實(shí)踐初期也踩過(guò)陷入單一頁(yè)面設(shè)計(jì)漩渦的坑，導(dǎo)致不同頁(yè)面的體驗(yàn)一致性出現(xiàn)了缺漏，解決這個(gè)問(wèn)題最好的方法就是在動(dòng)手之前先花時(shí)間理解好整個(gè)產(chǎn)品的 “上層建筑” 和 “底層基礎(chǔ)” 究竟是什么可以由面至點(diǎn)的角度去理解操作鏈路的前后語(yǔ)境：

面-產(chǎn)品商業(yè)布局 // AppStack 在云效產(chǎn)品中的位置？商業(yè)目標(biāo)？上下游如何閉環(huán)的？

線-角色協(xié)作鏈路 // 主要的使用角色是如何完成各自需要做的事？信息結(jié)構(gòu)與角色之間的關(guān)系？功能之間如何建立聯(lián)系的？視覺(jué)元素、功能、交互和導(dǎo)航都是此基礎(chǔ)上構(gòu)建的

點(diǎn)-頁(yè)面核心任務(wù) // 標(biāo)題、字段、按鈕等細(xì)節(jié)；操作區(qū)、主要閱讀區(qū)、次要閱讀區(qū)等布局映射；

逐步理解這三個(gè)維度的內(nèi)容，就如同層層打開(kāi)俄羅斯套娃一般，由外至內(nèi)、從宏觀到微觀的把控業(yè)務(wù)方提出的設(shè)計(jì)需求在整個(gè)產(chǎn)品中的能力位置以及各個(gè)角色需要在業(yè)務(wù)模型的各個(gè)流程中完成協(xié)作、產(chǎn)生不同的交互動(dòng)作:

協(xié)作流程圖可以幫助我們明白不同角色之間的關(guān)注側(cè)重點(diǎn)在哪里：

圖 / 不同角色關(guān)注點(diǎn)

① 運(yùn)維人員 關(guān)注資源的導(dǎo)入，在本產(chǎn)品中操作比較簡(jiǎn)單，但是導(dǎo)入資源是一切的開(kāi)始，盡可能簡(jiǎn)化 “導(dǎo)入” 的行為成本是必要的；

② 應(yīng)用負(fù)責(zé)人 是應(yīng)用的架構(gòu)者，需要配置編排、編排、環(huán)境等底層元素，提供模板化的開(kāi)箱即用的設(shè)置是本產(chǎn)品的策略，目的是盡量降低繁瑣的配置帶來(lái)的用戶流失；

③ 應(yīng)用成員 是日常的主要使用者，一方面他們更關(guān)注部署單的實(shí)時(shí)進(jìn)展并做出對(duì)應(yīng)操作，因此完整、清晰、結(jié)構(gòu)化的部署監(jiān)控是應(yīng)用成員的主要訴求，另一方面他們追求操作自由度的訴求與應(yīng)用負(fù)責(zé)人的管控訴求又會(huì)產(chǎn)生沖突；

此外業(yè)務(wù)協(xié)同還反映了與產(chǎn)品信息架構(gòu)之間的映射關(guān)系。并且由于涉及多角色在同一應(yīng)用內(nèi)協(xié)同工作，需要增添一個(gè) “概覽” 作為共同的 “對(duì)話平臺(tái)” 同時(shí)也是進(jìn)入應(yīng)用的 landing 頁(yè)，使 TL 、開(kāi)發(fā)、運(yùn)維可以在我們的產(chǎn)品中簡(jiǎn)單、易上手的協(xié)作起來(lái)（通過(guò)應(yīng)用概覽這一共同語(yǔ)境）。

圖 / 任務(wù)與信息架構(gòu)的映射關(guān)系

理解協(xié)同邏輯才能做出合理的信息架構(gòu)，避免產(chǎn)品淪為功能的無(wú)序堆疊。

同樣的道理，細(xì)分到頁(yè)面子任務(wù)里，從需求本身開(kāi)始細(xì)化、擴(kuò)展場(chǎng)景進(jìn)而實(shí)現(xiàn)設(shè)計(jì)表達(dá)，信息對(duì)于使用者而言的主從關(guān)系就帶來(lái)了頁(yè)面結(jié)構(gòu)的主次關(guān)系：

圖 / 典型案例-工單

---

非獨(dú)立產(chǎn)品

需要與其他矩陣產(chǎn)品的體驗(yàn)一致

如前文所述，AppStack 作為云效子產(chǎn)品矩陣中的一個(gè)，無(wú)論是能力還是交互方式都要與其他產(chǎn)品保證協(xié)同一致，在設(shè)計(jì)實(shí)踐中我們利用 Pixel 設(shè)計(jì)語(yǔ)言體系去規(guī)范按鈕的順序、列表、卡片的應(yīng)用方式等樣式，以及反饋、跳轉(zhuǎn)機(jī)制等底層邏輯上的一致性。

圖 / 基于Pixel的組件規(guī)范

---

通過(guò)類比

應(yīng)對(duì)業(yè)務(wù)壁壘與難理解的技術(shù)邏輯

正如研發(fā)同學(xué)無(wú)法理解我們?cè)O(shè)計(jì)師對(duì)卡片圓角是 4px 還是 8px、陰影是 3% 還是 6% 不透明度、不同顏色密度與情緒的對(duì)應(yīng)關(guān)系的糾結(jié)，我們也無(wú)法理解所謂 “命名空間” 、 “ Kubeconfig 文件” 、 “ Agent 安裝” 是些什么東西，行業(yè)不同帶來(lái)的業(yè)務(wù)認(rèn)知壁壘是B端設(shè)計(jì)師不得不面對(duì)的問(wèn)題，這種 理解上的 “ Gap ” 甚至?xí)屧O(shè)計(jì)師的同理心產(chǎn)生對(duì)產(chǎn)品交互的“負(fù)優(yōu)化”，在這個(gè)過(guò)程中最恰當(dāng)?shù)姆椒ㄊ恰邦惐取薄?/span>

AppStack 的主要業(yè)務(wù)邏輯可以概括成：

圖 / 云效 · AppStack 與其他矩陣產(chǎn)品的關(guān)系簡(jiǎn)圖

管理層提出產(chǎn)品需求 -> 產(chǎn)品、設(shè)計(jì)細(xì)化產(chǎn)品形態(tài)與交互-研發(fā)同學(xué)進(jìn)行產(chǎn)品開(kāi)發(fā) -> 通過(guò) Codeup 進(jìn)行代碼管理、合并 -> 在 Flow 上編譯成鏡像 -> 通過(guò) AppStack 把鏡像和資源關(guān)聯(lián)起來(lái)、逐步部署到測(cè)試環(huán)境、預(yù)發(fā)環(huán)境、生產(chǎn)環(huán)境上并完成測(cè)試驗(yàn)收 -> 用戶收到此產(chǎn)品

在這個(gè)鏡像和資源的關(guān)聯(lián)、進(jìn)而部署的過(guò)程中，需要 2 個(gè)“概念”進(jìn)行輔助：

應(yīng)用編排用來(lái)界定鏡像所使用的內(nèi)存、CPU，以及怎么使用的信息生成一個(gè) Yaml 配置文件反饋給 K8S 或者 ACK，變量組是用來(lái)對(duì)一些重復(fù)使用的概念定義成變量便于管理和變更；

盡管我已經(jīng)采用了非常通俗的白話來(lái)描述這個(gè)業(yè)務(wù)的閉環(huán)鏈路，但是它依舊很難理解，但是我們完全可以采用熟知的概念進(jìn)行類比，譬如：

圖 / 類比關(guān)系

鏡像本身可以看做是一個(gè)蛋糕雛形，最終想要變成蛋糕成品賣給用戶需要經(jīng)過(guò)蛋糕店長(zhǎng)先覺(jué)得使用材料清單、關(guān)鍵材料配比（對(duì)應(yīng)應(yīng)用負(fù)責(zé)人定義應(yīng)用編排、變量組）、后勤準(zhǔn)備材料（對(duì)應(yīng)運(yùn)維負(fù)責(zé)資源導(dǎo)入）、蛋糕師傅經(jīng)過(guò)不斷的試吃（對(duì)應(yīng)應(yīng)用成員將鏡像逐次部署到測(cè)試環(huán)境、預(yù)發(fā)環(huán)境），最終賣給用戶（交付給用戶）。

通過(guò)這些類比，我想你也可以明白業(yè)務(wù)的主要運(yùn)行邏輯是怎么樣了，常言道治大國(guó)如烹小鮮也不外如是，帶著這個(gè)類比的概念再去處理每一個(gè)子場(chǎng)景的需求，譬如Agent安裝（對(duì)應(yīng)材料更好的包裝）就會(huì)容易很多，也不會(huì)與產(chǎn)品全局交互產(chǎn)生明顯的沖突。

Part 3

數(shù)據(jù)反饋能帶來(lái)什么

上線數(shù)據(jù)是檢驗(yàn)一款產(chǎn)品的最好標(biāo)準(zhǔn)，云效 · AppStack 的業(yè)務(wù)目標(biāo)如下圖，對(duì)比 10.19 云棲大會(huì)正式公測(cè)以來(lái)我們收集到的用戶反饋和數(shù)據(jù)表現(xiàn)：

圖 / 數(shù)據(jù)表現(xiàn)(隱去敏感數(shù)據(jù))

數(shù)據(jù)反映了當(dāng)前的產(chǎn)品體驗(yàn) 低谷點(diǎn)在于互動(dòng)階段的前鏈路（即運(yùn)維人員的導(dǎo)入資源這里），分析其原因：第一障礙主要是資源作為付費(fèi)使用的商品對(duì)于新用戶而言的確有勸退門(mén)檻，后續(xù)的迭代中可以進(jìn)一步的通過(guò)增設(shè)免費(fèi)集群的體驗(yàn)方案來(lái)幫助這一部分用戶實(shí)現(xiàn)留存；第二障礙涉及技術(shù)方案的簡(jiǎn)化，在這里就不贅述了。

主鏈路上的數(shù)據(jù)埋點(diǎn)尚未完成，之后有用戶數(shù)據(jù)了可以在分析這一部分給設(shè)計(jì)帶來(lái)的機(jī)會(huì)點(diǎn)。

The end

寫(xiě)在最后

初期我也曾迷茫于自身作為設(shè)計(jì)職能在B端業(yè)務(wù)中的價(jià)值所在，與以往設(shè)計(jì)實(shí)踐迥然不同的信息密度和使用邏輯、產(chǎn)品矩陣的一致性要求，讓我一度懷疑自身是不是個(gè)“拼組件的”（深夜知乎推給你，B端設(shè)計(jì)師會(huì)被組件庫(kù)取代嗎？），但當(dāng)我在平時(shí)的探索練習(xí)中使用After Effects、Rhino這些典型的B端軟件產(chǎn)品時(shí)（只不過(guò)是面向單一的角色：設(shè)計(jì)師），它們的架構(gòu)、層級(jí)、信息密度比我當(dāng)前負(fù)責(zé)的業(yè)務(wù)有過(guò)之而無(wú)不及，可它們的設(shè)計(jì)都讓我覺(jué)得“好用”、“舒服”、“能達(dá)成我創(chuàng)意設(shè)計(jì)的價(jià)值”，談不上簡(jiǎn)約美觀的界面卻因其不同功能下的微小交互讓整個(gè)工作流順暢無(wú)比，在我的業(yè)務(wù)中又何必囿于現(xiàn)狀、作繭自縛呢？

圖 / Adobe After Effects

圖 / Rhino

正如 佐藤大《由內(nèi)向外看世界》 中所述：

設(shè)計(jì)師的工作不是制作奇形怪狀的東西，也不是簡(jiǎn)單地讓物體看起來(lái)更有型。所謂設(shè)計(jì)，本質(zhì)上就是為解決問(wèn)題尋找新方法...當(dāng)有人想到掉杯子中水時(shí)，誰(shuí)都能想到傾斜杯子，倒出里面的水...事實(shí)上要達(dá)到這個(gè)目的，還有很多方法。例如你可以通過(guò)加熱讓杯子里的水蒸發(fā)；放入一根繩子將水分吸收出來(lái)；將杯子放入無(wú)重力環(huán)境中，水就會(huì)漂浮在空氣之中；可以在底部開(kāi)一個(gè)小洞，讓誰(shuí)慢慢流出來(lái)；甚至可以將水杯放進(jìn)裝滿水的水槽中，這樣杯子里的水就相當(dāng)于不存在了...設(shè)計(jì)師正是以全新的方法為客戶創(chuàng)造更多的價(jià)值...不要讓自己被常規(guī)思維限制，也別忘了重點(diǎn)是要達(dá)到該杯子騰空的目的。 

最后，云效·Appstack公測(cè)中，歡迎登錄體驗(yàn)??

https://www.aliyun.com/product/yunxiao/appstack?spm=5176.168087.J_2805946210.4.913757a3Gs6GMP

—  The end  —

以下三分設(shè)文章，你可能也感興趣

▽ 

?? 原創(chuàng)文章精選??

告別加班！使用設(shè)計(jì)系統(tǒng)方法更快地構(gòu)建產(chǎn)品

如何評(píng)估設(shè)計(jì)質(zhì)量，提升設(shè)計(jì)技能

你常常忽略的 7 個(gè)具有破壞性的體驗(yàn)鴻溝

一篇文章告訴你服務(wù)設(shè)計(jì)到底能做什么？

看 Apple CarPlay 如何提升駕駛安全和駕駛體驗(yàn)

一起看看《對(duì)馬島之魂》如何打造初次對(duì)抗體驗(yàn)

制定 “小目標(biāo)”，了解產(chǎn)品管理中的結(jié)構(gòu)化思維

35+ 的 Windows 系統(tǒng)到底有什么了不起？

導(dǎo)師與學(xué)員的高效交流 APP 設(shè)計(jì) —— Lightship

?? 我們一起聊設(shè)計(jì) ???♂?

高質(zhì)量，學(xué)設(shè)計(jì)行交流微信群

期待與更多優(yōu)秀用戶體驗(yàn)設(shè)計(jì)師一起成長(zhǎng)

PS：歡迎大家關(guān)注三分設(shè)，每天早上9點(diǎn)，準(zhǔn)時(shí)充電。分享優(yōu)質(zhì)設(shè)計(jì)、創(chuàng)意靈感、新知新識(shí)，定期大咖老師直播分享，零距離連麥，答疑解惑。 添加小小蟲(chóng)微信號(hào)【 Lil_Bug 】，備注【 三分設(shè) 】加入！（只面向星標(biāo)了公眾號(hào)三分設(shè)的粉絲） 

點(diǎn)亮『在看』，百萬(wàn)年薪↓↓