AlgoCasts 2.0, A Brand New Design

目录

前言

经过 9 天的开发，AlgoCasts 2.0 上线了。

9 天有点超出我的预期，这里面有很多时间花在了细节的调优上。比如为了调一个页面 UI， 在我的能力范围内让它好看一些 ，可能会花上半天甚至一天的时间。我记得为了做首页的 header，我尝试了各种各样的方案，参考了许多网站的设计，还花了不少时间研究是否可以用纯 CSS 来做漂亮的曲线。虽然最后没能做出达到我要求的效果而使用了别的方案，但这个过程却学到了不少东西，并且产生了一些有机会可以去践行的新想法。再比如说，一开始为了给一个系列/专题做封面，调研加设计就会花上半天的时间。当然了，虽然花时间，但乐在其中：）

那么 AlgoCasts 2.0 有哪些变化呢？

配色与风格

1.0 没有考虑整体配色的统一，所以你可能会先看到黑白的首页，然后就看到橘黄的按钮，接着又会被由深绿和浅绿构成的套餐卡片和按钮惊呆……

2.0 的主色调改成了紫色（色号：#6e60cc）。这是一个很主观的事情，由于我自己浏览的开发或设计相关的网页中，发现有不少网站的主色调都是紫色，并且看起来还挺舒服的，于是就决定把 2.0 的主色调定为紫色。为了配合这个颜色，我还专门找了紫色的代码高亮主题（为此我把用了多年的 solarized dark 换掉了），这个走位可以说是相当风骚了！

另外一点，2.0 还大量地应用颜色渐变，这样看起来更有层次感。

首页

首页呈现的信息没有大的变化，依次是：header、试看视频、套餐卡片、footer。

header 的背景做了紫色渐变并旋转了 6 度做成倾斜，另外配上一个自己做的不算那么丑的图片，感觉比单纯放文字要好看一些。

试看视频 4 个换了 3 个， 由于原来的试看视频是比较早的时候做的，经常被吐槽板书丑，都以为我是用鼠标在板书 。我没有那么不专业好么，摔！板书我用的是 Wacom 数位板，只是写字丑而已。 不过做了这么多个视频，无论是板书质量还是录音质量，都比一开始要好了。 所以趁着这次改版，把首页试看视频换成了后来做的一些视频，希望这样能减少点认为我用鼠标板书的误会。试看视频的选取也算比较合理，难度覆盖从易到难，不同层级的同学应该都能看到合适自己的视频。

套餐卡片没什么好说的，反正把原来大绿色的卡片换掉了。

footer 没有动，这一块我觉得后面可以再考虑优化一下。 2.0 这次上线其实并没有把所有细节都打磨完，留一些给 3.0 嘛。

系列页面

以后视频都会按系列（series）或专题进行组织，而不是大平表（episodes）。由于一开始录制的都是算法题目视频，所以在前端就一个大平表展示。但现在开始要录算法题目以外的视频，比如专题，比如一门完整的数据结构课程，它们就应该被放在属于自己的一个系列/专题下，而不是和算法题目混在一起。

一个系列/专题就是围绕一个中心来讲知识的。比如 排序 专题，那就全讲排序算法，比如动态规划专题，那就围绕动态规划来讲，从原理到实践。再比如说如果出数据结构课程，那就是讲各种各样的常见或高级数组结构。这样一来，为了把原来的算法题目兼容到这个结构下，我就以 50 个视频为一组放到一个系列里。毕竟不能所有题目都放到一个系列，这样从规模数量上来说是不合理的。一打开算法题目系列，出来几百一千个视频，那就傻眼了。做小系列切分还有利于大家购买，你可以选择先买 50 个，看完觉得讲得不错再买。万一觉得我讲的不好，也不会损失很大。当然我鼓励大家在我没录完的时候买， 因为这个时候是早鸟价，录完后就会恢复原价。

每个系列打开来，是这个系列/专题的描述，以及它包含的视频列表，这里的视频列表的布局参照了 laracasts，而不是像原来那样的大平表。每个系列专题下都有 3 个子 tab：未学/已学/收藏，每个用户可以把学习了的视频标记为已学习，对于喜欢的视频或没看懂想再看的视频可以点击收藏，放到收藏栏。

以后每出一个系列/专题，我都会为它设计一个封面。虽然要多花一些时间，但让网站好看一点我觉得是值得的。

视频列表页

对于奔着面试算法题目来的同学，会希望把所有题目都放在一张大平表，这样可以在一个地方对题目进行管理，比如按标签过滤，按未学/已学/收藏分类。因此，2.0 保留了视频列表页。登录状态下，列表下是以未学/已学/收藏为第一层级的视图，所有视频不分系列/专题都放在一张大平表里。同时在这里，你可以使用 tag 进行过滤。

插播一句，收藏功能是一个小伙子好久以前给我提的小需求，我一直记着，到了 2.0 终于把它做上去了。我往往会把一堆小功能记在 todo 里，集中一次性做了上线。在我录视频的时期，只要不是极大的 Bug 或非上不可的需求，我基本上是不会马上去开发实现这些需求的。

播放页面

视频播放仍然使用的是剧场模式（theater mode）。由于我看 YouTube 一直用的这个模式，所以在做播放页时，很自然地就这么去呈现视频了。在非全屏状态下，这个模式可以呈现更大的画面，并把其他干扰项都移到视频下方。目前的播放页面上几乎都是和当前视频相关的信息，以后打算加入更多的便捷链接， 比如一个系列/专题下其他视频的链接或相似视频的链接 ，这样就不用回到上一层级去找视频看了。

我的页面

同样是把原来展示已购视频的大平表去掉了，改成了购买的系列或专题。上面也提到了，如果不喜欢这个层级，还是想看大平表也没问题，这些都保留在「视频」这个 tab 下。

FAQ 页面

没变。

结束语

AlgoCasts 2.0 刚上线，除了我自己记录在 nice to have 里还没做的功能，大家如果有什么建议和意见，也欢迎 po 到论坛上（论坛直接用 AlgoCasts 账号登录即可），我开了个帖子来收集：

AlgoCasts 2.0 建议收集

接下来又要进入新的一个视频制作时期了，希望一切顺利。

声明： 自由转载-非商用-非衍生-保持署名 | 创意共享3.0许可证 ，转载请注明作者及出处