主持：元寶｜嘉賓：赫本

《EXD 設(shè)計(jì)訪談》是由 EXD（易知微用戶體驗(yàn)設(shè)計(jì)團(tuán)隊(duì)）制作的一檔設(shè)計(jì)聊天欄目，主要和你分享我們?cè)谝字⑦@家公司里，關(guān)于 B 端工具設(shè)計(jì)、可視化內(nèi)容設(shè)計(jì)、ToB 品牌運(yùn)營設(shè)計(jì)方面的工作心得、設(shè)計(jì)故事等等。

這是本欄目的第??期，邀請(qǐng)了?EasyV這款可視化 & 數(shù)字孿生設(shè)計(jì)搭建工具的主設(shè)計(jì)師赫本（花名），從最近上線的“組件容器”功能切入，來聊聊 B 端工具類產(chǎn)品的設(shè)計(jì)經(jīng)驗(yàn)和故事。

本文目錄

01 組件容器究竟是個(gè)什么功能？克隆器？聚寶盆？

02 為啥“組件容器”要叫“組件容器”？

03B端設(shè)計(jì)師的價(jià)值自證瓶頸

04對(duì)于“沒啥反饋”的產(chǎn)品/功能，要如何看待自己的設(shè)計(jì)價(jià)值？

05B端？C端？EasyV產(chǎn)品設(shè)計(jì)師的職業(yè)思考

06 最后，“翻車”度+1，真實(shí)度+100

圖：赫本的“工位寫真”

組件容器究竟是個(gè)什么功能？克隆器？聚寶盆？

元寶：歡迎赫本，簡單自我介紹一下，然后咱們就切入正題吧～

赫本：大家好，我是 EasyV 產(chǎn)品的主設(shè)計(jì)師赫本，負(fù)責(zé) EasyV 這款可視化和數(shù)字孿生設(shè)計(jì)&搭建產(chǎn)品的 UI、交互體驗(yàn)設(shè)計(jì)，設(shè)計(jì)從業(yè) 6 年，做 EasyV 已經(jīng)有 2 年多時(shí)間了。（文末放了赫本的過往設(shè)計(jì)文章）

元寶：可以用設(shè)計(jì)師的視角，一句話介紹下“組件容器”是什么功能嗎？

赫本：在組件容器里面可以自由拼接組件，然后將整體打包成一個(gè)實(shí)例，這個(gè)實(shí)例會(huì)被復(fù)制為多個(gè)去使用。
元寶：解釋得稍微有些官方，可以再通俗點(diǎn)嗎？另外為啥要做這個(gè)功能？

赫本：比方說我們要生成一片森林，需要先做一個(gè)樹，我們就要先去做樹枝、樹干、樹葉，包括它的材質(zhì)和紋理等等。當(dāng)我們把所有樹的元素做好后，就可以重復(fù)地去使用這棵樹，重復(fù)之后就變成森林，而組件容器就是干這個(gè)的（把一棵樹復(fù)制成一片森林）。我們可以通過數(shù)據(jù)驅(qū)動(dòng)來操控這個(gè)森林——要展示多少棵樹、是什么樣的布局、是密集還是稀疏點(diǎn)...組件容器可以節(jié)省我們很多重復(fù)復(fù)制的工作。
元寶：那是不是可以理解為，組件容器它就是克隆的作用？

赫本：是有相似的作用。

元寶：那使用組件容器一共分幾步？精簡地說一下～

赫本：三步：1??創(chuàng)建組件容器，設(shè)置好寬高布局；2??雙擊進(jìn)入組件容器內(nèi)部，自由拼接多個(gè)組件；3??返回外層，填寫數(shù)據(jù)內(nèi)容分發(fā)。

圖：組件容器使用步驟

為啥“組件容器”要叫“組件容器”？

元寶：我了解到“組件容器”最初不是叫“組件容器”，聊聊為啥改名吧。

赫本：最初產(chǎn)品經(jīng)理給到的叫法是“預(yù)制體”，也是我們內(nèi)部最開始的一個(gè)叫法，但確實(shí)不太好理解。因?yàn)椤邦A(yù)制體”是游戲引擎 Unity 里相似功能的叫法，但我們 EasyV 的用戶不一樣，我作為一個(gè)設(shè)計(jì)師都沒有特別了解這個(gè)名詞，所以我們想了一個(gè)可能更好理解的，這個(gè)功能是通過拼接組件去生成的一個(gè)容器，因此我們就改叫“組件容器”了。
元寶：基于剛剛聊的，既然和“克隆”很像，為啥不叫“克隆器”呢？

赫本：這個(gè)功能它不完全是克隆。組件容器是通過組件去衍生復(fù)制的，但跟克隆不完全一樣，它復(fù)制出來的個(gè)體是通過數(shù)據(jù)去生成和控制的，可以批量生成，比如第一個(gè)樹的樹葉數(shù)值200，第二個(gè)樹用數(shù)據(jù)驅(qū)動(dòng)生成展示樹葉數(shù)值500，另外可以設(shè)定組件容器的排布（幾行幾列），它可以滾動(dòng)瀏覽（超過組件容器可視范圍時(shí)），所以叫“克隆器”也不是那么合適。
元寶：有句話大概是這么說的——“名字即功能本身”，就是說好的名字可以抵消很多解釋成本，那你現(xiàn)在來看“組件容器”是一個(gè)好的名字嗎？

赫本：我認(rèn)為比最初的“預(yù)制體”要更好理解的，更適合 EasyV 的用戶群體——把組件放到一個(gè)容器里去使用。

元寶：我想到這個(gè)容器就像聚寶盆，放錢進(jìn)去會(huì)復(fù)制出更多的錢，哈哈哈。

B端設(shè)計(jì)師的價(jià)值自證瓶頸

元寶：設(shè)計(jì)“組件容器”這個(gè)功能的過程里，最難的一點(diǎn)是什么？怎么解決的？（好像面試哈哈哈）

赫本：它整一個(gè)編輯的交互形式設(shè)計(jì)是最難的。最初我們?cè)O(shè)定的布局邏輯，從技術(shù)角度將組件容器的畫布進(jìn)行了一個(gè)分割，比如設(shè)置為 3 行，那就被分割成了 3 塊來顯示，我們編輯組件就只能在分割好的區(qū)域里，操作區(qū)域很小很受限，沒那么好理解，呈現(xiàn)得也比較雜亂，當(dāng)時(shí)我們就陷入了分割“行”的這個(gè)怪圈?里，遇到了各種問題，最后推敲了很久才做成了“無限畫布”的交互形式。

元寶：說實(shí)話，我沒聽懂...

赫本：就是....（此處略去一大段口頭交流，為了推動(dòng)理解和進(jìn)度?♂?，我們決定把設(shè)計(jì)稿翻出來看著說）
赫本：好，來看～這是最初的交互方案（見配圖方案A），是從技術(shù)的可實(shí)現(xiàn)角度出發(fā)的，用「自動(dòng)布局」設(shè)置的行數(shù)來分割畫布，如 4 行則為 4 塊，但這會(huì)產(chǎn)生 3 個(gè)問題：

1??. 這樣分割畫布的形式操作起來不靈活，操作區(qū)域局限，理解起來會(huì)有一定難度；

2??. 在二級(jí)編輯頁編輯完后，返回一級(jí)頁時(shí)，平臺(tái)會(huì)自動(dòng)切掉空白區(qū)域，那么組件位置會(huì)變動(dòng)到左上角，會(huì)產(chǎn)生位移，讓用戶感到疑惑；

3??. 如果改了行，那單行的展示效果會(huì)變，需要下鉆二級(jí)編輯頁重新調(diào)整，不好把控。

圖：組件容器的最初設(shè)計(jì)方案

元寶：大概理解了它的難點(diǎn)，那為啥進(jìn)入組件容器后，不給一個(gè)畫布區(qū)域呢？這樣我都不知道我的邊界在哪里...

赫本：其實(shí)你這個(gè)疑問就是剛說的第二點(diǎn)。如果像你說的，在進(jìn)入二級(jí)編輯頁（也就是組件容器內(nèi)層）時(shí)候，設(shè)定為一個(gè)固定的畫布區(qū)域，這時(shí)我將組件放在居中，但是返回一級(jí)頁時(shí)，平臺(tái)機(jī)制會(huì)自動(dòng)切掉空白區(qū)域去做復(fù)制和布局，這時(shí)組件會(huì)自動(dòng)放到左上角，這個(gè)位置漂移就不好解釋啦～所以干脆就不要限制畫布區(qū)域，做成「無限畫布」。

