豆瓣网的设计和可用性问题

თოქ 2016-12-21 10:14:00
如果豆瓣的工作人员不觉得豆瓣网有什么问题的话,他们可以去数一数豆瓣网上的按钮样式。
真的,你甚至可以直接发起一场豆瓣活动,叫《大家来找茬:豆瓣网到底藏着多少种按钮》。


一、按钮

豆瓣网上散乱、不一致的设计绝不仅仅是按钮的事,只是在按钮上体现得尤为明显。
下图是我一下子所能找到的按钮样式,不表示已穷尽。


公平地说,图上的个别按钮虽然长得不一样,但可以看作是同一类设计的变体。不过即使如此,这种设计也仍然有很多细节上的粗糙处,比如图标相对于文字的位置、文字颜色和背景颜色的关系等等。
另有一些按钮长得像是同一种,但实际的交互效果也并不一致。这种情况并没有包括在这张截图中,否则还要更眼花缭乱一些。

至少从表面上来看,豆瓣网这么多年来好像从未进行过大刀阔斧的重构,一直是在旧产品的基础上做功能增减。而且豆瓣本身的功能集也比较庞大。所以他们现在的前端代码可能有些错综复杂,很多细节没办法说改就改。
但不知道这种复杂到底到了什么程度,以至于花五分钟把下图中输入框的样式“现代化”一下以便和最下方的按钮样式相匹配也是不可能完成的事。可能这已经到了改改CSS也会引起豆瓣全网崩溃或者世界毁灭的地步吧。



二、配色

豆瓣主站的主要用色好像都是高明度、低饱和度的类型,所以乍看上去还是挺协调的。但这些颜色到底该怎么用,用在什么地方,就不太经得起推敲。
尤其在这一次改版后,因为被转播的广播内容有一种灰色的底色,而这类广播的数量又比较多,用色问题一下子暴露了。基本上,豆瓣网的颜色协调好像是靠大面积的白色背景来支撑的,当白色面积减少以后,其它颜色之间的关系马上变得尴尬、突兀起来。

整个广播列表,现在除了蓝色的链接以外,就剩一片灰蒙蒙的层次。但豆瓣的设计人员可能也想不出除了这里黑一点、那里灰一点,还有什么调色方案能让广播内容既有层次又不会花里胡俏的。
我个人的经验是,在PC端使用加粗字体通常不是什么好主意。MacOS我没有使用过所以不太清楚,但Windows下的粗体字渲染在目前主流的PC屏幕分辨率下效果非常糟糕。加上黑色、粗体的豆瓣用户名是被一堆其它的灰/黑/白围绕着的,整个广播列表现在看上去有一种布置了灵堂的效果,还特地把过世人的名号突出显示。


三、链接

改版后的豆瓣存在一些UI上的bug,比如在某些情况下字会重叠,又比如广播发布框字数超出后的红色下划线提示位置不太对。
但这些问题其实都是最微不足道的了,修一修就好。豆瓣网现在最大的问题是,根本就没什么可用性可言,到处都是违反直觉的功能,这一次改版更是把这种反用户直觉推向了某种高潮。

下图是豆瓣日记正文下的一组选项卡。


我记得不是很清楚,但原来似乎不是这样的。然后某天突然变成这样以后,困扰了我一阵。我想要查看是谁喜欢了我的日记,但我又不太确定这里点下去到底是什么后果,是切换其下的内容呢,还是直接进行了喜欢和推荐的操作?我这种“清高”的人是绝对不会允许自己喜欢或推荐自己的日记的,所以这几个选项卡点得心惊胆战的,就怕点下去变成喜欢了自己的日记了。
归根到底,是因为豆瓣网根本不区分链接、按钮和选项卡(tab)。后二者经常长得跟前者一样,而且没什么规律,好像就是设计的人脑袋拍一拍觉得这里这样还看得过去所以就这样吧。
我会误会日记底部的“喜欢”选项卡点下去可能是按钮操作而不是选项切换,是因为广播列表里的“赞”和“转播”这两个按钮就是长这样的。

豆瓣不但没有意识到这种设计上的不合理性,还在昨天的改版中把它变本加厉、发扬光大了。



