“如果我有一個(gè)小時(shí)去解決問(wèn)題，我會(huì)花55分鐘去思考這個(gè)問(wèn)題，然后用5分鐘來(lái)想解決方案。”——佚名

我們是來(lái)自CareerBuilder的交互設(shè)計(jì)師Havana和視覺(jué)設(shè)計(jì)師Ada，我們的視覺(jué)設(shè)計(jì)負(fù)責(zé)人Mark Patterson給了我們一個(gè)任務(wù)：設(shè)計(jì)表格的UI規(guī)范，用在包含不同用例和不同目標(biāo)用戶(hù)的產(chǎn)品線上。我們使用到的方法涉及到快速確定目標(biāo)和問(wèn)題的核心，并在早期通過(guò)測(cè)試驗(yàn)證我們的想法。生成高效的解決方案，快速獲得團(tuán)隊(duì)認(rèn)可，最后使用用戶(hù)測(cè)試進(jìn)行驗(yàn)證。

表格設(shè)計(jì)是一件有挑戰(zhàn)性的事

當(dāng)我們審閱各個(gè)產(chǎn)品團(tuán)隊(duì)的原型時(shí)，我們發(fā)現(xiàn)這些表格是不一致的——它們有多樣化的UX設(shè)計(jì)解決方式。尺寸、鏈接、CTA、過(guò)濾器、排序以及分頁(yè)到處都是：

（其他產(chǎn)品線上的表格）

我們需要一種能夠普遍服務(wù)所有產(chǎn)品的用例，并且適用于未來(lái)將會(huì)出現(xiàn)的產(chǎn)品和功能模式。

我們的視覺(jué)設(shè)計(jì)主管發(fā)出了特定的用戶(hù)界面元素，我們承認(rèn)，當(dāng)我們被分配到表格設(shè)計(jì)時(shí)，我們很害怕。表格是一個(gè)幾乎每個(gè)產(chǎn)品都使用到的模塊。GareerBuilder這個(gè)產(chǎn)品服務(wù)于多種類(lèi)型的用戶(hù)：求職者、招聘人員以及人力資源部門(mén)。每個(gè)產(chǎn)品在使用場(chǎng)景、用戶(hù)目標(biāo)以及功能上都存在巨大差異。我們?nèi)绾尾拍軇?chuàng)造出足夠靈活的表格呢？

更重要的是，我們都在不同的城市，所有的協(xié)作都必須遠(yuǎn)程進(jìn)行。

開(kāi)始設(shè)計(jì)

接到表格設(shè)計(jì)的任務(wù)后，我們立馬開(kāi)了一個(gè)一個(gè)小時(shí)的電話(huà)會(huì)議。我們的目標(biāo)是往后退一步，回到全局：

1.用戶(hù)一般使用表格上做些什么？在電話(huà)會(huì)議上，我們查看了pattrns.com的幾個(gè)例子，推斷表格背后的用戶(hù)目標(biāo)。我們最終總結(jié)出了3個(gè)用戶(hù)目標(biāo)：

• 一次性瀏覽大量信息，例如：展示多個(gè)項(xiàng)目以及對(duì)應(yīng)的狀態(tài)
• 快速確定并執(zhí)行操作，例如：刪除多行、下載多個(gè)項(xiàng)目等
• 對(duì)比信息，例如：有多少個(gè)項(xiàng)目完成，有多少個(gè)項(xiàng)目正在進(jìn)行

（一些表格的例子）

2.表格設(shè)計(jì)上最大的難點(diǎn)是什么？我們需要設(shè)計(jì)一個(gè)支持排序、多選、批處理以及數(shù)據(jù)分組的表格。并不是所有的表格都需要這些功能，但是這些特性都是我們需要討論的。

3.表格可以被模塊化嗎？我們把表格分成這些模塊：

• 分頁(yè)
• 擴(kuò)展視圖
• 編輯模式
• 行為召喚
• 定制
• 單元格截?cái)?/li>
• icon/圖片的使用
• 未讀/已讀標(biāo)識(shí)

在5周里，我們碰面了4次，共享我們所獲取的信息，在目標(biāo)和思考方向上達(dá)成共識(shí)。會(huì)議后，我們研究了各自分配的組件并有了一些初步的想法。我們把這些想法收集起來(lái)，并且在5天后開(kāi)了一次會(huì)議。在這個(gè)早期迭代會(huì)議上，我們的目標(biāo)是簡(jiǎn)單地展示初步解決方案。