元寶：哦！我懂了，就是進(jìn)入到組件容器內(nèi)部后，是不能有畫布概念的，“聚寶盆”做復(fù)制的時(shí)候，不會(huì)計(jì)算空白區(qū)域。

赫本：對(duì)！然后呢，其實(shí)又產(chǎn)生了新的問題，就像你說的無法把控這個(gè)邊界在哪里，因此我想了一個(gè)交互，就是用戶 hover 到組件上是可以看到組件容器的大?。刺摼€框），然后組件容器虛線范圍框始終以最左上的組件的左上角為原點(diǎn)出現(xiàn)，這樣就有個(gè)大小位置的參照。

元寶：了解，到時(shí)候也放個(gè)圖吧（見配圖方案B），不對(duì)著圖光靠說真的很難理解到位。

圖：組件容器最后采取的交互方案

元寶：天吶，我們都是設(shè)計(jì)師，聊這么一個(gè)方案都聊了這么久才清晰，我覺得這個(gè)設(shè)計(jì)價(jià)值藏得很深，你不說的話，我完全不知道這樣設(shè)計(jì)的原因和過程。
赫本：很多復(fù)雜的功能，旁人看來可能覺得“也就那樣”，甚至還覺得“很智障”，但當(dāng)事人才知道花了多少時(shí)間和功夫，做了哪些妥協(xié)和權(quán)衡。
元寶：我突然更能理解你在體現(xiàn)設(shè)計(jì)價(jià)值上的難處了。
赫本：哈哈，就像做海報(bào)，臨摹一下很快、很簡單，但想做精美（美觀且符合具體的客戶預(yù)期、目的），其實(shí)要通過不斷的細(xì)節(jié)打磨。
元寶：可能還更難唉，像你講這個(gè)“無限畫布”，又沒有相似的競品可以參照，完全要自己想。

元寶：如果不是這次訪談，你會(huì)把這個(gè)點(diǎn)寫下來分享嗎？

赫本：很可能不會(huì)，迭代工作比較緊湊，而且一般沒人特意來好奇你為什么這樣設(shè)計(jì)，這次和你聊的過程里，發(fā)現(xiàn)很多細(xì)節(jié)我都快記憶模糊?了，看了設(shè)計(jì)稿才漸漸想起來。

元寶：聊到這，我發(fā)現(xiàn)我們作為中小型 ToB 公司的設(shè)計(jì)師，好像普遍都有這樣的瓶頸——很多功能背后的深度思考很難被感知到，可能大家也不好奇和關(guān)心，加上解釋起來也比較復(fù)雜和費(fèi)力，工作節(jié)奏又快的話，這些設(shè)計(jì)思考真的就隨時(shí)間淡忘了。

赫本：對(duì)，你發(fā)現(xiàn)了～

元寶：所以 B 端設(shè)計(jì)師更要自證設(shè)計(jì)價(jià)值，那對(duì)于這個(gè)現(xiàn)象或者說瓶頸，你有想到啥好的解決辦法嗎？

（經(jīng)過一段 long long 的對(duì)話后，我們對(duì)這個(gè)問題有了一些真實(shí)的、更具體的解決思路，為了便于閱讀，以下是總結(jié)整理??，一共 4 點(diǎn)）

1??、首先還是要先把事情做好、思考到位，然后才是證明自己的設(shè)計(jì)價(jià)值，就是你得先有價(jià)值，才能證明自己的價(jià)值。
2??、保持記錄的習(xí)慣，當(dāng)自己在工作里有困惑、有成長的時(shí)刻，馬上記下來??，這是寫作的材料和基礎(chǔ)——“你寫的就是你做的”。
3??、寫作能力方面：先做到把事情寫清楚、有邏輯，然后能把過于專業(yè)的內(nèi)容進(jìn)行翻譯、轉(zhuǎn)換，達(dá)到更通俗、方便理解；多去分析、學(xué)習(xí)優(yōu)秀設(shè)計(jì)文章的結(jié)構(gòu)、思維。
4??、關(guān)于寫作時(shí)間吃緊：沉淀設(shè)計(jì)文章對(duì)于自己價(jià)值是很大的，利于自己的長遠(yuǎn)發(fā)展，時(shí)間擠擠總是有的，想要優(yōu)秀就是要刻苦一些。（這一點(diǎn)是套話發(fā)言版，真實(shí)版在下邊??）

