那么之前的文章都是對于B端這樣一個系統(tǒng)，進(jìn)行概括性地講解，系統(tǒng)的講解。那么從今天開始，我將對B端系統(tǒng)對大家進(jìn)行一個詳細(xì)的講解，包括每個控件的具體使用。這就是我們從大到小，再由小到大的這樣一個學(xué)習(xí)過程，那么目前我們要進(jìn)行收縮范圍，要精確的明白某個控件應(yīng)該如何使用。今天我所講解的是表格頁的具體使用方法，以及如何分析現(xiàn)有表格頁的問題。

       文章句句將會直擊重點，拒絕長篇大論。

       那么為了方便大家的理解和查看，我這里去列舉一張表格頁的圖片。以下的講解都會圍繞這個表格頁的圖片，進(jìn)行詳細(xì)的剖析講解。那么，在看的過程中，我們要時刻的翻到上面這張圖片，對照著這張圖片來吸收消化今天的知識。

       大家可以看到這是一個關(guān)于資產(chǎn)清單的表格頁，那么它的構(gòu)造也符合我們常規(guī)的表格頁。首先我們對這個表格也進(jìn)行分析，我們可以看出表格頁是由這幾部分組成的，它們分別是數(shù)據(jù)過濾，數(shù)據(jù)操作和數(shù)據(jù)查看。

數(shù)據(jù)過濾部分指的就是我們頁面上方的這樣一個搜索框，包括。我們表格頁內(nèi)容頂部的資產(chǎn)編碼，資產(chǎn)名稱，它們后邊都有這樣一個篩選器，我們可以按照順序或者是倒序進(jìn)行篩選。這里我把數(shù)據(jù)過濾的部分用紅色框標(biāo)注一下。

       那么這個表格頁我們可以看出，它的數(shù)據(jù)過濾其實是非常少的。更多的數(shù)據(jù)過濾有什么呢？按照資產(chǎn)的新舊程度，我們可以將它分為新的、舊的、淘汰的。那么這三個按鈕也可以作為數(shù)據(jù)過濾放在我們表格內(nèi)容頁的頂端。

       當(dāng)然，維度有很多個維度，我們不僅可以對資產(chǎn)的新舊程度進(jìn)行分類，我們也可以對資產(chǎn)的購買時間進(jìn)行分類，比如2018年、2019年、2020年至今，我們可以對這樣一個時間維度進(jìn)行分類。同樣，操作按鈕也是放在表格也的頂部，也就是我們搜索框的后邊。這樣用戶在篩選起來會比較的方便，具體需要按照什么維度進(jìn)行劃分，需要我們找到，我們的業(yè)務(wù)目標(biāo)是什么？我們要找到我們的這個表格頁希望給用戶傳達(dá)出怎樣的信息？那么用戶最關(guān)心的點是什么？找到這些之后我們就可以對用戶最關(guān)心的點以維度進(jìn)行劃分更多的篩選器，有助于用戶更好的去瀏覽內(nèi)容。

       此頁面我們可以看出他的篩選器過于少。在這里我們并不評價，數(shù)據(jù)過濾少是好事還是壞事？但是我們要記著，我們時刻要具備分析某個功能模塊。究竟應(yīng)該放在哪里？它應(yīng)該怎樣去劃分？這是我們要牢記的點。

       那么剛才也說過，一個表格頁分為三部分，分別是數(shù)據(jù)過濾，數(shù)據(jù)操作和數(shù)據(jù)查看。現(xiàn)在我們來講第二部分，也就是數(shù)據(jù)操作。那么什么是數(shù)據(jù)操作？數(shù)據(jù)操作，顧名思義就是對頁面中的某些數(shù)據(jù)進(jìn)行操作功能，可以是增，刪，改，查等等，它都是屬于數(shù)據(jù)操作。那么數(shù)據(jù)操作，它一定是一個可點擊的一個功能按鈕，在頁面中，我們?nèi)绻屑?xì)找一找很容易就會發(fā)現(xiàn)數(shù)據(jù)操作的模塊。在這里呢，我同樣用藍(lán)顏色的框給大家框起來。

       在這里，藍(lán)色框框起來的部分，就是我們這個表格頁中的數(shù)據(jù)操作部分，也就是第二個部分。

