UI设计中标签设计总结

　　在UI设计中，标签的特征跟生活中的标签也很相似，用以标注内容分类或内容要点，方便用户快速定位自己需要的内容目标。标签还有满足用户的隐形需求的作用，当用户在犹豫是否要进行下一步操作的时候，标签在一定程度上加强了用户的需求欲望，促进下一步操作。今天我就针对UI设计中标签设计总结进行简单的说明。

　　一、标签的样式

　　1.1线框标签

　　线框标签是比较弱的标签样式，在列表页、详情页都有出现，可单个或多个组合，分为彩色和灰色2种。1)彩色线框标签：在模块中信息层级较高，是希望引起用户关注的内容。2)灰色线框标签：是所有标签类型中视觉表现力最弱的形式之一，常作为配角使用。

　　1.2. 浅色色块背景，深色文字标签

　　设计要点：背景和文字颜色在同一色相内，明度和饱和度适当调整相对于线框标签的视觉表现力和整体性都更强一些，常单个或单个类群出现。1)彩色标签：在列表中信息层级较高2)灰色标签：相对于灰色线框标签表现力更强一些，常与有颜色的标签搭配使用。

　　1.3. 浅色色块背景加边框，深色文字标签

　　是前2种标签类型的集合，整体表现形式相对更强一些。

　　1.4. 深色块标签

　　深色块标签视觉表现力更强一些，所以多应用在信息层级较高的场景中，如果需要标签的类型更突出还可以在色块上增加图标。

　　1.5. 图形标签

　　视觉效果更加直观，设计要点：图形需要表意明确，在用户认知范围内。

　　1.6. 组合型标签

　　色块标签、线框标签、图形标签等多种标签类型的组合，适用于表达丰富的内容。

　　1.7. 文字说明型标签

　　通常采用高饱和度彩色文字说明，起到辅助说明的作用。

　　二、标签在不同类型产品中的应用

　　对于用户来说，标签相当于内容的关键词，可以提高用户的浏览效率，对于设计来说，多样化的信息展现方式可以丰富整个页面，提高视觉表现力。那么标签在不同类型产品中的应用有什么特点呢，让我们一起来看看。

　　2.1. 内容说明

　　内容说明标签可分为：1.文字列表为主的信息说明 2.图片上的说明

　　(1) 文字列表为主的信息说明：使用在以文字内容为主的页面、图文结合的feed流页面中。

　　(2) 图片上的说明：如视频类产品，在图片上增加标签时多使用饱和度比较高的色块标签，因为这类图片本身色彩比较复杂，标签作为辅助说明需要提高视觉表现力来突出展现。

　　2.2. 内容互动(话题标签)

　　内容平台类产品，UI设计中标签设计总结https://www.aaa-cg.com.cn/ui/2604.html?gpf为达到跟其他同属性内容引流的目的，通过标签来满足用户想浏览其他相关内容的潜在需求。如小红书的话题标签，图虫的圈子标签。

　　2.3. 图片说明

　　以图片为主的UGC和社交领域，用户通过图片上的标签找到了自己感兴趣的内容，这些属性就是用户的兴趣点，对内容和图片可以更快速的解读，大大降低了阅读成本。

　　以小红书为例，当用户触摸屏幕时，图片上会出现添加的相关标签，以白色描边+黑色半透明磨砂质感作为标签背景，同时有位置指向，一张图片可以添加文字、语音、背景音乐等标签类型。这种方式也是一种新的沟通方式，效果比图片加上大段文字描述生动了很多。当这张图片被赋予了多个属性，标签和用户之间的互动就发生了。

　　2.4. 产品展示

　　电商快销类产品为了达到业务目标，会在产品列表里添加很多促销或者价格标签来吸引用户点击购买，淘宝商品列表使用的标签都是彩色线框标签，网易考拉的会员优惠标签用深色块样式突出信息层级，这么设计应该是引导用户开通会员。如下图：

