列表控制

用法

列表控制分為如下四種:

• 狀態(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="" />

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

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

次要操作以及信息應(yīng)該放在標(biāo)題的右邊，次要操作通常要和主要操作分開(kāi)單獨(dú)可點(diǎn)擊，因?yàn)樵絹?lái)越多的用戶希望每個(gè)圖標(biāo)都能觸發(fā)一個(gè)動(dòng)作。

列表控制的類型

復(fù)選框(Checkbox)

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

類型: 主動(dòng)作/狀態(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="" />
在這個(gè)列表中，復(fù)選框是主要操作和狀態(tài)標(biāo)志符

類型: 次要操作

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

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

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

開(kāi)關(guān)

類型: 次要操作

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

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

重新排序

類型: 次要?jiǎng)幼?/p>

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

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

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

展開(kāi)/折疊

類型: 次要?jiǎng)幼?/p>

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

垂直展開(kāi)或者折疊列表來(lái)顯示或者隱藏當(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)列表被滑開(kāi)之后的操作提示。Leave-behind可以被轉(zhuǎn)換成一項(xiàng)操作。

無(wú)論從哪個(gè)方向滑動(dòng)列表，都會(huì)出現(xiàn)操作圖標(biāo)?；瑒?dòng)了之后，操作圖標(biāo)就會(huì)居中顯示于列表空白處。

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ì)信息的頁(yè)面，通常這都是一個(gè)新的頁(yè)面或者面板。

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

菜單控制的類型

選中

類型: 狀態(tài)

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

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

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)信息是列表中一小段文字用來(lái)提供當(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 校對(duì)：cxytomo