3大内容列表中的标签设计要点
因为标签出现的场景非常丰富，并且每个场景下的标签使用方式都需要仔细考量，同时列表是出现标签频率最高的地方，在这里各种类型的标签都有其使用场景，所以本次分享将标签的使用聚焦在列表标签的设计上，通过一个使用场景的详细说明，希望带给大家更多的启发。
前文链接《小小标签的多种样式》根据列表承载内容的不同，可以将列表分为资讯列表、商品列表和Feed流。每种列表下方都会包含多种标签种类，且信息层级各不相同。
资讯列表标签
资讯类标签里面包含3种标签类型，内容分类标签、最新最热标签、内容呈现类型标签，下面我们具体了解一下
1. 内容分类(Classification)标签
在资讯列表里，用户更多关注的是网站内容本身，会在众多的列表资源里筛选适合自己的内容，这种情况(Condition)下就需要用内容分类的标签对内容进行提示，方便用户对资源进行初步的判断。
因为现在的内容列表都是根据用户的喜好进行的推荐，所以这种标签只是内容的辅助信息，为了不干扰用户对信息的浏览，这种类型的标签样式上通常会比较弱，常用灰色文字标签（例如36氪）、或灰色线框标签（例如轻芒阅读）进行表示。
位置摆放：位于列表的左下角
2. 最新、最热标签
这种类型的标签在内容标签里非常常见，主要是对少数重要的内容信息进行推荐，它的存在首先可以让用户在浏览信息的时候可以轻松的关注到，又不至于太抢眼而干扰用户对主要内容信息的浏览。所以这种类型的标签会选择(Select)有颜色(Color)面形的图标（36氪）或者有颜色的线框标签（今日头条）来表示。
位置（position )摆放：位于列表的左下角
3. 网站内容呈现类型标签
呈现类型指的是内容属于文字形式、音频形式还是视频形式。
文字类型的列表是不需要进行特殊说明的，所以这种内容形式的列表上不需要此类标签。有两方面原因，首先在一般的资讯列表里面文字形式是主要的信息展示形式，即没有特殊说明就是其中文字类型，第二文字内容的浏览对用户的使用(use)环境没有过多的限制，只要方便，用户在任何情况下都可以进行内容的查看。
音频或视频呈现的内容跟文字正好相反，除了视频、音乐类的列表外，其他的列表里面包含这两种类型的视频比较少，同时对查看的环境有更多的要求，比如办公室、会议室里就不适合查看这类文件，并且当用户不在WIFI环境下时，考虑到自身流量的问题，用户在查看此类文件时也会有所顾虑，所以通常这样的标签样式就会重一些，可以让用户第一时间发现，不至于在用户查看内容的过程中对自己造成一些困扰。例如36氪、MONO
位置摆放：这种标签通常放置在图片上，一方面是因为这种样式会比较醒目，用户可以第一时间注意到；另外有些列表中视频和图片资源以以各种形式摆放在一起，放置在图片上可以帮助用户对图片和视频进行有效的区分例如微淘
商品列表标签
商品列表拥有最复杂的标签种类，几乎囊括（泛指包含了一切事物)了所有的标签类型。UI设计学习UI设计师的涉及范围包括高级网页设计、移动应用界面设计，是目前中国信息产业中最为抢手的人才之一。移动端UI设计不单单从事美术绘画，更需要对软件使用者、使用环境、使用方式进行定位，并最终为软件用户服务。UI设计师进行的是集科学性与艺术性于一身的设计，他们需要完成的，简单说来，正是一个不断为用户设计视觉效果使之满意的过程。UI视觉设计一个软件产品在编码之前需要做的就是交互设计，并且确立交互模型，交互规范。三是用户测试/研究，这里所谓的“测试”，其目标恰在于测试交互设计的合理性及图形设计的美观性，主要通过以目标用户问卷的形式衡量UI设计的合理性。如果没有这方面的测试研究，UI设计的好坏只能凭借设计师的经验或者领导的审美来评判，这样就会给企业带来极大的风险。根据标签类型的不同会有不同的展示方式。
1. 引导用户消费的标签
如“人气美食”、“必抢”、“减XXX”、“上周热销”、“HOT”、“精选”、“NEW”、“特价”等等，这种可以刺激用户进行冲动消费的标签都会很明显，用有颜色的色块标签进行展示，促销类型的商品标签会使用异形标签来吸引用户的眼球。如马蜂窝
位置摆放：
文字区域内：图文列表内，这种标签通常放置时文字内容区域里，“HOT”、“上周热销”、“NEW”等具有促进消费的标签，做重点强调的话可以放置在文字内容前方，而跟价格(price)相关的“减XXX”、“低价促销(promotion)”等跟价格有关的，多数会放置在价格的附近，给用户商品的性价比很高的心理暗示，刺激用户进行消费。
图片左上方：标签纬度和网站内容都比较多的时候，会将重点强调的标签放置在图片上方进行展示；或者列表中只有一个标签，但需要对这个标签进行强调时也可以选择这种方式。
图片左下方：图文上下排列的商品列表中，那些需要重点展示的标签会选择色块标签放置在图片的左下角，这种类型的列表，图片是最吸引人眼球的位置，所以标签放在这里用户更容易看见，并且可以节省(spare)文字区域的空间位置
2. 重要辅助说明标签
商品列表中除了促销(promotion)类标签，还有很多重要辅助类的标签帮助用户判断商品的服务价值，如: 自营、新品、商家免邮、发票、支持自取、自营、极速退款、准时送等等，它是商品服务内容的延伸，关系用户的次级利益（benefit）或消费体验，所以一般会用有色线框标签进行展示
位置摆放：这种标签经常放置在价格(price)附近
3. 次要辅助说明信息
为了节省用户的时间，让用户在众多商品中快速找到自己需要的，在同类型的商品列表中，会将商品属性展示出来，比如，电子产品的容量、尺寸；旅游类商品特殊服务等等，因为只是网站内容的辅助说明信息，这类信息在列表层级里是比较低的，所以样式就会选择比较弱的灰色线框标签或者浅灰色面形标签来表达。
位置（position )摆放：这种标签经常放置在内容和价格(price)的中间
用户动态列表标签
指的是具备社交属性(property)的平台上集合展用户发布信息示的列表，比如微淘、微博、朋友圈这种类型的列表，这种列表里面主要有两种标签类型，一种针对的是用户，一种针对的是内容。
1. 用户身份识别标签
社交网络的用户的身份是有等级之分的，所以会用一些标签来展示用户登记，一是需要让其他用户快速对其进行身份的识别，次级别的用户进行身份等级的提升，所以用有颜色(Color)的面型图标或者面型标签进行表示
位置（position )摆放：通常放置在任务头像上，或者紧跟在名字后面
2. 内容分类标签
对网站内容的类别进行说明，根据标签重要程度有不同的展示类型和展示位置
在图片的左下方
这是放置网站内容标签的最佳场所，标签的样式根据标签在列表中的信息层级的高低进行选择(Select)。
在文字与图片中间的位置（position )
底部操作栏信息比较多的时候，会选择将不是很重要的标签信息放置在这个位置上，所以样式上也比较弱，主要用灰色线框或灰色色块标签
总结
本文主要讲解了资讯列表、商品列表和动态列表下标签的分类(Classification)及选择标签的样式以及标签的最佳摆放位置（position )，看似很复杂，但原理（Maxim）比较简单，就是根据标签的信息层级选择不同的样式及摆放位置。希望本篇文章对你在标签设计上有更多的启发，另外以上内容是根据自己常使用(use)的产品提炼总结出来的，如有遗漏欢迎留言补充，一起探讨~~