中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導讀：表格是展現(xiàn)數(shù)據(jù)最為清晰、高效的形式之一，它也是B端產(chǎn)品和設(shè)計師每天接觸最多的組件，常和排序、搜索、篩選、分頁等其他界面元素一起協(xié)同。本文作者總結(jié)了一套B端表格設(shè)計指南，一起來看看吧。

大家好，我是小鹿，周末來小小的充個電吧～今天為大家分享的是「B端典型頁面-表格（上篇）」，文章將從概念和結(jié)構(gòu)拆分為以下四個部分為大家進行全方位的解讀復盤。

01 表格的概念

02 數(shù)據(jù)查看-顯

03 數(shù)據(jù)篩選-查

04 數(shù)據(jù)操作-增刪改

因篇幅較長，考慮到大家的閱讀體驗，本篇將從前兩個部分「表格的概念」和「數(shù)據(jù)查看」結(jié)合實際案例進行分享。

一、表格的概念

1. 表格的特點

表格是展現(xiàn)數(shù)據(jù)最為清晰、高效的形式之一，它也是B端產(chǎn)品和設(shè)計師每天接觸最多的組件，常和排序、搜索、篩選、分頁等其他界面元素一起協(xié)同。在企業(yè)級中后臺中，常應(yīng)用于：

一次性瀏覽大量信息-很多圖表類型無法展示數(shù)據(jù)特點，而表格是組織大量信息通用性最高的一種表達方式，既可陳列信息，又可以表達信息之間的關(guān)系；

信息之間需對比-表格的歸納與分類，便于用戶快速查詢其中的差異與變化和關(guān)聯(lián)；

快速確定并執(zhí)行多種復雜操作-如對信息進行搜索、篩選、增刪改等。

2. 表格頁的構(gòu)成

通常表格的組成元素以及相關(guān)元素會有多個部分，根據(jù)不同粒度的用戶目標將其解構(gòu)為三部分：

• 數(shù)據(jù)查看：表格的核心-顯，用戶用來閱覽、對比和分析數(shù)據(jù)
• 數(shù)據(jù)過濾：輔助作用，承載表格的查功能，將數(shù)據(jù)過濾，方便用戶快速查詢定位數(shù)據(jù)，一般位于表格上方
• 數(shù)據(jù)操作：輔助作用，承載表格的增刪改的功能，比如常見的“新增”、“刪除”、“編輯”按鈕。

從用戶目標來看，表格頁的終極目標是查看，所以我們按照數(shù)據(jù)查看、數(shù)據(jù)過濾、數(shù)據(jù)操作的順序來對表格頁進行講解。

二、數(shù)據(jù)查看-顯

數(shù)據(jù)查看區(qū)主要由表頭、行、列、單元格五個部分組成。

表頭：說明數(shù)據(jù)的內(nèi)容，可以包含篩選、排序等功能起到數(shù)據(jù)解釋作用

行和列：對本行/本列數(shù)據(jù)的描述，可以理解為是表格的骨架，是用戶快速掃描并接收表格布局的關(guān)鍵要素

單元格：表格的主體內(nèi)容，承載用戶的每一條數(shù)據(jù)，也是整個表格的核心

分頁器（不一定有）：分隔長列表的組件，每次只加載一個頁面

對表格元素庖丁解牛后，小編將通過八個點：視覺風格、表格構(gòu)成（表頭、行、列、單元格、分頁器）、基礎(chǔ)交互和詳情查看，三原則：信息降噪、呼吸適中、高效易讀

來對表格設(shè)計一一拆解

1. 視覺風格

表格中所承載的數(shù)據(jù)信息才是主體，在進行表格設(shè)計時，尤其要注意去除所有非必要的視覺元素，讓用戶將注意力集中在數(shù)據(jù)信息上，而不是無關(guān)的邊框、底色等。

1.1 去掉不必要的分割線和斑馬紋

去掉豎向分割線：水平分割線能顯著減輕長表格在垂直方向的視覺重量，加快大量數(shù)值的對比工作。

