说说豆瓣电台的界面设计
使用豆瓣电台的过程中,我已经三次错将喜欢的歌曲拖进了垃圾箱。原因在于,在听到好歌的激动情绪中,点击了电台上最醒目的 垃圾箱 按钮,我以为那会是收藏。
豆瓣电台本身是主动推送给听众的,因而需要听众交互的地方少,按钮就那么几个。简洁明了的设计在这里是极恰当的,但如果不注意元素(展示元素,操作元素)摆放的位置,简洁的设计一样会带来使用问题。在我看来,豆瓣电台在界面上就存在如下问题:
1 操作元素 布局分散
电台界面上有如下操作元素:a 音量调节 b 关闭电台 c 加心收藏 d 删除曲目 e 跳过曲目
可以看到,即便简单如5个操作元素,也被分布在三个区域了,我觉得(也根据实际使用)这样并不合理。
操作元素少的界面,如非功能特殊,元素们应尽量在一个集中的区域,以免用户操作跨度太大或找不到相应的操作入口。
我的方案是,将这5个操作元素都集中在显示屏下方的区域。(见我的设计图)

当前的豆瓣电台界面

我修改的豆瓣电台界面
2 操作元素 未根据操作行为进行归类与安排
音量调节 与 关闭电台 按钮摆在一起,二者操作模式不同,况且关闭电台是影响很大的操作,二者在一起颇古怪。
动作相似的操作行为,如非功能特殊,应该安排在一起。这里,加心收藏、删除曲目、听下一曲 三者都是“点击”的操作模式,可以并行排在一起。(关闭电台 也是 点击 操作,但功能特殊且少用,不在此列)
根据操作后果的严重性(比如是否能挽回),以及位置的醒目性,再来安排三者的顺序,我给的方案是:从左至右,加心收藏、听下一首、删除曲目。
另外,将 音量 元素与 关闭电台 元素 分开了,音量元素因为其外型长度,将之置于曲目显示屏下方。关闭电台置于右下的角落里。
3 显示元素 主次不适当
豆瓣电台里,显示元素有三块:a 封面 b 时间 c 歌曲名称及演唱者
我们看到,时间 元素是被置于歌曲名称上方的,颜色深,还是粗体,这一行除了它,没有其他元素。又由于这是个动态元素,本就吸引人的注意力,因而,时间元素 在这里非常引人注目。
但这个区域(时间+曲目)里究竟谁是更主要的呢?我认为是曲目。时间元素在这里过分突出,是个干扰。
将主次颠倒了一下,突出曲目名称,时间元素显示在右下角,并且颜色调淡,我觉得这样更相宜。
另外,电台里的专辑封面缩略图比较粗糙,不清晰,这个细节应该改善。
困扰我的问题
关闭电台 元素的摆放,让我头疼半天,怎么摆都觉得不合适。到后来我反思,它是必要的吗?

