不纠结不是好设计师——标签栏的设计

elya妞 手机产品

交互设计师的纠结有时候挺惹人讨厌的，大量的口水浪费在小的细节上了，有时候我也会告诫自己，要着眼大局分清主次，一些小的细节干脆就不要太纠结了，可是我又相信，好的交互设计师一定要对细节有一针见血的判断力，不疯魔不成活，不纠结出不来好设计。

一、一个案例的反思

这里想聊聊腾讯微博iPhone新版的一个设计细节。

事件起源于我们的一个设计师提供了一个新版的视觉设计方案，整体很大气，可是有一个地方别扭，他把选中的标签栏暗掉了，未选中的标签栏高亮了，我说是不是反了？他说没反啊，腾讯微博就是这样的。于是我去看了新版腾讯微博，竟然真是这样。

 图1 腾讯微博的标签栏

那么，让我们从以下三个角度看看，这样做到底对不对：

1.HIG怎么说？

那么让我们来对比一样IOS系统的标签栏的样式：

image: ../Art/ui_selecteditemmodeswitcher.jpg

图2 系统的标签栏样式

 

 

iOS Human Interface Guidline里有对于Tab Bar的行为有这样一句话的描述“When users select a tab, such as Search in YouTube, the tab’s background lightens and its image is highlighted”，选中的标签栏背景亮起，图标高亮。

2.其他应用怎么做的？

既然是微博，对比一下其他微博客户端，有哪个是选中状态的标签暗掉的？

图3 其他微博类客户端

 

再对比一下其他的优秀客户端的设计，有哪个选中的标签是暗掉的？

图4 其他优秀客户端

 

再对比一下Web端的标签模式，有哪个是选中的标签暗掉的？

图5 Web版的一些标签设计

3.用户怎么理解的？

于是我到腾讯微博上反馈了意见，看到了有些人跟我一样纠结了，包括麦田老师，但也有些人还是觉得这里可以接受的，原因不外乎以下几种：

  • “这里用补色来标注选中状态，表示不可点，其他的是可点的，所以高亮”
  • “等你选的当然高亮，不需要再选的当然暗啦”
  • “明暗比例1：4，应该能分辨出来哪个是选中的，只要不是1：1就行，用户能理解就行”
  • “谁规定的？用户能理解就行呗”
请注意，这里的明暗关系，不应该是用来区别可点、不可点的，而是应该用来区别是否处于活动状态的，可以参考Web版Module Tabs的说明：
  • The active pane is the pane that is currently being shown; it is paired with the active tab control. The pane that is displayed immediately when the web page first loads is the default active pane.
  • Inactive panes (not shown in the illustration) are the panes that are currently not being shown. An inactive pane becomes the active pane when its tab control is clicked
选中的标签栏，应该是处于活动状态的，整个页面的内容，也跟这个标签栏是从属关系。默认加载的，也是那个唯一的活动状态的标签页，当你点击其他标签页时，其他标签页才会被加载出来。你明暗颠倒了，会让人以为这个标签页处于非活动状态呢。
另外，这个标签页不是不可点的状态，当有新消息的时候，这个标签上会有气泡提醒的，这时候双击标签就可以刷新内容，加载新数据了。
 图 6 双击有气泡的标签可以加载新内容
最后，说明暗比例1：4，所以能猜出来那个是选中的朋友，猜出来哪个是选中的不难，但这毕竟不是智商测试嘛，还是以满意度为基础来做设计的，而且最好做到不需要思考，是不？就算用户真的没有感觉异样，我也会觉得自己的设计层次逻辑不合理，然后给自己狠狠拍上一块板砖的。
我知道批评人家的设计挺不好的，毕竟，新版设计整体来说很优秀，新LOGO也很好看，瑕不掩瑜，希望腾讯微博越来越好
二、标签栏的设计指南
标签栏的设计，可以参考以下一些标准化的设计指南：

1. 处于选中状态的标签栏要高亮，用以标识活动状态

程序启动时，优先加载的内容肯定是选中状态的标签页的内容。选中状态的标签要处于视觉上的活动状态。

2. 标签的数量不要多于5个，如果太多就放在more里

标签的数量，最多不要多余5个，否则就放不下了。如果你平级的信息模块实在是太多，可以考虑除了最重要的4个标签页之外，增加一个More标签，把那些次重要的标签，都放在More标签里。
image: ../Art/ui_selecteditemmodeswitcher.jpg
图 7 最后一个More标签
但是，建议还是尽量不要有More这个标签，当More里的内容也超过5条时，就要考虑给用户带来的认知负担了。据说测试显示，大部分用户都不知道也不关注更多里有什么，根本都不去打开它。
当然，你也可以让用户去编辑首选标签，不过要知道，用户自定义永远是高级用户才会使用的高级功能，不能用它来解决普世问题。
图8 Tweetbot的标签栏最后两个是可以长按之后自定义的