基于許多我們不熟悉的用戶(hù)案例，我們想通過(guò)測(cè)試來(lái)驗(yàn)證這些想法，剔除存在的可用性問(wèn)題、功能缺陷，指出潛在問(wèn)題和我們的想法。參與的不僅僅有用戶(hù)體驗(yàn)團(tuán)隊(duì)的成員，還邀請(qǐng)了主要開(kāi)發(fā)人員來(lái)確保我們的想法在技術(shù)上是可以實(shí)現(xiàn)的。我們開(kāi)這個(gè)會(huì)，就是為了為了避免浪費(fèi)時(shí)間在最終迭代會(huì)失敗的問(wèn)題上。同時(shí)也保證了整個(gè)團(tuán)隊(duì)可以快速進(jìn)入狀態(tài)。

（表格相關(guān)的一些筆記和草圖）

我們?nèi)〉昧艘恍┓答?，接著我們開(kāi)始新一輪的迭代來(lái)調(diào)整我們所發(fā)現(xiàn)的問(wèn)題。我們中途還進(jìn)行了一次會(huì)議，來(lái)確保各自的項(xiàng)目進(jìn)度，確定已完成工作和接下來(lái)的工作。然后在展示給團(tuán)隊(duì)的會(huì)議上縮小選項(xiàng)提交并校對(duì)，確保我們不錯(cuò)過(guò)任何狀態(tài)。

在這個(gè)過(guò)程中，我們使用sketch以及craft裝載的公司內(nèi)部樣式庫(kù)。

（我們的工作流程）

表格的組成

如果你正在設(shè)計(jì)一個(gè)表格，我們對(duì)不同組件進(jìn)行的處理可供參考（我們使用了虛擬的數(shù)據(jù)）：

分頁(yè)

之前，我們使用的是簡(jiǎn)單的數(shù)字分頁(yè)。想象一下在幾百個(gè)頁(yè)面中跳轉(zhuǎn)到563頁(yè)會(huì)怎么樣？連續(xù)翻562頁(yè)是一個(gè)非常痛苦的體驗(yàn)，所以我們引入了一個(gè)“跳轉(zhuǎn)至頁(yè)面”的下拉菜單。同時(shí)包括一個(gè)“每頁(yè)顯示x個(gè)結(jié)果”的下拉菜單，讓用戶(hù)能夠自定義他們想要看到的內(nèi)容。分頁(yè)展示是這樣的：

（分頁(yè)）

然而，我不是很確定如果我在第4頁(yè)時(shí)，這個(gè)分頁(yè)是什么樣的。

（用戶(hù)瀏覽不同頁(yè)面時(shí)分頁(yè)的展現(xiàn)）

最后，我們?cè)试S各自的產(chǎn)品團(tuán)隊(duì)來(lái)決定哪一類(lèi)的分頁(yè)最適用于他們的產(chǎn)品。

“當(dāng)你設(shè)計(jì)一個(gè)適用于多個(gè)產(chǎn)品的組件時(shí)，你必須要變得靈活”

（分頁(yè)的不同展示選項(xiàng)）

我們?cè)谠O(shè)計(jì)分頁(yè)時(shí)學(xué)到的最主要的東西是：循序漸進(jìn)，深入挖掘，發(fā)現(xiàn)背后隱藏的復(fù)雜性。（警示：總是有一些隱藏的復(fù)雜性。）

編輯模式

我們所做的產(chǎn)品中一個(gè)特性是可以編輯特定單元格，當(dāng)前的設(shè)計(jì)方式是讓所有可編輯的單元格在視覺(jué)上保持一個(gè)文本輸入框的樣式。這造成了一個(gè)令人困惑的體驗(yàn)——用戶(hù)該怎么去保存這些編輯過(guò)的數(shù)據(jù)呢？目前的設(shè)計(jì)并不明確。

（可編輯內(nèi)容以文本框形式展示）

另一個(gè)問(wèn)題就是這樣容易造成誤操作。用戶(hù)很容易意外編輯了錯(cuò)誤的單元格——它可以取消嗎？它會(huì)自動(dòng)保存嗎？其中的交互并不明確。

