2021-12-12 資深UI設計者
那么之前的文章都是對于B端這樣一個系統，進行概括性地講解，系統的講解。那么從今天開始，我將對B端系統對大家進行一個詳細的講解，包括每個控件的具體使用。這就是我們從大到小，再由小到大的這樣一個學習過程，那么目前我們要進行收縮范圍，要精確的明白某個控件應該如何使用。今天我所講解的是表格頁的具體使用方法，以及如何分析現有表格頁的問題。
文章句句將會直擊重點，拒絕長篇大論。
那么為了方便大家的理解和查看，我這里去列舉一張表格頁的圖片。以下的講解都會圍繞這個表格頁的圖片，進行詳細的剖析講解。那么，在看的過程中，我們要時刻的翻到上面這張圖片，對照著這張圖片來吸收消化今天的知識。
大家可以看到這是一個關于資產清單的表格頁，那么它的構造也符合我們常規的表格頁。首先我們對這個表格也進行分析，我們可以看出表格頁是由這幾部分組成的，它們分別是數據過濾，數據操作和數據查看。
數據過濾部分指的就是我們頁面上方的這樣一個搜索框，包括。我們表格頁內容頂部的資產編碼，資產名稱，它們后邊都有這樣一個篩選器，我們可以按照順序或者是倒序進行篩選。這里我把數據過濾的部分用紅色框標注一下。
那么這個表格頁我們可以看出，它的數據過濾其實是非常少的。更多的數據過濾有什么呢？按照資產的新舊程度，我們可以將它分為新的、舊的、淘汰的。那么這三個按鈕也可以作為數據過濾放在我們表格內容頁的頂端。
當然，維度有很多個維度，我們不僅可以對資產的新舊程度進行分類，我們也可以對資產的購買時間進行分類，比如2018年、2019年、2020年至今，我們可以對這樣一個時間維度進行分類。同樣，操作按鈕也是放在表格也的頂部，也就是我們搜索框的后邊。這樣用戶在篩選起來會比較的方便，具體需要按照什么維度進行劃分，需要我們找到，我們的業務目標是什么？我們要找到我們的這個表格頁希望給用戶傳達出怎樣的信息？那么用戶最關心的點是什么？找到這些之后我們就可以對用戶最關心的點以維度進行劃分更多的篩選器，有助于用戶更好的去瀏覽內容。
此頁面我們可以看出他的篩選器過于少。在這里我們并不評價，數據過濾少是好事還是壞事？但是我們要記著，我們時刻要具備分析某個功能模塊。究竟應該放在哪里？它應該怎樣去劃分？這是我們要牢記的點。
那么剛才也說過，一個表格頁分為三部分，分別是數據過濾，數據操作和數據查看。現在我們來講第二部分，也就是數據操作。那么什么是數據操作？數據操作，顧名思義就是對頁面中的某些數據進行操作功能，可以是增，刪，改，查等等，它都是屬于數據操作。那么數據操作，它一定是一個可點擊的一個功能按鈕，在頁面中，我們如果仔細找一找很容易就會發現數據操作的模塊。在這里呢，我同樣用藍顏色的框給大家框起來。
在這里，藍色框框起來的部分，就是我們這個表格頁中的數據操作部分，也就是第二個部分。
那么很多人可能會有疑問了，說為什么同樣都是數據操作，有的數據操作在上面是純色的一個按鈕顯示，那么有的數據操作又在表格內容頁里，這些究竟有什么區別？
沒錯，數據操作。它擺放的位置是多種多樣的，但它遵循一個規律，什么規律呢？也就是說在我們執行數據操作的設計這樣一個功能模塊的時候，我們需要對其進行第1次的劃分。數據操作部分我們可以分為單行操作，批量操作和全局操作三個操作點，也就是說所有的操作功能無非就是在這三個類別中的某一個類別。好，下面我來給大家詳細講一下什么是單行操作，什么是批量操作和全局操作。
我相信大家通過字面意思也能對這三種操作方式有一定的了解，單行操作指的是針對表格內容頁的一行數據進行操作，一般就是放在表格頁的這一行的尾部。那么批量操作針對的是對多個數據進行操作，他一般放在表格內容的頂部，那么什么是全局操作？全局操作是對整個表格頁的頁面進行操作，比如說我要導入新的表格，或者說我要替換這個表格，那么根據優先級順序來說，全局操作大于批量操作，又大于單行操作。這就是數據操作的三個不同點，那么很顯然在我們上張圖片中。只存在單行操作和批量操作，并沒有全局操作。
接下來我對最后一個部分，也就是數據查看這個部分進行一個講解。數據查看也就是我們系統所反饋給用戶的一些數據，它包括具體的數字，也包括一些漢字，所有的信息都可以被列為數據查看。那么由于這個表格頁上的數據查看部分沒有去寫一些信息，將這些信息打碼隱藏了，但是我們不難想象它填入信息后的樣子，也就是整個表格的內容頁的核心部分就是我們的數據查看，無論是數據操作還是數據過濾，只是進行一些功能上的操作，那么用戶最終的視線還是要落在數據查看這個部分，同樣我用橙色的框給大家標注出來。
如果說我們的數據查看部分，其中的數據是混亂不堪的，或者說它的列數是非常的繁瑣的，那么對用戶的體驗非常不好，也不能在第一時間抓住有效信息，所以我們在設計的過程中一定牢記7±2法則進行設計。
那么有的人有疑問了，說如果我的列數非常多怎么辦？如果你的列數非常多，那么你只顯示其中的重要信息在表格頁這一塊，其他信息應該歸納到查看詳情，或者是二級頁面內，不能在一屏中展示過多的信息，即使你放了這么多信息，你要記著那也是無效的擺放，用戶在進來之后根本就不想看一眼，所以在這里我們要一定要記著7±2法則，或者說我們給自己定一個列數的系統規范也是可以的。
以上，就是今天對表格頁的詳細講解，那么要學習更多知識也可以進我的公眾號學習。我們要知道再簡單、再復雜的表格頁也無非就是三塊，數據過濾、數據操作和數據查看，當然在頁面中也存在我們的導航系統，它們共同組成了一個完整的表格頁，表格頁所遵循的宗旨是簡單高效，信息直觀，操作方便快捷。
文章來源：站酷 作者：弧形線
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( ssll180.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務