如何评价 3.9 及 4.0 版 Bilibili for Android?

采用 Android Design 的旧版广受好评,新版采用 iOS 的底栏设计在酷安和贴吧遭大骂。
关注者
490
被浏览
182542
为这个设计稿准备了很久。收集数据,模拟点击,参考国内外的各大视频类app。但是一人之力还是有很多不足,初衷只是潜心研究material后,手痒,就拿了B站开刀。工作繁忙还要看番,所以只出了4个界面,而且已个人使用习惯为主,去除了部分功能和交互,使客户端更加贴合单纯热爱看视频补番人群。由于在下工作也是以安卓端的设计为主,想借此机会聊聊material,周末有空再码字。





下班吃完特来更新
material这个题目有点大,在下从业才两年认识还比较浅,看过几本书做过几个项目还差得远。
今天我就先说点我知道的,一个国内app在适配Android L的一些面临的问题。也算是答复下最近b站部分安卓焦急的心情。之后我可能会谈一些自己在做这套设计稿时的经历和思考。

首先,这3.9版,我居然没接到更新的推送(┬_┬)
在下不好做过多的评价。我就单单谈谈题主截的这个首页吧。
tab栏和底栏可以看出典型的iOS风格。这个没有什么大问题。
“不对啊,这个是安卓诶~iOS风格用的多别扭。B站的设计团队在偷懒吧,坟蛋 (╯°Д°)╯︵ ┻━┻”
虽然我不是B站的工作人员,但我能理解他们这么做的考虑。那就是...省成本。具体之后再谈。
我们来看看主界面。
在下认为,这个主界面设计的非常糟糕。为什么呢?
1.首先给在下的第一感觉,这个元素控件之间的间距很奇怪,过于随意。上下左右等距而且过大,给人的感觉就是随意,页面元素不够饱满,信息仅仅是排整齐。
2.视频是做成卡片的,banner却不是。在下看来用户界面是一个水平面,形象点是一个四方的水盆泳池之类的。google在阐述安卓交互逻辑的时候提到过,界面内的信息就是泳池里的东西,他们都是在水里的,当用户需要它门时他们浮出水面。阴影就是表示这些信息离水面距离的标志。我们回头来看这个banner,它是不是沉在水底和水池地面贴牢的,而其他全是刚好浮在水平面的。我们再来看看卡片。这个卡片是有圆角的,而封面图片没有圆角,灰白的背景上鲜艳的图片就像刀片一样把界面割裂了,视觉上不舒服,所以用户心理上是不安的躁动的。在下认为这也是造成部分用户跳起来瞎BB的一种心理暗示。
3.最后我吐槽一个底部导航栏的icon。对,没错就是你,发现这个放大镜。其他所有的icon都是精心设计的,为什么唯独发现就是简单的一个放大镜,还没有任何的修饰,还处在正中间,显眼+显眼+显眼+显眼,难道是为了推发现里的游戏吗(然而在下早已看穿了一切。看穿你妹啊,那banner的信息层级为什么是最低的)
好先谈这么多。我要打炉石去了。(我是不是挖了一个很大的坑啊,混蛋! ╮(╯_╰)╭)



睡前一更(我在连载什么?小说吗?)
前面提到过国内很多app团队在适配Android L的一些面临的问题。在下认为是成本原因。
那么这个成本到底高在哪?

成本分成两块,一个是开发成本,另一个是用户学习成本。

用户学习成本高,这个好理解。我们都知道,iOS是一个相对Android更加成熟的系统,是现在移动互联网的明星,他们的结构简明逻辑准确,并且所培养(强行培养)的用户体验稳定一致。反观Android,直到4.4才建立起一个相比iOS来说较完善较系统的体系。(大爷的,我就不说Android L的设计规范有多么蛋疼,还3天2头改来改去还是一大堆bug一大堆自己自己打自己脸的解释了,就是个坑)我们用户大多数都直接间接的接触到我们iOS时尚时尚最时尚的设计风格了,并且过去的很多app把安卓端直接套用iOS(android辣鸡用户都是穷逼贱民,iOS多高贵啊,喂喂我作为一个果黑这么说不合适吧!)。那么说到这里,相信大家都才出来了这个用户学习成本高是什么意思了吧。
就是说相对于material这种较为新鲜的事物,一个在iOS和旧安卓系统之后新推出的设计语言,对于普及到用户很少图形化多手势多的立体的语言,大多数用户还是第一次接触,习惯它就要付出相应的学习成本。当然国内Android L的普及度可能跟MIUI等国内一些系统优化有关系,毋庸置疑他们对国人的用户习惯研究的非常透彻非常到位,可以说吧用户体验设计做到了极致,但同时也阻碍了google的这盘大棋(论Android系统做的这么开源的坏处)。
所以结论很明显iOS在一定程度上,用户是使用非常习惯的,几乎无需学习成本的。

