我也重新设计豆瓣电台(1)

看到PORKFAT大师的这个日志”听豆瓣电台做界面设计“,不禁为大师动手以及记录的好习惯叹服,于是考虑了一下,决定也实践献丑一次 >_<

首先我认为界面设计需要两点:1. 对产品的深刻理解;2. 翔实的用户使用数据支持。我不是豆瓣电台的用户,更没有豆瓣的数据。但是在美国的时候我是pandora的深度用户。因此实际上我对1和2都是不符合的,权当是“在豆瓣电台的框架下设计我理想的音乐电台”吧。

pandora的设计:

douban2

首先是列出在使用在线音乐电台服务时的典型scenario

  • 平时就放在后台。听。
  • 有事情打断的时候,需要马上去暂停。这个时候暂停需要很容易就按到,很显眼。
  • 一边听着一边干活,突然”哎,这首歌不错/艹,这是啥玩意“,切进来,此时是情绪化的,需要很容易找到收藏/厌恶的按钮。
  • 突然想起“哎,刚才那首歌挺不错的啊,是什么歌来着?”/“十几分钟前听了首不错的歌,是什么来着?”
  • 音量在一次设定之后其实调节不多。

然后开始思考douban和porkfat设计上的一些问题,由于是懒人有禅,就没有mindmap,直接开始写了-.-

douban的设计

douban1

  • 视觉上右侧的视觉元素和左侧的专辑封面的边缘不对齐
  • 三个主要按钮颜色不同可能导致用户对status的疑惑,这个到底可不可以按下?
  • 垃圾桶代表删除,用户删除什么东西的时候是会有心理压力的,这个还可不可以找回来?
  • 关闭按钮表意有问题,第一眼不知道什么意思。处于右上角的位置容易让人想到关闭窗口,鼠标放上去之后:开/关是什么意思?
  • 三个主要的按钮mouseover的时候没有视觉提示
  • 左侧的封面可以更加从背景突出一下,现在这个有点太平了
  • 报错和设置很难找到
  • 进度:如果完全模仿电台,何必要有已经播放了多久呢?听电台的时候是不知道播放进度的。这个元素可能最大的作用只是表明现在正在播放中?没有剩余时间的已播放时间有什么意义呢?不过如果网络不流畅的话,要思考如何表示正在缓冲。
  • 顶/删和下一首是完全不同功能类型的按钮,放在一起容易混淆,而且颜色编码和功能类型的对应让我觉得迷惑
  • 音量控制按钮太小

porkfat的设计(第二版)


  • 双进度条确实视觉上迷惑。如上所述,要已播放时间干嘛?
  • next按钮到底右边有没有那一个竖线?这个问题在人人网和twitter上问过,经过大家的指点,原来双箭头来自于磁带时代,表示快进,但是自从sony的磁带机能够智能寻找下一首歌的开头之后,这个也就可以用来表示下一首了。所以双箭头加一竖应该是更加标准的用法
  • 右上两个按钮不像是可以按下去的。圈内的图标倒像是突出来的,像个状态。
  • 设置地方的处理不错。

接下来思考另外几个问题:

  • 暂停和下一首。一般情况下这两个按钮的分布是如何的?是不是暂停一般比较大?实际中电台是如何摆放的?
  • Porkfat的设计让我想起左侧如果做个动画会很有趣!鼠标放上去,cd从盒子里面出来。起到更加强的mouseover效果。也提示点击之后会看到这张cd的详情。
  • 正在播放如何表示?想起了古老的Winamp使用的频谱动画。
  • Pandora中喜欢/不喜欢的按钮表示是美国常见的thumb up/down,这个在美国文化中明确的metephor在中国是否存在?尤其是thumb down?
  • 这个不喜欢操作其实做了三件事情:加入黑名单/跳到下一首/减少对这样类型音乐的权重,如何让用户清晰地了解这三个事情?
  • (我自己)最常用的操作是什么?暂停?下一首?thumb up?thumb down?如何让这个动作变得最顺手?
  • 在thumb down之后,如何告诉用户这个事情你其实还可以撤销的?浮出层?这个音乐收缩到一个垃圾桶里面去?
  • pandora的设计里面,按下thumb up/down之后用一个checkmark来表示已经选定这个状态,这是一个“状态即操作”的pattern,但是导致的问题是:1)我以为”取消thumb up“这个操作是可行的(实际上好像不行),2)我以为要取消thumb up是去再点一次thumb up(实际上是要去点thumb down),然后这两点导致的问题是这首歌再无法回到”中立“的状态了。(至少我还没发现办法)
  • 有知道上一首歌是什么的需求吗?我自己是有的,大部分用户会有吗?这样的情景是否大众:”哎我刚才听的那首歌叫什么来着,挺好听的“,这样的需求是通过1)pandora的直接显示刚才播放的几首歌;还是2)显示历史播放列表来显示?如何将错过一首好歌(忘记mark了)的成本降低?