　　携程、美团酒店模块，不同的内容标签用不同颜色区分开，层次更加清晰，驾考宝典列表页面用灰色标签提炼卖点，用彩色标签突出优惠信息。如下图：

　　美团外卖以彩色线框标签搭配浅色底深色字的评语标签来吸引用户，大众点评以单个文字色块的样式突出折扣信息。如下图：

　　饿了么的标签，关于折扣使用的是彩色线框标签、搭配浅色深字的评语标签来吸引用户，到了产品详情页，突出领取优惠标签，为什么这么设计呢?因为满减的同时还有优惠券可领，这属于超出预期值的需求点，能够很大的提高用户点外卖的体验。如下图：

　　好了，以上就是今天分享的内容，欢迎大家留言讨论。因此，您现在已经了解了与UI设计师的工作相关的主要技能。如果您想了解更多信息，请给我点个关注，我之后还会继续发包含有关在该领域工作的更多相关文章。

UI设计中标签设计总结相关推荐

纯干货 | UI界面中按钮设计可临摹编辑素材！
按钮是UI界面中最常见的交互元素之一,所以,如果要创建一个稳固的互动且积极有效的用户体验,需要设计好按钮元素.今天我们将搜集整理一些网页app上常见的按钮类型,了解这些不同的按钮设计方法. Viro媒 ...
android弹窗设计,想印：UI设计中弹窗设计的五条基本原则
原标题:想印:UI设计中弹窗设计的五条基本原则 :当你将弹窗设计及使用得恰到好处时,它们就会是非常有效的用户界面元素.它们能帮助用户快速且便捷地达成目标.然而当错误使用时,弹窗却会困扰你的用户.学会如 ...
UI设计中异常状态设计总结
当用户停留任何一个界面,进行任何一个操作都可能发生异常状态.如果接到每个需求都去制定一次异常状态,这样的后果可能会使得产品的不同模块.不同流程,异常状态都不一致.全局规范性被破坏,同时设计师的效率也降 ...
UI设计中图标设计的有几大原则
本文由:"学设计上兔课网"原创,图片素材来自网络,仅供学习分享 UI设计中图标设计的有几大原则?一款简练的图标比起同样大小的文字符号,可以表达更多的意义,根据界面的需要,控制图标的 ...
表单设计中标签的布局方式有哪些
表单设计的标签本质上是一个与用户对话的起点,了解表单设计的标签的设置规则后,需要关注标签的布局方式,因为网页表单设计是影响用户如何回答问题的关键.表单设计标签的布局方式主要包含三种,测试数据展示,用户 ...
UI设计中配色设计攻略
不知道有没有小伙伴跟我一样在做页面配色时会很痛苦呢,很多时候都是凭感觉去配色.最近研究了一下配色方法,今天我就针对UI设计中配色设计攻略进行简单的说明,希望能帮助到一部分小伙伴. 有个有趣的研究成果 ...
UI设计中首页设计指南
一款好的APP产品,其首页设计不仅能清晰展示产品核心功能.特点,有着较好的用户体验,还能展示公司的品牌形象,提升用户品牌认知度.今天我就针对UI设计中首页设计指南进行简单的说明. APP首页设计至关重 ...
UI设计中按钮设计指南
一天,领导丢过来个需求,要求改一下页面上的一个按钮.我想了想,按钮简单啊,很快就画好发过去了,没想到被领导打回来说不行! 我看着自己做的按钮,一脸茫然,这个按钮饱满诱人还亮晶晶的,怎么就不行了呢? 是 ...
UI设计中连笔设计怎么做出高级感？|优漫动游
把文字与文字之间的部分笔画连接起来,是字体设计中很常用的一个技巧,使用得当可以增加字体的设计感.整体感和美感,在标题设计中最常用到.不过对于零基础学ui设计的新人来说,想要灵活的使用这个技巧还是需要有 ...

UI设计中标签设计总结

UI设计中标签设计总结相关推荐

最新文章

热门文章