那么很多人可能會有疑問了，說為什么同樣都是數(shù)據(jù)操作，有的數(shù)據(jù)操作在上面是純色的一個按鈕顯示，那么有的數(shù)據(jù)操作又在表格內(nèi)容頁里，這些究竟有什么區(qū)別？

       沒錯，數(shù)據(jù)操作。它擺放的位置是多種多樣的，但它遵循一個規(guī)律，什么規(guī)律呢？也就是說在我們執(zhí)行數(shù)據(jù)操作的設(shè)計這樣一個功能模塊的時候，我們需要對其進(jìn)行第1次的劃分。數(shù)據(jù)操作部分我們可以分為單行操作，批量操作和全局操作三個操作點，也就是說所有的操作功能無非就是在這三個類別中的某一個類別。好，下面我來給大家詳細(xì)講一下什么是單行操作，什么是批量操作和全局操作。

       我相信大家通過字面意思也能對這三種操作方式有一定的了解，單行操作指的是針對表格內(nèi)容頁的一行數(shù)據(jù)進(jìn)行操作，一般就是放在表格頁的這一行的尾部。那么批量操作針對的是對多個數(shù)據(jù)進(jìn)行操作，他一般放在表格內(nèi)容的頂部，那么什么是全局操作？全局操作是對整個表格頁的頁面進(jìn)行操作，比如說我要導(dǎo)入新的表格，或者說我要替換這個表格，那么根據(jù)優(yōu)先級順序來說，全局操作大于批量操作，又大于單行操作。這就是數(shù)據(jù)操作的三個不同點，那么很顯然在我們上張圖片中。只存在單行操作和批量操作，并沒有全局操作。

       接下來我對最后一個部分，也就是數(shù)據(jù)查看這個部分進(jìn)行一個講解。數(shù)據(jù)查看也就是我們系統(tǒng)所反饋給用戶的一些數(shù)據(jù)，它包括具體的數(shù)字，也包括一些漢字，所有的信息都可以被列為數(shù)據(jù)查看。那么由于這個表格頁上的數(shù)據(jù)查看部分沒有去寫一些信息，將這些信息打碼隱藏了，但是我們不難想象它填入信息后的樣子，也就是整個表格的內(nèi)容頁的核心部分就是我們的數(shù)據(jù)查看，無論是數(shù)據(jù)操作還是數(shù)據(jù)過濾，只是進(jìn)行一些功能上的操作，那么用戶最終的視線還是要落在數(shù)據(jù)查看這個部分，同樣我用橙色的框給大家標(biāo)注出來。

       如果說我們的數(shù)據(jù)查看部分，其中的數(shù)據(jù)是混亂不堪的，或者說它的列數(shù)是非常的繁瑣的，那么對用戶的體驗非常不好，也不能在第一時間抓住有效信息，所以我們在設(shè)計的過程中一定牢記7±2法則進(jìn)行設(shè)計。

       那么有的人有疑問了，說如果我的列數(shù)非常多怎么辦？如果你的列數(shù)非常多，那么你只顯示其中的重要信息在表格頁這一塊，其他信息應(yīng)該歸納到查看詳情，或者是二級頁面內(nèi)，不能在一屏中展示過多的信息，即使你放了這么多信息，你要記著那也是無效的擺放，用戶在進(jìn)來之后根本就不想看一眼，所以在這里我們要一定要記著7±2法則，或者說我們給自己定一個列數(shù)的系統(tǒng)規(guī)范也是可以的。

       以上，就是今天對表格頁的詳細(xì)講解，那么要學(xué)習(xí)更多知識也可以進(jìn)我的公眾號學(xué)習(xí)。我們要知道再簡單、再復(fù)雜的表格頁也無非就是三塊，數(shù)據(jù)過濾、數(shù)據(jù)操作和數(shù)據(jù)查看，當(dāng)然在頁面中也存在我們的導(dǎo)航系統(tǒng)，它們共同組成了一個完整的表格頁，表格頁所遵循的宗旨是簡單高效，信息直觀，操作方便快捷。

文章來源：站酷  作者：弧形線


分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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