而豎向分割線的作用是即使縮減元素之間的距離也能區(qū)分不同元素，但如果使用了合適的對齊方式分，豎直分隔線就會很多余的。即使要用，也要非常淡，不能妨礙快速瀏覽。

不使用斑馬線：數(shù)據(jù)量不大且易分辨的情況下，斑馬線在很多時候也是沒有必要的，因為它們是同一類數(shù)據(jù)，而且水平分割線就已經(jīng)能夠明顯區(qū)隔。

1.2 分割線樣式輕盈

分割線的樣式盡量輕盈，無關(guān)的邊框不要搶視覺，數(shù)據(jù)才是主體，突出內(nèi)容。

1.3 減少圖形元素的使用

去掉不必要的裝飾和顏色，如icon、標簽等，雖然能夠幫助組織數(shù)據(jù)、更直觀的傳達信息，但物極必反，少即是多，要注意克制這些元素的使用。標簽能用線性就不用面性，做到輕盈，否則表格中最重的就是標簽。

1.4 字體降噪

在產(chǎn)品的品牌設(shè)計中，字體是規(guī)范中的重要一環(huán)。然而在設(shè)計表格時，簡約至上才是關(guān)鍵，盡量避免任何裝飾性字體。雖然文本不能夠建議你具體使用哪種字體，但數(shù)字建議使用Helvetica Neue、Helvetica等其他等寬字體，文本最好不要出現(xiàn)以下情況

不要出現(xiàn)襯線字體：因為個性會產(chǎn)生閱讀噪音，不利于用戶對數(shù)據(jù)的理解和思考。

不要出現(xiàn)全大寫字體：因為它很難讀，需要轉(zhuǎn)化思維。

不要出現(xiàn)使用斜體：易引起視線疲勞，影響閱讀。

不要出現(xiàn)多種字體：保持風格統(tǒng)一。

2. 表頭

根據(jù)表頭的復雜程度，可以分為以下三類類型：

• 純文本表頭：僅起到解釋數(shù)據(jù)屬性的作業(yè)
• 多功能表頭：含篩選、搜索或排序等相關(guān)操作
• 分組表頭：信息分類層級較多的情況下使用，表格需要采取帶豎向分割線

而在表頭設(shè)計過程中，有以下3點需要注意：

2.1 精簡表頭-少一字不可

表頭在能夠概括的情況下，盡量簡煉、準確，一般可根據(jù)上下文關(guān)系來進行減短簡化，以達到節(jié)省表格頭部空間和減輕視覺壓力的作用。

一個簡單的檢驗表頭是否精簡的方法是：少一個字不可，通俗易懂的說法就是字數(shù)再精簡用戶就不明白意思

2.2 定義專有名詞

對于比較復雜的表頭，可以定義一個專有名詞，鼠標hover上去對專業(yè)術(shù)語或用戶不常見的名詞給予該字段的詳細解釋，同時滿足新手、普通、專家用戶的需求。

2.3 情況允許時，去掉表頭

如果表格數(shù)據(jù)可以自我解釋，表頭就不是必須的。如電子郵件的表格，就不需要表頭，因為發(fā)件人和郵主題的區(qū)分度比較高。

3. 單元格

3.1單元格高度

在開發(fā)同學的眼中，單元格高度=內(nèi)容高度+上間距+下間距，在實現(xiàn)設(shè)計稿時，通常也是按照這個方式來寫的，而不是像設(shè)計同學一樣按照文字的尺寸來計算間距。其中，文字行高建議設(shè)為字號的1.5倍，上下間距設(shè)為字號的1.2倍。

當然，在很多很多通用化產(chǎn)品中，存在多個設(shè)備屏幕分辨率的差異，為了讓每一個分辨率下的產(chǎn)品都能夠有較好的展示效果，可設(shè)置舒適、標準、緊湊三種高度來滿足需求，提供切換按鈕讓用戶自己控制顯示密度。

3.2 單元格截斷規(guī)則

