【原型设计】——重构bilibili客户端

前言

哔哩哔哩动画是中国大陆的一家弹幕视频网站,在中国二次元用户中颇受欢迎。

哔哩哔哩动画之前推出过采用 Android Design 的 Android 客户端,虽然有使用了部分过时控件(例如 Scrollable Tabs)之类的问题,但整体素质依旧较高,受到 Android 用户的广泛好评。而在 6 月初的 3.9 及 4.0 更新后,哔哩哔哩抛弃了过去的 Android Design 转而使用了 iOS 风格的设计,如图所示:

左为 v3.3.0,右为v4.0.0

此次更新在用户中的争议颇大,部分用户反对此次改版,认为新版哔哩哔哩动画客户端失去了原有的 Android 风格,令人失望。

个人认为哔哩哔哩的情况比较特殊:原来进行过 Redesign 的应用有一开始就是 iOS 风格的,也有采用 Android Design 风格,但并不完美的。对哔哩哔哩这种原来是 Android Design 风格,但后期转换为 iOS 风格的 App 进行 Redesign 是一件很有挑战性的事情。于是在对新版进行了一段时间的体验之后,我开始利用新版的特性和部分交互逻辑对哔哩哔哩动画进行基于 Material Design 的 Redesign 尝试。

在微博上发布了几张预告效果图之后,我意外地收到了认证资料为“bilibili副总裁”的微博用户 @光头哥光头哥 的私信。因为在私信里这位微博用户对一些问题进行了询问,加上设计师在知乎上对于这次设计风格改变的解释,我认为哔哩哔哩本身是想采用 Material Design 的,然而对于 Material Design 本身并不是十分了解,因此才会采用 iOS 的设计风格。

我个人对哔哩哔哩的态度感到很欣慰,希望能在以后拿出更好的设计。

我也希望我的这篇文章能够起到一些帮助。

对底部 Tab Bar 说 No

在文章开始之前,我想先回答之前 @光头哥光头哥 在私信中提出的一个问题:为什么安卓用户对底部 toolsbar 这么介意?

首先要纠正一个用词错误:用于切换不同页面的 Bar 叫 Tab Bar,而不是 Tools Bar.这点在 Apple 官方的 iOS 7 UI Transition Guide 中也有提到。

Apple 官方对于 iOS Tab Bar 的解释

那么纠正完用词错误,接下来就要回答这个问题了:为何 Android 上最好不要出现底部 Tab Bar 呢?

首先,Android 提供了更多样的交互方式,例如 Drawer,Floating Action Button 等。活用这些交互方式可以灵活地将用户引导至其他视图上。

其次,即使要使用 Tab Bar ,Google 官方也已经提供了解决方案——各式各样的顶部 Tab Bars.而且,顶部 Tab Bar 均可以滑动切换,这样就无需担心单手操作性了。

Tabs!

另外对于虚拟键用户来说,使用底部 Tab Bar 也会带来“双底栏”的问题,影响美观性。

(并不是针对HTC)

所以,在 Android 上使用底部 Tab Bar 是一种毫无必要的行为,不仅不会对单手操作带来任何便利,反而会造成更多的麻烦。

Google 很早就谈到了这一点:Pure Android 页面中列出了很多“不该做”的事情,其中之一就是“不要使用底部 Tab Bars”。

“不要使用底部 Tab Bars”

之前 @光头哥光头哥 和我提到过,因为哔哩哔哩的内容架构极其丰富,于是想把内容的分类筛选在页眉留给用户。即使是这样,采用双 Tab Bars 也没有多大必要,可以参考第一点,使用其他方式实现原来底部 Tab Bar 的功能,我会在下面提到我是如何去实现这一点的。

1.首页

对首页的改进是整个 Redesign 中最重要的一环之一,毕竟这次设计争议最大的就是采用底部 Tab Bar 的设计。

我对首页的改进有:

去掉底部 Tab Bar,保留顶部 Tab Bar

加入标准 App Bar,颜色取自 v3.3.0 的 Action Bar

个人信息放入 Drawer

“关注”、“发现”和“游戏”整合入“发现” Floating Action Button

下载、消息(目前似乎客户端未加入消息系统)等按钮单独作为 Action 放置于 App Bar 上

首页项目和 Banner 采用 Cards 设计

如上文所述,我使用了将选项分散的思路,将原先底部 Tab Bar 的选项分散到其他模块。下文我会一一讲解。

当用户向上滚动首页列表的时候,App Bar 将会自动隐藏,只留下 Tab Bar 。

一个小细节:我试着使用了类似 Google Play Store 的滚动 Cards 布局展示“番剧更新”项,在最右侧露出 Card 的一端来提醒用户这一排可以进行滚动。

同时我保留了 Tab Bar 的下拉菜单的设计,点击最右边的箭头就可以调出菜单,能直接点击进入 Tab 项,也能对 Tab 项进行重排。

