哔哩哔哩动画是中国大陆的一家弹幕视频网站，在中国二次元用户中颇受欢迎。 哔哩哔哩动画之前推出过采用AndroidDesign的Android客户端，虽然有使用了部分过时控件（例如ScrollableTabs）之类的问题，但整体素质依旧较高，受到Android用户的广泛好评。而在6月初的3。9及4。0更新后，哔哩哔哩抛弃了过去的AndroidDesign转而使用了iOS风格的设计，如图所示： 左为v3。3。0，右为v4。0。0 此次更新在用户中的争议颇大，部分用户反对此次改版，认为新版哔哩哔哩动画客户端失去了原有的Android风格，令人失望。 个人认为哔哩哔哩的情况比较特殊： 原来进行过Redesign的应用有一开始就是iOS风格的，也有采用AndroidDesign风格，但并不完美的。对哔哩哔哩这种原来是AndroidDesign风格，但后期转换为iOS风格的App进行Redesign是一件很有挑战性的事情。于是在对新版进行了一段时间的体验之后，我开始利用新版的特性和部分交互逻辑对哔哩哔哩动画进行基于MaterialDesign的Redesign尝试。 在微博上发布了几张预告效果图之后，我意外地收到了认证资料为bilibili副总裁的微博用户光头哥光头哥的私信。因为在私信里这位微博用户对一些问题进行了询问，加上设计师在知乎上对于这次设计风格改变的解释，我认为哔哩哔哩本身是想采用MaterialDesign的，然而对于MaterialDesign本身并不是十分了解，因此才会采用iOS的设计风格。 我个人对哔哩哔哩的态度感到很欣慰，希望能在以后拿出更好的设计。 我也希望我的这篇文章能够起到一些帮助。在文章开始之前，我想先回答之前光头哥光头哥在私信中提出的一个问题：为什么安卓用户对底部toolsbar这么介意？ 首先要纠正一个用词错误：用于切换不同页面的Bar叫TabBar，而不是ToolsBar。这点在Apple官方的iOS7UITransitionGuide中也有提到。 那么纠正完用词错误，接下来就要回答这个问题了：为何Android上最好不要出现底部TabBar呢？ 首先，Android提供了更多样的交互方式，例如Drawer，FloatingActionButton等。活用这些交互方式可以灵活地将用户引导至其他视图上。 其次，即使要使用TabBar，Google官方也已经提供了解决方案各式各样的顶部TabBars。而且，顶部TabBar均可以滑动切换，这样就无需担心单手操作性了。 另外对于虚拟键用户来说，使用底部TabBar也会带来双底栏的问题，影响美观性。 所以，在Android上使用底部TabBar是一种毫无必要的行为，不仅不会对单手操作带来任何便利，反而会造成更多的麻烦。 Google很早就谈到了这一点：PureAndroid页面中列出了很多不该做的事情，其中之一就是不要使用底部TabBars。 之前光头哥光头哥和我提到过，因为哔哩哔哩的内容架构极其丰富，于是想把内容的分类筛选在页眉留给用户。即使是这样，采用双TabBars也没有多大必要，可以参考第一点，使用其他方式实现原来底部TabBar的功能，我会在下面提到我是如何去实现这一点的。 首页 对首页的改进是整个Redesign中最重要的一环之一，毕竟这次设计争议最大的就是采用底部TabBar的设计。 我对首页的改进有： 去掉底部TabBar，保留顶部TabB 加入标准AppBar，颜色取自v3。3。0的ActionB 个人信息放入D 关注、发现和游戏整合入发现FloatingActionB 下载、消息（目前似乎客户端未加入消息系统）等按钮单独作为Action放置于AppBar上； 首页项目和Banner采用Cards设计； 如上文所述，我使用了将选项分散的思路，将原先底部TabBar的选项分散到其他模块。下文我会一一讲解。 当用户向上滚动首页列表的时候，AppBar将会自动隐藏，只留下TabBar。 一个小细节：我试着使用了类似GooglePlayStore的滚动Cards布局展示番剧更新项，在最右侧露出Card的一端来提醒用户这一排可以进行滚动。 同时我保留了TabBar的下拉菜单的设计，点击最右边的箭头就可以调出菜单，能直接点击进入Tab项，也能对Tab项进行重排。 个人信息 之前的v3。3。0及更早的版本将个人信息放在最左边的Tab，而最新的v4。0。0将个人信息放在我的Tab。个人认为这个区域完全可以用Drawer替代。 这里的修改不多，主要是以下几点： 个人信息区域加入头图，硬币改为和网页版一致的B图标； 去掉离线任务选项，相应的项目已移动至AppB 设置帮助与反馈放置在单独区域； 之前的各个版本，各个平台的客户端均未加入头图项，所以我在做这个设计的时候也思考了一下要不要加入头图，后面对比了几个版本的解决方案，还是决定加入头图； 发现FAB v4。0。0加入了关注、发现和游戏三个Tab项目。按道理来说，一个放在AppBar上的搜索即可解决问题，但是考虑到游戏等项目的特殊属性需要足够的曝光度等，最终决定将这三项合并为一个发现FloatingActionButton。 如图所示，发现FAB处于屏幕右下方，若用户点击，FAB中的其他项目会自动展开： 为了让游戏排行等项在日常使用时能拥有更高的曝光率，我将常用的搜索等项放入了此FAB。 播放页面 第一步 首先当然是采用了正常的AppBar原来播放界面的AppBar高度并不标准。其次在这个界面我使用了不同的配色方案以标志性的粉色作为底色，字体和图标以白色呈现。同时将点击播放按钮去掉，变成点击封面图即可播放，封面图也进行了适当地放大。最后将原先在视频信息下的Tab转移到上面，所以一共做的改动有： 更换为正常高高度的AppB 将TabBar提上，与AppBar整合； 使用与首页不同的配色方案； 去掉点击播放按钮，和封面图整合； 下载、收藏和分享等项集合至AppB 添加评论FAB； 第二步 做完第一步之后我发现，似乎把那些选项都放在AppBar上并不是很好的选择。于是我试图对着FAB下手，做成了类似首页发现的扩展FAB，如图所示： 于是这一步的改进就是： 下载、收藏和分享等项集合至一个FAB，点击展开； 第三步 然而在思考了一会之后，又觉得放一个FAB在这似乎有些多余。在v3。3。0中，这些选项放置在SplitActionBar上，然而MaterialDesign中已经去掉了SAB。 于是我试图使用QuickReturn模式来放置这些选项，结果个人还是很满意的： 最后对原来居中的视频标题重新调节成偏上，最终成品如下： 第四步 最后一步做的调整有： 改用QuickReturn模式在底端放置选项； 将视频标题由居中修改为偏上； 5。引导页面 每个App在进行设计和交互大改的时候都应该对用户进行引导和提示。微信在5。2上启用AndroidDesign时就吃了这个亏，直接升级的用户并不知道这个版本会对设计大改，结果改完就崩溃了这个新界面到底该怎么用？？？ 所以如果哔哩哔哩需要启用MaterialDesign设计，一定要做一个引导流程让用户知悉新版的变化。 首先是首次启动的引导页，通过强调新版来提示用户。 之后是一个提示界面，用圈点的形式提示用户原来的功能都去了哪里。同时对于Drawer给予适当提示，让用户知道调出Drawer除了点击汉堡包图标还能向右滑动调出。 以上只是随便制作的，非常粗糙的引导页。相信哔哩哔哩的设计师们能想出更好的主意。 后记
