利用标记，提升产品设计的价值

张悄悄 2023-07-27 06:19:04

我最近在设计的原型中，加了很多标记的元素；回顾增加的这些标记，发现它们在功能里面分别起了不小的作用，隐约的给我带来了意想不到的小惊喜。

我将这些标记的种类及效果整理了一下，分享给读者，希望大家可以结合自己产品更好的利用标记，达到想实现的一些目的。

01 没有标记的场景和问题

在一些同类别的产品中，没有标记，则无法重点突出其产品的特性，假设在小说首页中，我们想找一本心仪的小说查阅，也会产生眼花缭乱的感觉；而选择一本小说进入详情页查阅后，发现没有达到心中的期望值，又回退出重新选择；既增加了操作步骤，也浪费了我们的时间。

举个例子：

一般小说首页显示的是小说名字和封面，仅通过小说名字，无法帮助用户了解这本书，例如：X战警是名字，但有可能是科幻，也有可能是魔幻，也有可能是情感小说；而小说封面，除了标明了小说名字之外，还沿用了风景、水果、或小说人物等一些插画，并不能表达清楚该小说的特性；仅仅只通过这两个信息能够向用户传达的信息是有限的，不利于用户做选择；同时我们想推广的产品也会产生曝光度低的现象，达不到推广的预期效果；所以我们需要在小说首页中，为某一本小说设定特性标记，体现其特性。

有了特性标记后，首先的作用就是对小说名字的补充，同时可以吸引用户注意力，帮助用户快速了解产品属性，用户也可以快速的在相同特性的产品中做对比，从而提升用户的决断效率。

如果在小说封面中体现小说的特性，用户就能直观的了解到这本小说是免费的还是VIP专享的，又或者是音频类的；通过这个关键特性，用户可以根据自己想要的的类别进行选择，不用非要进入到小说详情页面中才能了解到小说的特性。

其次也可以作为运营人员的推广手段，提升想推广产品的曝光度，从而获取流量；由此我们可以看出，体现产品的特性是十分重要的。

如图所示，可以帮助读者更好的对比没有特性标记和增加特性标记效果：

利用标记，提升产品设计的价值

02 什么是标记

标记主要是以图标的形式展现，通过图标的不同形状和位置分别体现不同的效果；可以标记事务的属性和维度，例如将一个产品中不起眼的功能重点突出，或用于消息数量的提醒；产品经理可以在产品设计中，结合产品或某个功能想突出的目的，设计出适合该产品功能的表达方式。

而标记的作用首先是凸显某个事项，先是吸引用户，让用户通过标记就能清晰的了解该产品的内容，减少操作和决断的频率，也可作为我们推广的一种方式。

如果没有标记，用户会经常“误点”；其实用户误点是很正常的，点击了某个产品但是很快就退出了；在后期的用户操作统计中就会存在很多停留时间短的情况，说明用户对该内容是不感兴趣的。

下面我分别通过凸显某个事项、提示用户、刺激用户来详细讲解：

1. 凸显某个事项

凸显某个事项是通过标记的方式凸显该产品，吸引用户查看；我拿两种比较常见的来举例，分别是凸显某个功能及体现该功能特性。

凸显某个功能主要的目的就是在将新增的板块或者某个板块里面刚改完版的内容进行凸显，如果该功能重要程度较高，通过这种方式吸引用户点击，可以达到让用户点击试用，并了解该板块新增的内容或改版内容后的变化。

如果用户对该产品功能不熟悉的情况下，且上线了新板块内容没有用特殊手段体现，则容易导致，该板块更新很久用户都不知道该板块存在。

大部分用户在熟悉的产品中，一般只会注意经常使用的功能；如果没有这种特殊的标记来凸显，在一堆功能中，用户很少能注意到，就算有用户注意到也很少有用户去主动点击；而我们利用这种标记的方式体现后，可以吸引用户的注意，提高用户使用并体验该功能的机率。

如下图，可参考凸显某个功能的展现方式：

第一图是阿里巴巴矢量图标库官方网站，除了我经常使用的功能，在顶部功能区，第一眼让我注意到的是“活动”板块；在黑色背景下用了紫色的NEW字凸显。想对比其他的功能，让人第一眼就能注意到。

第二张图是新榜官网，在排行类别的Tab中新增了“哔哩哔哩”的排行，同样在灰色背景下用了矩形的NEW来凸显该功能。

利用标记，提升产品设计的价值

体现该功能特性是通过少量的文字表达清楚产品的类型或卖点。让用户清晰的了解该产品的大致信息，举个例子：在小说封面中间会显示播放类或音符类小图标，是指该内容是音频内容；这种体验方式减少了用户操作步骤，可以让用户在选择该小说中，第一眼就能了解内容类型。

通过这种方式，还可以通过多标记进行分类，让用户在同标记类别中筛选自己感兴趣的内容。

利用标记，提升产品设计的价值

2. 提示用户

提示消息数量最常见的就是微信消息提醒，通常也被称为角标，微信消息中角标的应用有两种：

