底部标签栏的计划与思索

请眼熟我

原标题：底部标签栏的计划与思索

编辑导读：标签栏是移动端应用步伐中最常用的UI元素之一，通常会出如今应用步伐屏幕的底部，可以让用户在应用步伐中的差别部门之间快速切换。本文作者从七个方面，对底部标签栏举行了深入的分析，盼望对你有资助。

编辑导读：标签栏是移动端应用步伐中最常用的UI元素之一，通常会出如今应用步伐屏幕的底部，可以让用户在应用步伐中的差别部门之间快速切换。本文作者从七个方面，对底部标签栏举行了深入的分析，盼望对你有资助。

一、标签栏是什么？

标签栏也叫Tab Bar，是移动端应用步伐中最常用的UI元素之一。标签栏出如今应用步伐屏幕的底部，可以让用户在应用步伐中的差别部门之间快速切换。标签栏可以是半透明的，也可以具有配景色，在全部屏幕方向上都保持雷同的高度，而且在表现键盘时被隐蔽。标签栏可以包罗恣意数目的标签，但是可见标签的数目根据装备的巨细和方向而变革。假如由于程度空间有限而无法表现某些选项卡，则终极的可见选项卡将变为“更多”选项卡，该选项卡将在单独屏幕上的列表中表现其他选项卡。

标签栏在任何目的页面中的高度是稳定的，iOS 规定它的高度为98px(iOS @2x)。但由于 iPhone X 之后的全面屏手机引入了 Home Bar ，以是在举行界面适配的时间，请务须要加上 Home Bar 自身的68px高度。别让Home Bar遮挡标签栏中标签的展示，这会让两个控件发生操纵手势辩论。

睁开全文

二、为什么标签栏要放于底部？

史蒂文·霍伯（Steven Hoober）在对移动装备利用环境的研究中发现，人们会根据本身的装备，需求和配景以多种方式触摸手机，触摸手机屏幕或按钮的用户分三种根本方式：抱动手机的人占36%、两只手利用手机的人占15%，而49％的人依赖一只手在手机上完成事变，除此之外75％的用户仅用一个拇指触摸屏幕。

在下图中，出如今手机屏幕上的图表是近似覆盖图，此中的颜色表现用户的拇指可以打仗到哪些地区以与屏幕交互。绿色表现用户可以轻松到达的地区；黄色，必要舒展的地区；赤色地区，要求用户改变握持装备的方式。

这意味着：

将常用的“举动”放在屏幕底部很紧张，由于只需一键式的交互即可轻松到达这些“举动”。

三、标签栏的三大原则

底部标签栏计划应当遵照三大原则：布局公道、位置清楚、可猜测举动。

3.1 布局公道

为了让标签栏体现清楚，两大平台在规范里都对标签数目给出了雷同的发起：发起标签栏内的标签个数为3个至5个。由于标签过多会使每一个单位标签的可触空间低落，人们在物理上（手指）难以点击或误触，除此之外还会增长应用步伐布局的复杂性。

注：假如你由于产物布局非常繁杂，标签数目想要到达更多，那么在 iOS 中就会给你倔强处置惩罚，iOS 人机交互规范告诉产物计划者们：标签栏固然可以包罗恣意数目的标签，但可见标签的数目会根据装备的巨细(平板或手机)和方向(竖屏或横屏)而自顺应变革。假如由于程度空间有限而无法表现某些标签时，末了的一个可见标签将被会被体系强行转换为“更多”选项，必要用户点击“更多”选项之后，体系才将在单独屏幕上的列表中表现其他被隐蔽的标签。

3.2 位置清楚

“我在那里？” 是用户乐成导航所必要答复的一个根本题目，我们应当接纳得当的视觉提示让用户知道现在所处的位置（选中状态）。在APP应用中我们常见的处置惩罚方式有4种：改变图标样式、改变巨细、改变颜色、改变展示样式。它们并不肯定是独立存在的，可以同时作用于一个标签。