這種模式的好處是能夠很清晰地展示什么是可以編輯的，什么是不可以的。在上面的例子中，用戶(hù)可以修改藝術(shù)家的名字以及郵箱地址，但不能更改日期。我們最終決定保留這一優(yōu)點(diǎn)，但是更精確地符合用戶(hù)的期望。

絕大多數(shù)用戶(hù)對(duì)特定的圖標(biāo)很熟悉，像“鉛筆”、“復(fù)選”以及“取消”圖標(biāo)。鉛筆圖標(biāo)用來(lái)表示可以編輯的內(nèi)容，我們決定在設(shè)計(jì)中采用這一點(diǎn)。

（編輯圖標(biāo)：默認(rèn)時(shí)顯示灰色）

起初，我們使用灰色的鉛筆圖標(biāo)，當(dāng)用戶(hù)鼠標(biāo)hover上去的時(shí)候，它便轉(zhuǎn)變?yōu)楦吡恋念伾?。一個(gè)同事提出了一個(gè)可用性的點(diǎn)：移動(dòng)端用戶(hù)怎么辦？移動(dòng)端沒(méi)有懸停狀態(tài)，也就無(wú)法展示圖標(biāo)的懸停狀態(tài)，那么用戶(hù)是否能夠識(shí)別出這個(gè)灰色的鉛筆圖標(biāo)是可以點(diǎn)擊的呢？我們構(gòu)建了一個(gè)用戶(hù)測(cè)試環(huán)節(jié)來(lái)得到這個(gè)問(wèn)題的答案。最后測(cè)試的結(jié)果顯示在大多數(shù)情況下，他們都完全忽視了這個(gè)灰色的鉛筆。我們的解決方案是把鉛筆換成超鏈接的顏色，這樣用戶(hù)就可以很快找到它的位置。

一旦用戶(hù)點(diǎn)擊這個(gè)圖標(biāo)，文字輸入框的旁邊會(huì)顯示出一個(gè)綠色的勾和一個(gè)紅色的關(guān)閉。從測(cè)試中得出，用戶(hù)很容易知道如何在點(diǎn)擊鉛筆后修改單元格的內(nèi)容。

我們?cè)瓉?lái)?yè)?dān)心在操作列之外放一個(gè)編輯操作，因此我們對(duì)此進(jìn)行了一個(gè)測(cè)試。7/10個(gè)用戶(hù)直接選擇使用那個(gè)鉛筆圖標(biāo)，即使他們看到了那個(gè)下拉菜單。用戶(hù)一致建議這個(gè)鉛筆應(yīng)該使用藍(lán)色，因?yàn)橛行┤瞬](méi)有立刻注意到它。

用用戶(hù)的話(huà)來(lái)說(shuō)：“灰色的編輯按鈕太弱了，很難發(fā)現(xiàn)，但是當(dāng)你注意到它時(shí)，使用起來(lái)就非常簡(jiǎn)單。我很喜歡它，非常棒?！?/p>

（最終的編輯模式）

行為召喚

如上所述，CTA的處理在所有原型中差異最大。有時(shí)候CTA放置在表格頂部，有時(shí)候放置成一個(gè)按鈕，有時(shí)候又是單元格中的一個(gè)按鈕、圖標(biāo)，或是下拉菜單中的元素，到處都是。

既然用戶(hù)使用表格的目標(biāo)之一是快速處理，我們必須讓用戶(hù)在進(jìn)行處理時(shí)不需要瀏覽整個(gè)表格。它們必須被放置在一個(gè)固定的位置。同樣還有其他問(wèn)題：CTA可以作為行末的一個(gè)文字鏈接嗎？還是在表格的頂部？它們需要用icon來(lái)表示嗎？如果多于4個(gè)操作的話(huà)該如何顯示？我們?cè)撊绾伪３制渌麢诘臓顟B(tài)？我們最終定下了一個(gè)規(guī)則來(lái)放置所有的操作：

a.表格每行只有一個(gè)操作：展示為圖標(biāo)+標(biāo)簽

b.表格每行有兩個(gè)操作：展示為文字鏈接

c.表格每行有多于2個(gè)操作：以下拉菜單的方式展示