3. 标签是用来做模块切换的，而不是操作入口

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

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

当有新消息到达是，可以在标签栏上用数字气泡或者其他形式给予提醒。

图9 标签栏上的新消息提醒

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

 iPhone有提供一些系统图标，用于工具栏上，表示收藏、历史、书签、更多等等，如果是的标签可以用系统图标来表达，尽量用系统图标，如果你非要自己设计也可以，但是请注意表意性，让用户不需要思考也能知道是什么。如果图标的表意性达不到要求的话，请一定要辅助文字来说明，文字不能太长，防止折行显示。

6. 如果你的操作产生标签切换，不要直接跳转，而是给予视觉引导

如果你把某个条目从一个标签页移动到另外一个标签页了，千万不要直接把标签页跳转过去，这样做，1会让用户失去控制杆，2如果用户不小心溜号了，就会在你的程序中迷失了。但是，你又不得不告知用户，内容已经产生了状态变更，这时候最好借助于引导动画。
图10 凡客诚品
凡客诚品当从分类标签中，把商品加入购物车时，有一个引导动画，1.告知用户已经加入购物车成功了，2.告知用户购物车在另一个标签栏后面。当然这个动画的位置感还可以再好一点。

三、关于标签栏的设计模式库

分享一些关于标签栏的设计模式库：
iPhone：
http://pttrns.com/tabbars  （需翻墙）
Android：

elya妞

～落花有意随流水，流水无情恋落花～