3.3 可猜测举动

选取每个底部导航选项都有通向它的目标地，底部导航应当将用户直接引导到相干页面，不应该打开菜单或其他窗口。假如在某些环境下可以利用标签，但在其他环境下则无法利用，则应用步伐的界面将变得不稳固且不可猜测。我们要确保全部选项卡始终处于启用状态，并阐明为什么选项卡内容不可用。比方造作新家APP，当用户处于未登录状态时，就不能检察底部标签“我的”信息，当我点击标签“我的”，就会弹出快捷登岸界面，如许就能让用户明确不能利用的缘故原由是账号未登岸，从另一层面讲也很好的引导了用户注册与登岸。

注：不要利用标签栏为用户提供对当前屏幕或应用步伐模式下的元素起作用的控件，假如必要提供控件，请利用工具栏。

四、标签栏的底子规范

在计划标签栏前我们起首要相识它的底子规范，在包管底子规范公道的环境下再去举行计划。

4.1 图标视觉巨细

为了包管图标的尺寸巨细同等性，我们每每会创建底子的网格尺寸来举行绘制图标，下面就以常用的24×24为各人举例：

网格包罗2px出血位。如许可以确保图标在导出时将保存其所需的比例和四周的空缺地区，同时还可以或许很好的均衡图标的视觉重心。

末了参加图标的keyline，keyline由圆形，正方形，矩形，正交，三角形和对角线构成。它可以为您提供图标会合根本外形或比例的同等巨细。这使创建视觉上的稳固变得更加轻易，并有助于在计划相似比例的图标时有共同的参考准则。

在24尺寸下的keyline构成如下（24尺寸下的出血地区为2）：

当把图标画在网格上时可以很好的规范图标，让它们从团体的视觉上看着同一规范。

4.2 标签栏结构

标签的数目以及标签的展示情势决定了标签的结构情势，标签的常见结构一共有2种：屏幕平分、图标左右间距相称。

4.2.1 屏幕平分

屏幕平分是最常见的标签结构情势，由于不管它存在多少图标，都可以用它举行屏幕分别，盘算方法也非常简朴，屏幕的宽度除以标签个数就是每列宽度。接纳此等分别的案例有：懂车帝、本日头条。

4.2.2 图标左右间距相称

图标左右间隔相称多用在标签数目为3个的环境下，盘算方法是先去除中心图标的尺寸，然后再左右均匀分别等距。相对于屏幕平分，图标左右间距相称分别更为紧凑。

4.3 标签栏热门地区

根据菲兹定律，利用辅导装备到达一个目的的时间，与当前装备位置和目的位置的间隔（D）和目的巨细（S）有关。标签栏作为向用户显现产物框架的关键控件，热门地区（可点击地区范围）的设定肯定要公道。底部图标尺寸较小，假如将图标作为热门地区，那么可点击地区就偏小，很大概出现用户点击不到的环境，精确的做法是以标签栏的结构作为底子设定，在标签相邻的部门划出肯定地区作为不可点击地区，以免用户误操纵，参考如下，赤色为可热门地区，蓝色为不可点击地区：

五、标签栏的图标样式

在产物计划中，差别样式的图标会给人差别的感受，随着APP风格越来越简便化，标签栏图标风格牢牢地跟着界面的风格而改变。颠末长时间的沉淀，标签栏图标常见的默认计划样式一共可分为四类：线性图标、面性图标、线性+面性图标、轻质感图标。

5.1 线性图标

线性图标通过线来塑造表面，在图标计划中利用的线有粗细之分，常用的App图标计划线的粗细一样平常有2PX、3PX、4px，差别的线条粗细所带来的视觉感受也差别，我在“怎样让你的图标具有说服力”文章中提到过，线条越粗那么图标的性格就越生动、粗旷，线条越细图标性格就越风雅、商务，图标利用描边的粗细可以根据产物的气质来决定。

