一、列表介紹

1.列表定義

列表，又稱表格，以行和列的形式組成表格，裝載文字或者圖片等內(nèi)容。網(wǎng)上的許多教程把列表和表單的概念混淆，表單提供的是數(shù)據(jù)采集功能，通常利用文本框，單選框，復(fù)選框等組件進(jìn)行數(shù)據(jù)采集。

2.列表作用

列表有3個方面的作用：

（1）規(guī)范的存儲大量的數(shù)據(jù)，如后臺管理中的用戶管理，可以規(guī)范地將用戶名稱、年齡、電話號碼等信息規(guī)范存儲；

（2）方便查找，通過一個列表，可以比較方便搜索數(shù)據(jù)庫中的內(nèi)容；

（3）方便比較，大量內(nèi)容最直觀的對比方式還是用列表。

3.列表元素

列表包括的元素有表頭，位于頂行，如下圖左側(cè)的“代碼”、“名稱”；以及內(nèi)容，位于表頭下方。

二、列表的類型

1.經(jīng)典列表

如圖所示，以行和列組成文字矩陣的列表。

2.圖文列表

如下圖所示，裝載圖片和文字內(nèi)容組成的列表，其他類似的還包括淘寶中的商品列表頁，這種圖文列表一般是考慮利用圖片直觀展示更生動的內(nèi)容。

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

1.提高列表的可讀性

（1）對齊

表格對齊的方式建議是左邊第一列（或者前兩列）左對齊，右側(cè)所有列右對齊。主要原因是左邊左對齊符合人眼球從左到右的閱讀習(xí)慣，用戶閱讀表格是首先是從左開始閱讀，先看到左側(cè)的關(guān)鍵信息；而右側(cè)的列右對齊是因?yàn)榭紤]到列表通常都會帶有數(shù)字，而右對齊的數(shù)字方便進(jìn)行大小比對。

（2）排序

列表支持排序是提高可讀性的重要影響因素之一，支持升序、降序的排序操作，能方便比較數(shù)值的大小。注意，排序的圖標(biāo)一般用上下三角箭頭表示，上箭頭表示升序，下箭頭表示降序。

2.列表的篩選

（1）基本篩選

列表要從海量的數(shù)據(jù)中獲取信息，為列表設(shè)定篩選條件必不可少。篩選條件一般是通過支持字段進(jìn)行查找，主要是兩種方式：模糊搜索以及精確篩選。

模糊搜索：通過輸入關(guān)鍵詞查找內(nèi)容，多個關(guān)鍵詞可以合并在一起，例如訂單名稱或者訂單號，模糊搜索也可以通過唯一匹配進(jìn)行精準(zhǔn)查找，例如通過QQ號搜索添加好友。

精確篩選：通過窮舉選項(xiàng)進(jìn)行篩選。

（2）高級篩選

對于篩選條件比較多的表單，可以默認(rèn)展示常用的篩選項(xiàng)，其他篩選項(xiàng)默認(rèn)收齊，需要點(diǎn)擊再展開。這里主要是因?yàn)閮蓚€方面的原因：一是電腦屏幕高度一般大約700px，篩選條件過多會導(dǎo)致看不到列表內(nèi)容只能看到篩選條件；二是過多的篩選條件呈現(xiàn)出來，會導(dǎo)致用戶閱讀速度變得更慢，變相降低表格篩選效率。