在 “不纠结不是好设计师——标签栏的设计” 上有 59 条评论

  1. 腾讯微博的tablebar背景，亮蓝色的明度已达90%以上，此时高亮的纯白色明度已达到最高值100%

    背景与高亮之间的对比度有多少？

    此时再来看这个当前激活标签的暗色图标，它的明度均值在70%以下。很明显，当前唯一激活标签的颜色与背景色的反差对比是最大的，在这5枚ICON中自然也最易被察觉和识别

    “高亮”一词应该理解成高对比高反差，不是亮度最高。在暗色与亮色的背景上自然需要不同对待。

    然后再来看文章中这些举证，清一水的黑黑黑黑色背景tablebar，这样的举证未免有些不充分。

    回复

  2. 求教，标签栏的图标应该怎么设计？我设计的图标实际展示的时候未显示完整（只显示一半左右），请问是不是哪里还需要设置下？ 多谢啦。

    回复

  3. 我觉得如果一个设计给用户造成了困扰和不良体验，那这个设计是值得讨论的，。elya的分析很有道理，我们为什么无故提高用户的学习和探索成本的，没必要。

    回复

  6. 底部工具条是用于切换整体模块的，点触以后会引发整个页面的主题的改变，就比如雪球客户端从首页跳到自选股，提供给用户的内容从主题上就会发生根本的变化。

    凸起和下凹的变化通常用于按钮效果，按钮效果我觉得用在tab比较常见，但是tab一般是上半部分的，这和我们在移动端习惯的底部工具条控制模块切换的思路是不太一致的。

    还有就是观察一下底部高亮色块这个标记在触发切换的时候的效果，其实不是直接瞬移到新的icon底下的，而是有一个平移的动效，这个动效是直接和模块切换的页面横移效果相呼应的，如果采用点亮/变暗的效果，相对来说没有那么明显。

    回复

  10. 强烈认同 不纠结不是好设计师 的观点 追求极致是优秀设计师难能可贵的特质 乔布斯就是这样 他会对图标的阴影颜色表示不满 可见他是多么的注重细节 追求极致

    回复

  12. 恩，亮和不亮这是个问题，暗和不暗也是个问题。而最关键的问题就在于，谁怎么看待这些亮不亮、暗不暗而已。

    腾讯的这个设计，顶多只是算是逆流了一下主流的体现方式。为什么暗了而不是亮了，我相信，这也是elya纠结的地方

    纠结并没有错，对于一个产品这是个单选题，而主流选高亮，腾讯这次选择了放暗。

    支持不同的声音，支持不同的纠结，

    也感谢elya，至少陈述了一些事实，表达了一些她的纠结。喜欢

    回复
  13. Pingback： 不纠结不是好设计师——标签栏的设计 | 移动应用设计志

  16. 其实，建议你可以分析一下这样设计的优点，而不是不了解全局状况的批评，每款产品都是其设计者精心思考研究的成果，这样你才会学到更多东西。做产品的要懂得如何热爱和尊重一款产品，艺术眼中无瑕疵。。。

    回复

  17. 腾讯微博刚开始需要人气和流量(特别是人均浏览比例)，未选中为高亮，特意的显示给用户。等后期将从颜色比例上开始逐渐反差回来，或者添加特殊标记做为是否选中，这样用户体验也不会打折掉。纠结的标签。

    回复

  20. 我想说一下，设计的时候，高亮还是不高亮，不是看其他的应用怎么做，而是看用户对标签设计的认知度。

    如果标签色本身偏黑，那么选中的自然高亮，形成对比，有一种被点亮的感觉（这个是和视觉-偏“平面”相关的）；相反，如果标签本身色偏亮，那么被选中的字体自然是变暗，同样是形成对比，但是是有一种被按下去感觉（这个是和立体感相关的）。

    所以我觉得两种设计都是相当不错的，不存在谁做得好或者做的不好，一个设计如果用户都比较认同，用户的认知度很高，说明是成功的。

    而不是其他的应用都是这么做的，这个不一样，所以不好。这种思想是不对的。

    仅代表我个人的观点。

    回复

    1. 我觉得李小妞说的比较在理 如果腾讯这个做成暗下去的部分有立体感的话（有种被按下去的感觉）elya是能够接受的

      目前这个感觉不是很明显

      回复

  24. 我觉得标签栏的目的就是向用户提供了不同子任务或不同视图间切换的导航，
    高亮不高亮就是让用户明白所在的位置，只是表达方式不同，
    重点是用户更好的理解，不是表达方式，
    我觉得这篇文章可以从另一个思路来写，分析一下，用户在不高亮的情况下犯错或疑惑的机率，带来的不便，而不是因为别的客户端都这么做，所以要这么做。

    回复

  26. 就我现在的经验来看，这应该是实习生得作品，不过主推的项目不会仅仅让实习生干吧…不知道是不是我同学干的…

    回复

  29. tabs和button的区别还是有的，若是tab选中后应该变亮，但button按下后变暗个人觉得是没什么问题的，尤其是用在在移动设备上。现阶段工业设计的理论及应用对传统平面设计的的影响还是很大的。另外tabs不会存在全部变暗的状态，而button则存在全部变亮的状态。

    回复

  30. tab和button的区别还是有的，若是tab选中后应该变亮，但button按下后变暗个人觉得是没什么问题的，尤其是用在在移动设备上。工业设计对传统平面设计的的影响还是很大的。另外tab不会存在全部变暗的状态，而button则存在全部变亮的状态。

    回复

  36. 其他这也是一种创新的尝试，在个别的地方可以使用。其实苹果本身就有这样的例子，你来看http://www.apple.com/macbookpro/software.html

    回复

  39. 高亮不高亮的观点，我并不完全认可，毕竟这些分析依据依赖的是其他设计、标准；个人认为只要能表示哪个标签与当前页面的对应关系即可，比如选中标签与当前页为同一背景色，其他标签为其他颜色，有这种区分即可
    至于是否用亮度来区分，并不一定

    不过我喜欢这篇文章，非常注重细节，很用心，特别是后面的“设计指南”很有价值

    回复
  40. Pingback： 不纠结不是好设计师——标签栏的设计 | UNITY

  41. 如果按 按键方式来理解的话。(也就是为什么要暗掉的原因)

    最好理解的应该是Tweetbot的设计。带有蓝色下标的按键是组合键的意思. 设计借鉴了老式录音机的按键设置

    如果按选项卡方式来理解的话。高亮图标是必然的。 突出和暗掉 都行

    回复

  42. 如果只纠结腾讯微博iPhone客户端底部标签的明暗，的确是不合理，但用户使用的时候，视野集中在上部，明确知道自己所在位置，想切换的时候，会去直接点击旁边的tab，不关心这是亮还是暗，操作一致性不会被这个细节中断。

    回复
  47. Pingback： 不纠结不是好设计师——标签栏的设计 | 优酪网

  48. 对于腾讯微博设计的评论，我持相反意见。
    因为不同标签卡内容差异很大，所以用户很清楚他目前处于哪个标签卡页面，换句话说，用户不需要（或很少需要）通过看标签卡去确认自己“目前在哪里”。
    于是继续推下去，什么时候用户会去看标签卡呢？——离开本页面，要打开其他标签卡时。此时，用户只关心“我要去的标签卡在哪里”，所以高亮当前标签卡带来的坏处是：①影响视线聚焦；②其他被灰暗的标签卡不便于用户辨别。
    所以我觉得这其实是需要看不同应用场景的，就例如文中web浏览器标签卡例子，它不像微博客户端，因为标签卡title不是固定的，网页内容也很多样化，根本不可能记得当前标签卡是哪个标签卡，此时就有高亮当前标签卡的需求。
    愚见请指正。

    回复

  49. 现在用的腾讯微博 for S60v5客户端，标签选中状态高亮与否与其它标签区别不大，比较明确的指示是该标签下方有一个小箭头

    回复

发表评论

电子邮件地址不会被公开。