“如果我有一個小時去解決問題，我會花55分鐘去思考這個問題，然后用5分鐘來想解決方案。”——佚名

我們是來自CareerBuilder的交互設(shè)計師Havana和視覺設(shè)計師Ada喜爷，我們的視覺設(shè)計負責(zé)人Mark Patterson給了我們一個任務(wù)：設(shè)計表格的UI規(guī)范，可以用在包含不同用例和不同目標(biāo)用戶的產(chǎn)品線上萄唇。我們使用到的方法涉及到快速確定目標(biāo)和問題的核心檩帐，并在早期通過測試驗證我們的想法。生成高效的解決方案另萤，快速獲得團隊認可湃密，最后使用用戶測試進行驗證。

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

當(dāng)我們審閱各個產(chǎn)品團隊的原型時四敞，我們發(fā)現(xiàn)這些表格是不一致的——它們有多樣化的UX設(shè)計解決方式泛源。尺寸、鏈接目养、CTA俩由、過濾器毒嫡、排序以及分頁到處都是：

公司內(nèi)部其他產(chǎn)品線的表格

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

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

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

開始設(shè)計

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

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

a.一次性瀏覽大量信息兄朋，例如：展示多個項目以及對應(yīng)的狀態(tài)

b.快速確定并執(zhí)行操作，例如：刪除多行怜械、下載多個項目等

c.對比信息蜈漓，例如：有多少個項目完成，有多少個項目正在進行

一些表格

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

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

· 分頁

· 擴展視圖

· 編輯模式

· 行為召喚

· 定制

· 單元格截斷

· icon/圖片的使用

· 未讀/已讀標(biāo)識

在5周里巍佑，我們碰面了4次，共享我們所獲取的信息寄悯，在目標(biāo)和思考方向上達成共識萤衰。會議后，我們研究了各自分配的組件并有了一些初步的想法猜旬。我們把這些想法收集起來脆栋，并且在5天后開了一次會議。在這個早期迭代會議上洒擦，我們的目標(biāo)是簡單地展示初步解決方案椿争。基于許多我們不熟悉的用戶案例熟嫩，我們想通過測試來驗證這些想法秦踪，剔除存在的可用性問題、功能缺陷掸茅，指出潛在問題和我們的想法椅邓。參與的不僅僅有用戶體驗團隊的成員，還邀請了主要開發(fā)人員來確保我們的想法在技術(shù)上是可以實現(xiàn)的昧狮。我們開這個會景馁，就是為了為了避免浪費時間在最終迭代會失敗的問題上。同時也保證了整個團隊可以快速進入狀態(tài)陵且。

表格設(shè)計時的筆記和草圖

我們?nèi)〉昧艘恍┓答伈蒙又覀冮_始新一輪的迭代來調(diào)整我們所發(fā)現(xiàn)的問題个束。我們中途還進行了一次會議，來確保各自的項目進度聊疲，確定已完成工作和接下來的工作茬底。然后在展示給團隊的會議上縮小選項提交并校對，確保我們不錯過任何狀態(tài)获洲。

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

我們的工作流程

表格的組成

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

分頁

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

分頁

然而，我不是很確定如果我在第4頁時妻往，這個分頁是什么樣的互艾。

用戶瀏覽頁面時的分頁行為

最后，我們允許各自的產(chǎn)品團隊來決定哪一類的分頁最適用于他們的產(chǎn)品讯泣。

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

分頁的不同展示方式

我們在設(shè)計分頁時學(xué)到的最主要的東西是：循序漸進，深入挖掘好渠，發(fā)現(xiàn)背后隱藏的復(fù)雜性昨稼。（警示：總是有一些隱藏的復(fù)雜性。）

編輯模式

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

隨時展示為可編輯文本框

另一個問題就是這樣容易造成誤操作。用戶很容易意外編輯了錯誤的單元格——它可以取消嗎寡痰？它會自動保存嗎抗楔？其中的交互并不明確。

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

