UI 2022年02月14日
0 收藏 247 点赞 821 浏览 1875 个字
摘要 :

在移动端产品中,标签不是核心内容,甚至有点不起眼,但是谁都无法忽略它的存在。特别是在电商平台中,标签已经成为了不可或缺的设计形式。今天我们就来总结下标签设计的……

在移动端产品中,标签不是核心内容,甚至有点不起眼,但是谁都无法忽略它的存在。特别是在电商平台中,标签已经成为了不可或缺的设计形式。今天我们就来总结下标签设计的细节。

文章主要分为 3 部分:

  • 标签是什么?
  • 标签需要表达什么?
  • 标签设计的要点

标签是什么?

1. 功能标签

百度百科给出的解释是”Tag(标签)是一种更为灵活、有趣的日志分类方式,可以为每篇日志添加一个或多个 Tag(标签)“。

例如在网络平台发布文章时,作者可以定义多个标签,方便读者更好的理解文章内容。同时平台也可以根据标签聚合同类文章,建立目录索引,引导读者快速查看标签文章。

还有一种就是「话题标签」更加灵活,通常采用“#+任意文字”的形式,作为超链接可以跳转到专题或者信息聚合页。例如微信、微博、今日头条的话题标签。

从3个方面,分析总结标签设计的体验细节!

以上 2 种形式更多的是从功能角度出发,侧重分类和索引功能。

2. 标签组件

在设计侧更讲求标签的信息传递及表现形式。AntDesign、TDesign 等 Web 端规范都有专门的 Tag 组件,可以看出主要有 3 个作用——标记、分类和选择。

从3个方面,分析总结标签设计的体验细节!

标签需要表达什么?

在移动端产品中,标签通常出现在“发现”、“推荐”页面,或者搜索结果页面中。通过简单精炼的表达方式,在有限的空间辅助信息表达,让用户可以更多维度地了解内容,引起用户注意并激发用户兴趣。

所以标签所表达的内容至关重要,主要包括以下 3 个信息方向。

1. 商品或服务特点

对电商平台而言,商品、价格,服务、物流等服务环节都会影响到用户决策,因此需要尽可能地将商品及服务的价值点传递给用户。而移动端产品屏幕空间有限,需要将各类信息分层有序的展现出来。

标签既可以突出商品折扣、优惠信息、服务特色吸引用户,又不会占用太多的空间,所以成为了商品展示重要的辅助信息。

从3个方面,分析总结标签设计的体验细节!

2. 用户行为

最近我在使用支付宝在付款时,发现对方账户信息增加了”经常光顾“的辅助标签,让我可以更放心地完成付款。简单的标签可以缓解用户误操作的焦虑,增强安全感。

而在腾讯云手机端登录时,增加了“上次登录”的标签,降低了多账号用户的记忆成本,带给用户更好的用户体验。

从3个方面,分析总结标签设计的体验细节!

同样在电商平台中,用户行为也成为了重要的标签符号,买过,订阅过、浏览过等标签可以唤醒用户的记忆,拉进商品与用户间的距离,有助于带来更好的点击量。

从3个方面,分析总结标签设计的体验细节!

3. 从众心理引导

当用户无法决策时,从众心理会成为影响用户决策的重要因素。所以在电商平台,销量作为非常重要的排序条件单独展示,方便用户快捷操作。同样其他用户的收藏量、下单量、播放量数据也会对用户行为产生影响。因此这类信息广泛应用在标签设计中,积极引导用户点击和转化。

从3个方面,分析总结标签设计的体验细节!

标签设计的要点

1. 精炼

标签通常面积比较小,主要作为辅助或者补充信息,帮助用户更好的理解主体信息。因此需要精炼易懂,不适合展示大段内容。但是过于简单的标签,无法给用户足够的信息,容易让用户看不懂、产生疑惑。

例如美团美食中的标签。“订”是什么含义呢?提前预订?订座?“买”又是什么含义呢?买单?买券?当然可能是因为我不经常使用美团,对标签有些不太理解。所以这些标签信息对我来说,也起不到传递信息的作用。