选中状态：当选中状态为高亮线性图标时，选中状态的图标颜色会与默认状态的图标颜色形成较强的反差，但由于线和线的差别性并不强，线性图标没有面性图标更具吸引力（引导性），纵然参加了高亮色辨认度也不及面性强。airbnb在处置惩罚线性图标选中状态时就思量到了这一点，选中状态下不但对图标的颜色做了较大变革，还加大了图标及笔墨的描边粗细，从肯定水平上增强了图标的引导性。（注：线性状态的图标选中状态也可以变为面性图标或线性+面性图标）

5.2 面性图标

面性图标是通过面来塑造形体的图标，接纳了剪影的计划情势，通过线大概面去切割底子表面面，通太过型来塑造图标的体积感，面性图标的承载信息相对与线性图标来说更重，更具有引导性。

选中状态：面性图标的选中状态为高亮面性图标，颜色可以为纯色、也可以为渐变、透明。爱奇艺的选中状态就接纳了高亮面性图标的显现方式，除了把图标底色及笔墨的颜色加深以外，还参加了品牌色，乃至为了让“会员”标签更加突出，还单独对“会员”标签的颜色举行了修改。

5.3 线性+面性图标

线面联合图标相较单一的线性图标或单一的面性图标样式更加丰富、也更富有意见意义性。从计划的角度上说，由于元素的多样化，计划更轻易得到好的结果。相反，假如运用不妥会显得图标非常紊乱，怎样有用的把控好两者之间的过分是关键。

选中状态：线性图标的选中状可以为高亮的线性+面性图标。懂车帝在处置惩罚标签选中状态时就把图标底部参加了高亮黄色圆形块状，即生存了线性也添加了面，加深了选中状态的视觉重量，更加明白的让用户感知本身所处的位置。

5.4 轻质感图标

轻质感图标条理简朴，用色素雅干净，接纳轻投影、轻渐变的方法计划，这类图标具有肯定的立体感，能给人轻盈、简便、风雅的感觉。轻质感图标在标签栏中运用的较少，在特别环境下才会利用，比方盒马，就把轻质感图标用在了首页标签与盒马小镇标签，首页标签的引入是为了让用户增强对品牌形象的认知，而盒马小镇标签的引入则是为了增强图标的引导性。

5.5 图标样式的常用变革（选中与未选中）

在我调研上百种应用步伐中，发现主流的APP标签栏样式变革大抵分为六种：线性-线性、线性-面性、线性-线+面、面性-面性、面性-线+面、线+面-线+面。固然标签的样式变革繁多，但是利用率最多的是“由线性转面性”标签。

六、标签栏的展示情势

标签栏的差别展示情势会给用户带来差别的利用风俗和利用感受，常见的标签展示情势有四种：图标+笔墨、纯图标、纯笔墨、舵式。

6.1 图标+笔墨

图标+笔墨是最常见的标签展示情势，为了让用户可以或许很好的明确图标的意图，以是在图标下方会配有笔墨提示，如许就能大大的低落误读的大概性。正由于有笔墨提示，以是没有须要过于担心图标的辨认性题目，那么图标就可以得到更深的延展，可以做的更风趣，更具有产物气质，乃至可以代入更深条理的动效。

比方东家·守艺人APP，专门售卖各种技术人的亲手制作的各种艺术品，面向的对象是喜好传统文化的人群，在如许的配景下东家联合宋体的笔画（笔画拆分）把图标计划的更加传统、古朴，创造出具有东方韵味且极具情势感的图标计划。

6.2 纯图标

接纳纯图标展示情势的产物比力少见，纯图标样式的最大缺点就是辨认性低，没有笔墨阐明会导致用户很难找到本身想要去的位置，也不明白本身所处的状态。以是我们假如要计划纯图标情势，那么必须要思量到图标的辨认性题目，间接的舍弃掉图标更多的延展性，让图标变得更规矩。（辨认性的提拔我之前写的图标文章中提到过，重要可以从大众认知隐喻与真实天下映射两个方向出发去提拔）

