App设计体系之角标

259天前发布

原创文章 / UI / 教程
渐渐见减减简 原创,如需商业用途或转载请与渐渐见减减简联系,谢谢配合。

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”型浏览习惯,角标的位置优先级依次是左上角-右上角-左下角-下方。


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


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

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

8
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    没有新消息