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