没有 关闭电台 按钮的界面,是不是更好些?
我估计,设计人员保留这个按钮的作用,是设想的这样的使用情境:用户独立开一个电台窗口,最小化听音乐,不想听了,可以先关闭电台(但窗口保留,便于他二次开启)。因为从豆瓣去到电台入口,步骤很麻烦。(bug 一枚,鼠标移到 关闭电台 按钮,没有提示文字,也没有 变色 等任何反馈。)
关闭电台 元素是个使用次数少的操作,位置应该不明显。奇怪的是,无论摆在哪里,它都很明显。尽管现在我将之挪在了右下角,以保持所有操作元素都在一个集中的大区域里,但仍不是最满意的。
谁有好的建议?
June 29th, 2009 at 12:33 pm #valdanito
“鼠标移到 关闭电台 按钮,没有提示文字,也没有 变色 等任何反馈”。
那就把“关闭电台” 的按钮的颜色调浅或者透明度降低一些,等鼠标悬停上时颜色“变亮变实”,外带文字反馈,这样会好些。
June 29th, 2009 at 12:45 pm #王亂亂
我的想法一样,如果音量调节放在歌曲名展示区域的下面就很好。关闭电台的按钮还是有必要的,可放在右上角。
June 29th, 2009 at 12:48 pm #苏格
我觉得你的这个就不错,把添加喜爱的那个按钮做显眼。
不过我用关闭按钮还是蛮习惯的,确实是不想关闭界面又想停止的时候很方便,但是我觉得不要和最初的方案那样放在音量那里了,也是容易点偏。
June 29th, 2009 at 12:55 pm #su27
我反而听到很多抱怨关闭按钮不明显的呢。想像当你来了个电话或者背后来了个boss,手忙脚乱的寻找stop按钮的时候。
June 29th, 2009 at 1:08 pm #tgm
甚至还有这样的理解:“右上的圆形按钮还没搞清楚什么(貌似更换另一批歌曲,那和“跳过曲目”功能差不多啊,反正不知道会放什么歌)”
June 29th, 2009 at 2:22 pm #brant
su27,这就要hot key啦(电台还是网页版的,浏览器的hot key就可以)。或者键盘的静音按钮,比如电视遥控器。
valdanito,对的,所以我说可能是bug,因为界面上所有按钮都有提示(不过这样的交互原则是必须的吗?),这个没有。
tgm,我觉得那个关闭按钮倒不会有太多误解,是个大众都能理解的按钮(家电给教育的),就像快进和停止一样。
June 29th, 2009 at 2:46 pm #NP
….用firefox留言连续失败三次,现在只剩下两句话要说。
1,brant的方案挺好
2,用户需要静音按钮,可以在音量条的左侧放一个,与+音量按钮对称。
June 29th, 2009 at 2:47 pm #NP
换成safari留言就成功了。。。之前写了那么多,郁闷。
June 29th, 2009 at 4:00 pm #Leechael
垃圾桶操作元素放原来的收藏操作元素所在的位置,图标大小也相对缩小。
大按钮的顺序:收藏,播放/暂停切换,下一首。文中提出的、关于关闭按钮的功能猜想,本来关闭就不是一个恰当的行为 – 关闭播放器(当前页面怎么不关闭呢?),而这里想得到的效果只是播放/暂停的切换而已?
又及,红心特刺眼,不好看…
June 29th, 2009 at 5:13 pm #brant
看来我的WP得升级到2.8了……
June 29th, 2009 at 5:49 pm #马平凡
方案可以借鉴。我也借此顺便说下。3个按钮在视觉上可以做个的更像个按钮。按下和经过的时候都有相应变化。另外关闭按钮还是有必要加上去。这样功能会更显完整。关闭按钮按用户的操作习惯应该会是放到右上角。
June 30th, 2009 at 3:06 pm #red nose
音量调节元素被拉得太长,乍一看误以为是时间轴。
做成这样,显然是出于装饰效果的考虑。
建议将音量按钮做小,和关闭按钮一起放在右上角。
June 30th, 2009 at 4:09 pm #再说豆瓣电台 | 微物之神
[...] 看到brant写的《说说豆瓣电台的界面设计》,以下作为回复他的那篇日志的。 [...]
June 30th, 2009 at 4:10 pm #米拉之落
http://bewho.us/douban_radio_2/
June 30th, 2009 at 4:37 pm #天真
我都还没有电台申请呢。。。
不过看你的设计,我觉得收藏和删除属于同级别功能操作——都是对本首歌的操作,快进不属于这类。收藏-快进-删除的操作有些不对?
另外,删除和收藏是算法中判断用户喜好用的,也该归一起,但是我觉着本身不应该这么明显、醒目。可以弱化颜色,鼠标放上去清晰。
关闭电台是不是直接关于浏览器tab就解决了。。。
July 1st, 2009 at 9:28 am #白鸦
有么有想过,音量那玩意儿他像播放进度
July 1st, 2009 at 3:31 pm #Ashura
关闭按钮是关闭当前浏览器或当前标签吗?还是关闭音乐?
前者浏览器本身已具备,后缀暂停播放已具备。
关闭何用?还不如ESC快捷停止播放。
July 1st, 2009 at 5:50 pm #龙二
关闭按钮其实真实意图是暂停 否则关闭窗体便是
原因在于lz所说的 进入电台步骤繁琐
但现在的关闭按钮还有一个不太好的多余动作
当再度打开电台时 它把刚才停下的歌切了
现实情况是 有时我只想暂停播放 过一会儿接着听没听完的歌
July 2nd, 2009 at 3:36 pm #匿名用户
我觉得关闭按钮有必要放出来,感觉放右上角会好一点,还有一个问题为什么只有下一首,没有上一首
July 2nd, 2009 at 4:17 pm #mmic
这种放法,不点错才怪呵呵
July 2nd, 2009 at 6:52 pm #hzshen
关闭(其实是暂停)按理说应该在右上角,我想是不是可以在右上角有个小区域,当鼠标滑过那个区域的时候再出现这个暂停图标?
音量是像进度条,不过感觉问题不大。Tony 说了,电台是个听背景音乐的工具,不需要我们叮着看,所以有些功能可能和设计网站的考虑不一样。
July 5th, 2009 at 11:36 pm #monochrome
1、电台就是一个shuffle,需要的是让人放松的听,不必时常看,时常操作。
2、电台的算法好像是你自己添加过的人以及豆瓣里普遍认为和你喜欢的歌手类似的歌手的音乐,所以每个歌曲都有很强的随机性,难免遇到你不喜欢或者很腻的,所以你最需要的是next,跳过,或者del,永远不要听。
3、添加最爱,这个操作其实并不如2里的重要,难道每次都挺最爱的那些是电台的初衷?也许不一定是挚爱,但是只要是喜欢的范畴,又有很大的随意性,那才是豆瓣电台想要提供的体验吧。
September 5th, 2009 at 6:55 pm #zbcgs
很简洁,没邀请码,还没体验过
October 3rd, 2009 at 1:55 am #Viwien
我觉得吧,你的设计确实显得比较逻辑清晰,但终究还是电台的当前界面比较好看,比较有节奏感呀。毕竟吧,UI对我来说很重要,直接决定我会不会用这个软件。
还有,我个人更倾向于强调“时间”这个元素,比较喜欢被强调的元素是灵动的,在不断变化之中的。如果让一个千年不动的曲目名傻傻地呆在视觉焦点上,会让我胸闷到吃不下饭的。而且,对我来说,时间元素比曲目更重要,我比较喜欢了解某段旋律在歌中的大概位置,而曲目只要看一遍就知道了呀。
那个关闭的按钮我经常用的啊,千万不要删掉啊,虽然它放在音量控制按钮旁边确实容易导致误操作。
October 3rd, 2009 at 1:57 am #Viwien
我晕,回复还要确认的啊。。那是不是反对的声音一律不会被发表的啊。。我辛辛苦苦打的呀,打了好久的啊。。sigh。。
October 4th, 2009 at 3:29 pm #世玉
“元素们应尽量在一个集中的区域,以免用户操作跨度太大或找不到相应的操作入口。”
这里不敢苟同。
对这个应用来说,不存在“操作跨度”问题吧,这几个按钮功能都是独立的,并不存在“用户点了A之后,会立刻去寻找点击B”的现象。
一般来说,每次用户将电台调出来,都是为了点某一个(注意是:一个)按钮然后再把它最小化。
另外我认为,“跳下一首”那个按钮比“删除”按钮要常用的多。你把“跳下一首”放在中间,反而难找。况且那本就是向后的箭头,将它放在最后边,才是最符合逻辑的。
同意“音量条”和“关闭”按钮那里需要调整。
January 24th, 2010 at 4:38 pm #baby
能尽快加上快进功能就好!
February 26th, 2010 at 11:10 pm #jan
世玉+1