工作中常常會遇到單元格數(shù)據(jù)過多的情況，常見的方法有兩種：

• 定義一個單元格長度或字數(shù)限制，超過該范圍以”…”顯示，鼠標懸停時出現(xiàn)氣泡顯示完整內(nèi)容。
• 折行顯示，這種方法讓平鋪直敘，讓用戶可以直接了當?shù)目吹剿行畔ⅲ贐端使用層面上還是不錯的，建議不要超過三行，超出可“…”顯示。

數(shù)據(jù)過多時，單元格長度如何定義？超過哪個范圍“…”顯示呢？

定義長度的依據(jù)：根據(jù)業(yè)務(wù)字段，防重復。保證用戶在掃視的時候，對重要字段能快速區(qū)分、對比。

3.3 不留空白格

當表格單元格中沒有相應(yīng)數(shù)據(jù)時，要避免直接留出空白單元格?？瞻赘袢菀自斐捎脩舻睦Щ笊踔琳`解，用戶會搞不清楚到底是沒有數(shù)據(jù)，還是根本沒有值？

正確做法是，數(shù)據(jù)不存在（數(shù)據(jù)庫中沒有該字段）用“-”，沒有數(shù)量（數(shù)據(jù)庫中有該字段）用“0”，且小數(shù)點后位數(shù)、單位，都要與上下單元格保持一致。

3.4 收起低頻操作

對于單條數(shù)據(jù)操作頻繁的場景，當超過三個操作項時，操作低頻折疊收起。這樣做的優(yōu)點是界面簡潔明快，信息密度低，可以幫助頁面突出更加重要的信息，減輕空間壓力，減少干擾。

4. 行的設(shè)計

4.1 對齊方式

多行情況下，居中和頂部對齊都是可以的。不過小編建議采用頂部對齊，考慮到一行類不同的單元格會有行數(shù)不一致的情況，比如有個3行數(shù)據(jù)，有的只有一行，這個情況下居中對齊信息的閱讀效率不如頂部對齊效率高

4.2 默認行排序

新增一條數(shù)據(jù)后，這條數(shù)據(jù)應(yīng)該被放在表格的哪里呢？這是個和表格默認排序有關(guān)的問題。

表格數(shù)據(jù)應(yīng)該默認按添加的時間排序，還是應(yīng)該按某個字段的名稱排序？

如果我們默認按某個字段排序，比方說崗位列表里增加一條“廣深常溫B2C 叉車員”的字段，而首字母G的數(shù)據(jù)在表格中極大概率不靠前。這時就會出現(xiàn)一個問題，用戶要在茫茫數(shù)據(jù)中找到剛增加的那一條數(shù)據(jù)，或者用戶根本不知道自己增加的數(shù)據(jù)已經(jīng)被插入在了表格里了，這會讓他們覺得自己的操作失敗了。

解決這個問題的一個方法就是按照數(shù)據(jù)添加時間排序，默認最新創(chuàng)建的在最上面，體驗上創(chuàng)建完反饋，馬上就出現(xiàn)了變化，且針對最新數(shù)據(jù)的操作頻率較高，方便用戶發(fā)現(xiàn)與查找。同時也可以用帶排序的表頭，讓用戶自定義排序。

5. 列的設(shè)計

5.1 合適的列間距

合適的填充和邊距對于視覺設(shè)計至關(guān)重要，以保證易讀性。定義列的間距時，我通常的做法是N1保持不變，將N2定義一個最小值，N2再根據(jù)表格的寬度自適應(yīng)變化。

表格主要適配到這個最小寬度，這一步驟通常的設(shè)計系統(tǒng)的初期就要完成，一方面可根據(jù)自己項目目前情況，按照導航寬度等固定尺寸確定最小的表格寬度，這樣在處理最小尺寸時，可以有一個明確的邊界，同時能與開發(fā)同學進行理解溝通。當表格寬度大于頁面寬度，固定首尾列，左右滑動。

5.2 控制列數(shù)

基于對實際業(yè)務(wù)需求、目標用戶訴求及其行為的理解，列數(shù)盡量控制在7±2，列舉用戶更為關(guān)注的數(shù)據(jù)，用戶需要的非重點、輔助性信息可以在詳情中展示。

5.3 自定義列

如果不同用戶想看到的信息側(cè)重不同，可以讓用戶自定義列的展示。在默認情況下僅展示最常用、最重要的幾個指標（如下圖）。這樣做的好處是：

首先，用戶能在表格上方看到所有的指標名稱，避免了原來需要橫向拖拽才能瀏覽到所有指標的情況；

其次，用戶可以根據(jù)自己的需要，自由的選擇顯示所需指標，隱藏不必要指標，減少干擾。但需注意系統(tǒng)應(yīng)記住用戶上一次的自定義列設(shè)置，減少用戶重復操作。

5.4 合適的對齊方式

合適的對齊方式能夠提升數(shù)據(jù)的瀏覽效率。表格內(nèi)信息的縱向列對齊（符合格式塔心理學中相近原則）能夠很好的形成視覺引導線。通過對齊，會讓表格更加規(guī)范易理解，給用戶視覺上的統(tǒng)一感，視線流動更順暢，讓用戶快速的捕捉到所需內(nèi)容。

• 文本左對齊：更高效的閱讀瀏覽順序，包括非比較型和固定長度的數(shù)字，如日期2020-12-04（補0是數(shù)字書寫規(guī)范）、編號1948696等；
• 數(shù)值右對齊：金額、長度、高度等，數(shù)字是從右往左讀的，通過數(shù)值位數(shù)的長短即可對比數(shù)值的量級和大小，方便數(shù)值的比對。這是因為在對比數(shù)字時，首先看個位，然后十位、百位等；
• 操作右對齊：操作即使沒有縱向分割線也能很好的起到分隔的作用，視覺上看表格是一個方方正正的格子，比較整齊

6. 分頁器

在Web端，數(shù)據(jù)量動輒上萬條，容易出現(xiàn)瀏覽器響應(yīng)太慢或者瀏覽器內(nèi)存溢出的情況。使用分頁器有哪些優(yōu)點呢？

• 分頁可以緩解服務(wù)器的加載壓力，每翻一頁加載該頁的頁面，縮減單次加載的數(shù)據(jù)量來縮短等待加載的時間，從而達到少量多次的高效體驗。這就是為什么哪怕是移動時代了，很多表格還是使用分頁組件。
• 分頁可以跳躍查看數(shù)據(jù)，靈活性更高、步驟更短。

表格設(shè)計大原則是整張表不要超過一屏，每一頁的默認行數(shù)：10行以上，減少翻頁的次數(shù)。但考慮到每個用戶的使用習慣，在給出默認行的數(shù)量后，可以讓用戶自定義每頁的顯示的數(shù)量，相比于跨屏翻頁而言，向下滾屏會更便利。

2個小tips：

• 當表格數(shù)據(jù)無數(shù)據(jù)時，翻頁控制按鈕不可見。
• 當表格數(shù)據(jù)條數(shù)小于10條時，翻頁控制按鈕不可見

7. 詳情查看

7.1 詳情入口

詳情查看可以分為點擊詳情、跳轉(zhuǎn)（顯性和隱性）三種方式。

• 詳情：在操作列中增加“詳情”功能，點擊查看詳情。
• 顯性跳轉(zhuǎn)：把 ID、名稱等唯一性標志的字段加上超鏈接
• 隱性跳轉(zhuǎn)：默認不顯示鏈接色，鼠標hover上去才顯示鏈接色，點擊可以查看或直接點擊除操作外的單元格查看（如飛書管理后臺）

7.2 詳情交互

關(guān)于表格詳情查看的展現(xiàn)形式，按可承載的信息量由少到多依次分為折疊展開、彈窗、抽屜、及新增頁面四種類型。

a. 折疊展開

直接在表格里展開（可以是詳情，也可以是二級表格），無需打開新頁面即可查看附加信息，防止用戶迷失。

適用場景：信息量較少的情況

b. 彈窗

彈窗是一種中斷用戶當前操作并對其進行補充、或者對當前操作進行強制反饋的交互形式，需要用戶進行強交互，它可以保留用戶當前進程的情況下，指引用戶完成一個特定的操作。主要分為模態(tài)彈窗與非模態(tài)彈窗兩種形式：

非模態(tài)彈窗：

通常這類彈窗只會在屏幕上短暫停留，幾秒就會消失，也因此用戶感受不到他的存在。它的缺點也非常明顯，展示時間較短，不適合展示重要信息、不能承載大量文案。在詳情查看頁面中并不適用，此處就不再進行拆解。

模態(tài)彈窗：

位于瀏覽器的主頁面核心區(qū)域，需要用戶對它做出相應(yīng)交互，彈窗才會消失。

優(yōu)勢：通過全局的半透明黑色能夠讓用戶更加聚焦，集中精力去處理好當前事情，能夠通過透明度展示背景，讓用戶了解到自己并沒有離開當前頁面

劣勢：打擾用戶，感到強烈的中斷的感受

適用場景：數(shù)據(jù)詳情體量不大，頁面內(nèi)容較輕時。同時，不需要參照上級頁面內(nèi)容，有快速回退的訴求。

c. 抽屜

側(cè)滑抽屜相比彈窗減少了頁面層級和隔離感，有較強的連貫性，適合與原頁面具有連貫結(jié)構(gòu)的內(nèi)容的展示。單擊行鏈接將表格轉(zhuǎn)換為左側(cè)的列表項目和右側(cè)的其他詳細信息，這讓用戶能夠解析大型數(shù)據(jù)集，而且在涉及到多個項目時不會丟失位置。可自定義上下左右四個方向，一般右側(cè)滑出最為常見。

適用場景：詳情頁的內(nèi)容較多時，且有快速切換主體的訴求。

d. 新增頁面

新增頁面幾乎是萬能的，無論頁面內(nèi)容量是多少、頁面間是否連貫、以及使用頻率怎樣，都可以使用。新增頁面又分為：覆蓋當前窗口以及新窗口跳轉(zhuǎn)兩種形式，在場景上可以根據(jù)兩者差異進行選擇。

在詳情查看中，二級頁面使用頻率是非常高的，需要用戶在A與B頁面之間進行來回切換，這時候考慮頁面反復出現(xiàn)是否流暢，是否有切換成本的產(chǎn)生，本著產(chǎn)品效率至上的原則，新增的頁面建議新開一個窗口跳轉(zhuǎn)而非覆蓋，如下圖：

適用場景：當詳情頁承載內(nèi)容過多且里面的操作相對復雜時，如詳情頁內(nèi)有表格的嵌套和特別多的操作

8. 基礎(chǔ)交互

8.1 表格滾動

表格滾動方式有表頭固定和列固定兩種，比較復雜的表格可同時采取表頭和列都固定的情況

表頭固定 ：適合列表滾動加載時，適合瀏覽場景

列固定 ：適合列表項較多時 ，需要左右滑動時。比較常見的是首尾固定，當時也可以按照業(yè)務(wù)要求首列或者尾列固定，或者說表格前兩列業(yè)務(wù)都需要看到，則可以固定前2列

8.2 加載

表格中的復選框、折疊圖標，操作按鈕等遵循組件本身的加載規(guī)則。

加載機制根據(jù)實際業(yè)務(wù)中的數(shù)據(jù)量來決定是全量加載還是分頁加載。

加載樣式循序?qū)?yīng)規(guī)則：

三、最后

以上就是「B端典型頁面-表格」上篇的全部內(nèi)容啦～～

后續(xù)會為大家分享數(shù)據(jù)篩選、數(shù)據(jù)操作等一系列的設(shè)計知識點，希望能給正在從事或準備入局B端的的小伙伴帶來啟發(fā)和幫助。

本文由 @且曼B端設(shè)計_劉美芳 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。