網絡側表格設計指南
假設妳為企業產品設計了壹個系統或者壹個應用。這種設計需要桌子。這些表格設計並不是那些設計網站上展示的非常漂亮的表格樣式，而是交互復雜、單元格數以百計的表格。在這種情況下，設計師會面臨很多挑戰。例如:將設計與現有的前端框架相匹配，或者與破壞布局的“不舒服”的數據作鬥爭。我們將通過以下步驟解決這些問題:系統化需求、原子化和定義交互。
所以，妳已經采訪了妳的目標受眾。現在是時候將他們的需求和要求拼湊起來，並將其轉化為對設計有用的東西。例如，壹個用戶說，“我需要看到我的數據如何影響應用程序的其他部分。”或者當妳看到另壹個人在使用軟件時，妳註意到他只使用快捷方式，根本不碰鼠標。這是什麽意思？第壹個用戶的話是關於輸入驗證和提示的。您需要考慮將警報或幫助信息附加到表格上，或者開發壹個有意義的顏色系統。這取決於領域和心智模型。觀察第二個用戶的工作可能是妳需要設計鍵盤可設置的快捷鍵，妳可能需要考慮比“CmdC”和“CmdV”更深層次的快捷鍵。
這樣，妳就有了壹系列的需求和願望。開放式問題有助於發現真正的需求，過濾掉突發奇想。比如“什麽能幫助妳更快地工作？這樣如何提高妳的工作效率？做不到XX會改變什麽？”
這時候就需要壹個功能框架了。如下圖
任何表的最小構建塊都是壹個單元，由行和列組合而成，具有不同於其他單元的特定特征。最後我們用表格的重要補充作為頂欄，鍵盤命令，錯誤處理等。
簡而言之，建立壹個復雜的表格，收集並區分用戶需求的優先級。考慮非表格解決方案，如圖表。
畫壹個樹形圖，把所有需要的功能系統化。
原子化就是先設計小的UI組件，然後組裝更大的。我們會逐漸從字體、顏色等基本粒子轉移到標題或欄目等大模式。
這些部分可以由設計系統或UI框架來定義。如果為現有產品創建表格，請檢查調色板、字體和圖標是否符合表格的需要。
當表格原子設計就緒後，我們可以繼續設計不同類型的單元格。首先，提前考慮每個元素的“正常”、“懸停”、“活動”狀態。然後添加“點擊”、“禁用”等狀態。
單元格可以有工具提示、輸入提示、錯誤消息、占位符和其他附件。
當設計單元格來創建行時，您需要檢查各種組合是否能很好地協同工作。我在下面的壹行中顯示了只讀和可編輯的單元格。壹旦設計了具有復雜編輯邏輯的表格，表格的壹些字段由用戶提供，而其他字段則自動計算或填充默認值。
請註意，當您將鼠標懸停在只讀和可編輯單元格上時，光標會有所不同。單擊單元格將觸發行的選擇或進入可編輯單元格的編輯模式。當用戶選擇下圖中的壹行或多行時，您可以看到單元格的狀態。
現在該考慮表頭了。根據我的經驗，通常不可能控制好列標題的長度，堅持壹行。我在下面的圖片中展示了標題的不同變化。
基於數據的工具，用戶經常需要排序和過濾。它可以幫助用戶在冗長的數據中找到有價值的信息。排序和過濾的挑戰是將排序和過濾控件與其他標題元素(列標題、度量單位等)結合起來。).
與表格單元格不同，過濾框通常在右側有壹個“重置”圖標，以便用戶可以查看未過濾的內容。
在該示例中，有三種類型的過濾器盒。字母數字過濾器可以通過字母和數字進行搜索。它支持通配符——未知數量的未知字符。
日期選取器篩選器有壹個日歷，其工作方式與其單元格相同。允許用戶手動輸入日期並從日歷中選擇是壹件好事。如果他們知道他們在搜索什麽，那麽打字比點擊容易得多。在我的壹個項目中，允許我們輸入“2017年1月25日”、“2017年6月12日”、“2016年9月4日”等日期，只過濾壹個月或壹年。
復雜表的壹個常見功能是修復列。通常，包含關鍵信息(例如，元素名稱或狀態)的列不能滾動。
雖然表格列應該巧妙地適應內容大小，但當文本被截斷時會發生這種情況。在這種情況下，調整列大小很有幫助。用戶可以拖動列邊緣並查看長內容。
處理長文本字符串的另壹種方法是拉伸包含最長內容的列，或者將內容折疊成多行。第壹種方法對於或多或少相似的文本字符串更有效。如果對人們來說，看到整個內容比保持表格垂直和緊湊更重要，那麽第二種更好。
我們需要定義默認的最小列寬，以防止表格不適合調整大小。
桌子是由什麽組成的？單元格、列、行。此外，復雜的表通常有壹個頂部操作區。像其他組件壹樣，頂欄由更小的元素組成——標題和命令。下面我收集了我們在壹個產品中使用的各種狀態的命令列表。
現在我們可以嘗試將不同的元素結合起來，看看是否有效。這裏有壹些例子。
當然，這不是函數和元素的最終列表。它不同於項目，可能包含其他內容，例如:
按多列排序；
可自定義的列；
可擴展行；
邏輯運算符(and、or、other等。)用於過濾和搜索。
如果妳在設計哪些功能不設計哪些功能上猶豫不決，可以參考奧卡姆剃刀，或者簡單法則。如果現有的實例滿足要求，設計人員就不應該創建新的實例。妳應該“削減”用戶可能需要的煩人功能。
只讀表。構建最簡單的表類型，因為它只顯示數據。沒有過濾或編輯選項。
搜索表單。單元格不可編輯，表頭有過濾框和排序控件，可以選擇行。在實踐中，這些表格有助於從大量相似的事物中發現、比較和選擇壹個項目或幾個項目。
可編輯表單。或者有些單元格是可編輯的，通常不需要過濾，因為行的順序可以自定義。這些表通常有工具欄，並允許行執行操作。
總之
從最小的組件開始。然後逐漸走向更大的，最後，模擬整桌。
提前考慮每個組件的所有可能狀態。
使用奧卡姆剃刀原理將元素的數量保持在最少，但要涵蓋所有用例。
構建模塊不足以構建像表格這樣復雜的東西。設計師要考慮“遊戲規則”，設計視覺部分背後的邏輯原則和約定。
容器和響應類型
如何在界面中放置表格？比如會不會占用現有容器或者單個模塊中的壹些空空間？這些問題的答案完全取決於產品。最好能預見到可能出現的問題，並徹底明確原則。
壹些應用程序使用線條或白灰色的“斑馬線”來增加信息的可讀性。
定義壹個合理的默認寬度，並允許在需要時手動調整大小。對於讀取表格，最好在右邊有壹些空單元格，而不是列與列之間有間隙。但是如果壹個表格包含許多行和列，水平和垂直滾動是不可避免的。在手機上閱讀，還可以把表格做成卡片，幫助用戶瀏覽數據。
即使是非常流暢漂亮的表單，也可能成為用戶的噩夢。因此，遵循可及性原則非常重要。以下是對可訪問性的主要設計考慮。
給壹個標題，準備壹個簡潔的總結。視力受損的用戶應該能夠處理表單，而不需要對他們所有的單元進行語音處理。
註意字體大小。雖然沒有官方的網絡最小尺寸，但16px(12pt)被認為是最好的。此外，用戶應該能夠在不破壞整個布局的情況下將表格增加到200%。
為色盲的人測試顏色。文本控件應該與背景有足夠的對比度。最低要求的顏色比例為3:1(越多越好)。顏色不應該是標記事物的唯壹方式。例如，錯誤信息不應僅依賴紅色文本，警告圖標將為色盲用戶提供參考。
避免使用小而模糊的控件。如果可點擊的組件至少為40×40像素，則被認為是觸摸友好的。圖標表示的命令應該有標記，或者有工具提示和替代文本。設計師不應該過度使用圖標，因為用戶可能無法正確理解復雜的隱喻。
總之
內容統壹和格式化也是設計師的工作。
不僅要考慮界面元素，還要考慮用例、規則和常見模式。
原文:plex-tables-356826d11861
翻譯者:永遠
相關文章推薦:
在制定設計規範之前，您需要查看這些設計資源。
如何建立設計語言系統
初級UI用於將數據傳送到服務器上的CGI腳本或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作。
html中什麽標簽用於創建表單？
HTML中form標簽用於創建表單
html是靜態頁面技術之壹，包含了所有的頁面控件，form表單標簽是最常見的控件之壹，用於將前端數據通過http協議發送給後端程序。可以是get，或者post形式發送。後端處理完數據後將結果返回前端。過程比較簡單的。