日常工作生活中，我们总能在各种各样的场景下见到各式各样的标签设计。那么在何种的场景下适合用何种样式的标签呢？一个产品中会同时存在多个不同功能不同维度不同优先级的标签，我们在设计时，又该如何进行合理考量，打造一个清晰，完整，体系化的标签系统呢？带着这些问题，稳稳通过查阅资料和思考总结，将以下内容整理成文，接下来就跟大家来好好分享讨论一下啦~

1.什么是“标签”

万事万物，纷繁复杂，多姿多彩，而人的精力和认知接受能力却是相当有限的。以至于面对较为陌生的人或事物时，我们通常会自觉或不自觉地用”是男还是女、是南方人还是北方人“等贴标签的方式来辅助我们快速地认知和理解某个事物。虽然有时也难免粗放偏颇，甚至形成偏见和刻板印象，但却也是整个社会系统高效运转的“权宜之计”。化繁为简，概括提炼。标签运用在UI设计中也是同样的道理，帮助我们笼统但清晰的掌握事物的关键特征和信息，通过标签化进行简单归类，用户可以迅速识别自己的需求和兴趣点，产品得以精准表达相应的亮点和卖点。

2.标签的作用

UI设计中，存在多种适用标签式设计的场景。不同的场景下，标签所承载的内容和功能也都不尽相同。总体来说，大致包含以下几方面的功能：承载选项、分门别类、强调凸显、特殊标记（包括标记亮点特色、标记信息状态、标记用户行为、标记用户身份等等）。而通过承载以上的内容和功能，标签设计主要起到以下三个方面的作用：一是对于用户而言，标签可以助其方便、快速地获取关键信息，继而高效辨别是否是自己需要的，并决策是否点击；二是对产品而言，标签可以优化信息层级，凸显重点，帮助准确推介产品侧想要凸出和传达给用户的重点内容，以诱导用户的点击和转化；三是在交互上，一些可点击标签的设计可以起到方便操作，交互减步长的作用。（如表单录入时的选项标签，下文有举例）

3.本篇概述

首先按照“是否可进行点击交互”的标准，稳稳将可以进行点击、跳转或切换页面的标签称为“可点击标签”，将进行状态标记、信息展示之类不可进行交互的标签称为“不可点击标签”。其中每一类又包含多种不同的使用场景和设计形式。本篇作为“标签设计笔记”的上篇，主要分析总结“可点击标签”在不同场景下的应用案例及相关设计思考、注意事项。通过搜集大量产品界面，稳稳又将所有可点击标签分为以下五类场景，并分别举例阐述。依次为：3.1 分类选择、3.2 表单填写、3.3 搜索推荐、3.4 筛选分类、3.5 热门话题。

3.1 分类选择

这种类型的标签，常见于进入内容社区类app时的引导步骤页面中，让用户通过标签点选的形式快速选择自己符合、或者感兴趣的选项，以实现个性化的内容定制、推送。主要起到信息承载和辅助输入的作用。

1.根据选项的内容类型不同，又可分为身份信息选择（性别、身份职业等），和内容类型选择（关注、感兴趣的话题类型、博主、消息源等）

2.根据标签设计形式、排布方式的不同，又可分为文本型、卡片式、宫格式等

总结：1.此类标签的设计和排布形式多样，不仅限于以上实例中的样式。然而无论如何设计，根本目的在于符合产品调性和提升用户操作体验。设计中采用哪种形式需要根据选项的数量、是否可多选等因素综合考虑。

2.无论采取何种形式，都要特别注意区分标签的选中和未选中状态，以及“是单选还是多选”这层意思的传达。

3.2 表单填写

常见于信息录入的页面，本着“高效”、“易懂”、“交互减步长”的设计原则，可以适当将传统表单中某些通过输入填写或通过下拉菜单选择的信息项，设计为通过标签点选的方式。如一般表单中常见的的性别、证件类型、文化程度等；再如一些订单完成后的评价页面，将一些常见的评价短语设置为可直接点选的标签，大大降低用户耗费的时间精力，提升其完成评价的意愿和成功率。主要功能仍是承载选项信息和辅助输入。

总结：1.并不是所有的表单选项都适合设计成上图实例中这种标签外露展示选项的形式。例如价格区间大多数情况下其实更适合用可滑动区间条的形式；而一些选项过多、或单个选项文字过多的表单填写项，一般也不适于标签外露展示，否则会大大降低屏幕的信息承载率。

2.此类标签设计较为简洁单一，但也要注意单选和多选的区分识别，特别注意除了选中态和未选中态，有时还会有不可点击状态的存在。

3.3 搜索推荐

此类标签一般跟搜索框联动出现，一般在点击搜索框、调转到单独的搜索页面时，出现在搜索框下方，展示用户的历史搜索行为或产品主推的热点词条，以起到辅助输入和热点推送引流的功能目的。

总结：1.此类标签一般包含两个维度，一个是基于提升用户体验精准猜测用户想要搜素的内容，一个是基于产品营销引流，想要推荐给用户的内容词条。

2.一般出现在点击搜索框后的次级页面中，但也有像饿了么这样将其提到首页搜素框下进行展示的情况。

3.此种标签一般点击后随即跳转到相应的搜索结果页面，所以均为单选，且不需要做已点击未点击的状态区分。

3.4 信息筛选

此类标签一般用于信息流feed流的上方，也常见于淘宝、饿了么等电商性质平台的评论区里。将种类繁杂的信息类型归类并标签展示，方便用户快速查找定位自己相要的信息类型。

总结：1.此类标签相对于选项标签的固定宽度，可以根据字符长短自适应标签宽度；相对于搜索类标签，点击后也不会进行页面跳转。

2.此类标签只有选中和未选中态，一般不可多选。

3.5 热门话题

此类标签常见于以文字内容为主的社区中，如微博、豆瓣等。将ugc内容中的重点部分凝练成话题标签，方便用户快速识别阅读；用户还可以通过点击该标签，快速进入并浏览该话题下的所有其他ugc内容。

总结：此类标签一般在ugc文本的最左上方，文字用品牌色/蓝色链接色强调显示，前方的“#”可做成小图标的样式或加大加粗，底部可衬有矩形色块。

4.结语

好啦，有关“可点击标签”的场景案例分析和设计思考总结就到这里啦，最后回顾一下本文的主要框架：3.1 分类选择、3.2 表单填写、3.3 搜索推荐、3.4 筛选分类、3.5 热门话题。

最后的最后里一个flag吧，本文点赞过0，将在一个月内更新下一篇哈哈哈，开始展开分析“不可点击标签”这一大类~（其实只求自我总结沉淀，用输出倒逼输入的一个学习过程~）