數(shù)據(jù)表單是一種常見(jiàn)的平臺(tái)設(shè)計(jì)樣式，在看似乏味呆板的設(shè)計(jì)中，沉淀著許多優(yōu)質(zhì)的設(shè)計(jì)體驗(yàn)方法。尤其是在信息組織、信息傳達(dá)、信息承載和閱讀性方面，數(shù)據(jù)表單蘊(yùn)含了許多設(shè)計(jì)規(guī)則和設(shè)計(jì)模式，使用戶(hù)能夠輕松地獲取、處理信息。該篇文章介紹了固定表頭、固定側(cè)欄、自定義欄、分頁(yè)器、過(guò)濾器、數(shù)據(jù)排序、多選項(xiàng)同時(shí)操作、簡(jiǎn)單且簡(jiǎn)約、普通的字體樣式、項(xiàng)目鏈接、鼠標(biāo)懸停這 11 個(gè)設(shè)計(jì)指南，為大家提供有關(guān)數(shù)據(jù)表單設(shè)計(jì)的實(shí)用性建議。

當(dāng)然，在實(shí)際的數(shù)據(jù)表單設(shè)計(jì)中，還需要根據(jù)產(chǎn)品要求和用戶(hù)目標(biāo)進(jìn)行相應(yīng)的調(diào)整。你對(duì)數(shù)據(jù)表單設(shè)計(jì)有什么經(jīng)驗(yàn)體會(huì)？有過(guò)哪些很棒的設(shè)計(jì)案例？歡迎交流分享～

△ 插畫(huà)來(lái)自 icon8

對(duì)于大多數(shù) SaaS 平臺(tái)，數(shù)據(jù)表單是必不可少的組件，可讓用戶(hù)獲得相關(guān)數(shù)據(jù)和洞察，從而采取正確的決策。

作為一個(gè)前企業(yè)家，我使用過(guò)各種 SaaS 平臺(tái)，例如 Mailchimp，Shopify，Klaviyo，Zendesk 等。它們提供不同的服務(wù) —— 電子郵件、訂單管理、客戶(hù)服務(wù)等解決方案，其共同點(diǎn)是，都需要將數(shù)據(jù)反饋給用戶(hù)。而數(shù)據(jù)表單則是傳輸大量數(shù)據(jù)最好的方法。

數(shù)據(jù)表單之所以有效，是因?yàn)樗鼈兡軌蛴行虻亟M織信息和數(shù)據(jù)，使用戶(hù)能夠輕松地掃描、比較和分析自己選擇的信息。這篇文章介紹了我在設(shè)計(jì)數(shù)據(jù)表時(shí)遵循的關(guān)鍵設(shè)計(jì)模式。

固定表頭

這一點(diǎn)對(duì)于超過(guò) 30 行的表單尤其重要。當(dāng)用戶(hù)必須向下滾動(dòng)才能查看所有可用信息時(shí)，如果沒(méi)有固定表頭，用戶(hù)將很難理解和區(qū)分多行數(shù)據(jù) —— 其中大部分可能是隨機(jī)數(shù)。一個(gè)固定的表頭可以幫助他們輕松地使用數(shù)據(jù)表，避免了向上滾動(dòng)查看字段含義 。

設(shè)計(jì)提示

我傾向使用 8px 網(wǎng)格系統(tǒng)進(jìn)行設(shè)計(jì)，將表頭尺寸保持在 16px（最小值）—— 防止你的設(shè)計(jì)看起來(lái)過(guò)于沉重和擁擠。

△ 當(dāng)用戶(hù)不理解某個(gè)數(shù)據(jù)字段時(shí)，固定的表頭使得用戶(hù)無(wú)需重復(fù)向上滾動(dòng)查看表頭內(nèi)容

固定側(cè)欄

對(duì)于數(shù)據(jù)表單，需要兩個(gè)組件對(duì)所有信息進(jìn)行排序。一是表頭，用于理解顯示的數(shù)據(jù)。二是固定側(cè)欄 ，與每一行數(shù)據(jù)相連接 ，常用于項(xiàng)目名稱(chēng)，例如活動(dòng)名稱(chēng)、產(chǎn)品名稱(chēng)、股票名稱(chēng)等。

當(dāng)數(shù)據(jù)表單需要水平滾動(dòng)展示隱藏列時(shí)，通過(guò)固定第一列項(xiàng)目名稱(chēng)，可以獲得與固定表頭相同的組件優(yōu)勢(shì)，提升信息傳達(dá)效率。

設(shè)計(jì)提示

設(shè)計(jì)固定側(cè)欄時(shí)，請(qǐng)?jiān)谠摿械挠覀?cè)添加陰影和垂直分隔線，提示用戶(hù)該表支持水平滾動(dòng)。

△ 當(dāng)數(shù)據(jù)表有太多列時(shí)，通過(guò)固定第一列項(xiàng)目名稱(chēng)，使表單更易理解

自定義欄

自定義欄允許用戶(hù)根據(jù)自己的偏好選擇表單顯示內(nèi)容。當(dāng)涉及多個(gè)指標(biāo)和數(shù)據(jù)集時(shí)，該功能可以滿(mǎn)足不同的用戶(hù)目標(biāo) 。常用于自助廣告平臺(tái)，例如 Facebook Ad Manager、Google Ads、AdRoll 等，在這些平臺(tái)上有多種營(yíng)銷(xiāo)指標(biāo)，每個(gè)用戶(hù)的優(yōu)先級(jí)都不同。

△ 自定義欄允許用戶(hù)根據(jù)自己的喜好對(duì)數(shù)據(jù)表進(jìn)行個(gè)性化設(shè)置

分頁(yè)器

我從開(kāi)發(fā)朋友那里學(xué)會(huì)了對(duì)表單進(jìn)行分頁(yè)，通過(guò)限制正在處理的信息量，減少加載時(shí)間。另一種方法是使用漸進(jìn)式加載，當(dāng)鼠標(biāo)滾動(dòng)到最后一行時(shí)，表單自動(dòng)加載一組新的數(shù)據(jù)。對(duì)比后者，分頁(yè)器允許用戶(hù)一次跳過(guò)好幾個(gè)組數(shù)據(jù)，滿(mǎn)足用戶(hù)非連續(xù)性瀏覽的需求。

設(shè)計(jì)提示

大多數(shù)表單每頁(yè)顯示行數(shù)可能超過(guò) 30 行，因此，將分頁(yè)器固定在表單頂部或底部會(huì)更加友好，方便用戶(hù)在頁(yè)面之間切換，無(wú)需過(guò)度地快速滾動(dòng)。

△ 使用分頁(yè)可以減少加載時(shí)間，因?yàn)樗拗屏苏谔幚淼男畔⒘?/span>

過(guò)濾器

過(guò)濾器組件對(duì)于篩選目標(biāo)信息、屏蔽無(wú)關(guān)數(shù)據(jù)量至關(guān)重要。日期篩選是最基本的過(guò)濾器，能夠根據(jù)用戶(hù)指定日期來(lái)顯示信息。當(dāng)每列具有固定的展示字段，這意味著信息不是隨機(jī)的，而是固定的選擇，您還可以設(shè)置單項(xiàng)信息的過(guò)濾器。

最好在過(guò)濾器下拉列表中提供復(fù)選功能，允許用戶(hù)選擇多個(gè)變量 —— 過(guò)濾系統(tǒng)越靈活，用戶(hù)就越容易操縱他們的信息。

△ 過(guò)濾器組件對(duì)于減少根據(jù)用戶(hù)要求顯示的數(shù)據(jù)量至關(guān)重要

數(shù)據(jù)排序

排序類(lèi)似于過(guò)濾，可以根據(jù)用戶(hù)的需要重新排列信息，調(diào)整信息展示順序。在大多數(shù)情況下，左列會(huì)對(duì)表單進(jìn)行默認(rèn)排序，用戶(hù)可以單擊標(biāo)題對(duì)表單進(jìn)行相應(yīng)的排序設(shè)置。

您可以將排序添加到表頭中，例如按數(shù)字或字母順序?qū)Ω鱾€(gè)數(shù)據(jù)進(jìn)行排序。但請(qǐng)不要濫用此功能，它對(duì)于狀態(tài)或類(lèi)別等特定指標(biāo)，可能是多余的 —— 過(guò)濾器處理這些數(shù)據(jù)會(huì)更合理。

設(shè)計(jì)提示

盡量避免使用線型圖標(biāo)，選用面型圖標(biāo)來(lái)增加可見(jiàn)性。懸停狀態(tài)能夠傳達(dá)整個(gè)區(qū)域可單擊的視覺(jué)提示 。

△ 排序類(lèi)似于過(guò)濾，根據(jù)用戶(hù)的需要重新排列信息

多選項(xiàng)同時(shí)操作

