【方法论】 - “角标”设计

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


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

一.表现形式

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

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

1.图标+色块

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

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

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

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

2.文字+色块

文字和色块的组合是最常见的一种样式,文字的表达简洁清楚又准确直接,一般不会产生歧义。所以抽象的概念,或是本身用图形很难区分的东西,都会选择文字来表达,这种形式经常用于表示分类、属性等。

比如视频网站的独播、首播、自制,这样的情况用文字来表达直接准确不会造成误解,可以降低用户的理解成本。

同时文字还能承载一些文化上的只能意会的隐喻,比如下图的“狠优惠”就准确的表达了信息,“狠”字这种同音字的流行说法具备了两层含义,只有用文字才能体现出来。

试想一下这里如果换成图标图形来表达,就不那么容易了。一是这个概念比较抽象复杂,简单的图形不容易把意思表达清楚;二是即使画出了这个图形,也会因为缺乏普遍共识造成理解上的偏差,所以这种情况直接使用文字是最合理的选择。

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

3.图标+文字+色块

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

比如喜马拉雅“123狂欢节”和天猫的“618狂欢节”,两个都是节日的图标加文字信息,在活动期间人们浏览产品的时候,帮助更好的突出和区分活动商品。

在选择角标样式的时候,我们可以根据表达内容使用场景来选择:

·具体的、有普遍共识的内容可以选择icon来展现,不仅美观也容易理解。

·抽象或者是图形相近的内容,可以选择文字直接准确的表达。

·特殊活动可以选择icon+文字一起,组成强视觉符号突出活动商品。

二.色彩

角标色彩的使用其实没有特别严格的限制,不过也需要注意两点:一个是要与背景区别,选择能突出适用于不同背景的色彩;二是要选择和整个产品风格调性相符的色彩,一般可以从:醒目颜色、品牌色和内容相关颜色,三个方面考虑色彩的选用。

1.醒目颜色

角标的存在重要的一点就是为了吸引用户注意,所以选择橙色、黄色、红色这样的醒目颜色能快速抓人眼球,突出推荐的产品,这也是最传统直接的方式,很多产品都选择了鲜艳醒目的色彩。

2.品牌色

选择产品的品牌色做角标颜色可以突显品牌感,让产品保持和谐统一,整体视觉给人感觉很舒适,没有过多色彩带来的杂乱感。

网易云音乐的角标多选择了品牌的红色,既能突出内容又让整体页面也给人和谐统一的视觉感受。

3.内容相关颜色

人们对每种颜色都有对应的心理反应,这既有自然的因素也有文化的因素,我们在选择颜色的时候都需要考虑到。不过做起来也不难,因为大多数颜色都有约定俗称的含义,比如绿色给人感觉是自然、清新免费等,红色代表热烈、火爆,金色代表尊贵、金钱、价值等,只要是按照大众普遍共识来选择就不会出错。

比如爱奇艺的“VIP”角标,为了体现VIP的价值内涵选择用金色来表现;懒人听书的“限免”用绿色来表现,这些都是结合了颜色本身的含义来选择的,从颜色方面辅助信息的传达。

角标色彩的选择可以从醒目颜色品牌色内容相关颜色三方面来考虑,不管怎么选择都需要注意,要选在不同的背景上都能突出的颜色,然后是要能与整个产品的风格调性相符合。

三.形状

角标的形状总体来说有三角形矩形还有异形,可以根据不同的元素和内容来选择适合的形状。

1.三角形

三角形一般出现在左上角或者右上角,icon或者文字都可以和三角形组合,而且三角形的面积大小非常适用于icon的显示,但是文字的话就需要旋转,而且字数一般不超过三个,不然的话字会很小影响视觉。

2.矩形

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

3.异形

异形的灵活度更高一些,样式也更加活泼更具设计感,文字和icon都可以使用。活动类会用的比较多一些,不过设计感虽然重要,但是也需要注意整体的大小和信息的清晰展现。

四.位置

角标的位置通常是在左上角、右上角和下方,根据人们“Z”型浏览习惯,这些都是容易引起用户注意的位置,可以让人能先看到。在决定角标位置的时候,我们可以从浏览优先级和产品内容两方面来考虑。

1.优先级

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

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

比如荔枝的列表中,把类型放在了下方,左上角的位置留给“今日热门”“磁性大叔音”这类运营专题。优酷的列表中也把类型放在了优先级次一级的右上角,把排名放在了最优的左上角重点突出。

2.产品内容

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

像少年得到的有声书一样,书名在上方位置所以“上新”角标就选择了下面的位置,避开对书名的遮挡。

总结

虽然只是页面中一个小小的元素,也需要我们的认真对待从四个方面来考虑:

1.样式:icon+色块适合表达具体或有普遍共识的内容;文字+色块适合表达抽象复杂或图形相近不好区分的内容,icon+文字+色块是强视觉符号适合专题活动、节日等。

2.颜色:可以选择醒目的颜色、品牌色和与内容相关颜色,同时不能忽略在各种背景中的突出效果和是否与产品的整体调性相符。

3.形状:三角形适合icon和三字以内的文字;矩形适合文字及icon+文字,异形比较灵活文字、icon都可以。

4.位置:位置的选择需要考虑优先级和产品内容,优先级依次是左上角-右上角-下方,把强运营的角标放在优先级更高的位置,另外注意避免遮挡背景的关键信息。






















原文链接:https://www.zcool.com.cn/article/ZOTMxODEy.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 161,192评论 4 369
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 68,186评论 1 303
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 110,844评论 0 252
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,471评论 0 217
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,876评论 3 294
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,891评论 1 224
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,068评论 2 317
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,791评论 0 205
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,539评论 1 249
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,772评论 2 253
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,250评论 1 265
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,577评论 3 260
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,244评论 3 241
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,146评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,949评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,995评论 2 285
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,812评论 2 276