当前位置:首页 > 经验学习 > 用户体验

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

所属栏目:用户体验 时间:2013-12-26 来源: 作者:不详 点击:

交互设计shi(师)的纠结有时hou(候)挺惹人讨厌的,大量的口水浪fei(费)在小的细节上了,有时候我也会告诫自己,要着眼大局分清主次,一些小De(的)细节干脆就不要太纠结了,可是我又相信,好的交互设计师一定要对细节有一针见血的判断力,不疯魔不成活,不纠结出不来好设计。
一、一个案例的反思
这里想聊聊腾讯微博iPhone新版的一个设计细jie(节)。
事件起源于我们的一个设计师提供了一个新版的视觉设计方案,整体很大气,可是有一个地方别扭,他把选中的标签栏暗掉了,未选中的标签栏高亮了,我说是不是反了?他说没反啊,腾讯微博就是这样的。于是我去看了新版腾讯微博,竟然真是这样。

图1 腾讯微博的标签栏

那么,让我们从以下三个角度看看,这样做到底对不对:
1.HIG怎么说?
那么让我们来对比一样IOS系统的标签栏的样式:

图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”,选中De(的)标签栏背景亮起,图标高亮。
2.其他应用怎么做的?
既然是微博,对比一下其他微博客户端,有哪个是选中状态的标签暗掉的?

图3 其他微博类客户端

zai(再)对比一下其他的优秀客户端的设计,有哪个选中的标签shi(是)暗掉的?

图4 其他优秀客户端

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

图5 Web版的一些标签设计
3.用户怎么理解的?
于是我到腾讯wei(微)博上反馈了意见,看Dao(到)了有些人跟我一样纠结了,包括麦田lao(老)师,但也有些人还是觉得这里可以接受的,原因不外乎以下ji(几)种:
“这里用补色来标注选中状态,表示不可点,其他的是可点的,所以高亮”
“等你选的当然高亮,不需要再选的当然暗啦”
“明暗比例1:4,应该能分辨出来哪个是选中的,只要不是1:1就行,用户能理解就行”
“谁规定的?用户能理解就行呗”
请注意,这里的明暗guan(关)系,不应该是用来区别可点、不可点的,而是应该用来区别是否处于活动状态的,可以参考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
选中的标签栏,应该是处于活动状态的,整个页面的内容,也跟这个标签栏是从属关系。默认加载的,也是那个唯一的活动状态的标签页,当你点击其他biao(标)签页shi(时),其他标签页才会被加载出来。你明暗颠倒了,会让人以为这个标签页处于非活动状态呢。
另外,这个标签页不是不可点的状态,当有新消息的时候,这个标签上会有气泡提醒的,这时候双击标签就可以刷新内容,加载新数ju(据)了。

tu(图) 6 双击有气泡的标签可以加zai(载)新内容


最后,说明暗比例1:4,所以能猜出来那个是选中的朋友,猜出lai(来)哪个是选中的不难,但这毕竟不是智商测试嘛,还是以满意度为基础来做设计的,而且最好做到不需要思考,是不?就算用户真的没有感觉异yang(样),我也会觉得自己的设计层次逻辑不合理,然后给自己狠狠拍上一块板砖的。
我知道批评人家的设计挺不好的,毕竟,新版设计整体来说很优秀,新LOGO也很好看,瑕不掩瑜,希望腾讯微博越来越好。
二、标签栏的设计原ze(则)
标签栏的设计,要注意以下几点原则:
1. 处于选中状态的标签栏要高亮,用以标识活动状态
程序启动时,优先加载的内容肯定是选中状态的biao(标)签页的内容。选中状态的标签要处于视觉上De(的)活动状态。

请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

坚持免积分、免登录、无任何限制下载!如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

标签:

你应该也喜欢这些吧

共有 0 条评论

给个评价吧

验证码: