列表控制

用法

列表控制分為如下四種:

• 狀態(tài)
• 主操作(包括文本字符串)
• 次要操作
• 次要信息

列表標(biāo)題的元素要容易分辨，首先要注意閱讀順序，所以，狀態(tài)和主操作放在標(biāo)題列表的左邊。在這里，列表里面的文本內(nèi)容也被認(rèn)為是主操作的操作目標(biāo)的一部分。

http://wiki.jikexueyuan.com/project/material-design/images/components-listcontrols-listcontrols-listcontrols_03_large_mdpi.png" alt="" />

不要把兩個展示圖標(biāo)和操作圖標(biāo)放在一起，比如復(fù)選框和頭像

如果列表的主操作是做導(dǎo)航作用的，那么就不要使用icon。列表它本身以及它的上下文就已經(jīng)可以讓用戶明白這個列表的用處是什么。

次要操作以及信息應(yīng)該放在標(biāo)題的右邊，次要操作通常要和主要操作分開單獨(dú)可點(diǎn)擊，因?yàn)樵絹碓蕉嗟挠脩粝Ｍ總€圖標(biāo)都能觸發(fā)一個動作。

列表控制的類型

復(fù)選框(Checkbox)

復(fù)選框既可以被定義成是主操作也可以是次要操作。

類型: 主動作/狀態(tài)

單獨(dú)可點(diǎn)擊

Desktop on hover only

http://wiki.jikexueyuan.com/project/material-design/images/components-listcontrols-typesoflistcontrols-listcontrols_08_large_mdpi.png" alt="" />
在這個列表中，復(fù)選框是主要操作和狀態(tài)標(biāo)志符

類型: 次要操作

單獨(dú)可點(diǎn)擊

當(dāng)控制一系列的變量而不僅僅只是控制一個變量的情況下，考慮使用開關(guān)控件來替換。

http://wiki.jikexueyuan.com/project/material-design/images/components-listcontrols-typesoflistcontrols-listcontrols_10_large_mdpi.png" alt="" />
在這個列表中，復(fù)選框是次要操作

開關(guān)

類型: 次要操作

單獨(dú)可點(diǎn)擊

http://wiki.jikexueyuan.com/project/material-design/images/components-listcontrols-typesoflistcontrols-listcontrols_30_large_mdpi.png" alt="" />

重新排序

類型: 次要動作

通常都是單獨(dú)可點(diǎn)擊，視當(dāng)前列表所處的模式而定。

該動作允許用戶給列表中項(xiàng)通過拖動變換位置。通常，這個按鈕出現(xiàn)在列表編輯的模式下。

http://wiki.jikexueyuan.com/project/material-design/images/components-listcontrols-typesoflistcontrols-listcontrols_18_large_mdpi.png" alt="" />

展開/折疊

類型: 次要動作

單獨(dú)可點(diǎn)擊

垂直展開或者折疊列表來顯示或者隱藏當(dāng)前列表

http://wiki.jikexueyuan.com/project/material-design/images/components-listcontrols-typesoflistcontrols-listcontrols_26a_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-listcontrols-typesoflistcontrols-listcontrols_26b_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-listcontrols-typesoflistcontrols-listcontrols_28a_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-listcontrols-typesoflistcontrols-listcontrols_28b_large_mdpi.png" alt="" />

Leave Behinds

類型: 其他

Leave-behind 是在當(dāng)某一項(xiàng)列表被滑開之后的操作提示。Leave-behind可以被轉(zhuǎn)換成一項(xiàng)操作。

無論從哪個方向滑動列表，都會出現(xiàn)操作圖標(biāo)。滑動了之后，操作圖標(biāo)就會居中顯示于列表空白處。

http://wiki.jikexueyuan.com/project/material-design/images/components-listcontrols-typesoflistcontrols-listcontrols_22a_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-listcontrols-typesoflistcontrols-listcontrols_22b_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-listcontrols-typesoflistcontrols-listcontrols_22c_large_mdpi.png" alt="" />

不推薦的做法:導(dǎo)航列表控制

通常情況下，列表本身的內(nèi)容就已經(jīng)隱含了導(dǎo)航信息，因此，列表里面就不需要額外的圖標(biāo)。

查看更多

類型: 主要操作（連同行內(nèi)其他內(nèi)容）

非單獨(dú)可點(diǎn)擊

點(diǎn)擊之后跳轉(zhuǎn)到與當(dāng)前列表相關(guān)詳細(xì)信息的頁面，通常這都是一個新的頁面或者面板。

http://wiki.jikexueyuan.com/project/material-design/images/components-listcontrols-typesoflistcontrols-listcontrols_16_large_mdpi.png" alt="" />

菜單控制的類型

選中

類型: 狀態(tài)

非單獨(dú)可點(diǎn)擊

僅適用于菜單。用來表示當(dāng)前列表是否通過不同的操作之后被選中。

http://wiki.jikexueyuan.com/project/material-design/images/components-listcontrols-typesofmenucontrols-listcontrols_06_large_mdpi.png" alt="" />

內(nèi)聯(lián)信息

類型: 次要信息

非單獨(dú)可點(diǎn)擊

僅適用于菜單。內(nèi)聯(lián)信息是列表中一小段文字用來提供當(dāng)前標(biāo)題相關(guān)的信息或者提示，比如快捷鍵。不能被刪除。

http://wiki.jikexueyuan.com/project/material-design/images/components-listcontrols-typesofmenucontrols-listcontrols_12_large_mdpi.png" alt="" />

原文：List controls 翻譯：leiweibo 校對：cxytomo