利用纯图标样式的产物特性：产物单一、范畴垂直、小众化、用户群体担当度高。纵然满意这些条件下产物利用纯图标标签，用户第一次利用每每也是比力渺茫，必要等用户认识后才会得到好转，以是肯定要慎用。除此之外不太发起用于电商、视频、学习、交际等范畴。

对于我们计划师来说利用纯图标样式的产物中最为认识的就是花瓣了，不外当我第一次利用花瓣时也是比力懵的，特殊是对于首页标签与发现标签，在首页页面里可以在搜刮后选择分类，而在发现页可以直接选择分类但是不能搜刮。最开始我不相识发现图标的界说，本身把它认定为了分类图标，以为用户可以在内里举行分类查找想要的图片，效果我错了，它仅仅只是具备一级分类，想要精准找到本身想要的图片，就必须去首页搜刮，这时我才明确这不是分类图标这是发现图标。为此我还去检察了花瓣从前的版本，在从前的版本中“发现”这一板块也是可以举行搜刮的，只是现版本取消了搜刮功能，以是这真的是让我有点含糊，个人以为合成一块也是不错，究竟首页与发现两者极为相似。

6.3 纯笔墨（部门含标识）

接纳纯笔墨展示情势可以或许更直观的让用户举行操纵，遵照简朴易用的原则。适适用户群体跨度较大的产物，多用于直播类、内容类、简朴工具类APP中。缺点也显而易见，图标样式比力单一，没法参加更多意见意义化、具有产物特性的元素到标签中。

接纳纯笔墨展示情势的产物有许多，最认识不外的就是抖音，抖音的标签默认状态下接纳了纯笔墨情势，选中状态则把笔墨高亮表现，而且底部参加了圆角矩形，对于用户群体跨度较大的产物，如许的显现情势再好不外了。

6.4 舵式

舵式标签可以看为底部标签式导航的一种变体。它在后者的底子上，突出夸大了一个标签而且放在中心的位置，样子看起来像攒了一个舵，以是取名为舵式标签。一样平常舵式标签的颜色、巨细等视觉体现会被计划得和其他平凡标签有所差别，通过视觉对比的方式吸引用户关注。舵式标签通常和产物框架表现无关，大多数应用步伐利用舵式标签是用来承载体系功能。早先是由于社区类APP为了鼓励和方便用户随时随地地输出UGC内容，以是把触发用户创作/发布的功能按钮放置在标签栏中。

由于舵式标签可以很好地承载产物的紧张功能，而被很多的应用步伐计划所接纳，颠末越来越多的应用接纳舵式标签，利用的情势也越来越多样，它如今并不再单一地用于承载产物功能，而是共同营销场景、付费场景，给产物的变现、拉新赋能。拼多多就把它拉新的重要入口作用到了舵式图标上，而且为了让图标更加显目，乃至把图标做成了轻质感的情势表现，同时也通过2像素的线性图标削弱其他4个标签的引导性。

七、赋予标签更多内容

标签栏不但是向用户显现产物框架的关键控件，还可以贯穿整个产物的贸易代价的表现，它是毗连着整个产物最紧张的顶层信息。假如想要让标签变得更加丰富，想要标签内容中含有更多的情绪需求、 贸易需求、运营需求，那么我们可以重点从这两个层面思量：视觉层面、交互层面。

7.1 视觉层面

在视觉层面上我们可以迎适用户的偏好与盼望，通过丰富视觉体验的方法来增长内容的观赏性，如许不但可以或许很好的向用户通报着产物调性还能吸引用户关注以及引导用户举行操纵。

7.1.1 计划装饰性图标

