稳稳的UI笔记之标签设计(下篇)

用户头像
深圳/UI设计师/4年前/249浏览
稳稳的UI笔记之标签设计(下篇)

思考和总结移动端UI界面中的“标签设计”之“不可点击标签”

在上一篇中,稳稳主要介绍了标签设计的定义、作用,然后根据自己的理解将标签分为“可点击标签”和“不可点击标签”两类,并总结了“可点击标签”五种主要的应用场景和设计要点。那么在本篇中,我们将对“不可点击标签”进行同样的总结梳理。

1.本篇概述

所谓“不可点击”标签,主要指在界面中仅仅起到纯展示和承载内容作用, 而不会发生任何交互的标签。此类标签在各类产品的界面中应用频率很高,样式多种多样,且存在同一模块信息中多个不同层级不同维度的标签并列展示的情况。例如在电商产品的信息流中,从各个维度描述产品的亮点的多个标签;以及在业务办理流程中,标明各业务现阶段所处状态的标签等等。

2.分类详述

下文将分别从以下三个作用出发,将此类标签做一个大致的梳理:2.1 凸显层级的标签、2.2 描述产品亮点的标签、2.3 标明状态的标签 、2.4 标明身份、等级的标签。

2.1 强调凸显

这种类型的标签,一是常见于首页金刚区中(图2.1.1),将产品侧想要重点推介引流的功能入口右上角加上一个小标签,能将其,在一系列并列的功能入口中脱颖而出,迅速吸引用户关注,诱导点击(有时也见于tab栏等的功能入口处);二是在图文或纯文字信息流中,视觉比重最大、颜色最明显、位于左上或右上角显著位置的标签(图2.1.2),除了将自身从一众标签中的层级凸显出来外,其实也将它所处的模块整体从整个信息流中凸显出。

2.1.1

2.1.2

2.2描述亮点

这种类型的标签,常见于商品/产品信息流中,从多个角度多个方面将产品的亮点、卖点提炼并罗列出来。在图文信息流中,一般将层级最高的标签跟图片组合设计,且多置于图片的左上或右上方;其他标签则并列排布在以个单独的区域(图3.2.1);在纯文字信息流中,一般层级最高的标签会置于标题文字前;其余标签置于标题文字后,或另起一行的单独区域(图3.2.2)。而多种标签在并列时的排布、区分,则各有差别。例如有的产品会将不同维度的标签通过不同设计样式进行区分,有的则将同一层级的标签设计样式保持一致,还有的会将相关度高的多个标签进行组合设计。建议此处标签的层级和形式不超过三种 (图3.2.3) 。

2.2.1

2.2.2

2.2.3

2.3标明状态

这种类型的标签,常见于申请、审核、订单处理等业务流程的列表流中,一般是纯文字的信息卡片,结合状态标签的设计,需要标明订单的当前状态,并做好各个状态之间的区分。此情况一般不会有如商品亮点描述般有许多个标签并列的情况。状态标签的设计形式也多种多样(如下图举例说明)。

2.4标明身份等级

这种类型的标签,常见于个人中心、用户评论等相关的界面中,跟随在用户头像之后,标明用户的VIP身份或者社区活跃等级,以体现会员用户的特殊尊贵感,并增加等级和会员功能的露出,告知并吸引其他用户进行会员充值、提升活跃度等。(此种一般由王冠、钻石等较精美的徽章、图标与文字组合设计,如下图举例)。

3.文末总结

好啦今天的梳理总结就到这里叭!主要从不可点击标签的四个功能类型:层级凸显、标明亮点、标明状态和标明身份等级四个方面进行了案例搜集和总结思考。其中包括不同层级不同维度的多个标签的排列方式,各类标签常见的设计样式,包括组合类标签、异形外框标签、描边标签、色块标签、章戳标签等不同的方案,进行一个相对全面系统的梳理总结之后,对于我们日后工作中依据不同场景进行标签的形式和位置的设计考量会起到更好的提高效率、帮助决策的作用~

6
举报
|
1
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
我的钱包-UI界面设计-app
高级感金属拟物 UI设计组件库
智能家居中心 简约 UI设计组件库
盲盒APP UI设计
【新年UI图标】钱包icon
拟物风质感写实UI卡片合集源文件
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
3D渐变流体抽象矢量UI背景图
【新年UI图标】30个图标
【新年UI图标】珠宝icon
【新年UI图标】会员icon
3D卡通UI界面图标可爱插画免扣素
新拟态风格 UI设计组件库
UI通用设计素材1
UI应用平面图标
Security Camera UI kit
UI 登录界面设计模板包
高级表盘系列UI源文件
钱包ui模板
科技医疗透明柜UI界面设计
新能源APP应用UIKit
【新年UI图标】银行卡icon
【新年UI图标】影音icon
矢量立体简约UI蓝白图标
你可能喜欢
相关收藏夹
地产VI
地产VI
地产VI
地产VI
大家都在看
登录注册