“标签”在对象展示中的应用以及轻量化列表

写在前面~

之前在《 面板在对象展示中的应用》中曾经提到过,后台类的产品,列表能够满足信息展示的大部分场景,但是满足并不意味着合适,列表方式的展现有着自己本身不可弥补的缺陷。

尤其是现在用户对于前端页面展示性的要求越来越高(说白了就是大家越来越喜欢炫酷),列表使用的场景在慢慢的受到挤压~~

所以每次在设计到这类需求的时候,我会先考虑下,有没有其他方式比列表更好的如果有,那毅然决然的替换掉如果没有,那我会思考,有什么样的方式可以让列表看起来不那么“列表”。

在诸多的尝试过程中,我发现标签是一个很轻量级,并且能够给界面的视觉体验带来变化的方式。

标签的样式

标签在界面上的显示样式比较固定,大部分标签都是方形的色块加上居中的文字,有些会在文字旁边配以icon,来更加形象的说明标签所要表达的含义。
例如:


标签样式展示

使用现状

标签目前常用的场景,主要包括:To do list 中简单信息的展示、消息或者任务数量的提醒。
例如:


标签提示时间

或者


标签显示数量

由此可以看出,其实标签并没有非常广泛的应用,主要还是局限在与任务、数量相关的方面,但标签的作用,其实远不止这些。

轻量化列表

我试图通过轻量化列表这个主题,来引入“标签”的多用性,所以,请各位看官暂时切换下思路,首先请大家回忆下,列表的基础样式,列表多是由一行表头字段加上多条Item组成,表头字段一般情况下>=3个。
例如:


我自己画的~

如果一个界面内容很繁多,我们看到的将会是:

一个正常的列表页

即便是现在看来,我仍然认为这是一个信息量很大,很嘈杂的界面。

其实列表的每一行都是一个item~只不过我们通过信息分类的方式将它自身的信息进行了拆解,一个item就这样失去了整体感,我认为列表的轻量化,可以从强调item的整体性入手。

而在这个方面,很多工具类平台都开始注重整体性的概念:
专注于Paas领域的HerokuSpringloops;任务管理方面的Worktitle、Wunderlist;项目管理方面的Teambition,以及最近正在研究的phabricator 平台,已经很少看到有呆板的列表页面。
例如:

Heroku
Springloops
phabricator

这里可以发现,这些产品的对象展示,都是作为一个独立的Item存在,但是除去Phabricator,我们会发现似乎这类展示的信息不如列表那么丰富,怎么解决这个问题?

答:标签

标签的随意性以及内容的多样性,很适合这类基本信息的展示。举几个实例:

任务管理

这里,就通过标签,展示了任务的类型、关联的信息。

代码管理

这里,就通过标签,展示了多项内容,包括:对象包含哪几类内容、对象的关联关系、对象所处的状态、对象包含的成员。

通过对标签的排布和对信息的整合,可以发现列表展示的数据,通过这样的方式也可以展示出来,并且更具有整体感。而整体感的优势,在于会比打散的信息更容易让用户聚焦到目标对象上。

所以,给对象整体化的感觉,会让列表变为Item,展示上面显的更加轻量,并更加具有可观性。

标签的应用

当我们通过标签+Item的方式解决了轻量化的展示了列表后,再回来看标签的应用,会发现标签适用的场景会扩展很多,除了比较常见的用法之外,标签还可以用于目标对象内容的可视化展示。所以当各位在为信息可视化苦恼的时候,不妨尝试下标签。

白璧微瑕

任何设计方案都不可能适用于所有的场景,使用标签所带来的负面影响,也请各位客观重视。

  • 扩展性差。
    标签虽然可以辅助展示对象的某些信息,但是其功能性相对于列表而言,还是略逊一筹的,列表的表头字段可以根据需求的进行必要的扩展,但是标签的添加,会受到大小、位置、颜色、内容等各方面因素的限制,需要谨慎。
  • 界面色彩太多。
    标签的颜色可以是五彩缤纷,当然也可以是单色,但无论哪种,都会导致整个界面的色彩变的更加多样和复杂,过度的设计会导致视觉的污染。
  • 展示内容有限。
    标签的定位就是小而精,所以标签展示的内容不会像一条代码分支一样长~这里也希望诸位在产品设计的时候,适当考虑下“简约至上”的原则,产品轻量了,展示的内容自然会变的更加轻量。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,723评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,080评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,604评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,440评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,431评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,499评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,893评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,541评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,751评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,547评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,619评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,320评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,890评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,896评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,137评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,796评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,335评论 2 342

推荐阅读更多精彩内容