3大内容列表中的标签设计要点【百科全说】

上次分享带大家了解了标签的种类、标签的文字特征和标签颜色的选择，在了解标签设计的基础内容上，我们更需要知道的是在不同的页面场景下，我们应该选择什么样的标签样式，以及标签摆放的位置，这些在界面设计过程中都需要认真考虑。

因为标签出现的场景非常丰富，并且每个场景下的标签使用方式都需要仔细考量，同时列表是出现标签频率最高的地方，在这里各种类型的标签都有其使用场景，所以本次分享将标签的使用聚焦在列表标签的设计上，通过一个使用场景的详细说明，希望带给大家更多的启发。

前文链接《小小标签的多种样式》根据列表承载内容的不同，可以将列表分为资讯列表、商品列表和Feed流。每种列表下方都会包含多种标签种类，且信息层级各不相同。

资讯列表标签

资讯类标签里面包含3种标签类型，内容分类标签、最新最热标签、内容呈现类型标签，下面我们具体了解一下

1. 内容分类标签

在资讯列表里，用户更多的是内容本身，会在众多的列表资源里筛选适合自己的内容，这种情况下就需要用内容分类的标签对内容进行提示，方便用户对资源进行初步的判断。

因为现在的内容列表都是根据用户的喜好进行的推荐，所以这种标签只是内容的辅助信息，为了不干扰用户对信息的浏览，这种类型的标签样式上通常会比较弱，常用灰色文字标签（例如36氪）、或灰色线框标签（例如轻芒阅读）进行表示。

位置摆放：位于列表的左下角

2. 最新、最热标签

这种类型的标签在内容标签里非常常见，主要是对少数重要的内容信息进行推荐，它的存在首先可以让用户在浏览信息的时候可以轻松的到，又不至于太抢眼而干扰用户对主要内容信息的浏览。所以这种类型的标签会选择有颜色面形的图标（36氪）或者有颜色的线框标签（今日头条）来表示。

位置摆放：位于列表的左下角

3. 内容呈现类型标签

呈现类型指的是内容属于文字形式、音频形式还是视频形式。

文字类型的列表是不需要进行特殊说明的，所以这种内容形式的列表上不需要此类标签。有两方面原因，首先在一般的资讯列表里面文字形式是主要的信息展示形式，即没有特殊说明就是其中文字类型，第二文字内容的浏览对用户的使用环境没有过多的限制，只要方便，用户在任何情况下都可以进行内容的查看。

音频或视频呈现的内容跟文字正好相反，除了视频、音乐类的列表外，其他的列表里面包含这两种类型的视频比较少，同时对查看的环境有更多的要求，比如办公室、会议室里就不适合查看这类文件，并且当用户不在WIFI环境下时，考虑到自身流量的问题，用户在查看此类文件时也会有所顾虑，所以通常这样的标签样式就会重一些，可以让用户第一时间发现，不至于在用户查看内容的过程中对自己造成一些困扰。例如36氪、MONO

位置摆放：这种标签通常放置在图片上，一方面是因为这种样式会比较醒目，用户可以第一时间注意到；另外有些列表中视频和图片资源以以各种形式摆放在一起，放置在图片上可以帮助用户对图片和视频进行有效的区分例如微淘

商品列表标签

商品列表拥有最复杂的标签种类，几乎囊括了所有的标签类型。根据标签类型的不同会有不同的展示方式。

1. 引导用户消费的标签

如“人气美食”、“必抢”、“减XXX”、“上周热销”、“HOT”、“精选”、“NEW”、“特价”等等，这种可以刺激用户进行冲动消费的标签都会很明显，用有颜色的色块标签进行展示，促销类型的商品标签会使用异形标签来吸引用户的眼球。如马蜂窝

位置摆放：

文字区域内：图文列表内，这种标签通常放置时文字内容区域里，“HOT”、“上周热销”、“NEW”等具有促进消费的标签，做重点强调的话可以放置在文字内容前方，而跟价格相关的“减XXX”、“低价促销”等跟价格有关的，多数会放置在价格的附近，给用户商品的性价比很高的心理暗示，刺激用户进行消费。

图片左上方：标签纬度和内容都比较多的时候，会将重点强调的标签放置在图片上方进行展示；或者列表中只有一个标签，但需要对这个标签进行强调时也可以选择这种方式。

图片左下方：图文上下排列的商品列表中，那些需要重点展示的标签会选择色块标签放置在图片的左下角，这种类型的列表，图片是最吸引人眼球的位置，所以标签放在这里用户更容易看见，并且可以节省文字区域的空间位置

2. 重要辅助说明标签

商品列表中除了促销类标签，还有很多重要辅助类的标签帮助用户判断商品的服务价值，如: 自营、新品、商家免邮、发票、支持自取、自营、极速退款、准时送等等，它是商品服务内容的延伸，关系用户的次级利益或消费体验，所以一般会用有色线框标签进行展示

位置摆放：这种标签经常放置在价格附近

3. 次要辅助说明信息

为了节省用户的时间，让用户在众多商品中快速找到自己需要的，在同类型的商品列表中，会将商品属性展示出来，比如，电子产品的容量、尺寸；旅游类商品特殊服务等等，因为只是内容的辅助说明信息，这类信息在列表层级里是比较低的，所以样式就会选择比较弱的灰色线框标签或者浅灰色面形标签来表达。

位置摆放：这种标签经常放置在内容和价格的中间

用户动态列表标签

指的是具备社交属性的平台上集合展用户发布信息示的列表，比如微淘、微博、朋友圈这种类型的列表，这种列表里面主要有两种标签类型，一种针对的是用户，一种针对的是内容。

1. 用户身份识别标签

社交网络的用户的身份是有等级之分的，所以会用一些标签来展示用户登记，一是需要让其他用户快速对其进行身份的识别，次级别的用户进行身份等级的提升，所以用有颜色的面型图标或者面型标签进行表示

位置摆放：通常放置在任务头像上，或者紧跟在名字后面

2. 内容分类标签

对内容的类别进行说明，根据标签重要程度有不同的展示类型和展示位置

在图片的左下方

这是放置内容标签的最佳场所，标签的样式根据标签在列表中的信息层级的高低进行选择。

在文字与图片中间的位置

底部操作栏信息比较多的时候，会选择将不是很重要的标签信息放置在这个位置上，所以样式上也比较弱，主要用灰色线框或灰色色块标签

总结

本文主要讲解了资讯列表、商品列表和动态列表下标签的分类及选择标签的样式以及标签的最佳摆放位置，看似很复杂，但原理比较简单，就是根据标签的信息层级选择不同的样式及摆放位置。希望本篇文章对你在标签设计上有更多的启发，另外以上内容是根据自己常使用的产品提炼总结出来的，如有遗漏欢迎留言补充，一起探讨~~

海盐社（公众号）

作者：小火焰

3大内容列表中的标签设计要点