一种场景是有新消息时，且有低于100条的消息未查看，这时微信图标的右上角会显示圆形红色的数字角标，数字代表未读消息数量；而打开微信后，未读好友的头像右上角也会显示圆形红色的数字角标，数字代表当前好友发送的消息数量，这是第一种场景。

第二种场景是消息达到一定数量时，如：单个好友发送超过100条未读消息时，角标不在显示具体的未读数量而是用红色椭圆形中显示省略号，也就是三个点来表示，代表超过一定数量的未读消息；通过这种角标的提示，可以直观的提醒用户有消息未读数量，增加用户查看的时效性。

还有一种提示效果在小说、视频产品中应用较多，例如视频中右上角提示的标记信息：预告、VIP、直播中、广告、付费、超前点播、独播等，小说中的完结、更新等信息；通过直观提示用户的方式，避免用户进入详情页去查看某个内容的详细介绍后才发现不是用户想要的。

3. 刺激用户

刺激用户主要是可以通过一些标记表达的信息，来刺激用户临时做决策。

最有特点的例子就是视频或小说中标记信息：限时免费；可通过这种方式吸引用户点击，刺激用户在短时间内产生购买欲望的紧迫感，提升用户转化。

利用标记，提升产品设计的价值

03 标记的种类及应用

根据标记的使用范围我将标记的基本类别大致分成3种，分别是产品类型、产品卖点及活动信息；在实际应用中，标记的种类也并不局限于这三种，大家可以根据实际产品诉求制定适合的标记。

下面我来说下这三种标记：

产品类型主要是用标记来主要体现该产品的类型，帮助用户通快速了解该产品属性。

产品卖点主要体现可以直接影响用户购买的卖点，首先体现产品的特色，另一方面则通过运营手段，凸显出一些吸引用户的方式。例如：”限时免费”标记。

活动信息比较常见的主要是各大产品的购买页面，很多产品经常组合卖，比如购买稻壳会员，购买页面会有标记提示“送爱奇艺年卡”；还有的购买页面会提示“首月3倍积分”这些都是一些活动信息，这类的信息字数较多，主要表达活动的一些优惠，促使用户购买。

了解标记的种类后，下面我来说一下标记的元素及如何应用：

标记的体现元素有多种，常见的有图标、文字、数字、颜色等；在实际应用中先考虑好要添加标记的目的，结合标记的元素，根据使用目的来调整元素体现的颜色、形状、位置；其中图标和颜色可以单独使用，也可以和其他元素搭配使用，而其他元素都需要搭配来使用。

1. 标记元素

图标+颜色：图标可以直接表达内容的类型，增加颜色的元素可以凸显该标记；在用户浏览时更容易吸引用户，一般图标可使用平时常见的图标，可以让用户第一眼就知道图标要表达的意思。
文字+颜色：文字可以直接表达内容的特性，例如小说中体现的免费、连载、特价等，直接表达文字既直接又准确，主要用于体现该内容的分类或特点。
数字+颜色：数字大多应用于消息类，体现未读消息数量；还有一种体现形式是应用于榜单排名中，可以凸显排名中的内容或相关产品，可以促进用户查看。
文字+图标+颜色：这种的样式一般较大，主要应用于推广或在轮播图中展现，体现在较大的背景图中。
文字+数字+颜色：文字主要表达其含义，数字体现未读的数字。

利用标记，提升产品设计的价值

2. 颜色

标记中每个样式可以设计成不同颜色，颜色不同带来的作用也不同，我分别观察了腾讯视频、优酷、爱奇艺、芒果TV。

发现这几个视频里运用的标记颜色类似，所以我找了其中两个来给大家分析一下：

利用标记，提升产品设计的价值

一般视频里面包含的标记有：VIP、付费、自制、广告、全网独播、独播、超前点播、预告。

颜色分别有：黄色、橙色、灰色、红色、蓝色。

黄色：黄金的颜色特别显眼，在古代明黄的衣服只有皇室成员可以穿，所以黄色代表高贵的颜色，也有一句话叫“以黄为贵”代表尊贵；在图中应用的标记是：VIP、付费。
橙色：地位稍微逊色于黄色，但也非常显眼，在图中应用的标记是：自制；如果用浅颜色来代表，起不到突出的效果，主要目的是为了突出并告诉用户该视频的是自制视频。
灰色：颜色比较暗淡，很容易被用户忽略。在图中应用的标记是：广告；这个目的很好理解，给到用户提示用户体验会增加，但是可以通过弱化的效果来体现
红色：红色能激起人的兴奋感，快速消费感，有一定视觉冲击力；在页面中想要引导用户去点击的区域或者按钮会用红色。在活动页的颜色上也常用红色，激起用户的兴奋感；在图中主要应用的标记是：全网独播、独播。
蓝色：蓝色给人的感觉是放松，也是趋向于和谐放松的颜色；所以在图中应用的标记是：预告。

我们在使用过程中需要了解清楚每个颜色代表的含义，如果想要抓住用户眼球，可以使用黄色、橙色、红色、这样醒目的颜色。如果标记体现的内容价值不高，但是也需要存在，可以考虑和产品主题一致的颜色，这样给人的感觉会很舒适，不会有杂乱的感觉。