UI设计细节篇，4步搞定“角标”设计

版权申明：本文出自“焱小玖”原创，感谢“焱小玖”的原创文章分享！

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/

角标一般出现在列表、banner和各种推荐位中。其主要目的是为了吸引用户的注意力，提示用户关注该商品或重要信息，为要推的内容提高曝光度，带来流量。

我之前在给产品的课程列表设计角标的时候，一开始觉得很简单，没有认真全面的考虑，导致后期角标的位置和颜色反复修改。后来总结了教训才发现，一个小小的角标在设计的时候也需要做不少考虑，那么角标的设计都需要从哪些方面考虑呢？小小的角标在设计的时候也需要做不少考虑，那都需要从哪些方面考虑呢？

下面就从样式、颜色、形状和位置四个方面来分析一下，到底该怎么选择使用角标吧。

一.表现形式

想要设计一个好的角标，我们首先要知道它的三大组成元素，它们分别为：图标、色块、文字。

在设计时这三个元素组合产生了三种表现形式，即：图标+色块；文字+色块；图标+色块+文字。

1.图标+色块

图标和色块的这种组合形式比较美观，人们在阅读浏览的时候很容易被图形和图片吸引。因为我们大脑处理图片信息的速度要比处理文字信息快很多，举个例子：一个苹果的轮廓图形和"苹果"这两个文字对比，轮廓图能让我们更快地意识到这是苹果。

因此这种样式对icon的造型能力要求也比较高。还有一点需要注意的是，这种样式适合具象的，或者有大众认知基础的图形。比如像火、钻石和王冠之类的普遍易懂的，如果是比较独特和抽象的，大家不熟悉的信息，用这种样式就容易表达不清楚。

比如上图蜻蜓FM的两个角标，一个是金色的皇冠，这个图标和蜻蜓FM的"SVIP超级会员"图标，形状是一样的，所以很容易理解。

第二个钻石的图标，因为钻石本身的含义里就有昂贵、尊贵、权利的意思，而且现在很多产品都会使用钻石的图形来表示一些专属服务和会员等级特权。比如QQ黄钻、红钻，银行的银卡、金卡和钻卡等，人们对钻石图形代表的含义已经有了普遍共识，所以只看图形就能清楚地理解它所代表的含义。