寫在前面~

之前在《 面板在對象展示中的應(yīng)用》中曾經(jīng)提到過，后臺類的產(chǎn)品宫盔，列表能夠滿足信息展示的大部分場景，但是滿足并不意味著合適享完，列表方式的展現(xiàn)有著自己本身不可彌補(bǔ)的缺陷灼芭。

尤其是現(xiàn)在用戶對于前端頁面展示性的要求越來越高（說白了就是大家越來越喜歡炫酷），列表使用的場景在慢慢的受到擠壓~~

所以每次在設(shè)計(jì)到這類需求的時(shí)候般又，我會先考慮下彼绷，有沒有其他方式比列表更好的_{如果有，那毅然決然的替換掉}如果沒有茴迁，那我會思考寄悯，有什么樣的方式可以讓列表看起來不那么“列表”。

在諸多的嘗試過程中堕义，我發(fā)現(xiàn)標(biāo)簽是一個(gè)很輕量級猜旬，并且能夠給界面的視覺體驗(yàn)帶來變化的方式。

標(biāo)簽的樣式

標(biāo)簽在界面上的顯示樣式比較固定倦卖，大部分標(biāo)簽都是方形的色塊加上居中的文字洒擦，有些會在文字旁邊配以icon，來更加形象的說明標(biāo)簽所要表達(dá)的含義怕膛。
例如：

標(biāo)簽樣式展示

使用現(xiàn)狀

標(biāo)簽?zāi)壳俺Ｓ玫膱鼍笆炷郏饕ǎ篢o do list 中簡單信息的展示、消息或者任務(wù)數(shù)量的提醒嘉竟。
例如：

標(biāo)簽提示時(shí)間

或者

標(biāo)簽顯示數(shù)量

由此可以看出邦危，其實(shí)標(biāo)簽并沒有非常廣泛的應(yīng)用，主要還是局限在與任務(wù)舍扰、數(shù)量相關(guān)的方面倦蚪，但標(biāo)簽的作用，其實(shí)遠(yuǎn)不止這些边苹。

輕量化列表

我試圖通過輕量化列表這個(gè)主題陵且，來引入“標(biāo)簽”的多用性，所以个束，請各位看官暫時(shí)切換下思路慕购，首先請大家回憶下，列表的基礎(chǔ)樣式茬底，列表多是由一行表頭字段加上多條Item組成沪悲，表頭字段一般情況下>=3個(gè)。
例如：

我自己畫的~

如果一個(gè)界面內(nèi)容很繁多阱表，我們看到的將會是：

一個(gè)正常的列表頁

即便是現(xiàn)在看來殿如，我仍然認(rèn)為這是一個(gè)信息量很大贡珊，很嘈雜的界面。

其實(shí)列表的每一行都是一個(gè)item~只不過我們通過信息分類的方式將它自身的信息進(jìn)行了拆解涉馁，一個(gè)item就這樣失去了整體感门岔，我認(rèn)為列表的輕量化，可以從強(qiáng)調(diào)item的整體性入手烤送。

而在這個(gè)方面寒随，很多工具類平臺都開始注重整體性的概念：
專注于Paas領(lǐng)域的Heroku、Springloops帮坚；任務(wù)管理方面的Worktitle妻往、Wunderlist；項(xiàng)目管理方面的Teambition叶沛，以及最近正在研究的phabricator 平臺蒲讯，已經(jīng)很少看到有呆板的列表頁面。
例如：

Heroku

Springloops

phabricator

這里可以發(fā)現(xiàn)灰署，這些產(chǎn)品的對象展示判帮，都是作為一個(gè)獨(dú)立的Item存在，但是除去Phabricator溉箕，我們會發(fā)現(xiàn)似乎這類展示的信息不如列表那么豐富晦墙，怎么解決這個(gè)問題？

答：標(biāo)簽

標(biāo)簽的隨意性以及內(nèi)容的多樣性肴茄，很適合這類基本信息的展示晌畅。舉幾個(gè)實(shí)例：

任務(wù)管理

這里，就通過標(biāo)簽寡痰，展示了任務(wù)的類型抗楔、關(guān)聯(lián)的信息。

代碼管理

這里拦坠，就通過標(biāo)簽连躏，展示了多項(xiàng)內(nèi)容，包括：對象包含哪幾類內(nèi)容贞滨、對象的關(guān)聯(lián)關(guān)系入热、對象所處的狀態(tài)、對象包含的成員晓铆。

通過對標(biāo)簽的排布和對信息的整合勺良，可以發(fā)現(xiàn)列表展示的數(shù)據(jù)，通過這樣的方式也可以展示出來骄噪，并且更具有整體感尚困。而整體感的優(yōu)勢，在于會比打散的信息更容易讓用戶聚焦到目標(biāo)對象上链蕊。

所以尾组，給對象整體化的感覺忙芒，會讓列表變?yōu)镮tem，展示上面顯的更加輕量讳侨，并更加具有可觀性。

標(biāo)簽的應(yīng)用

當(dāng)我們通過標(biāo)簽+Item的方式解決了輕量化的展示了列表后奏属，再回來看標(biāo)簽的應(yīng)用跨跨，會發(fā)現(xiàn)標(biāo)簽適用的場景會擴(kuò)展很多，除了比較常見的用法之外囱皿，標(biāo)簽還可以用于目標(biāo)對象內(nèi)容的可視化展示勇婴。所以當(dāng)各位在為信息可視化苦惱的時(shí)候，不妨嘗試下標(biāo)簽嘱腥。

白璧微瑕

任何設(shè)計(jì)方案都不可能適用于所有的場景耕渴，使用標(biāo)簽所帶來的負(fù)面影響，也請各位客觀重視齿兔。

• 擴(kuò)展性差橱脸。
  標(biāo)簽雖然可以輔助展示對象的某些信息，但是其功能性相對于列表而言分苇，還是略遜一籌的添诉，列表的表頭字段可以根據(jù)需求的進(jìn)行必要的擴(kuò)展，但是標(biāo)簽的添加医寿，會受到大小栏赴、位置、顏色靖秩、內(nèi)容等各方面因素的限制须眷，需要謹(jǐn)慎。
• 界面色彩太多沟突。
  標(biāo)簽的顏色可以是五彩繽紛花颗，當(dāng)然也可以是單色，但無論哪種事扭，都會導(dǎo)致整個(gè)界面的色彩變的更加多樣和復(fù)雜捎稚，過度的設(shè)計(jì)會導(dǎo)致視覺的污染。
• 展示內(nèi)容有限求橄。
  標(biāo)簽的定位就是小而精今野，所以標(biāo)簽展示的內(nèi)容不會像一條代碼分支一樣長~這里也希望諸位在產(chǎn)品設(shè)計(jì)的時(shí)候，適當(dāng)考慮下“簡約至上”的原則罐农，產(chǎn)品輕量了条霜，展示的內(nèi)容自然會變的更加輕量。