4??、我們充分知道「設(shè)計(jì)工作和設(shè)計(jì)寫作都是腦力、精力消耗大項(xiàng)」，也理解「每天打完工還要加班寫文章？我知道對(duì)我價(jià)值大，但是我堅(jiān)持不下去」的難處，我們也是茫茫打工人的一員，自問距離拔尖也還有距離，所以這有幾點(diǎn)建議或許能改善我們?cè)趯懽魃系臓顟B(tài)：

?、充分認(rèn)可沉淀輸出對(duì)于設(shè)計(jì)師、公司的長遠(yuǎn)價(jià)值，擺脫“寫作不是正事，沒有給公司創(chuàng)造價(jià)值”的思維，利用寫作將產(chǎn)品功能的思考價(jià)值傳遞出去，也是你作為產(chǎn)品設(shè)計(jì)師工作的一部分。
?、盡力為自己爭取到設(shè)計(jì)寫作的「工作時(shí)間?」，爭取時(shí)間可以是通過工具、流程的提效，也可以是補(bǔ)充人手，也可以是把設(shè)計(jì)輸出加入 KPI 去執(zhí)行...
?、比起“用力”擠出時(shí)間寫作，也許更重要的是培養(yǎng)寫作的習(xí)慣，放下對(duì)寫完后獲得夸獎(jiǎng)、關(guān)注的過高期待，讓自己進(jìn)入“簡單快樂寫作”的狀態(tài)并享受它。

對(duì)于“沒啥反饋”的產(chǎn)品/功能，要如何看待自己的設(shè)計(jì)價(jià)值？

元寶：“組件容器”功能上線也有一段時(shí)間了，有收到一些反饋嗎，怎么看待這些反饋？

赫本：用戶反饋的話其實(shí)是比較正向的，原先沒有這個(gè)功能的時(shí)候，用戶要把每個(gè)（相似的組件）都去做一遍，一個(gè)個(gè)接數(shù)據(jù)，那現(xiàn)在只需要做好一個(gè)，再用數(shù)據(jù)去驅(qū)動(dòng)分發(fā)，那就節(jié)省了很多時(shí)間；然后業(yè)務(wù)側(cè)那邊（主要是項(xiàng)目團(tuán)隊(duì)的設(shè)計(jì)師和開發(fā)同事們）也達(dá)到了他們的預(yù)期，他們也覺得這個(gè)東西是十分提效的。

元寶：確實(shí)，我也聽到了不錯(cuò)的反饋

赫本：可以幫助到 EasyV 用戶就好
元寶：你會(huì)怎么判斷自己設(shè)計(jì)的某項(xiàng)功能成不成功，特別是那些“缺乏用戶反饋聲音”的功能？

赫本：（內(nèi)心：這問題有點(diǎn)犀利?。┦紫冗€是要看有沒有幫到真實(shí)的用戶，然后對(duì)于沒啥反饋的功能，也不能直接說它就不好，你要看它的受眾用戶，我們的 EasyV 用戶里也會(huì)細(xì)分，每類用戶的數(shù)量、習(xí)慣也不一樣，所以反饋上可能就不如預(yù)期那么好，這也是做產(chǎn)品的常態(tài)，保持平常心??。
元寶：我們作為設(shè)計(jì)師，一個(gè)輔助產(chǎn)品成功的角色，當(dāng)產(chǎn)品結(jié)果不理想的時(shí)候，好像連帶著我們的價(jià)值也被否定了，你有這種感受嗎？

赫本：多少會(huì)有點(diǎn)的。當(dāng)被用戶吐槽某個(gè)產(chǎn)品、功能的時(shí)候，我不相信參與的設(shè)計(jì)師內(nèi)心沒有挫敗感。
元寶：那如果設(shè)計(jì)了一個(gè)沒啥反響的功能，你會(huì)認(rèn)為自己的設(shè)計(jì)是失敗的嗎？