復(fù)選框允許用戶(hù)選擇多個(gè)項(xiàng)目，并對(duì)所選項(xiàng)目執(zhí)行某種操作 。幫助用戶(hù)節(jié)省時(shí)間和精力，不必重復(fù)相同的步驟。想象一下，所有的行都有相同的選框，這些選框會(huì)重復(fù)出現(xiàn) —— 這會(huì)使你的表單看起來(lái)雜亂無(wú)章。

設(shè)計(jì)提示

我通常將復(fù)選框的大小保持在 24px（最小尺寸），居中布局，提高可用性。此外，高亮顯示被選定的行，增強(qiáng)對(duì)比性 。

△ 復(fù)選框允許用戶(hù)選擇多個(gè)項(xiàng)目并對(duì)所選項(xiàng)目執(zhí)行操作

簡(jiǎn)單且簡(jiǎn)約

“極簡(jiǎn)主義” 這個(gè)詞已經(jīng)被廣泛地使用，空白似乎是現(xiàn)在的趨勢(shì)，但在這種情況下，少就是多。在設(shè)計(jì)數(shù)據(jù)表單時(shí)，重點(diǎn)應(yīng)該放在數(shù)據(jù)本身而不是用戶(hù)界面上。用戶(hù)已經(jīng)在與大量的數(shù)字和信息交互，復(fù)雜的界面只會(huì)增加用戶(hù)的認(rèn)知負(fù)荷。

設(shè)計(jì)提示

沒(méi)有必要添加額外的視覺(jué)干擾，例如不必要的圖標(biāo)、斑馬行、隨機(jī)顏色等。

△ 當(dāng)你讓你的 UI 設(shè)計(jì)師瘋狂的時(shí)候會(huì)發(fā)生什么？

普通的字體樣式

在設(shè)計(jì)中，排版是樣式指南中的一個(gè)關(guān)鍵元素，對(duì)于品牌推廣至關(guān)重要。但在設(shè)計(jì)表格時(shí)，您應(yīng)該遵循上面的指示（簡(jiǎn)單和簡(jiǎn)約），不要在表格中使用任何復(fù)雜的字體樣式。

設(shè)計(jì)提示

沒(méi)有推薦的字體，但建議盡量避免使用襯線字體，因?yàn)樗鼈兺鶗?huì)吸引人的注意力，導(dǎo)致額外的視覺(jué)負(fù)擔(dān)。此外，避免出現(xiàn)大寫(xiě)單詞，它會(huì)使你的設(shè)計(jì)看起來(lái)沉重。

△ 襯線字體在表格上看起來(lái)很奇怪 —— 不知道你們是否看到過(guò)使用襯線字體的數(shù)據(jù)表單

項(xiàng)目鏈接

對(duì)于特定的表單，項(xiàng)目名稱(chēng)還可以充當(dāng)鏈接，這是一種符合用戶(hù)習(xí)慣的交互形式，用戶(hù)很容易理解鏈接會(huì)將其帶到何處。

設(shè)計(jì)提示

設(shè)計(jì)文本鏈接時(shí)，請(qǐng)使用不同的顏色向用戶(hù)展示此鏈接 —— 僅在文本上加粗或設(shè)置下劃線并不能提供足夠的視覺(jué)提示。

設(shè)計(jì)文本鏈接時(shí)，請(qǐng)使用不同的顏色向用戶(hù)展示此鏈接

鼠標(biāo)懸停

表單的操作通常放在最后一列。當(dāng)沒(méi)有太多的信息列，需要水平滾動(dòng)信息時(shí)，這種模式就很適合。也可以將操作放在第一列或第二列，這樣用戶(hù)就不需要在滾動(dòng)時(shí)跟蹤這一行，但操作較多時(shí)，可能會(huì)產(chǎn)生認(rèn)知過(guò)載，導(dǎo)致不必要的錯(cuò)誤。

鼠標(biāo)懸?？梢员３趾?jiǎn)約的外觀 —— 只有當(dāng)用戶(hù)將鼠標(biāo)懸停在相應(yīng)的行上時(shí)， 操作圖標(biāo)和文本才會(huì)出現(xiàn)。

最后

以上內(nèi)容只是原則性說(shuō)明，主要為你提供一般性的建議，在實(shí)際的數(shù)據(jù)表單設(shè)計(jì)中，還需要根據(jù)具體的產(chǎn)品要求和用戶(hù)目標(biāo)進(jìn)行相應(yīng)的調(diào)整。

文章來(lái)源：優(yōu)設(shè)網(wǎng)    推薦：TCC翻譯情報(bào)局

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)