列表設(shè)計(jì)

時(shí)間：2023-09-29 13:12:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-29 13:12:01 來源：網(wǎng)站運(yùn)營

列表設(shè)計(jì)：在大家的理解范圍之內(nèi)，列表設(shè)計(jì)是最常用的交互樣式根據(jù)前段框架或者通用的模版。往往會(huì)忽略列表的交互設(shè)計(jì)的重要性。

但列表對(duì)于整個(gè)系統(tǒng)來說是最重要的組成部分，尤其是對(duì)整理數(shù)據(jù)或者看報(bào)表的用戶來說是最重要的，這里的用戶多指領(lǐng)導(dǎo)層，只有領(lǐng)導(dǎo)才會(huì)更多的關(guān)注報(bào)表和數(shù)據(jù)。所以好的列表設(shè)計(jì)可以讓整個(gè)系統(tǒng)更好的得到領(lǐng)導(dǎo)的肯定。




對(duì)于列表設(shè)計(jì)，我們主要先了解一下，列表的主要功能是什么？

是數(shù)據(jù)統(tǒng)計(jì)、數(shù)據(jù)預(yù)覽、數(shù)據(jù)對(duì)比、數(shù)據(jù)管理。




數(shù)據(jù)統(tǒng)計(jì)、數(shù)據(jù)預(yù)覽、數(shù)據(jù)對(duì)比，是用戶最主要的需求，也是列表的主要功能。數(shù)據(jù)管理，是為了更好的讓數(shù)據(jù)的功能滿足不同用戶的需求。

這里我們的列表設(shè)計(jì)主要是以數(shù)據(jù)管理的角度去設(shè)計(jì)列表。

數(shù)據(jù)管理包含數(shù)據(jù)篩選、數(shù)據(jù)操作、數(shù)據(jù)展示




一、數(shù)據(jù)篩選

1、條件搜索（模糊搜索、精確搜索、高級(jí)搜索）

1.1、條件搜索，就是把列表的重要關(guān)鍵字段作為條件，進(jìn)行數(shù)據(jù)搜索。常見的放置位置在是在列表的上方區(qū)域，條件搜索分為模糊搜索和精確搜索，模糊搜索，屬于包含關(guān)系，如，輸入“A”，搜索出所有包含"A“的數(shù)據(jù)；精確搜索，屬于等于關(guān)系，如，輸入”A“，搜索出只有"A"的數(shù)據(jù)。除了模糊搜索和精確搜索以外還有高級(jí)搜索，高級(jí)搜索包含了除包含關(guān)系和等于關(guān)系的其他所有關(guān)系，如，不能為空，等于零等。

1.2、條件搜索樣式，一般根據(jù)場景設(shè)置，一種數(shù)據(jù)量大，以查詢?yōu)g覽為主的列表，盡量把所有的搜索條件都展開，一種是以瀏覽管理為主的列表，盡量把搜索條件折起來，展示最主要的查詢條件

2、列表表頭搜索

列表表頭搜索，最常見的一種就是每個(gè)表頭字段下面一個(gè)篩選框；另一種比較特殊的表頭搜索主要是根據(jù)數(shù)據(jù)根據(jù)查詢條件，列表表頭字段改變，改變后的列表字段查詢，

3、列表表頭排序

列表表頭排序，多用于時(shí)間排序，

二、數(shù)據(jù)操作

1、批量操作（操作功功區(qū)）

批量操作也叫一對(duì)多的操作，就是對(duì)列表里面的數(shù)據(jù)可以多個(gè)批量操作，比如刪除、停用等。這類操作都會(huì)放在列表上方區(qū)域。新建、導(dǎo)入、導(dǎo)出。

2、單個(gè)操作（操作攔位置）

單個(gè)操作也叫一對(duì)一的操作，對(duì)列表中的數(shù)據(jù)一對(duì)一的操作。比如，詳情、編輯等。這類的操一般會(huì)放在列表操作欄中，操作欄一般放在列表的左邊或者右邊，如果列表寬度超過一屏，右邊的操作欄會(huì)采用浮動(dòng)的樣式，操作欄功能按鈕一般不超過3個(gè)，如果超過采用隱藏的形式。

三、數(shù)據(jù)展示

1、字段配置

字段配置主要用于一個(gè)列表滿足不同用戶的需求時(shí)，對(duì)不同用戶所關(guān)注的數(shù)據(jù)字段不一樣，進(jìn)行人性化的配置。有字段配置的列表，初始狀態(tài)有兩中表現(xiàn)形式，一種是，默認(rèn)基本字段，用戶增加所需要的字段（做加法）；一種是，所有字段都展示，用戶減去自己不想要的字段（做減法）。字段配置按鈕一般放置在列表右上方。

2、字段展示

字段展示只列表中的每個(gè)字段展示的規(guī)則，首先字段的寬度，一般分為固定和自適應(yīng)寬度。固定寬度指每個(gè)字段寬度都時(shí)一個(gè)固定的值（如果字段過少，不滿一屏可等分），自適應(yīng)寬度，就是字段的寬度根據(jù)字段的大小變化而變化，但也喲最大值，一般最大值為15個(gè)字符，超過15個(gè)字符用...代替。一般不建議數(shù)據(jù)換行。

3、分頁設(shè)置

分頁設(shè)置時(shí)為了減少加載數(shù)據(jù)，增加打開頁面速度。默認(rèn)分頁根據(jù)電腦屏幕的顯示最大數(shù)據(jù)量顯示，一般為25、50、100、200等。分頁需要顯示當(dāng)前頁，總共頁數(shù)，跳轉(zhuǎn)到相應(yīng)頁面，數(shù)據(jù)總計(jì)等。

四、寫在最后

因?yàn)樽罱恢痹谧龊笈_(tái)系統(tǒng)的交互設(shè)計(jì)，接觸了很多列表頁面設(shè)計(jì)，和許多奇奇怪怪的場景，但總體來說，列表的主要目的是一樣的：數(shù)據(jù)統(tǒng)計(jì)、數(shù)據(jù)預(yù)覽、數(shù)據(jù)對(duì)比、數(shù)據(jù)管理。也是基于最基礎(chǔ)的列表結(jié)構(gòu)來擴(kuò)展，滿足不同的場景需求。這里簡單的對(duì)列表結(jié)構(gòu)進(jìn)行了簡單的總結(jié)，希望在工作中對(duì)大家有鎖幫助，也希望大家可以多多交流。