唯有爱与梦想不可辜负!

标签栏(tabs)设计指南

小和:


 

 

 

Android的标签栏是习惯于顶置的,一般会利用底部来展示次操作栏。


固定标签栏

固定标签栏显示所有项目,点击即可导航。



堆叠标签栏

如果导航在你的App中必不可少,你可好呀再堆叠多一个单独的操作栏。这样比较有利于在较窄的屏幕的快速切换。


滚动标签栏

滚动标签栏可以包含比普通标签栏较多的项目。通过横划左和横划右来操作。


 标签栏风格

1、合理的Android的标签栏较少使用图标,更多直接使用文字表达。因为并非所有的导航选项都能用图标直观描述,使用文字更加直接了当。

2.Android标签栏按钮不需用正方形。既然标签使用了简明直接的文字表达,可以把标签栏的高度合理压缩,以保留更多的屏幕有效区域。

3.Android标签栏风格走扁平路线。避免使用任何繁冗的光泽与质感设计。


切记:

  • 时刻保持其中一个标签处于选中状态。标签栏出现时,意味着当前页面必然隶属于该标签栏的导航控制之中。

  • 注意back stack与back键的处理。使用标签栏进行标签页切换,可以视为没有发生页面层级改变行为。大部分应用也没有将标签页切换加入到back stack中。这样处理的一个原因在于,用户并不喜欢在切换标签页时离开当前页。

    为了强调所有的标签页的层级关系是处于同一页面中,开发者可以使用滑动的动画过程来表示标签页之间的切换。这样处理还有一个好处是,鼓励用户使用滑动手势进行标签页切换。




iOS的标签栏在底部,一般为四或五个。当超过5个时,就放进More里。


iOS的标签栏可以有图标有文字,也可以有图标无文字,但最好不要无图标只有文字。


通常使用标签栏对应用程序的信息进行分类。标签栏非常适合在应用程序主视图中使用,因为它能够将应用程序的信息层级扁平化,并对用户能够访问几个对等信息进行分类。


当标签不可用时,也不用移除标签,置灰吧。在当前应用程序的环境下,有标签失去意义无法使用,这时不要急于移除标签,这样不合适,最好的方式将标签设置为disable。因为如果你移除标签就会造成标签栏的不一致,就让你的应用程序的UI是不稳定的不可预测的。最好的办法是,确保你的标签是始终启用,但对于禁用的标签要解释为什么标签的内容是不可用的。


切记

  • 不要让选中状态“暗”,未选中状态“亮”,会让人分不清楚。


  • 尽量不要有More这个标签,当More里的内容也超过5条时,就要考虑给用户带来的认知负担了。据说测试显示,大部分用户都不知道也不关注更多里有什么,根本都不去打开它。
    当然,你也可以让用户去编辑首选标签,不过要知道,用户自定义永远是高级用户才会使用的高级功能,不能用它来解决普世问题。

  • 如果是想提供对当前页面元素的操作,可以使用工具栏,而不是标签栏,标签是对内容模块的平级切换。当然现在比较流行把重要操作放在标签栏的某个位置上,如一系列的拍照应用,都把拍照放在标签栏中间,做了一个差异化的样式设计,也是可以参考的。

  •  可以用红色气泡或其他形式在标签栏上标识新消息


  • 如果图标的表意性不够好的话,一定要用图标加文字来表达标签内容



评论
热度(39)
  1. df45小和 转载了此文字
  2. 鱼儿小和 转载了此文字
  3. Bozil找自己 转载了此文字
  4. IriSquare小和 转载了此文字
  5. 生活在别处小和 转载了此文字
  6. Earlydawn_Fish小和 转载了此文字
  7. 不生花wenrou 转载了此文字
  8. 支小支小和 转载了此文字
  9. DeEpEr小和 转载了此文字
  10. natalie631wenrou 转载了此文字
  11. wenrou小和 转载了此文字
  12. 葱头小和 转载了此文字  到 

© wenrou | Powered by LOFTER