写在前面~
之前在《 面板在对象展示中的应用》中曾经提到过,后台类的产品,列表能够满足信息展示的大部分场景,但是满足并不意味着合适,列表方式的展现有着自己本身不可弥补的缺陷。
尤其是现在用户对于前端页面展示性的要求越来越高(说白了就是大家越来越喜欢炫酷),列表使用的场景在慢慢的受到挤压~~
所以每次在设计到这类需求的时候,我会先考虑下,有没有其他方式比列表更好的如果有,那毅然决然的替换掉如果没有,那我会思考,有什么样的方式可以让列表看起来不那么“列表”。
在诸多的尝试过程中,我发现标签是一个很轻量级,并且能够给界面的视觉体验带来变化的方式。
标签的样式
标签在界面上的显示样式比较固定,大部分标签都是方形的色块加上居中的文字,有些会在文字旁边配以icon,来更加形象的说明标签所要表达的含义。
例如:
使用现状
标签目前常用的场景,主要包括:To do list 中简单信息的展示、消息或者任务数量的提醒。
例如:
或者
由此可以看出,其实标签并没有非常广泛的应用,主要还是局限在与任务、数量相关的方面,但标签的作用,其实远不止这些。
轻量化列表
我试图通过轻量化列表这个主题,来引入“标签”的多用性,所以,请各位看官暂时切换下思路,首先请大家回忆下,列表的基础样式,列表多是由一行表头字段加上多条Item组成,表头字段一般情况下>=3个。
例如:
如果一个界面内容很繁多,我们看到的将会是:
即便是现在看来,我仍然认为这是一个信息量很大,很嘈杂的界面。
其实列表的每一行都是一个item~只不过我们通过信息分类的方式将它自身的信息进行了拆解,一个item就这样失去了整体感,我认为列表的轻量化,可以从强调item的整体性入手。
而在这个方面,很多工具类平台都开始注重整体性的概念:
专注于Paas领域的Heroku、Springloops;任务管理方面的Worktitle、Wunderlist;项目管理方面的Teambition,以及最近正在研究的phabricator 平台,已经很少看到有呆板的列表页面。
例如:
这里可以发现,这些产品的对象展示,都是作为一个独立的Item存在,但是除去Phabricator,我们会发现似乎这类展示的信息不如列表那么丰富,怎么解决这个问题?
答:标签
标签的随意性以及内容的多样性,很适合这类基本信息的展示。举几个实例:
这里,就通过标签,展示了任务的类型、关联的信息。
这里,就通过标签,展示了多项内容,包括:对象包含哪几类内容、对象的关联关系、对象所处的状态、对象包含的成员。
通过对标签的排布和对信息的整合,可以发现列表展示的数据,通过这样的方式也可以展示出来,并且更具有整体感。而整体感的优势,在于会比打散的信息更容易让用户聚焦到目标对象上。
所以,给对象整体化的感觉,会让列表变为Item,展示上面显的更加轻量,并更加具有可观性。
标签的应用
当我们通过标签+Item的方式解决了轻量化的展示了列表后,再回来看标签的应用,会发现标签适用的场景会扩展很多,除了比较常见的用法之外,标签还可以用于目标对象内容的可视化展示。所以当各位在为信息可视化苦恼的时候,不妨尝试下标签。
白璧微瑕
任何设计方案都不可能适用于所有的场景,使用标签所带来的负面影响,也请各位客观重视。
- 扩展性差。
标签虽然可以辅助展示对象的某些信息,但是其功能性相对于列表而言,还是略逊一筹的,列表的表头字段可以根据需求的进行必要的扩展,但是标签的添加,会受到大小、位置、颜色、内容等各方面因素的限制,需要谨慎。 - 界面色彩太多。
标签的颜色可以是五彩缤纷,当然也可以是单色,但无论哪种,都会导致整个界面的色彩变的更加多样和复杂,过度的设计会导致视觉的污染。 - 展示内容有限。
标签的定位就是小而精,所以标签展示的内容不会像一条代码分支一样长~这里也希望诸位在产品设计的时候,适当考虑下“简约至上”的原则,产品轻量了,展示的内容自然会变的更加轻量。