细节篇:4步搞定“角标”设计焱小玖

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

THE END
1.图标设计简析本文主要从图标的风格、图标的设计规范、图标的设计技巧三个方面来进行图标的讲解,让我们开始图标之旅吧~ 一、图标风格 图标可大致划分为三类:线性、面性、线面结合。结合三种基础类型的表达方式可以创造出各式各样的表现形式。 1.线性图标 使用轻量的线条勾勒的图标,整体感受也趋向于精致、细致而具有锐度感。 http://www.szltech.com/nd.jsp?id=117
2.ICON设计的要点AI工具扁平化是ICON设计的必然趋势,因为它适配于全端,文件小不会影响机器的加载速度,可以在固定的屏幕大小中增加内容。ICON的整体风格不仅要表面看起来整齐,还要注意配色和颜色的搭配。 3.系统图标的表现形式 系统图标可以采用面形或线性的表现形式。面形用于软件标志的比较多,因为它的视觉识别性最强。线性作为功能标识来使用...https://www.xinzhibang.net/article_detail-13407.html
3.标志设计中文化内涵的体现形式四、结语 标志是一个人或者集体价值观的体现,是文化的外在表现形式,具有精神载体的功能。标志在设计过程中,形式和表现手法都是多元化的,本文通过标志设计中体现的民族文化内涵、地域文化内涵和时代文化内涵,来阐述标志设计中文化内涵的体现。分别举例子说明了不同文化对标志设计者灵感的提供,期待现代标志设计在延续和...https://m.mayiwenku.com/p-33761794.html
4.图标的分类图标在界面中起到代替文字(示意)和辅助文字(装饰)的作用。 根据应用场景不同分为: 工具图标:有明确功能、提示含义的图标,如标签栏上的图标,大多用扁平风格来表现; 装饰图标:...https://www.jianshu.com/p/90a248051a3b
5.移动UI交互设计与动效制作第4章UI元素交互动效.ppt文字交互动效 实战——制作动感遮罩文字动效 文字动效在界面中通常是作为展示型动效,用户突出界面的视觉表现效果,同时也使得主题文字的视觉表现效果更加突出。 制作动感遮罩文字动效 源文件:源文件\第4章\4-5-3.aep 视频:视频\第4章\4-5-3.mp4 图标交互动效 常见图标动效表现形式 现在越来越多的移动App开始注重...https://m.book118.com/html/2023/0403/7025121103005061.shtm
1.最新小图标设计趋势,探索应用嘲与创意灵感之旅1、简约化设计:设计师们追求极简的表现形式,通过简单的线条和色彩,传达出丰富的信息,这种设计风格的小图标不仅易于识别,而且具有视觉冲击力。 2、扁平化设计:扁平化设计是近年来的热门趋势,适用于小图标设计,它强调去除多余的装饰元素,以简洁的图形和色彩表现主题,具有现代感和简洁性。 http://www.sangejiaoao.com/post/9005.html
2.最新图标设计趋势与特点概述新闻扁平化设计作为一种流行的设计风格,已经成为现代图标设计的基础,最新风格的图标设计继续延续扁平化的设计理念,注重简洁、清晰、直观的表现形式,设计师们通过简单的线条和色彩,将信息以最直接的方式传达给用户,这种设计风格强调简约美,避免了过多的装饰和细节,使得图标更加易于识别和使用。 http://www.czshengmei.cn/post/11756.html
3.轻松绘制Icon图标,提升新媒体视觉效果总的来说,Icon图标虽小,却在新媒体视觉效果中扮演着举足轻重的角色。通过掌握基础知识、运用绘制技巧、巧妙应用于新媒体领域,我们不仅能轻松绘制出美观实用的Icon,还能为品牌传播和用户体验增添更多亮点。希望今天的分享能对大家有所帮助,让我们一起在视觉设计的道路上不断前行!https://www.batmanit.cn/blog/k/52326.html
4.融媒体常见的的表现形式有:文本图标图片音频和视频。刷刷题APP(shuashuati.com)是专业的大学生刷题搜题拍题答疑工具,刷刷题提供融媒体常见的的表现形式有:文本、图标、图片、音频和视频。A.正确B.错误的答案解析,刷刷题为用户提供专业的考试题库练习。一分钟将考试题Word文档/Excel文档/PDF文档转化为在线题库,制作自己的https://www.shuashuati.com/ti/a1a7cb9306c44f09975079f6ba106947.html?fm=bdbds78e51ed238a8b6668608f6e4ccc52d78
5.android底部导航栏中间凸起如何做好UI底部导航栏图标设计本文探讨了UI设计中底部导航栏图标的重要性和设计原则,包括品牌调性、识别度和美观性的平衡。底部导航栏通常包含3-5个入口,模式包括权重平分、强调信息和引导操作。线性图标在未选中状态时更常见,而选中状态则有多种表现形式。设计师应根据产品特点和用户需求进行创新设计。 https://blog.csdn.net/weixin_29133151/article/details/113043845
6.标志百科之词条:标志(Logo)表现形式 作为具有传媒特性的LOGO,为了在最有效的空间内实现所有的视觉识别功能,一般是通过特示图案及特示文字的组合,达到对被标识体的出示、说明、沟通、交流从而引导受众的兴趣、达到增强美誉、记忆等目的。 表现形式的组合方式一般分为特示图案,特示字体,合成字体。 https://www.logonews.cn/logo.html
7.icon图标立体(图标立体效果)随着科技发展和时代变迁,传统平面式icon图标已经不能满足用户需求。立体设计能够让icon图标更具现代感和科技感,在视觉上更加符合当下用户的审美需求。 2. 丰富表现形式 传统平面式icon图标往往只能呈现简单的二维形态,而立体设计可以让icon图标更具立体感和层次感,从而丰富了其表现形式。这也为设计师提供了更多的创作空...https://www.c4dmodels.cn/article/142820.html
8.分享3种让领导满意的PPT数字表现形式分享3种让领导满意的PPT数字表现形式 导读 在PPT展示中,有很多的数字,是没办法使用图表来表达的,那么,对于这些数字来讲,我们应该如何呈现呢? 我个人的经验是有3种方法,在这里,分享给各位。 对于我们大多数职场人来讲,所做的每一份PPT,可能都少不了数字。比如会出现:...https://www.pptfans.cn/688778.html
9.html和css的使用方法以及样式overflow-x:auto;超出部分在x轴的表现形式。 auto:自动;(如果超出,就自动以滚动条的形式显示) 去滚动条: 加在具有overflow属性的元素身上 ::-webkit-scrollbar{ height:0; } overflow-x: visible|hidden|scroll|auto|no-display|no-content; 值 描述 测试 ...https://www.ucloud.cn/yun/1146.html
10.安卓图标设计最后,要注意色彩的搭配和使用,比如图标的背景色和前景色的搭配、字体颜色的选用等。这需要考虑适度、和谐和整体效果等问题。选择适合自己的色彩搭配,可以充分表现应用图标的设计风格和特色。 三、样式形式 将应用图标的样式形式突出特色,也是提升其设计质量的一个关键。在应用图标的样式形式设计中,需要注意以下几点: ...http://www.chinauci.cn/news/industry/26198.html
11.关于学习字体设计应用的心得体会范文对于文字的表现形式,除了用二维的方式之外,我们完全可以运用在二维的空间当中,表现三维的立体效果,将有趣的立体效果给予文字。具体的方法有:文字本身三维透视立体化,可给予文字不同的材质:木、石、纸、玻璃、金属等;文字的浮雕效果,让人产生一种想触摸的感觉;文字加虚实阴影,利用阴影的负形反衬出文字本身的正形,仅...https://www.wenshubang.com/xindetihui/3690815.html
12.幼儿园大班教案《寻宝》(精选17篇)★价值取向:阅读秘籍图,听辨音乐用动作等形式表现不同的乐句。 1、一人寻找,尝试表现乐句。 (1)阅读秘籍图的第二页:一人爬山寻找钥匙。 (2)秘籍图告诉了我们什么? (教师重点指导:听清楚乐句,每一乐句开始都要变化爬山的动作。) (3)个别交流:关注每个乐句的动作变化,跟着音乐一起念咒语。 https://www.unjs.com/jiaoan/youer/20230325143304_6733756.html
13.Android那些事儿Android手机交互特性菜单的三种表现形式 图中包含Android系统中三类菜单表现形式: ◆选项图标菜单***次按下菜单键会在屏幕底部显示一个不可滚动的图标框。(系统默认最多6个按钮,以2×3的形式展现,但大多自绘菜单可以安排为2×4,下图展示在一个应用中从1到8的排列方式) https://mobile.51cto.com/design-244703_1.htm
14.幼儿园大班艺术活动教案15篇二、能大胆地合作,用长卷画的形式表现江南水乡的优美景色。 三、体验创造和成功的快乐。 活动准备:音乐《姑苏行》、长卷画形式的挂历——江南水乡、电视游览片。水彩颜料、画纸、排笔。 活动过程: 一、欣赏感受音乐 1、提问:听了这段音乐你有什么感觉?好象看到了什么?来到了什么地方?(幼儿听音乐) ...https://www.yuwenmi.com/jiaoan/youeryuan/2566494.html
15.一篇文章搞定APP应用市场图设计经验总结优波设计·应用截图、市场图、APP预览图、市场预览图、上架图等,有静态图片和视频两种表现形式。 ·市场图的表现内容可以分为功能向、内容向、运营向三个方面。 ·市场图的组成元素主要有界面截图、文案、手机框、内容元素和应用组件。 ·对风格的归纳总结让我们在设计的时候,有一套较为实用的方法论可以参考,但最后的画面...https://www.ubuuk.com/article/369.html
16.《漫画》教案(通用18篇)1、 欣赏漫画作品的构思特点,表现方式和艺术效果。 2、 了解漫画的一些基本常识。 3、 初步掌握漫画创作的常用手法。 二、教学内容: 1、 认识漫画这种艺术形式,了解漫画除了具体特有的讽丑恶、弘正气、扬美善的社会功能和教化功能、娱乐功能、审美功能。 https://www.jy135.com/jiaoan/540431.html