今天说一说APP中的角标。在各类产品中我们都不难见到角标的身影，它出现的位置各有不同，设计形式也越来越多样。
我之前在给产品的课程列表设计角标的时候，一开始觉得很简单，没有认真全面的考虑，导致后期角标的位置和颜色反复修改。后来总结了教训才发现，一个小小的角标在设计的时候也需要做不少考虑，那么角标的设计都需要从哪些方面考虑呢？小小的角标在设计的时候也需要做不少考虑，那都需要从哪些方面考虑呢？
下面就从样式、颜色、形状和位置四个方面来分析一下，到底该怎么选择使用角标吧。
一.表现形式
想要设计一个好的角标，我们首先要知道它的三大组成元素，它们分别为：图标、色块、文字。
在设计时这三个元素组合产生了三种表现形式，即：图标+色块；文字+色块；图标+色块+文字。
1.图标+色块
图标和色块的这种组合形式比较美观，人们在阅读浏览的时候很容易被图形和图片吸引。因为我们大脑处理图片信息的速度要比处理文字信息快很多，举个例子：一个苹果的轮廓图形和“苹果”这两个文字对比，轮廓图能让我们更快地意识到这是苹果。
因此这种样式对icon的造型能力要求也比较高。还有一点需要注意的是，这种样式适合具象的，或者有大众认知基础的图形。比如像火、钻石和王冠之类的普遍易懂的，如果是比较独特和抽象的，大家不熟悉的信息，用这种样式就容易表达不清楚。
比如上图蜻蜓FM的两个角标，一个是金色的皇冠，这个图标和蜻蜓FM的“SVIP超级会员”图标，形状是一样的，所以很容易理解。
2.文字+色块
文字和色块的组合是最常见的一种样式，文字的表达简洁清楚又准确直接，一般不会产生歧义。所以抽象的概念，或是本身用图形很难区分的东西，都会选择文字来表达，这种形式经常用于表示分类、属性等。
比如视频网站的独播、首播、自制，这样的情况用文字来表达直接准确不会造成误解，可以降低用户的理解成本。
同时文字还能承载一些文化上的只能意会的隐喻，比如下图的“狠优惠”就准确的表达了信息，“狠”字这种同音字的流行说法具备了两层含义，只有用文字才能体现出来。
试想一下这里如果换成图标图形来表达，就不那么容易了。一是这个概念比较抽象复杂，简单的图形不容易把意思表达清楚；二是即使画出了这个图形，也会因为缺乏普遍共识造成理解上的偏差，所以这种情况直接使用文字是最合理的选择。
另外，文字里还有一种情况是数字，这种样式一般出现在各类榜单、排行的展示中，用来凸显排名，帮助运营推广。
3.图标+文字+色块
这种样式包括图标、文字和色块，面积也比较大，使用场景一般是节日和活动，或者是特殊专题。有活动专属的图标加上文字信息，是一个比较强烈的视觉符号，就像这个活动的LOGO一样，突出活动推出的内容，吸引用户的注意力。
比如喜马拉雅“123狂欢节”和天猫的“618狂欢节”，两个都是节日的图标加文字信息，在活动期间人们浏览产品的时候，帮助更好的突出和区分活动商品。
在选择角标样式的时候，我们可以根据表达内容和使用场景来选择：
·具体的、有普遍共识的内容可以选择icon来展现，不仅美观也容易理解。
·抽象或者是图形相近的内容，可以选择文字直接准确的表达。
·特殊活动可以选择icon+文字一起，组成强视觉符号突出活动商品。
二.色彩
1.醒目颜色
角标的存在重要的一点就是为了吸引用户注意，所以选择橙色、黄色、红色这样的醒目颜色能快速抓人眼球，突出推荐的产品，这也是最传统直接的方式，很多产品都选择了鲜艳醒目的色彩。
2.品牌色
选择产品的品牌色做角标颜色可以突显品牌感，让产品保持和谐统一，整体视觉给人感觉很舒适，没有过多色彩带来的杂乱感。
网易云音乐的角标多选择了品牌的红色，既能突出内容又让整体页面也给人和谐统一的视觉感受。
人们对每种颜色都有对应的心理反应，这既有自然的因素也有文化的因素，我们在选择颜色的时候都需要考虑到。不过做起来也不难，因为大多数颜色都有约定俗称的含义，比如绿色给人感觉是自然、清新免费等，红色代表热烈、火爆，金色代表尊贵、金钱、价值等，只要是按照大众普遍共识来选择就不会出错。
比如爱奇艺的“VIP”角标，为了体现VIP的价值内涵选择用金色来表现；懒人听书的“限免”用绿色来表现，这些都是结合了颜色本身的含义来选择的，从颜色方面辅助信息的传达。
三.形状
角标的形状总体来说有三角形、矩形还有异形，可以根据不同的元素和内容来选择适合的形状。
1.三角形
三角形一般出现在左上角或者右上角，icon或者文字都可以和三角形组合，而且三角形的面积大小非常适用于icon的显示，但是文字的话就需要旋转，而且字数一般不超过三个，不然的话字会很小影响视觉。
2.矩形
矩形的面积比较适合文字或者icon+文字，纯icon的比较少见。矩形对文字的字数要求没那么严格，字数多的话一般都会选择矩形。而且矩形角标还可以加一些圆角和变形，让整个样式变得更加活泼，增加设计感。
3.异形
异形的灵活度更高一些，样式也更加活泼更具设计感，文字和icon都可以使用。活动类会用的比较多一些，不过设计感虽然重要，但是也需要注意整体的大小和信息的清晰展现。
四.位置
角标的位置通常是在左上角、右上角和下方，根据人们“Z”型浏览习惯，这些都是容易引起用户注意的位置，可以让人能先看到。在决定角标位置的时候，我们可以从浏览优先级和产品内容两方面来考虑。
1.优先级
根据人们“Z”型浏览习惯，位置的优先级依次是左上角-右上角-下方。
如果预计会有两个角标同时出现就要先考虑好位置的选择。一般常规的像是分类、属性的区分，这种是属于长期存在的，可以放在次一级的位置。为强运营属性的短期状态，比如排名、上新、推荐等预留出最高优先级的位置。
2.产品内容
选择位置的时候也需要根据产品的内容来考虑，尽量避免对关键信息的遮挡。
像少年得到的有声书一样，书名在上方位置所以“上新”角标就选择了下面的位置，避开对书名的遮挡。
总结
以上就是我在为课程商品列表页设计角标时做的总结，虽然只是页面中一个小小的元素，也需要我们的认真对待从四个方面来考虑：
1.样式：icon+色块适合表达具体或有普遍共识的内容；文字+色块适合表达抽象复杂或图形相近不好区分的内容，icon+文字+色块是强视觉符号适合专题活动、节日等。
3.形状：三角形适合icon和三字以内的文字；矩形适合文字及icon+文字，异形比较灵活文字、icon都可以。
4.位置：位置的选择需要考虑优先级和产品内容，优先级依次是左上角-右上角-下方，把强运营的角标放在优先级更高的位置，另外注意避免遮挡背景的关键信息。