超快的标签栏设计教程,一次掌握2种方法!

发布时间:2023-01-11 15:22:47

移动应用的底部导航栏是设计中的常见元素之一,它通常会出现在应用程序的底部,包含最常用和频繁操作的功能。标签栏可以让用户快速切换不同部分,从而随时访问重要功能。让我们一起来探索几种常用的标签栏设计吧。

1、舵式标签栏

Home Bar

绘制 390*34 的矩形,填充白色(基于 390*844 的设计尺寸,@1 倍图)。·绘制一个 134*5 的矩形, 填充黑色,使矩形到底部的距离为 8 。

标签栏设计

标签项

绘制 24*24 的画板,取消填充。·绘制 22*22 左右的图标,填充 151716·文本选择「HarmonyOS Sans SC、中等、字号 10、行高 10 」,填充 151716 ,调整图标和文本的间距为 4 。·再次创建画板 78*49 作为每个标签项的点击区域,把图标和文本放置于热点区域画板内,居中对齐。

复制 4 个标签项,更换图标和文本信息。·中间的标签项,创建 40*40 的画板,填充 151716。·绘制图标 24*24 居中放置于画板内。

2、对等标签栏

Home Bar

绘制 390*34 的矩形,填充白色(基于 390*844 的设计尺寸,@1 倍图)。·绘制一个 134*5 的矩形, 填充黑色,使矩形到底部的距离为 8 。

标签项

绘制 25*25 的画板,取消填充。·绘制 22*22 左右的图标,填充 151716 。·文本选择「HarmonyOS Sans SC、中等、字号 10、行高 10 」,填充 151716 ,调整图标和文本的间距为 6 。·再次创建画板 97.5*49 作为每个标签项的点击区域,把图标和文本放置于热点区域画板内,居中对齐。

复制三个标签项,更换图标和文本信息,最常用的标签导航栏就做好了。

以上就是标签栏设计教程的全部内容,看完之后,可以使用即时设计,一起跟着教程自己做一个标签栏吧!