我們直接展示了兩個(gè)操作，讓用戶(hù)可以快速地使用它，但是當(dāng)操作多于2個(gè)時(shí)會(huì)占據(jù)很大一部分位置，所以我們將它們放在下拉菜單中。經(jīng)過(guò)幾輪迭代后，我們主要爭(zhēng)論的一點(diǎn)就是是否要使用帶圖標(biāo)的標(biāo)簽，但是由于我們不太清楚未來(lái)有哪些潛在用例，所以我們決定使用圖標(biāo)，也可以迫使設(shè)計(jì)師來(lái)用圖標(biāo)來(lái)描繪一些難以理解的操作。

（編輯模式）

如前所述，唯一一個(gè)沒(méi)有放置在下拉菜單中的操作就是“編輯”。編輯使用帶鉛筆圖標(biāo)的方式放置在對(duì)應(yīng)的單元格內(nèi)以允許內(nèi)聯(lián)編輯。放置在單元格內(nèi)給用戶(hù)設(shè)定了可以編輯單元格的預(yù)期，而不是讓他們認(rèn)為整行都是可以編輯的，進(jìn)而造成挫敗感。

同樣的，如何將一個(gè)操作應(yīng)用到多行？單擊操作列，然后對(duì)多行數(shù)據(jù)進(jìn)行操作將會(huì)是一個(gè)非常糟糕的體驗(yàn)。我們借用了Gmail的模式，選中一行后，頂部會(huì)出現(xiàn)一個(gè)批量操作欄。不過(guò)Gmail上的操作欄視覺(jué)上表現(xiàn)比較弱，我們使用了一個(gè)更加顯眼的顏色變化來(lái)吸引用戶(hù)的注意力。

（批量操作）

表格定制

表格中會(huì)出現(xiàn)許多標(biāo)題和列的數(shù)據(jù)，有時(shí)數(shù)據(jù)顯示受限于表格的寬度。在某些情況下，可以允許用戶(hù)去選擇他們想要看到的表格列。要做到這一點(diǎn)，我們必須讓選項(xiàng)更清晰，當(dāng)用戶(hù)的選擇已經(jīng)達(dá)到上限時(shí)，我們通過(guò)灰化選項(xiàng)來(lái)表示。

（表格定制）

單元格截?cái)?/h3>

在有限的空間里，單元格中的內(nèi)容長(zhǎng)度容易出現(xiàn)問(wèn)題。我們是否允許文本在單元格內(nèi)包裝？最初，我們受到Virgil Pana在dribbble發(fā)布的作品的啟發(fā)：

（Virgil Pana在dribbble發(fā)布的作品）

這是一個(gè)很棒的解決方案，我們和開(kāi)發(fā)討論了技術(shù)可行性。

最終我們了解到即便它是可以實(shí)現(xiàn)的，這個(gè)表格也將會(huì)包含太多復(fù)雜的算法，可能會(huì)導(dǎo)致加載過(guò)慢的問(wèn)題。這項(xiàng)工作是否值得花費(fèi)過(guò)多的精力？另外，如果還要考慮到定制表格的選項(xiàng)，復(fù)雜度又會(huì)增加多少？再次，這就是為什么開(kāi)發(fā)人員提早參與至關(guān)重要。我們最終認(rèn)為這不是一個(gè)關(guān)鍵任務(wù)，并不值得花費(fèi)太多的力氣，我們最終提出了用浮層來(lái)展示所有信息來(lái)作為一個(gè)替代方案。

（用浮層顯示具體信息）

圖片的用法

雖然我們還在琢磨表格的細(xì)節(jié)，我們對(duì)斑馬紋的設(shè)計(jì)已經(jīng)有了一定的喜好，這時(shí)一個(gè)同事帶來(lái)了一個(gè)我們沒(méi)有考慮到的用例。在產(chǎn)品的一個(gè)頁(yè)面中，一個(gè)需求是上傳一個(gè)logo到表格中，由于logo不是透明的，當(dāng)它出現(xiàn)在灰色行上時(shí)整個(gè)頁(yè)面會(huì)變得很尷尬。

在這個(gè)情況下，我們不可能只是簡(jiǎn)單地忽略它，我們必須想出一個(gè)解決方案。這就是一個(gè)很好的例子，說(shuō)明簡(jiǎn)單的才是最好的。現(xiàn)在，我們決定加上上傳透明png格式logo的引導(dǎo)。幸運(yùn)的是，這里上傳logo的用戶(hù)都是客戶(hù)履行小組的成員，他們比一般的用戶(hù)要更懂技術(shù)。

