底部标签栏的设计细节

底部标签栏的默认状态：线、面、面+线

底部标签栏的选中状态：线性、面性、线性+ 面性 、微交互效果

线性高亮

在原来的灰色图标增加品牌色，线性差异，表现力，识别度，粗直接线条给人稳重的感觉，线条给人活泼的感觉，一般为2-4px线条

优点：制作成本低

缺点：表现力差和识别性弱

面型高亮

线性和面型的差异较大，识别度更高，用户明确当前所在的位置，默认图可以是线性和面型，选中效果可以纯色或是渐变，采用品牌的颜色和适用于行业的颜色

优点：表现力丰富，用户清晰当前位置

线性+面型高亮

线性+面型高亮的图标，往往是黑黄搭配的颜色，由于黄色比较高亮，单独使用视觉不突出，加上黑色描边给人活泼的感觉，加上点缀的小短线更显得有独特的风格，多用于活泼的APP中

优点：识别性高，品牌感强，年轻活泼

缺点：仅适用于年轻的APP

微交互效果

加微交互使标签栏更有趣，给用户眼前一亮的感觉，同时增加品牌感

一般为三个以上标签，加入有趣的动效

优点：提升用户体验，识别性高

缺点：时间成本高

总结

细节：精致要把控细节，增加细节处理

识别性：默认颜色一般为浅灰色，默认颜色和选中颜色不要过于接近；尽量画出能表达出含义的图标，不要让用户产生迷惑。

Powered by Froala Editor