一、底部标签栏主题化设计

鸟哥笔记-讲述营销的故事

鸟哥笔记-讲述营销的故事

1W+流量主品牌主资源，一键联系

严选服务商，为企业赋能

营销增长人的专属网址导航

很可惜 T 。T 您现在还不是作者身份，不能自主发稿哦～

如有投稿需求，请把文章发送到邮箱tougao@appcpx.com，一经录用会有专人和您联系

咨询如何成为春羽作者请联系：鸟哥笔记小羽毛（ngbjxym）

Hi~ 大家好，我是 黑马青年 ~。今天和大家分享关于 UI 场景中常见的 3 个主题化区域，希望可以带给大家更多设计思考。

作为 UI 设计师来说，我们会经常关注着产品设计的变动，发现设计细节将有助于提升我们的思维。特别是在一些节庆和特殊时间段期间，你会在不经意间发现一些常见的设计细节被赋予氛围感。

在已有的架构中改变表现层，是融入主题达到氛围感的常见形式。在 UI 场景中有三个最常见的主题化区域：底部标签栏、顶部视觉区、金刚区，下面黑马哥为大家列举几个案例看一下。

在不改动结构的情况下，替换底部标签栏图标是最方便的形式。通过主题化的图标也非常容易传递氛围，无论是在节日庆典、购物季、主题活动等场景中，这个形式都是最直观的表达之一。

比如优酷 APP 在中秋节的时候，就将底部标签栏图标替换为各式各样的月饼造型，主题营造也是非常的明显。将原本的图标造型融入到月饼图案中，镶嵌图案的设计非常巧妙，不仅保留原本的识别特征，也强化了主题氛围感。

除了在图标造型上面发挥以外，也可以将主题文案融入到设计中，这也是较为直接的表现形式。作为特定主题来说一目了然，需要把控主题文案数量。

底部标签栏的设计中，除了通过图标设计附和主题之外，也可以在背景层进行主题氛围营造。由于底部属于操作频繁区，背景层的设计不能过于抢眼，容易干扰功能的识别与操作。比如前段时间抖音 APP 将底部标签栏背景层进行主题营造的时候，在黑色层上面运用的色调比较深一些，与原本黑色的沉浸式体验有差异，在白底上面呈现效果还可以。

没过多久抖音设计团队便进行了更新，压暗了背景元素的色调，弱化了视觉感。更符合原本的感官体验习惯，也能强化主题感。

除了抖音以外，小红书 APP 前段时间也在底部标签栏背景层上面进行了营造。如果营造面积比较大的话，在无图标形式（纯文字版底部标签栏）上面比较适合。如果带有图标的话，适合做局部强化。

顶部视觉区包含状态栏、导航栏和顶部内容区域，通常是白底、灰底、品牌色底和运营主题背景等为主。也是强化视觉感的常见区域，作为营造主题氛围来说也是非常好的选择。

该区域不仅可以作为功能性活动入口，也能在特殊时间段作为氛围营造。很多产品都会在顶部视觉区域做应变处理，满足多场景的需求发挥。

顶部视觉区的强化也是增强页面感官体验的方式之一，除了静态背景的营造以外，也可以使用动态或者流体渐变等形式。