OK,现在已经积累了足够多的问题,那么如何去找到答案回答呢?每个人/每个设计师都有不同的答案,接下来的设计过程在2里面继续吧。(实际上是懒人yusen想了一些方案但是都觉得太不满意,而且必须睡觉去了-.-)

ps: 发现pandora在puff翻墙的情况下非常流畅,强烈向喜欢西方音乐的人士推荐这个在美国时我最爱的网站: www.pandora.com

pps:请各位豆瓣电台的用户猛拍我。

ppps:请猛击查看Mixfog设计的豆瓣电台,我很喜欢~

11 Responses to “我也重新设计豆瓣电台(1)”


  • 非常同意你的看法。
    我特别赞赏豆瓣的进度设定,它那个不是暂停,而是停止按钮。
    上个厕所回来再打开,直接就变另一首歌了。这是电台和磁带等存储媒介最大的不同。

    我认为这是一种去中心化的很好的方式,豆瓣需要的是把更多内容无侵入的推荐给合适的人。另外我在想,虽然我们更像知道刚才听的好听的歌是什么名字。但豆瓣的设定显然更推崇的是歌手和专辑,所以左边的thumbnail视觉效果那么突出。推一首歌不如顺便推一个歌手,我觉得豆瓣这个思路也很不错。
    pandora做了太多加法,我更喜欢豆瓣的减法

    • 恩,我觉得对我来说,以及我在美国观察的一些case,pandora更多的是被人当作一种“背景音乐”来使用,例如party的背景音乐,活动的背景音乐等,所以可能对内容的推荐要相对来说少一点,更多的是如何找到喜欢的歌~

    • 豆瓣自09年下半年以来慢慢改版之后的设计确实进步很大~~

  • 哈哈,我也设计:http://www.mixfog.com/blog/2010/03/redesign-douban-fm.htm

  • 分析分析虾米的电台吧,你想的很细致,我想听听你的看法。www.xiami.com

  • 精彩!我也说说:

    播放时间最明显的作用是表示「豆瓣电台现在正在播放](不是音箱没插,也不是电脑音量问题),我考虑用其他方式来表示,但都没有想到比看着时间一秒一秒流逝这种节奏带来的感觉更好的方案,其他方案总是有点生硬和冰冷,另外还有一个不太明显的作用,能显示音乐的进度,现在是播放到前奏、高潮、repeat、还是尾声,可以有个大概的心理印象。

    「如何知道上一首歌」这个需求,我设想是在播完后在界面上某处(在一个固定的位置,或是fade in一个半透明的层)展示上一首歌的信息5秒钟,然后fade out。

    另外,我主要有两点设计理念,第一点,豆瓣电台的一些功能上的局限固然可以用「因为电台就不能啊」来解释,可是为什么就不能呢,比如我就是要让电台进度条可以拖动又怎么样呢?对此我认为不少人都因为这是电台不是音乐播放器而给与了过度的宽容,可是电台为什么就不能做得像播放器呢?第二点,豆瓣电台应该可以和豆瓣音乐有一些功能上的衔接,也要和豆瓣电台的网站更好地衔接起来,因为同步率爆低的初号机是没有战斗力的。

  • 写得蛮细心的,期待设计结果!

  • 发现用户对很多功能由于“怕”而不去操作啊

Leave a Reply