當(dāng)我們以為我們終于把斑馬紋確定下來(lái)了，另外一個(gè)同事提出了一個(gè)用戶(hù)案例是在單元格內(nèi)顯示警告指示器。整個(gè)單元格的背景顏色都填充了警示的顏色來(lái)引起用戶(hù)注意力。 盡管從美學(xué)角度來(lái)說(shuō)，這并沒(méi)有改變這個(gè)表格，但是它確實(shí)會(huì)有一些后續(xù)的問(wèn)題。應(yīng)該使用怎樣的不透明度？我們是否想要讓開(kāi)發(fā)人員特殊處理單個(gè)單元格上的顏色？為了簡(jiǎn)化它，我們決定使用圖標(biāo)。但是如果用戶(hù)不容易注意到這個(gè)警告，我們還是會(huì)把重點(diǎn)突出。

（警示的兩種處理方式）

已讀/未讀標(biāo)識(shí)

我們探索了不同的方式，如使用彩色圓點(diǎn)和豎條來(lái)標(biāo)記未讀項(xiàng)目。點(diǎn)完全混合到表中。為了使它看起來(lái)更引人注目，我們還給那個(gè)點(diǎn)附著的文字加粗了。然后我們的同事提出了需要注意的一點(diǎn)：復(fù)選框。這個(gè)點(diǎn)是放在復(fù)選框旁邊還是文字旁邊？

（未讀的早期處理方式）

這個(gè)點(diǎn)在美觀上以及功能性上都變成了一個(gè)不太好的方案，所以我們最終選擇了豎條。這個(gè)豎條簡(jiǎn)單有效地表示這行是未讀的，而且同樣是一種常見(jiàn)的模式。

（未讀狀態(tài)）

擴(kuò)展視圖

有時(shí)，表格不能容納太多的項(xiàng)目數(shù)據(jù)。在涵蓋大量應(yīng)用數(shù)據(jù)的情況下，在數(shù)據(jù)表中擴(kuò)展行是一種常見(jiàn)的模式。我們使用一個(gè)模式對(duì)相關(guān)的擴(kuò)展內(nèi)容進(jìn)行分組：

（擴(kuò)展視圖的一個(gè)例子）

展開(kāi)的那一行是灰色的，與其他的行區(qū)分開(kāi)。相關(guān)內(nèi)容放置在它的內(nèi)容區(qū)域中。

我們同樣受到了另一種模式的啟發(fā)，這個(gè)模式中，統(tǒng)一欄將行和擴(kuò)展內(nèi)容綁定在一起，這樣便使得這些內(nèi)容看起來(lái)是有關(guān)聯(lián)的。

（擴(kuò)展視圖的例子）

我們決定將兩種方案結(jié)合起來(lái)，我們把擴(kuò)展行做成了藍(lán)色，并在左側(cè)添加統(tǒng)一欄。

（第一個(gè)方案）

（第二個(gè)方案）

第一種方案看起來(lái)太像一個(gè)選中狀態(tài)了。深藍(lán)色的欄像具有某個(gè)含義，并且我們之前已經(jīng)使用這個(gè)豎條來(lái)表示未讀行了。我們現(xiàn)在如何區(qū)分未讀狀態(tài)和擴(kuò)展?fàn)顟B(tài)呢？為了避免混淆我們的用戶(hù)，將它們合并為一個(gè)統(tǒng)一欄？

（第三個(gè)方案）

最初我決定加大寬度同時(shí)改變顏色，但是加大寬度以后看起來(lái)比較突兀，同時(shí)還是很像未讀狀態(tài)。我們向團(tuán)隊(duì)展示這個(gè)解決方案，最終他們提出了一個(gè)更好的方案：和未讀狀態(tài)使用同樣的寬度但是用灰色來(lái)表示。

（第四個(gè)方案）

視覺(jué)規(guī)范

邊距和間距對(duì)于視覺(jué)設(shè)計(jì)來(lái)說(shuō)至關(guān)重要，需要標(biāo)注給開(kāi)發(fā)來(lái)確保最終實(shí)現(xiàn)的視覺(jué)完整性。我們創(chuàng)建了這個(gè)指南，這樣我們的團(tuán)隊(duì)不管做的是什么產(chǎn)品都可以設(shè)計(jì)出具有一致性的表格。