絕大多數(shù)用戶對特定的圖標(biāo)很熟悉勺良，像“鉛筆”绰播、“復(fù)選”以及“取消”圖標(biāo)。鉛筆圖標(biāo)用來表示可以編輯的內(nèi)容尚困，我們決定在設(shè)計中采用這一點蠢箩。

編輯圖標(biāo)默認時是灰色的

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

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

我們原來擔(dān)心在操作列之外放一個編輯操作础米，因此我們對此進行了一個測試。7/10個用戶直接選擇使用那個鉛筆圖標(biāo)添诉，即使他們看到了那個下拉菜單屁桑。用戶一致建議這個鉛筆應(yīng)該使用藍色，因為有些人并沒有立刻注意到它栏赴。

用用戶的話來說：“灰色的編輯按鈕太弱了蘑斧，很難發(fā)現(xiàn)，但是當(dāng)你注意到它時须眷，使用起來就非常簡單竖瘾。我很喜歡它，非常棒花颗〔洞”

最后的編輯模式

行為召喚

如上所述，CTA的處理在所有原型中差異最大扩劝。有時候CTA放置在表格頂部庸论，有時候放置成一個按鈕职辅，有時候又是單元格中的一個按鈕、圖標(biāo)聂示，或是下拉菜單中的元素域携，到處都是。

既然用戶使用表格的目標(biāo)之一是快速處理催什，我們必須讓用戶在進行處理時不需要瀏覽整個表格涵亏。它們必須被放置在一個固定的位置。同樣還有其他問題：CTA可以作為行末的一個文字鏈接嗎蒲凶？還是在表格的頂部气筋？它們需要用icon來表示嗎？如果多于4個操作的話該如何顯示旋圆？我們該如何保持其他欄的狀態(tài)宠默？我們最終定下了一個規(guī)則來放置所有的操作：

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

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

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

表格每行有兩個操作：展示為文字鏈接

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

表格每行有多于2個操作：以下拉菜單的方式展示

我們直接展示了兩個操作，讓用戶可以快速地使用它灵巧，但是當(dāng)操作多于2個時會占據(jù)很大一部分位置搀矫，所以我們將它們放在下拉菜單中。經(jīng)過幾輪迭代后刻肄，我們主要爭論的一點就是是否要使用帶圖標(biāo)的標(biāo)簽瓤球，但是由于我們不太清楚未來有哪些潛在用例，所以我們決定使用圖標(biāo)敏弃，也可以迫使設(shè)計師來用圖標(biāo)來描繪一些難以理解的操作卦羡，例如【例如】。

編輯模式

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

同樣的粹淋，如何將一個操作應(yīng)用到多行吸祟？單擊操作列，然后對多行數(shù)據(jù)進行操作將會是一個非常糟糕的體驗廓啊。我們借用了Gmail的模式欢搜，選中一行后，頂部會出現(xiàn)一個批量操作欄谴轮。不過Gmail上的操作欄視覺上表現(xiàn)比較弱，我們使用了一個更加顯眼的顏色變化來吸引用戶的注意力吹埠。

操作欄

表格定制

表格中會出現(xiàn)許多標(biāo)題和列的數(shù)據(jù)第步，有時數(shù)據(jù)顯示受限于表格的寬度疮装。在某些情況下，可以允許用戶去選擇他們想要看到的表格列粘都。要做到這一點廓推，我們必須讓選項更清晰，當(dāng)用戶的選擇已經(jīng)達到上限時翩隧，我們通過灰化選項來表示樊展。

表格定制

單元格截斷

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

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

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

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

浮層提示

圖片的用法