2.个人信息

之前的 v3.3.0 及更早的版本将个人信息放在最左边的 Tab ,而最新的 v4.0.0 将个人信息放在“我的” Tab。个人认为这个区域完全可以用 Drawer 替代。

这里的修改不多,主要是以下几点:

个人信息区域加入头图,硬币改为和网页版一致的“B”图标

去掉“离线任务选项”,相应的项目已移动至 App Bar

“设置”“帮助与反馈”放置在单独区域

之前的各个版本,各个平台的客户端均未加入头图项,所以我在做这个设计的时候也思考了一下要不要加入头图,后面对比了几个版本的解决方案,还是决定加入头图。

3.“发现” FAB

v4.0.0 加入了“关注”、“发现”和“游戏”三个 Tab 项目。按道理来说,一个放在 App Bar 上的搜索即可解决问题,但是考虑到“游戏”等项目的特殊属性需要足够的曝光度等,最终决定将这三项合并为一个 “发现” Floating Action Button.

如图所示,“发现” FAB 处于屏幕右下方,若用户点击,FAB 中的其他项目会自动展开:

为了让“游戏”“排行”等项在日常使用时能拥有更高的曝光率,我将常用的“搜索”等项放入了此 FAB 。

4.播放页面

第一步

首先当然是采用了“正常”的 App Bar——原来播放界面的 App Bar 高度并不标准。其次在这个界面我使用了不同的配色方案——以标志性的粉色作为底色,字体和图标以白色呈现。同时将“点击播放”按钮去掉,变成点击封面图即可播放,封面图也进行了适当地放大。最后将原先在视频信息下的 Tab 转移到上面,所以一共做的改动有:

更换为正常高高度的 App Bar

将 Tab Bar 提上,与 App Bar 整合

使用与首页不同的配色方案

去掉“点击播放”按钮,和封面图整合

下载、收藏和分享等项集合至 App Bar

添加“评论” FAB

第二步

做完第一步之后我发现,似乎把那些选项都放在 App Bar 上并不是很好的选择。于是我试图对着 FAB 下手,做成了类似首页“发现”的扩展 FAB,如图所示:

于是这一步的改进就是:

下载、收藏和分享等项集合至一个 FAB,点击展开

第三步

然而在思考了一会之后,又觉得放一个 FAB 在这似乎有些多余。在 v3.3.0 中,这些选项放置在 Split Action Bar 上,然而 Material Design 中已经去掉了 SAB 。

于是我试图使用 Quick Return 模式来放置这些选项,结果个人还是很满意的:

最后对原来居中的视频标题重新调节成偏上,最终成品如下:

最后一步做的调整有:

改用 Quick Return 模式在底端放置选项

将视频标题由居中修改为偏上

5.引导页面

每个 App 在进行设计和交互大改的时候都应该对用户进行引导和提示。微信在 5.2 上启用 Android Design 时就吃了这个亏,直接升级的用户并不知道这个版本会对设计大改,结果改完就崩溃了——这个新界面到底该怎么用???

所以如果哔哩哔哩需要启用 Material Design 设计,一定要做一个引导流程让用户知悉新版的变化。

首先是首次启动的引导页,通过强调“新版”来提示用户。

之后是一个提示界面,用圈点的形式提示用户原来的功能都去了哪里。同时对于 Drawer 给予适当提示,让用户知道调出 Drawer 除了点击汉堡包图标还能向右滑动调出。

以上只是随便制作的,非常粗糙的引导页。相信哔哩哔哩的设计师们能想出更好的主意。

后记

制作这次的 Redesign 是一次充满挑战的历程,哔哩哔哩官方已经放话了,正在研究 Material Design。那么就让我们期待一个更好的哔哩哔哩客户端吧~

( ゜- ゜)つロ 乾杯~

时间: 2024-11-05 09:50:11

【原型设计】——重构bilibili客户端的相关文章

如何通过“重用”提高原型设计的工作效率

随着信息时代的发展,各种类型的软件.app.网页井喷似的涌现.每天新上线的产品不计其数.互联网产品飞速的迭代和更新不仅仅对程序员程序施加了很大的压力,对设计师来说,也是巨大的挑战.那么,如何在设计的过程中提高效率? 重用,也就是"反复使用",它从来都是提高效率方法中的典范.在代码编写的过程中,重用是很重要的一部分.这种方法同样可以运用到原型设计的过程中.今天我们就来说一下,原型设计过程中的"重用". 首先,重用有哪些好处? 软件工程师的一个目标就是通过重复使用代码来

全球化流程中原型设计的加分项

信息技术行业随着全球化的发展不断的状大,软件开发现在也越来越显示出全球化的趋势.前有Tubik Studio这种设计公司,后有Dribbble.Benhance上的Freelancer.地球村在信息时代中形成,同样也影响着信息时代.有不少的软件开发商正在给外国人设计开发软件.那么在全球化的工作过程中,做好哪些事情可以给自己的原型设计加分呢? 1. 显示语言 如果一个美国客户没有明确说明产品用户为中国人时,请不要在你的设计中写满汉字.可能有一些同学会问了,软件之后不是还要做本地化的么?相信我,软件

