想象一下你為企業(yè)端產(chǎn)品設(shè)計(jì)了一個(gè)系統(tǒng)特愿，或是設(shè)計(jì)了某個(gè)應(yīng)用程序仲墨。在諸如此類的設(shè)計(jì)中都需要用到表格。這些表格設(shè)計(jì)不是那些設(shè)計(jì)網(wǎng)站中展示的非常精美的表格樣式揍障，而是具有復(fù)雜交互和數(shù)百個(gè)單元格的表格目养。
在這種情況下，設(shè)計(jì)師會(huì)面臨許多挑戰(zhàn)毒嫡。 例如：將設(shè)計(jì)與現(xiàn)有的前端框架進(jìn)行匹配癌蚁，或與破壞布局的“不舒服”數(shù)據(jù)進(jìn)行斗爭(zhēng)。 我們將通過(guò)以下步驟來(lái)解決這些問(wèn)題：系統(tǒng)化需求兜畸，原子化努释，定義交互。
1.系統(tǒng)化需求
所以咬摇，你已經(jīng)采訪了目標(biāo)受眾》サ伲現(xiàn)在是時(shí)候?qū)⑺麄兊男枨蠛托枨笃礈愒谝黄穑⑥D(zhuǎn)化為對(duì)設(shè)計(jì)有用的東西菲嘴。例如饿自，一位用戶說(shuō)：“我需要看看我的數(shù)據(jù)如何影響應(yīng)用程序的其他部分×淦海”或者在看到另一個(gè)人使用軟件時(shí)昭雌，你注意到他只使用快捷方式而根本不摸鼠標(biāo)。這是什么意思健田？第一個(gè)用戶的話是關(guān)于輸入驗(yàn)證和提示烛卧。你需要考慮將警報(bào)或幫助信息附加到表中，或者開發(fā)一個(gè)有意義的顏色系統(tǒng)妓局。這取決于領(lǐng)域和心理模型总放。觀察第二個(gè)用戶的工作可能是你需要設(shè)計(jì)鍵盤可設(shè)置快捷方式，可能需要考慮比“Cmd + C”和“Cmd + V”更深刻的快捷方式好爬。
這樣局雄，你就有一系列的需求和愿望。開放式問(wèn)題有助于找出真正的需求并過(guò)濾掉一時(shí)興起存炮。例如炬搭，“什么可以幫助你更快地工作唇敞？這如何提高你的工作效率己英？如果你不能做XX會(huì)有什么改變？“
這時(shí)候就需要一個(gè)功能框架了糯累。如下圖
任何表的最小構(gòu)建塊都是一個(gè)單元范咨，聯(lián)合成行和列政供，其具有不同于其他單元的特定特征轻庆。 最后竹海，我們將表格的重要補(bǔ)充作為頂欄，鍵盤命令彼绷，處理錯(cuò)誤等巍佑。
簡(jiǎn)而言之，構(gòu)建一個(gè)復(fù)雜的表寄悯，收集并優(yōu)先考慮用戶需求句狼。 考慮非表格解決方案，例如圖表热某。
繪制一張樹形圖，系統(tǒng)化所有需要的功能胳螟。
2.原子化
原子化是首先設(shè)計(jì)小的UI組件然后組裝更大的UI組件昔馋。 我們將逐漸從字體和顏色等基本粒子轉(zhuǎn)移到像標(biāo)題或列這樣的大模態(tài)。?
字體糖耸，顏色和圖標(biāo)
這些部分可以由設(shè)計(jì)系統(tǒng)或UI框架定義秘遏。 如果為現(xiàn)有產(chǎn)品創(chuàng)建表，請(qǐng)檢查調(diào)色板嘉竟，字體和圖標(biāo)是否滿足表格的需要邦危。
? 單元和配件
當(dāng)表格原子設(shè)計(jì)準(zhǔn)備就緒時(shí)，我們可以繼續(xù)設(shè)計(jì)不同類型的單元舍扰。 首先要事先考慮每個(gè)元素的“正尘腧剑”，“懸捅咂唬”和“激活”的狀態(tài)陵且。 后面再添加“點(diǎn)擊”，“禁用”和其他狀態(tài)个束。
單元格可以有工具提示慕购，輸入提示，錯(cuò)誤消息茬底，占位符等附件沪悲。
行和表頭
設(shè)計(jì)單元格創(chuàng)建行時(shí)，需要查看各種組合是否可以很好地協(xié)同工作阱表。 下面我在一行中展示了只讀和可編輯單元格的殿如。 一旦設(shè)計(jì)一個(gè)具有復(fù)雜編輯邏輯的表格贡珊，那么表格的某些字段由用戶提供，而其他字段則使用默認(rèn)值自動(dòng)計(jì)算或填充握截。
需要注意的是飞崖，將鼠標(biāo)懸停在只讀和可編輯單元格上時(shí)，光標(biāo)會(huì)有所不同谨胞。 點(diǎn)擊單元格會(huì)觸發(fā)選擇行或進(jìn)入可編輯單元格的編輯模式固歪。 你可以在下圖看到用戶選擇一行或多行時(shí)的單元格狀態(tài)。
現(xiàn)在是時(shí)候考慮表頭了胯努。 根據(jù)我的經(jīng)驗(yàn)牢裳，通常無(wú)法控制列標(biāo)題長(zhǎng)度并堅(jiān)持一行。? 我在下圖展示了表頭的不同變體叶沛。
基于數(shù)據(jù)的工具蒲讯，用戶經(jīng)常需要排序和過(guò)濾。 它可以幫助用戶在冗長(zhǎng)的數(shù)據(jù)中找到有價(jià)值的信息灰署。 排序和過(guò)濾的挑戰(zhàn)是將排序控件和過(guò)濾控件與其他標(biāo)題元素（列標(biāo)題判帮，度量單位等）結(jié)合起來(lái)。
與表格單元格不同溉箕，過(guò)濾器框通常在右側(cè)具有“重置”圖標(biāo)晦墙，以便用戶可以查看未過(guò)濾的內(nèi)容。
在示例中肴茄，有三種類型的過(guò)濾器框晌畅。 字母數(shù)字過(guò)濾器可以按字母和數(shù)字進(jìn)行搜索。 它支持通配符 - 未知數(shù)量的未知字符寡痰。
日期選擇器過(guò)濾器具有日歷抗楔，其工作方式與其單元格相同。 允許用戶手動(dòng)輸入日期并從日歷中選擇是一件好事拦坠。 如果他們知道他們?cè)谒阉魇裁戳铮敲创蜃直赛c(diǎn)擊容易得多。 在我的一個(gè)項(xiàng)目中贪婉，我們?cè)试S輸入“01/25/2017”反粥，“6 12 17”和“2016年9月4日”等日期，僅過(guò)濾一個(gè)月或一年疲迂。
列
復(fù)雜表的一個(gè)常見功能是固定列才顿。 通常，包含關(guān)鍵信息的列（例如尤蒿，元素名稱或狀態(tài)）不可滾動(dòng)郑气。
雖然表列應(yīng)該巧妙地適應(yīng)內(nèi)容大小，但是當(dāng)文本被截?cái)鄷r(shí)會(huì)發(fā)生腰池。 在這種情況下尾组，列大小調(diào)整很有幫助忙芒。 用戶可以拖動(dòng)列邊緣并查看長(zhǎng)內(nèi)容。
處理長(zhǎng)文本字符串的另一種方法是：使用最長(zhǎng)內(nèi)容拉伸列或?qū)?nèi)容折成多行讳侨。 第一種方法對(duì)于或多或少類似的文本字符串更有效呵萨。 如果看到全部?jī)?nèi)容對(duì)于人們來(lái)說(shuō)比保持表格的垂直緊湊更重要，那么第二個(gè)更好跨跨。
我們需要定義列的默認(rèn)最小寬度潮峦，以防止表格不適合調(diào)整大小。
頂部操作區(qū)
什么構(gòu)成一張表格勇婴？ 單元格忱嘹，列，行耕渴。 此外拘悦，復(fù)雜的表通常有一個(gè)頂部操作區(qū)。 與其他組件一樣橱脸，頂部欄由較小的元素構(gòu)成 - 標(biāo)題和命令础米。 下面我收集了我們?cè)谄渲幸粋€(gè)產(chǎn)品中使用的各種狀態(tài)的命令列表。
現(xiàn)在我們可以嘗試組合不同的元素添诉，看看它是否有效椭盏。 這里有些例子。
當(dāng)然吻商，這不是功能和元素的最終列表。 它不同于一個(gè)項(xiàng)目糟红，可能包含其他內(nèi)容艾帐，例如：
按多列排序;
可自定義的列;
可擴(kuò)展行;
用于過(guò)濾和搜索的邏輯運(yùn)算符（“和”，“或”盆偿，“其他”等）柒爸。
如果你猶豫要設(shè)計(jì)哪些功能，哪些沒(méi)有事扭，可以參考奧卡姆的剃刀捎稚，或簡(jiǎn)約法則。 如果現(xiàn)有的實(shí)例滿足需求求橄，則設(shè)計(jì)者不應(yīng)創(chuàng)建新實(shí)例今野。 你應(yīng)該“削減”用戶可能需要的令人討厭的功能。?
全表格
只讀表格罐农。 要構(gòu)建的最簡(jiǎn)單的表類型条霜，因?yàn)樗伙@示數(shù)據(jù)。 沒(méi)有過(guò)濾或編輯選項(xiàng)涵亏。
搜索表格宰睡。 單元格不可編輯蒲凶，標(biāo)題有過(guò)濾框和排序控件，可以選擇行拆内。 從實(shí)踐來(lái)看旋圆，這些表格有助于從大量類似的東西中查找，比較和選擇一個(gè)項(xiàng)目或幾個(gè)項(xiàng)目麸恍。?
可編輯的表格灵巧。 所有或部分單元格都是可編輯的，通常沒(méi)有篩選或南，因?yàn)樾械捻樞蚩赡苁亲远x的孩等。 這些表格通常會(huì)有工具欄并允許使用行執(zhí)行操作。
簡(jiǎn)而言之
從最小的組件開始采够。 然后逐漸走向更大的肄方，最后，模擬整個(gè)表格蹬癌。
事先考慮每個(gè)組件的所有可能狀態(tài)权她。
使用Occam的剃刀原則將元素?cái)?shù)量保持在最小但覆蓋所有用例。
3.定義交互
構(gòu)建塊不足以構(gòu)建像表格這樣復(fù)雜的逝薪。設(shè)計(jì)師應(yīng)該考慮“游戲規(guī)則”隅要，并設(shè)計(jì)視覺(jué)部分背后的邏輯原則和慣例。
容器與響應(yīng)式
如何將表格放在界面中董济？ 例如步清，它會(huì)占用現(xiàn)有容器中的一些空間還是一個(gè)單獨(dú)的模塊？ 這些問(wèn)題的答案完全取決于產(chǎn)品虏肾，最好預(yù)見可能的問(wèn)題并徹底定義原則廓啊。
有些應(yīng)用程序使用線條或白色灰色“斑馬線”來(lái)使信息更易讀。
定義合理的默認(rèn)寬度封豪，并允許在需要時(shí)手動(dòng)調(diào)整大小谴轮。對(duì)于閱讀表格，最好在右邊有一些空格而不是列之間的間隙吹埠。但是如果一個(gè)表包含許多行和列第步，則水平和垂直滾動(dòng)是不可避免的。對(duì)于手機(jī)端的閱讀缘琅，還可以把表格做成卡片式利于用戶瀏覽數(shù)據(jù)粘都。
可訪問(wèn)性
即使是非常流暢和漂亮的表格也可能成為用戶的噩夢(mèng)。因此刷袍，遵循可訪問(wèn)性原則非常重要驯杜。 以下是可訪問(wèn)性方面的主要設(shè)計(jì)考慮因素。
給出標(biāo)題并準(zhǔn)備簡(jiǎn)明的摘要做个。視力受損的用戶應(yīng)該能夠在不對(duì)其所有單元進(jìn)行語(yǔ)音處理的情況下處理表格鸽心。
注意字體大小滚局。盡管網(wǎng)絡(luò)沒(méi)有正式的最小尺寸，但16 px（12 pt）被認(rèn)為是最佳的顽频。此外藤肢，用戶應(yīng)該能夠在不破壞整個(gè)布局的情況下將表格增加到200％。
為有色盲的人測(cè)試顏色糯景。文本和控件應(yīng)與其背景具有足夠的對(duì)比度嘁圈。最低要求色比3：1（越多越好）。顏色不應(yīng)該是標(biāo)記事物的唯一方式蟀淮。例如最住，錯(cuò)誤消息不應(yīng)僅依賴于紅色文本，警告圖標(biāo)將為色盲用戶提供參考怠惶。
避免使用小而模糊的控件涨缚。如果可點(diǎn)擊組件至少為40×40像素，則認(rèn)為它們是觸摸友好的策治。由圖標(biāo)表示的命令應(yīng)標(biāo)記或具有工具提示和替代文本脓魏。設(shè)計(jì)師不應(yīng)過(guò)度使用圖標(biāo)，因?yàn)橛脩艨赡軣o(wú)法正確理解復(fù)雜的隱喻通惫。
簡(jiǎn)而言之
內(nèi)容統(tǒng)一和格式化也是設(shè)計(jì)師的工作茂翔。
不僅要考慮界面元素，還要考慮用例履腋，規(guī)則和常用模式珊燎。
原文：https://medium.muz.li/complex-tables-356826d11861
譯者：Ever
相關(guān)文章推薦：
在構(gòu)建設(shè)計(jì)規(guī)范之前，你需要看看這些設(shè)計(jì)資源
如何構(gòu)建設(shè)計(jì)語(yǔ)言系統(tǒng)
給初級(jí)UI&UE設(shè)計(jì)師的Sketch資源分享
交互設(shè)計(jì)原則和理論1——尼爾森十大可用性原則