雖然我們還在琢磨表格的細節(jié)，我們對斑馬紋的設(shè)計已經(jīng)有了一定的喜好通惫，這時一個同事帶來了一個我們沒有考慮到的用例茂翔。在產(chǎn)品的一個頁面中，一個需求是上傳一個logo到表格中履腋，由于logo不是透明的珊燎，當(dāng)它出現(xiàn)在灰色行上時整個頁面會變得很尷尬。在這個情況下遵湖，我們不可能只是簡單地忽略它悔政，我們必須想出一個解決方案。這就是一個很好的例子延旧，說明簡單的才是最好的∧惫現(xiàn)在，我們決定加上上傳透明png格式logo的引導(dǎo)迁沫。幸運的是芦瘾，這里上傳logo的用戶都是客戶履行小組的成員捌蚊，他們比一般的用戶要更懂技術(shù)。

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

警告的處理方式1

警告的處理方式2

查看與未查看的標(biāo)識

我們探索了不同的方式躯嫉，如使用彩色圓點和豎條來標(biāo)記未讀項目纱烘。點完全混合到表中。為了使它看起來更引人注目祈餐，我們還給那個點附著的文字加粗了擂啥。然后我們的同事提出了需要注意的一點：復(fù)選框。這個點是放在復(fù)選框旁邊還是文字旁邊帆阳？

未讀的早期解決方案

這個點在美觀上以及功能性上都變成了一個不太好的方案哺壶，所以我們最終選擇了豎條。這個豎條簡單有效地表示這行是未讀的蜒谤，而且同樣是一種常見的模式山宾。

未讀狀態(tài)

擴展視圖

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

擴展視圖的例子

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

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

擴展視圖的例子

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

擴展視圖方案1

擴展視圖方案2

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

擴展視圖的第三個版本

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

擴展視圖的第四個版本

視覺規(guī)范

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

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

呈現(xiàn)并測試

這些表格收到了來自內(nèi)部團隊的積極反饋号胚。當(dāng)然其中有許多我們還需要去改進的東西，但是許多組件都得到了批準(zhǔn)浸遗，并交付開發(fā)猫胁。

但是即使我們得到了積極反饋，我們?nèi)匀幌胍炞C我們的假設(shè)：這對外部是否像對我們一樣跛锌？用戶是否知道下拉菜單的操作弃秆？編輯操作的例外是否令人困惑？分頁是否清晰髓帽？我們和用戶研究員Kiayni Spearman 和Michael Pate組成了一個團隊菠赚，通過UserTesting.com進行一些基礎(chǔ)的可用性測試。用戶研究員幫助我們設(shè)計了一個測試郑藏，提示用戶做這三件事：

1.讓用戶去執(zhí)行一些操作

2.問用戶列表中有多少個項目衡查，它們在哪個頁面上

3.讓用戶編輯某個人的郵箱地址

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

用戶研究結(jié)果

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

“盡管沒有一件刪除賬戶的按鈕译秦，但是我認為還是很直觀峡捡，因為表格頂部的標(biāo)題非常清楚地告訴我在哪里可以點擊來查看我可以對該條目執(zhí)行操作的列表。我非常清楚如何繼續(xù)刪除這個條目筑悴，即便我是第一次使用這張表们拙。”

“我（本該）意識到操作欄（并且猜測）其他的操作會放置在那里”

然而沒我們的測試表明分頁對參與者來說有一些混亂阁吝。但是砚婆，得益于我們團隊和參與這的真實的反饋，我們明確了我們需要做的方向，而不是原地停留装盯。

主要收獲

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

1.提前見面并寫下目標(biāo)埂奈，退一步思考一下為什么

2.多花一些時間定義問題迄损，而不是解決問題

3.首先拋棄糟糕的想法，及早向大家展示你的想法账磺，并分析推遲芹敌、批判、問題等垮抗。讓多方提前參與氏捞，避免在不可行的方案上浪費時間

4.將它分解成小的，更可行的組件并多討論冒版，發(fā)布這些組件以及最終的交付成果

5.保持自我液茎。因為我們在早期就定義了我們的目標(biāo)，所以把注意力集中在這個問題上辞嗡，放下對解決方案本身的任何情感依賴捆等，這樣就更容易接受和實施反饋

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

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

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