App设计体系之角标

角标有两个作用：一个是吸引用户的注意力，吸引用户关注该商品或重要信息，提高曝光度，带来流量；另一个是分类，将带有同种属性的内容作以区分，既然带有同种属性又要区分，那么角标需要统一风格也要有所差异。

1、表现形式

角标主要由三个要素构成：文字、图标、色块，三个元素组成三种表现形式：图标+色块、文字+色块、文字+图标+色块。

1.1 图标+色块

在视觉上，图片+色块的形式更为美观，在记忆上，图片比文字更容易被用户记住，因为图像诉诸视觉，表现为形象思维，不需要再加工。而文字虽然也诉诸视觉，却是抽象的，要在脑海中进行二次加工转化为形象。

当然前提是，图片能清晰表达文字的意思 ，如若不能，就不能用这种形式，所以抽象的概念，或是本身用图形很难区分的东西，都会选择文字来表达。

1.2 文字+色块

如今大多数App使用文字+色块，文字的传达，简单明了直接准确，一般不会产生歧义，如果所表达的内容概念较为抽象，无法用图像准确的表达清楚，那就选择文字。

另外，文字里还有一种情况是数字，这种样式一般出现在各类榜单、排行的展示中，用来凸显重要信息，帮助运营推广。

1.3 图标+文字+色块

这种样式包括图标、文字和色块，面积也比较大，使用场景一般是节日和活动，或者是特殊专题。有活动专属的图标加上文字信息，是一个比较强烈的视觉符号，就像这个活动的LOGO一样，突出活动推出的内容，吸引用户的注意力。

比如网易严选的“11.11用心生活节”，图标加文字，在活动期间用户浏览产品的时候，帮助用户更好的区分活动商品。

2、形状

角标的形状主要有有三角形、矩形还有异形，可以根据不同的元素和内容来选择适合的形状。

2.1 三角形

由于人的阅读习惯是从左到右，从上往下，因此，三角形角标通常会放置在左上角，icon可旋转可不旋转，而文字需根据三角形旋转，且字数最好不能超过3个，以最终视觉效果决定；

2.2 矩形

矩形的面积比较适合文字或者icon+文字，纯icon的比较少见。矩形对文字的字数要求没那么严格，字数多的话一般都会选择矩形。而且矩形角标还可以加一些圆角和变形，让整个样式变得更加活泼，增加设计感。

2.3 异形

异形的灵活度更高一些，样式也更加活泼更具设计感，文字和icon都可以使用，需要注意整体的大小和信息的清晰展现。

3、位置

根据人们“Z”型浏览习惯，角标的位置优先级依次是左上角-右上角-左下角-下方。

如果预计会又两个角标同时出现就要先考虑好位置的选择。一般常规的像分类、属性的区分，这种是属于长期存在的，可以放在次一级的位置。强运营属性的短期状态，比如排名、上新、推荐等预留出最高优先级的位置。

角标位置的选择也需要根据产品的内容来考虑，尽量避免对关键信息的遮挡。

「少年得到」中的信息固定为图片上方，那么角标位置只能放在下方。