赫本：這種情況在設(shè)計(jì)圈應(yīng)該是挺多的吧？很多 C 端產(chǎn)品沒做起來，但就直接說這個(gè)設(shè)計(jì)師做的設(shè)計(jì)不好、沒價(jià)值，也不能吧？沒啥反響的原因可能有很多——用戶調(diào)研沒做好、定位問題、宣傳問題等等，還是要分開來看。
元寶：也許我們討論「產(chǎn)品結(jié)果和設(shè)計(jì)師價(jià)值關(guān)系」這個(gè)話題的更大意義是——怎么去客觀評(píng)價(jià)自己的設(shè)計(jì)結(jié)果，特別是產(chǎn)品結(jié)果不理想的時(shí)候。

赫本：那最直接的就是，面試的時(shí)候，被問到某個(gè)產(chǎn)品或者功能的落地情況，問你這個(gè)功能有多少用戶使用、評(píng)價(jià)幾分，但我覺得這不是面試官最關(guān)心的，設(shè)計(jì)面試官最關(guān)心應(yīng)該還是你的交互思維、設(shè)計(jì)邏輯這些能力本身。

元寶：我也是這么想的，之前面試設(shè)計(jì)師的時(shí)候，我也會(huì)問一些落地情況，但不是只想聽到好的結(jié)果，而是想聽到他的客觀分析，就算結(jié)果不好，能分析出一些原因出來，我也會(huì)覺得他是認(rèn)真做事和自信的，不是自負(fù)和只做“懸空”設(shè)計(jì)。

赫本：對(duì)，另外這也需要心理素質(zhì)好一些。我相信每個(gè)設(shè)計(jì)師在設(shè)計(jì)的時(shí)候都是奔著這個(gè)功能能“爆”（得到很多好評(píng)）去的，但是最終的這個(gè)結(jié)果，就不是我們?cè)O(shè)計(jì)師能全力控制的了，所以做的時(shí)候盡心做，但結(jié)果不好也不要直接得出“設(shè)計(jì)失敗”的結(jié)論。

B端？C端？EasyV 產(chǎn)品設(shè)計(jì)師的職業(yè)思考

元寶：聊到這里，能通過“組件容器”看到你作為 EasyV 產(chǎn)品設(shè)計(jì)師的工作細(xì)節(jié)和“縮影”，現(xiàn)在我們來聊聊職業(yè)發(fā)展吧～你覺得大眾眼里的 B 端設(shè)計(jì)和我們?cè)谧龅?EasyV 這樣的 B 端工具類產(chǎn)品設(shè)計(jì)，有什么差別？

赫本：大眾印象里的 B 端，大多就是一些后臺(tái)、圖表、表格、卡片之類的系統(tǒng)界面，我們搜 B 端靈感的時(shí)候，也基本都是看數(shù)據(jù)信息、圖表的展示形式，而 EasyV 是一個(gè)工具類產(chǎn)品，典型的就是大屏的編輯頁，用來編輯繪制圖表地圖等，展示配置參數(shù)信息，功能操作更多、使用邏輯更復(fù)雜。

元寶：所以，就像之前我們內(nèi)部有人說，做 EasyV 就像是做可視化界的 PS，可以類比成「PS 做東西」和「做 PS」？

赫本：可以這么理解，最大的區(qū)別就是「用工具展示信息」和「做展示信息的工具」。

元寶：如果一個(gè)想做 B 端的新人問你，要把像 EasyV 這樣的產(chǎn)品設(shè)計(jì)好，需要具備什么能力，你會(huì)怎么回答？

赫本：首先還是視覺，視覺是設(shè)計(jì)師的基本功，這個(gè)一定要過關(guān)。（不是 B 端設(shè)計(jì)就不用看視覺）

元寶：視覺是指 icon 畫的好不好這樣嗎？

赫本：只是其中之一，對(duì)設(shè)計(jì)風(fēng)格的把控、設(shè)計(jì)細(xì)節(jié)的處理、整個(gè)精致度、顆粒度。然后就是交互設(shè)計(jì)能力，比如一個(gè)功能，要分幾步實(shí)現(xiàn)、每一步怎么設(shè)計(jì)、為什么這么設(shè)計(jì)，這些去看交互設(shè)計(jì)能力和思維。