从3个方面,分析总结标签设计的体验细节!

2. 视觉突出

由于面积比较小,标签通常会增加背景色,或者采用鲜亮的色彩、图形吸引用户的注意。但是在不同的产品中,视觉突出的方式也是不同的。我们可以通过以下 3 款产品的封面标签了解其中的微妙差异。

腾讯视频采用的是固定背景色标签,标签本身成为了一种信息符号,重在表达产品视频的特性,强调突出醒目。

在美团中,标签采用透明底色,信息以销量和好评率为主,作为菜品的辅助信息,更多考虑的是减少对图片造成干扰,辅助标签文本信息的传递。

而在网易云音乐中,标签采用的是封面主色调作为底色,尽量与封面融为一体,减少对封面干扰,保证标签文本信息的有效传递。

从3个方面,分析总结标签设计的体验细节!

3. 一致性与差异化

标签是需要遵循一致性还是差异性呢?不同的平台给出了截然不同的答案。

在淘宝中,标签基本是固定在同一色系中,采用相近的视觉形式。当然首单优惠、次日达等重点服务特性则采用了明显的差异化表现形式。另外电商平台中的广告标签,更多是满足政策法规的要求,不得已而为之,因此相比价格优惠等利益点标签,明显被弱化了。

而在京东中,不同类型的标签具有明显的差异化,整体形式、颜色都不一样,力求通过差异化辅助标签信息的传递。

从3个方面,分析总结标签设计的体验细节!

大家是如何看待标签的一致性和差异化的呢?欢迎大家评论区留言讨论~

以上就是我对标签的一点思考,今天的分享到此结束。

超多案例!10 个底部标签栏的设计技巧

本期黑马哥将会给大家分享 10 个关于底部标签栏设计的优秀案例,开启你对底部标签栏设计的不同认知。

阅读文章 >

欢迎关注作者微信公众号:「子牧UXD」

从3个方面,分析总结标签设计的体验细节!

微信扫一扫

支付宝扫一扫

版权: 转载请注明出处:https://www.jizhisheji.com/56981.html

相关推荐
推荐
10个产品细节剖析,看大厂是如何做设计的!
作为 UX 设计师来说,通过设计提高用户的操作体验是我们的工作重心。以最短的路径实现用户访问需求,同时保障产品需求和用户体验的双重达标,对于…
日期:2022-04-10 点赞:88 阅读:1,035
热门
4000 字硬核干货!UX设计师必备的开发知识全在这了!
UX 设计师与开发、测试同事交流有障碍?沟通费时?不用怕,读完这篇文章你将掌握开发、测试常用术语及基础知识,沟通效率+10086。 背景概述…
日期:2022-04-08 点赞:49 阅读:840
最新
5000字干货!从5个方面帮你完整了解标签栏设计
前言 标签栏是用户进入 APP 的第一触点,绝大多数以固定在设备底部的形式、让用户在应用中的不同模块之间快速切换。它作为移动应用中最常见的元…
日期:2022-04-07 点赞:179 阅读:945
精选
2022 设计趋势!正在悄然流行的「新粗野主义」风格
每年你会在极致设计看到大量的设计趋势预测和总结类的文章,其中有的出自腾讯这样的头部公司,有的出自 Uxdesign.cc 和 Graphic…
日期:2022-04-07 点赞:14 阅读:619
最新
可视化大屏设计快速入门指南,看这篇就够了!
大家好,我是小六。今天给大家分享可视化的入门全流程指南,从设计流程、规范、技巧、组件、开发落地等系列知识的普及,感谢@王鹏 的技术支持。欢迎…
日期:2022-04-06 点赞:64 阅读:804
精品
从 Behance 首页推荐的作品集里,我学会了这5个高级技巧!
Hi,我是彩云。最近在 Behance 上发现一套点赞超高的作品,这一组作品看起来非常的干净、高级,看看我们能从中学到什么?学完之后又要怎么…
日期:2022-04-01 点赞:286 阅读:609
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

ceotheme@ceo.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站