装饰性图标仅仅是用来提拔整个界面的视觉体验，通过丰富视觉体验的方法来增长内容的观赏性，如许不但可以吸引并留住用户，还可以让整个用户体验更加积极。

7.1.1.1 团体装饰图标

团体装饰性图标的出现每每是为了满意情绪需求与贸易需求，团体装饰图标并不是不停存在的，它的特点是季候性与周期性，而且它并不具备任何功能性。

从情绪需求出发计划装饰图标：比方天下杯火热举行时，优酷为了满意用户的情绪需求，就把标签栏的图标全部更换为带有天下杯元素的图案，让用户与其产生情绪的共鸣。

从贸易需求出发计划装饰图标：如今的年货节，之前的双十二、双十一、618等，每到节日促销运动的时间，许多电商应用都会换上装饰性图标，比方一号店，在过年前就把标签栏图标全部改为含带过年气味的元素，提前来预热运动，引导用户消耗。

7.1.1.2 单个装饰性图标

单个装饰性图标的出现大部门都是为了满意运营需求，运营为了推出某个运动或功能，每每会单独装饰某个图标的计划视觉，以便于进步图标的引导性，最直接的例子就是我刚才提到过的拼多多。

7.1.2 参加品牌基因

我们可以在标签中参加更多的品牌基因，让其与品牌产生联动性，这一情势是大部门应用步伐都在做的，我们可以从这6个层面参加品牌基因：品牌颜色、品牌LOGO、品牌元素、品牌名称、品牌性格、品牌祥瑞物。

7.1.2.1 品牌颜色

色彩是图标计划中紧张的构成元素之一，我们可以直接提取品牌色作为图标计划视觉元素。比方站酷，站酷的品牌色是黄色，标签栏的图标（选中状态）就提取了品牌的黄色，让其与品牌调性高度同等。

固然品牌颜色除了可以直接用外，还可以在提取时得当调解色彩的饱和度、明度，做更多的情势变革。比方懂车帝，就在原有的黄色底子上做了些许调解，图标接纳黄色透明渐变的处置惩罚方式，在与品牌颜色呼应的同时，使得整个图标更加风雅、有活力。

7.1.2.2 品牌LOGO

提取品牌LOGO是最常用的利用方式，我们从品牌中提取出来的图标一样平常运用在APP首页标签。由于首页是APP中最紧张的页面，也是进入APP默认的页面，把首页图标更换制品牌LOGO，能反复增强了用户对App的LOGO印象，如许不光使App表里形成了视觉接洽，同时也二次通报了品牌形象。比方大众点评，它的首页标签就用了品牌LOGO，同时也利用了品牌颜色。

7.1.2.3 品牌元素

我们可以在品牌中提取它辨认性较强的局部元素作为图标。比方虎牙直播，它就提取了品牌卡通形象的外表面作为首页图标。

品牌提取的元素并不但是所见到的品牌视觉形象，还可以提取与品牌内容强相干的元素。比方QQ音乐，它并没有把它的品牌LOGO直接放于此中，而是通过大众所熟知的音符作为首页图标。

7.1.2.4 品牌名称

假如你的品牌还不为大众所熟知，那么为了强化用户对品牌名称的认知，可以把品牌名称直接放入标签栏中。比方MONO，就把它的名称分为四个字母分别放在了4个标签内，必要留意的是这类图标不能单独出现，由于它自己不具备辨认性与引导性，必须共同笔墨一起出现，如许才气让用户明白标签的真正功能，我们不能为了计划而计划。

7.1.2.5 品牌性格

图标风格可以与品牌性格保持同等，一套带有浓重品牌感的图标，会让人影象犹新。比方：逐日故宫，它的图标就非常具有特色，联合了品牌的性格以及定位，参加了浩繁的古代中国元素，团体看起来有股浓浓的古韵之风。

7.1.2.6 品牌祥瑞物

