关于广播新设计的吐槽(以及“回到旧版”的方法)

梦断代码 2016-12-22 23:46:05
作为一个基本只使用豆瓣广播社交的重度用户,前天使用新版友邻广播的第一感觉是有些不习惯。接着是觉得有些丑,以及刷起广播来莫名有些别扭,所以想要把问题想明白,然后修复一下。

第一个觉得丑的地方就是广播的粗体用户名了。实际上网站设计在正文(非标题)里使用中文粗体的并不多——在豆瓣上更是看了几页没有找到。

正文中的粗体具有强调重点、引起注意的作用,并且在中文中也常因为伪粗体(fake bold)给用户造成比英文更强的视觉打扰。很多人都有在看到粗体时意识到这是重点然后思考意义的习惯。

粗体用户名
粗体用户名


可是新版中的用户名不仅使用了粗体,而且还进行了有规律的使用。
在刷广播时,这有些让我感觉被人提着去注意了一遍广播流里所有的用户名;然而用户名对我来说完全没有广播内容重要,所以使用新版时才会有些莫名其妙的感觉。这是其一。

但说到底我们可以相信设计师是知道粗体的作用和打扰性的。那么如果不使用粗体,会是怎么样呢?

非粗体用户名
非粗体用户名


感觉清爽了一点。可是又有一种没有重点,只有一列文字的感觉;幸好广播里“说”、“推荐”等动作的文字是灰色的,稍微有一点层次。但还是不好,大概因此设计师才会不得不用粗体。

然而实际上,之前的广播设计完全没有这个问题。
不仅没有动用粗体用户名,甚至广播动作的颜色也只是普通的黑色,但是层次清晰,刷起来舒畅淋漓。

问题在于对齐。
对齐在 UI 设计中是十分重要的视觉线索(visual cue),由它负责告诉用户哪些内容是一类哪些是另一块,并且基本只用潜意识就能完成所以用户的认知成本十分之小。
这次的改版就是破坏了之前的对齐,同时舍弃了原有对齐中清晰的内容区分。

广播的内容实际上是比用户名重要很多的内容。
因为在使用过程中,其实大多数用户只用将注意力集中在每一条广播的内容文本上,而只需要余光就可以从友邻的头像和用户名轮廓识别出常见的友邻。
在首页上浏览大量广播时,广播间的跳转只需要视线焦点的上下垂直移动即可完成。

旧版广播视觉路径
旧版广播视觉路径


但是改版之后,每次读到一条新广播,都不可避免地要先用精力去读一次“XX 说:”,因为它和内容对齐在同一根基准线(keyline)上,并且还带着醒目的粗体提示。

而我并没有每次遇到一块新文本内容自动快读/忽略第一行跳到第二行的阅读能力,也不认为应该养成这样的习惯。

新版广播视觉路径
新版广播视觉路径


对于对齐的忽视/舍弃是导致这次改版可用性下降的最大因素。
设计师想要统一页面基准线到只有两条的思路确实值得考虑。但是,如果真正用心使用过友邻广播,得出的结论却应该是在广播信息流中由广播本身的特点决定了,这里所提供的视觉线索远远比统一两条基准线要重要。
何况改版后的用户名粗体的设计更是完全把广播的重点弄错了。



然后另一个方面是新的被转播广播卡片。
被转播的内容中可能有图书、电影等子卡片,所以会产生卡片嵌套的新设计。
昨天线上的版本里使用了 1px 边框的白色卡片,但豆瓣整个站点都基本没有那样的设计,相比之下那更像是 iOS 的设计风格。

(这里没有截到图噗)

令人开心的是今天上线了一个新版,恢复了统一的淡灰色无边框卡片。可惜这个设计依然不是那么可爱。

新版嵌套卡片
新版嵌套卡片


好不容易合并的基准线又增加成了 3 条。

所以基于之前的广播对齐,我继续做了一些改动。

单层版嵌套卡片
单层版嵌套卡片


开心了。


至于其他许多的小缺陷就不写了,这里只吐槽下转播对话框。

转播对话框
转播对话框


看图说话:

转播对话框解说
转播对话框解说


还没吐槽随心所欲的垂直留白……

再比较一下按钮的设计细节:

豆瓣按钮比较
豆瓣按钮比较


左边的正常按钮大小刚好,还有淡淡的勾边。内敛,可爱。相比之下右边的真是肥大乖离不知所以。

然而右边的按钮 class 叫做 dui-dialog0-bn,真希望他们能够把 DUI 这种泛用的框架做好再推广,至少像左边那个正常版本一样。



写不动了,所以对设计的讨论就到这吧。

然后是标题里提到的“回到旧版”~

我对友邻广播的网页设计做了一些恢复/改良,并且发布成了一个 userstyle,大家可以自行安装然后立即重获好看的豆瓣w
传送门:https://userstyles.org/styles/136772/theme 按照提示安装 Stylish 后即可使用。

Userscript
Userscript




顺带吐槽一下这次的转播改版。
豆瓣的旧转播机制可以很有效地防止类似微博上转发区吵架或者“最右2333”这样的事情,是一种保护豆瓣社区环境清净的设计。
新的转播会把对旧广播的赞和回复拆分走很大部分,对于原广播作者也不一定是好事。
再说,原来也有“推荐广播网页”这种带评论转播的方式,虽然用户交互成本更高(以及可能老用户才知道),但这恰好是一种用来弥补少量真正有需求场景的手段。

虽然我觉得转播可以加,但想说明如果回滚其实也是完全可行的。
只需要把这几天所有的带评论转播都转为推荐广播网页并评论就好了。



除了 Google 的 Material Design,我就是喜欢豆瓣的性冷淡简洁风了。
淡边框的按钮。蓝色链接。淡绿色虚线。
希望设计不要想着搞什么 iOS 扁平化风格的组件,那只会在豆瓣整个站点的气质下显得突兀出戏。

至于如果真的有把全站设计大改成 iOS 设计风格的阴谋,一旦发现友邻们会一起造反的吧 : )





“哈哈哈,大家可以给豆瓣的设计想想办法。自己的家,舒适实在太重要了。”
——某日记回复

最后提个倡议。
我相信许多友邻和我一样是把豆瓣当成自己的某个家园的,国内也很少有其他网站这样让人有归属感。
可是豆瓣的突然改版经常令我有些不适,从豆邮到转播。就像有人在夜里闯进自己家里重新装修了一遍这样的感觉。
我希望喜爱豆瓣的友邻能够一起发声,在官方的改动不尽人意时有效地发表自己的观点。
如果可能也希望豆瓣官方能够参与,并且预告计划中的较大改动。

加入小组:豆瓣友邻团结起来! https://www.douban.com/group/575758/
以及如果不太看小组可以关注一下“豆芽”:豆芽 https://www.douban.com/people/douban-douya/
有豆瓣的改版也会在这里吐槽 XD
梦断代码
作者梦断代码
22日记 8相册

全部回应 34 条

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

梦断代码的热门日记

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