元寶：我看到過一些文章講 B 端的視覺要求更偏向一致性、規(guī)范性，還是比較好感知到視覺水平的，畢竟都像是“拼組件”，但也不是每個(gè)人都拼得好。交互的考察就比較深一點(diǎn)，你會(huì)怎么評(píng)估候選人的交互能力？

赫本：就是問?，問他這個(gè)功能怎么想的，去問具體的細(xì)節(jié)。比如有一次，看到一個(gè)實(shí)習(xí)候選人的作品集，里面有個(gè)讀書類 APP 的設(shè)計(jì)，他把圖書排名做成輪播形式，每次只能看到一本書的封面和信息，其他全是只有一個(gè)書名，這個(gè)設(shè)計(jì)在手機(jī)端是不合適的，一般都是一組一組輪播，每一個(gè)都有圖文信息，這樣才是方便用戶瀏覽和選擇的。

元寶：那你當(dāng)時(shí)有問他為啥這么設(shè)計(jì)嗎？

赫本：沒有問到，因?yàn)榫C合評(píng)估下來那份簡歷沒有通過，我猜測應(yīng)該是直接臨摹某個(gè)參考，沒有深入去想，就想著這么做好看、有對(duì)比，但沒有思考這種功能的本質(zhì)和目的是什么，所以像這種常見的模塊設(shè)計(jì)都沒有做好，我會(huì)覺得他缺乏了些交互思維和敏感性。
元寶：我知道你之前也做過 C 端設(shè)計(jì)，在「B端、C端怎么選」這個(gè)話題上你有啥看法？

赫本：我覺得很多設(shè)計(jì)能力、思維是共通的，不應(yīng)該限制自己，除了那種創(chuàng)意設(shè)計(jì)師，十分偏向視覺，那在 C 端大概率會(huì)吃得更開。

元寶：你為啥選擇 B 端設(shè)計(jì)呢？

赫本：（尷尬笑）其實(shí)我沒有刻意選，沒給自己定那么死。說一些我感受到的行業(yè)差別吧，可能 C 端的玩法更多更有趣一些，什么情感化設(shè)計(jì)呀，能被別人很快、很直接感知到，但是 B 端是“效率”優(yōu)先，很多設(shè)計(jì)價(jià)值就像我們今天聊的，藏在深處和細(xì)節(jié)里，工作感受還是很不一樣的，建議還是自己都嘗試一下再做判斷。

最后，“翻車”度+1，真實(shí)度+100

元寶：聊了一個(gè)半小時(shí)了，你對(duì)咱們第一次設(shè)計(jì)訪談?dòng)猩陡惺芎徒ㄗh？

赫本：感覺聊得很開，很多問題還是你新 cue 的，我都沒準(zhǔn)備，有點(diǎn)“翻車”、不太流暢的感覺?♀?，但我們聊的都挺有反思的，不是白開水，我覺得這點(diǎn)不錯(cuò)。

元寶：的確，組件容器設(shè)計(jì)都過去 1 個(gè)多月了吧，最理想的應(yīng)該是你剛做完的時(shí)候聊，那會(huì)兒還記得設(shè)計(jì)細(xì)節(jié)。至于“翻車”、不流暢，我覺得更真實(shí)，畢竟你準(zhǔn)備了的話，會(huì)像念套話，哈哈哈。

End：我們希望通過對(duì)話去關(guān)注、剖析、挖掘團(tuán)隊(duì)里每一位設(shè)計(jì)師個(gè)體的自我設(shè)計(jì)價(jià)值，如果正好能給你帶來一些啟發(fā)，那就更好了！歡迎在評(píng)論區(qū)和我們交流，另外關(guān)注我們，下期更精彩?～

相關(guān)閱讀推薦
設(shè)計(jì)復(fù)盤 | EasyV企業(yè)協(xié)作空間設(shè)計(jì)思路全解析（赫本）
EasyV數(shù)字孿生可視化｜2022品牌官網(wǎng)設(shè)計(jì)復(fù)盤（赫本）
赫本的站酷主頁

策劃：元寶
嘉賓：赫本
整理編輯：元寶、赫本
封面/頭圖設(shè)計(jì)：?丹丹
運(yùn)營支持&感謝：?♀?灰象