如今大部门品牌都会含带祥瑞物，我们可以在计划图标时提取祥瑞物的形状，把它用于产物的标签中。比方盒马，它就把祥瑞物做为了底部标签，不外必要我们留意的是假如祥瑞物的风格与我们的图标风格差异较大，我们就必要对它做风格化的处置惩罚，否则看起来就非常突兀。（盒马对祥瑞物做了轻质感的风格化处置惩罚）

7.1.3 让用户自界说

让用户自界说的标签如今越来越常见，而每个产物对其思索的层面也都有所差别。自界说标签每每出如今个人中央，它会根据用户上传的头像或用户的捏脸天生图标。

7.1.3.1 用户头像

现在市面上许多APP都把用户上传的头像作为了个人中央标签展示，比方我们常用的百度网盘就接纳了此方案，当用户注册未上传用户头像时，会默认表现体系标签，当用户上传完后就会表现用户头像，而且假如你是会员，还会把会员标示表现在标签的右上方，彰显会员用户的高贵性。

我们可以很显着的发现百度网盘的底部标签默认状态为线性图标，而个人中央不管默认状态照旧选择状态都为面性图标，以是假如你想要增强个人中央的引导性，那么可以接纳此方案。

7.1.3.2 捏脸

捏脸功能作为SOUL的一大特色，捏脸的假造形象赋予了真实品德属性，增强了交际的流传性，为此用户对它的满足度也黑白常高。以是SOUL做了一次大胆的改变，决定把用户自界说的捏脸放于个人中央标签中。

SOUl在默认状态的个人标签引导性同样大于其他三个标签，更能引起用户的关注。不但云云，用户的捏脸放于个人标签中，还可以进一步引导用户举行捏脸举动，间接的提拔产物的用户活泼度。（捏脸必要金币，金币可以天天登岸领取，也可以举行充值，对于白嫖党来说固然是天天领取了，而用户天天的领取举动给产物带来的收益就是用户活泼度）

7.2 交互层面

除了对标签做视觉的提拔外，我们还可以对其参加公道的交互结果，一方面可以提拔用户在利用产物过程中的兴趣，另一方面还可以为用户提供更多便利，从而加强用户体验。

7.2.1 标签功能切换

在差别的状态下点击标签的功能也不一样，一个标签可承载2到3个功能，可以满意差别状态下的用户需求。

7.2.1.1 承载2个功能案例

SOUL的广场标签（进入选取页+革新）

SOUL的广告标签承载了2个功能，当你处于其他标签时，点击广场标签则直接进入到广场页面；当你处于广场页面中时，再次点击标签则会革新整个页面。

有货的发现标签（进入选取页+上传图片）

有货的发现标签也承载了2个功能，在计划上运用的非常奇妙，当你处于其他标签时，点击发现标签则进入到发现页面；当你在发现页面时你的发现标签则变为了上传图片标签，可以点击上传图片。

7.2.1.2 承载3个功能案例

淘宝首页标签（进入选取页+革新+置顶）

淘宝的首页标签同时承载了3个功能，当你处于其他标签中，点击首页标签则直接进入到首页页面；当你在首页页面第一屏时，你点击首页标签则会革新整个页面；当你滑过3分之1屏时，首页标签的功能则变为置顶。以是在差别状态下首页标签也会具备差别的功能，而且每种状态下的标签样式也是差别。

爱奇艺首页标签（进入选取页+到达指定位置+置顶）

爱奇艺的首页标签也是同时承载了3个功能，不外它与淘宝有些许差别，爱奇艺并不能革新页面，而作为更换的功能是直接到达指定位置“猜你喜好”。

7.2.2 触觉与听觉

我们做的计划不要仅限于视觉所看到的，还要思量到所触摸的、所听到的，我们可以使用触觉与听觉去辅助用户确认本身的选择，固然我们肯定要公道使用，反之则会让用户感到非常反感。

7.2.2.1 触觉

