UI设计中的App标签栏中的设计细节

    今天苏州学码思小编总结了一些App标签栏中的设计细节，为学习UI设计的学员提供切实有效的学习方法。

　　标签栏是app的导航，具有明确的表意功能，其作用是辅助文字来指引用户进行快速导航，具有图形化的符号，方便用户快速寻找，提高应用的易用性。因此标签栏设计可以从3个维度思考：图标样式，布局展示，交互效果。

　　不同的产品类型会使用不一样的图标样式，我把图标样式简单的分为面形图标，线形图标，线形+面形图标，节日图标。

　　面形图标具有广泛的适用性，由于面形图标的视觉占比比较大，具有强烈的视觉表现力，常用于标签栏设计，方便用户快速寻找一目了然。线形图标通过线条来表现物体的轮廓，比面形图标更能塑造优美的外观，绘制一套线形图标会更具整体感并且不会对界面产生太大的视觉干扰，常见的线形图标有2px，3px，4px的描边。形加描边一般用于选中状态中，细节丰富，同时给人活泼的感觉。默认状态下是线形图标，同时加一些小元素，在选中状态下线形描边加颜色填充，让图标细节更丰富，令人印象深刻。节日图标一般在春节，国庆，圣诞，端午节等大家熟知的节日时会使用，一般产品的周年庆也会使用特殊的图标。

　　底部常见标签栏个数一般为3-5个，但是不同的产品在设计之初可能承载的内容不同，体量小的产品可能只有2个，不同产品调性会有不同的背景样式。

市面上的app大部分都采用这种等分方式，屏幕整体宽度除以标签栏个数。市面上大部分的app都是以白色背景居多，而由于界面底色也是纯白色居多，为了让用户区分界面白色底与标签栏白色底，在白色的背景会使用2种方式区分：描边，投影。灰色背景能更好的突出标签，和界面背景很好的区分。黑色背景比较少见，常用于时尚类，视频编辑类，金融类产品中。无背景的标签栏比较少见，采用此类背景的产品一般以内容为主，产品功能比较简单。

转载于:https://blog.51cto.com/14296616/2395094