至于开发成本高,具体我也不是特别了解开发人员和开发过程。但在下可以把我们公司的例子简单聊聊。
我们APP也是有在开发适配5.0的,一直悄悄的进行,但一直做的不完美,所以短期内都不会发布。这个同我们设计师出设计稿不一样,打开PS就能画。PM要从各个角度出发,发现寻找协商并解决问题,工程师要把对应的界面交互逻辑实装。这并不是一件简单的事情,按压屏幕的涟漪效果最容易实现,但是阴影一直调试的不精准,另外还有复杂的过场动画。这些都是有程序员们努力实现的,遇到的都是新问题,不同与老系统已经是个老司机。从开发到完成需要的时间远远比原来要长很多,而从运营和推广的进度来看,每个时期每个变化都不允许开发团队花费很多的精力来适配google的标准。所以我们不能轻易的判断,不实装materail就是偷懒就是省钱就是不尊重用户,正是因为尊重用户所以才不实装的。这点希望大家理解,我相信B站的团队,也在悄悄的进行符合google规范的设计。这个是趋势,大家都会去做的,这可是Android用户体验设计甚至移动互联网体验的一个新起点。实装material只是时间问题。

今天结束前我多个嘴,评论中有人提到material比较好看之类的。我想说,设计这个东西不是好看就行了的,它是根据各种各样的需求制定的各种决策为依据制作出来的,设计只讲适合不适合,而不是好看不好看(尼玛,那些丑爆了的界面就不谈了,精神污染视觉折磨的不在讨论的范围内)。


我来更新了(我material拼写错误改了,喂,我真的改了,你们要相信我啊)
bilibili4.0我更新了,整体看我觉得不错诶,虽然并没有什么值得赞叹精美的地方,但确实相较之前漂亮了很多。而且我被输入密码时候的2233萌到了,这个萌萌的交互我记得是年初在国外的网站上看到的,没想到bilibili会实装,好评。
可是我还是要吐槽,你还我横屏操作啊,我主力机是nexus6,竖屏一只手难操作,所以我都喜欢横着用,然而却没了啊。我感觉好难受。首页侧滑到底是滑什么的,有时候是滑tab有时候是滑nav,我真的掌握不到诀窍,还是bug。设计得好,我选择死亡。


在下还是来说说我这套稿子的思路和问题吧。
首页,评论中有人提到了,banner做成卡片不好。这是我目前的解决方案,这里一直拿不定,因为如果做成现在bilibili那样的信息层级不易表示,我在想是不是把banner不做成轮播,这样进一步去除了一些商业化。我们的客户端还是最纯净的。把banner分成几个,在下拉浏览的时候依次看见也许是个不错的选择。
我还把视频的播放数弹幕数去除了,这是根据我个人习惯喜设计的。我看动画的时候,不会去留意这些信息。我是封面党,像张局座那种封面屌无友系列,我看看封面都会笑好久。
主色选择了偏粉色的玫红,叫暗的环境下可能有些过去鲜艳刺眼了。但这就是我的目的,bilibili是一个很青春洋溢特别活泼的应用,原先淡淡的粉色大面积的使用无法带来视觉上的冲击,所以我根据原先的粉色,增加了它的饱和度,但适当的降低了明度,使变成它看起来鲜艳但不是特别刺眼的玫红。
促使在下这么做的,启示有个小原因。在下每天上班挤地铁的时候,观察很多低头族,他们的界面他们的操作习惯,他们在玩什么app。当他们浏览我们公司自己的app的时候,我心里特别开心,观察会特别仔细(我不是变态啦~(>_<)~)我们app同类型的很多,界面应该可以说大家都差别不大,为什么我能一眼认出自己的应用呢,因为我们用的瞎眼的红色(也没那么瞎啦 ╮(﹀_﹀)╭ )。刚开始入职接手工作的时候,我一直好反感,看过也还好。还有一次是在微博上,看到UI中国的一个推荐,图中一抹红,我擦 ̄▽ ̄ 不会是我们的app吧。点开大图一看,还真是。
在下这里就突出一个识别性,方便大家公交车上地铁上面基。
个人中心,在下做成抽屉,觉得没什么问题,背景用红色是因为考虑到这里可以放些bilibili春季夏季之类的主题图片。我个人这里的使用率还是挺高的,下载好的视频我会从这里看,也经常在动态里看up主们跟新的信息,准备回家看。每次打开app直接右滑也是十分方便。

视频详情在下一直很纠结,这个tab到底有没有必要。我还是很感谢土豪哎承包番剧的,承包的小伙伴一定也希望别人看到自己吧,匿名的雷锋们,只要匿名就好。这是一种尊重,逛这么多年的B站,在下弹幕除了发233就是感谢土豪最多了。不过在下觉得这样设计还是很不合理,当然在下会继续改进啦~(′・ω・`)
播放页面我主要参考的YouTube,没什么好说的。就是觉得icon没做好(我偷懒google那边直接拖过来用的)


结尾点题,4.0这次更新,在下觉得设计的并不差,但缺点也十分明显,大家客观看待iOS 和Android特点的设计,好的地方我们要肯定,不好的地方要吐槽。要事实在接受不了,那就U can U up呀。嘛,当然在下不是觉得设计的不行才做的,在下从4月底就开始谋划自己这份设计稿了。
最后我们一起祝愿,bilibili越来越好吧
(。・`ω´・)
谢谢大家观赏在下的劣作和点评。我第一次答题,很多语言粗暴无礼,请海涵,我会积极改正。
然而我说了那么多,并没有什么卵用。就算是设计师,死宅也不会有女朋友的。