（邊距和間距的標(biāo)注文檔）

呈現(xiàn)并測(cè)試

這些表格收到了來(lái)自?xún)?nèi)部團(tuán)隊(duì)的積極反饋。當(dāng)然其中有許多我們還需要去改進(jìn)的東西，但是許多組件都得到了批準(zhǔn)，并交付開(kāi)發(fā)。

但是即使我們得到了積極反饋，我們?nèi)匀幌胍?yàn)證我們的假設(shè)：這對(duì)外部是否像對(duì)我們一樣？用戶(hù)是否知道下拉菜單的操作？編輯操作的例外是否令人困惑？分頁(yè)是否清晰？我們和用戶(hù)研究員Kiayni Spearman 和Michael Pate組成了一個(gè)團(tuán)隊(duì)，通過(guò)UserTesting.com進(jìn)行一些基礎(chǔ)的可用性測(cè)試。用戶(hù)研究員幫助我們?cè)O(shè)計(jì)了一個(gè)測(cè)試，提示用戶(hù)做這三件事：

1. 讓用戶(hù)去執(zhí)行一些操作
2. 問(wèn)用戶(hù)列表中有多少個(gè)項(xiàng)目，它們?cè)谀膫€(gè)頁(yè)面上
3. 讓用戶(hù)編輯某個(gè)人的郵箱地址

UserTesting.com上的10個(gè)視頻全部在發(fā)布后兩個(gè)小時(shí)完成。

用戶(hù)研究結(jié)果

關(guān)于在下拉菜單中尋找操作：

“盡管沒(méi)有一件刪除賬戶(hù)的按鈕，但是我認(rèn)為還是很直觀，因?yàn)楸砀耥敳康臉?biāo)題非常清楚地告訴我在哪里可以點(diǎn)擊來(lái)查看我可以對(duì)該條目執(zhí)行操作的列表。我非常清楚如何繼續(xù)刪除這個(gè)條目，即便我是第一次使用這張表?！?/p>

“我（本該）意識(shí)到操作欄（并且猜測(cè)）其他的操作會(huì)放置在那里”

然而沒(méi)我們的測(cè)試表明分頁(yè)對(duì)參與者來(lái)說(shuō)有一些混亂。但是，得益于我們團(tuán)隊(duì)和參與這的真實(shí)的反饋，我們明確了我們需要做的方向，而不是原地停留。

主要收獲

我們從制定表格的標(biāo)準(zhǔn)和主要模式中學(xué)到了很多，在問(wèn)題解決上，我們了解到：

1. 提前見(jiàn)面并寫(xiě)下目標(biāo)，退一步思考一下為什么
2. 多花一些時(shí)間定義問(wèn)題，而不是解決問(wèn)題
3. 首先拋棄糟糕的想法，及早向大家展示你的想法，并分析推遲、批判、問(wèn)題等。讓多方提前參與，避免在不可行的方案上浪費(fèi)時(shí)間
4. 將它分解成小的，更可行的組件并多討論，發(fā)布這些組件以及最終的交付成果
5. 保持自我。因?yàn)槲覀冊(cè)谠缙诰投x了我們的目標(biāo)，所以把注意力集中在這個(gè)問(wèn)題上，放下對(duì)解決方案本身的任何情感依賴(lài)，這樣就更容易接受和實(shí)施反饋

第一次翻譯，請(qǐng)多指教。

譯者注：CTA（call to action）指的是網(wǎng)站中用于提示用戶(hù)點(diǎn)擊并且進(jìn)入下一個(gè)轉(zhuǎn)化流程（conversion funnel，如支付、繼續(xù)閱讀等）的橫幅、按鈕、或某些類(lèi)型的圖形和文字。它是入站營(yíng)銷(xiāo)和許可營(yíng)銷(xiāo)的必要組成部分，致力于吸引用戶(hù)進(jìn)入引導(dǎo)流程，繼而將用戶(hù)轉(zhuǎn)化為顧客。

譯者： janedaring

原文：Havana Nguyen發(fā)布于Medium

鏈接：https://uxdesign.cc/designing-tables-for-reusability-490a3760533

本文由 @ janedaring 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自u(píng)nsplash，基于CC0協(xié)議