上两张图中,红色的功能部分,在外边列表上长的是链接的样子,在里边又变成了按钮。
单说里边也很奇怪,也不完全是按钮,唯独“删除”还保留着链接的样子,不知道是出于什么考虑。这里显然把删除也做成按钮的样子要一致得多,可以给它一个红色的配色。
第二张图中蓝色的部分是改版后多出来的,是一组选项卡。反而是这组选项卡,现在和外边列表上的按钮长得是一个样子。一样的功能长得不一样,不一样的功能长得分不清,不知道豆瓣网对它的用户有什么怨恨。
最滑稽的是,选项卡和按钮混在一起分不清,但既不是混成了前者也不是混成了后者,而是通通混成链接这个第三者。

说到选项卡,随便逛一逛也能发现好几种样式。比如下图这两种。


另一个与链接相关的反直觉出现在下图。


图上的转播发言也有一种灰色背景。在列表外,这种灰色的背景暗示这里是一个点击区域,点击之后可以进入到相应的广播条目。基于这点,你可以也会想要点击这里的灰色部分。然后你点来点去点了半天没反应,最后才发现正确的操作是把鼠标悬停在灰色部分上,让右上角出现一个“查看广播”的链接,然后你把鼠标移动过去,点击它。
这两种操作方式本身谁更便利,不是最关键的。最关键的是,长得一样的东西、而且讲道理也应该是一样的东西,再次在广播列表内外表现出不同的行为。


四、导航条

我的这个豆瓣账号现在已经定型成广播+日记用户了,不管豆瓣出现什么改变,我都不太可能再使用小组、活动一类的功能。
但一开始我之所以不再使用小组,是豆瓣网的顶部出现那条黑色导航条的关系。这个导航条不论是站在设计还是产品的角度上,都是一个特别莫名其妙的东西。

设计上而言,我特别能体会到它的不专业,因为这恰恰是我一个不懂设计的前端开发人员会做的事:这条东西我搞不懂配色了,我就给它一个柔和的黑色背景。
现在豆瓣的用户可能看习惯了,但这条黑色导航条事实上放在整个豆瓣网上特别格格不入。

问题是,你不计较它的设计,你光看它的目的性,你也看不出个所以然。你说它是要让导航条上的这些入口更容易发现吧,反正我是自此以后再也不进小组、同城什么的了,读书、电影、音乐的使用率也大幅下降。
但最不可理喻的还要数下图中的这个行为。


你把这些入口抽出去,单独占着一行,还是全宽的一行,就为了把其中的某些入口再藏起来。
到底是出于什么考量,在可用空间明显足够的情况下,要搞出一个“更多”,把东西藏进去让用户看不到?

这条导航条只是豆瓣各种入口混乱的其中一个缩影,豆瓣的各种功能入口散落在各种地方,各自有各自的面目,能顺利用下来的用户都算经过磨练的了。


五、其它

可以调侃的地方还有很多,这里不再多做展开,只简单再说新近改版的转播功能。

并不是所有的被转播内容都是灰色背景,它还可能长成下面这样。



当然,豆瓣网在这里也继续贯彻它折磨用户的原则:转播本身的样式不一致,但转播现在跟推荐是一致的一种混乱。


推荐同样具有转播的这两种样式,已经不可能像以前一样一眼从列表里分辨出推荐了。

当转播人不止一个时,豆瓣现在想让你知道到底都有谁转播了。这本身是很好的。但具体的实现,别人我不知道,下图中的“更多转播”这个链接,以及这个链接点击后进入的页面,我个人愣了半天还没反应过来到底是干嘛的。文字描述不精确、放的位置很奇怪、操作效果也让人摸不着头脑。



六、移动端

我明白Windows Mobile用户在总用户群体里只占特别微不足道的一部分,所以豆瓣的移动端网站有什么不好用的,我都忍着,我也明白他们可能根本从未想过要在Lumia上做测试。
但既然今天写了这篇文章,就顺便向豆瓣反馈一下:你们的移动端网站,在Windows 10 Mobile下连登录功能都不能正常工作。


编辑:
豆瓣网的带图日记看起来通常很累,是因为豆瓣没有给文章中的图片设计某种边框样式。

编辑2:
豆瓣对这篇日记的回应:https://www.douban.com/people/66855791/status/1930327181/
თოქ
作者თოქ
167日记 0相册

全部回应 60 条

查看更多回应(60) 添加回应

თოქ的热门日记

豆瓣
免费下载 iOS / Android 版客户端