Android--五款国外APP原型设计工具的优缺点对比

1.Proto.io 基于Web界面,带有IOS和安卓下的调试器 Proto.io这个web应用强大得令人吃惊,它有很多很多的功能.不过,因为所有工作都是依靠拖放.点击按钮和选择列表的值,有时候想找到需要的设定会让人有点儿不知所措. 鉴于IF原型的本质特点——不同的对象以不同的速度移动——我不得不增加一些自定义的JavaScript计算脚本.Proto.io提供的单行文本框对于冗长的计算脚本来说太小了.为了能够概览脚本,我得把它们保存在我电脑上的文本文件里.特别需要注意是,这些JavaScrip

分享比较热门的原型设计工具

交互设计师的一项重要工作就是进行产品原型设计(Prototype Design).而产品原型设计最基础的工作,就是画出站点的大体wireframe(框架图)并结合批注.大量的说明以及流程图等,将自己的产品原型完整而准确的表述给产品.UI.重构/开发工程师等等,并通过沟通反复修改prototype 直至最终确认,然后进入后续的设计开发流程. 要完成以上复杂的设计和沟通工作,需要一个好的原型设计工具.这里就目前常用的和比较热门的工具来分享一下:Word(产品经理比较常用)Fireworks(交互组内

常用快速原型设计工具大比拼、原型设计工具哪个好用

原型设计是交互设计师与PD.PM.网站开发工程师沟通的最好工具.而该块的设计在原则上必须是交互设计师的产物,交互设计以用户为中心的理念会贯穿整个产品.利用交互设计师专业的眼光与经验直接导至该产品的可用性. 简单说,“原型”是在项目前期阶段的重要设计步骤,主要以发现新想法和检验设计为目的,重点在于直观体现产品主要界面风格以及结构.并展示主要功能模块以及之间相互关系,不断确认模糊部分,为后期的视觉设计和代码编写提供准确的产品信息. 目的: 下列角色使用用户界面原型: 用例阐释者,用来了解用例的用户界

谁在撼动Axure在原型设计领域的霸主地位?

目前活跃在国外的原型设计工具不胜枚举:Pidoco.UXPIN.Proto.io 6.InVision等等,令人眼花缭乱.曾几何时,Axure一枝独秀,可以说是占据了无法撼动的地位.然而时过境迁,现在的国内市场上有哪些常用的原型设计工具?它们在中国用户心中的表现又是如何呢? 总的来说,国内比较常见的四种桌面客户端形式的原型设计工具分别是:Axure RP.Balsamiq.Mockplus和Justinmind.这四款工具可以说是占据了国内原型设计工具市场的相当一部分的份额.今天,笔者借用"创新

原型设计20条军规

第一条:原型设计的最终目的是为了准确.方便.快捷的表达产品设计人员的产品设计意图: 第二条:原型的观看者往往不是同一类对象,因此原型的设计不可避免的会有多种表现形态,每一种形态的原型都是为设计服务,没有高低之分: 第三条:如果按照产出方式,有手绘产出.软件产出之分,如果按照表现形式,有纸质.低保真.高保真之分: 第四条:如果你的产品设计周期中,原型设计时间过长,可能你需要停一下,站得远些重新审视一下自己原型设计的初衷: 第五条:原型是否要做到高交互.高仿真取决于观看者的需求和设计者的时间,如果简

结队项目--需求分析与原型设计

结对者:031402324 巫振格 031402338 解宇虹 pdf文件:http://files.cnblogs.com/files/gzwu/作业.pdf 工具:Axure Up 8.0 烦恼:1.过程繁琐,数据信息多级传递,费时费力,过程不透明2.大部分学生与老师都只能被动分配,难有自由选择3.学生无法与老师沟通,难以清楚的了解到导师的研究方向与项目,也为之后毕设埋下隐患4.难以时时了解到选每个导师的学生数,可能导致学生扎堆选某一个老师,而有的导师却少有人问津5.每个导师对于期望的学生数

原型设计20条军规(转)

<原型设计20条军规> 第一条:原型设计的最终目的是为了准确.方便.快捷的表达产品设计人员的产品设计意图: 第二条:原型的观看者往往不是同一类对象,因此原型的设计不可避免的会有多种表现形态,每一种形态的原型都是为设计服务,没有高低之分: 第三条:如果按照产出方式,有手绘产出.软件产出之分,如果按照表现形式,有纸质.低保真.高保真之分: 第四条:如果你的产品设计周期中,原型设计时间过长,可能你需要停一下,站得远些重新审视一下自己原型设计的初衷: 第五条:原型是否要做到高交互.高仿真取决于观看者的