西瓜视频与本日头条在点击标签栏图标时手机就会发出稍微的震惊，给予了用户很好的点击反馈，不外如今市面上大部门APP并没有接纳此方案，以是我对齐举行了一些思索，缘故原由有两点，第一它们的图标默认状态为线性图标，选择状态为面性图标，没有做太多的修饰，以是用简朴视觉表现+震惊触觉的方式提示用户已经来到新的目标地。第二是由于这两个APP标签栏的功能跨度较大、内容相对独立，想用薄弱震惊作增强提示，以是才接纳了此方案。

7.2.2.2 听觉

SOUL点击星球标签时手机就会发出爱情铃声，如许的交互方式简直比力稀有，对此我去检察了SOUL的产物陈诉，SOUL重要面临女性用户，女性用户约为男性用户的2.4倍（女人更偏感性），而且它的重要需求是满意测试、匹配、结交，以是爱情铃声可以或许很好的引起用户的情绪共鸣。不外铃声有利有弊，当你在特定场景下利用SOUL时，点击到星球标签四周人也都能听到爱情铃声，实属尴尬，以是我在特定场景下利用SOUL时都会冷静的关掉声音。SOUL为了规避如许的尴尬，应用刚打开时来到的是广场页面，而不是星球页面。

7.2.3 标签动画

出色的图标动画，对团体的计划具有一语道破的作用，低落标签切换时的枯燥感，提拔操纵的愉悦度和等待感。乃至可以通过 tab 的动画计划给用户转达出整个 APP 计划的品牌及理念。标签动画每每都比力简朴，重要有：缩放、旋转、颜色过渡、位移、抖动、添补、线性轨迹、联合容器、元素介质等。接下来我们来看看SOUl、虎牙、汽车之家是怎么做的。

7.2.3.1 SOUL（弹性缩放+联合容器+线性轨迹）

SOUL的底部标签栏运用到了弹性动画、联合容器以及线性轨迹。带有弹性缩放的标签反馈，让团体的计划更加具有意见意义性，相比线性缩放也更有视觉打击力。图标的活动规则：先从 0 放大到最大（数值根据现实环境设定），然后再回弹至正常巨细。除了弹性动画外，它还联合了容器的元素对内部举行了颜色的更换以及单线条的轨迹动画。如许的处置惩罚不但意见意义性十足，还强化了选中当前状态，团体标签切换的同等性也较高。

7.2.3.2 虎牙（抖动+意见意义表达）

虎牙不停是我比力喜好的直播平台，它的底部标签动画也黑白常值得鉴戒，运用到的动画情势是抖动与意见意义表达。抖动是通过图标的左右、上下快速位移或旋转形成，团体的动画结果节奏较快，具有肯定的速率感，使整个标签切换的感情表达较为俏皮、可爱。除了抖动外还在切换过程中代入了更多小元素的意见意义表达，赋予了图标更多的性格，对我们的计划举行再升华，从而进步团体计划的质感和意见意义。

7.2.3.3 汽车之家（联合容器+细节晃动）

由于用户群体的差别，汽车之家在标签动画的计划上也相对简朴、严谨，它的动画情势重要是联合容器与细节晃动。选中结果由线切换为面，并参加了品牌底色，如许可以或许清楚的给用户转达当前页面。而且为了不使团体的切换结果变得生硬，在切换过程中接纳了透明度与弹性缩放，让其过渡的相对柔和。在细节的处置惩罚上也黑白常专心，每个图标都带有笑容的外形，间接的给用户转达“笑容”信息，在选取标签时内部外形会稍微晃动。团体来看汽车之家的标签动效固然方向严谨，但是在细节上也给予用户转达了更多的情绪。

八、总结

以上就是我对底部标签栏的计划与思索，喜好可以点个小赞，拜了个拜～

本文由 @黑狮力 原创发布于大家都是产物司理，未经允许，克制转载

题图来自 Unsplash，基于 CC0 协议返回搜狐，检察更多

责任编辑：