Matrix 精选

Matrix 是少数派的写作社区,我们主张分享真实的产品体验,有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章,展示来自用户的最真实的体验和观点。

文章代表作者个人观点,少数派仅对标题和排版略作修改。


前言

感谢我的好队友 Brian 和 Jun 在文章撰写过程中提供技术支持。

一觉醒来,账户上多了 5000 美金的余额

「财务自由」是近年来很火的一个概念,由此也衍生出了不少派生词,如「车厘子自由」「蛋糕自由」等等。无论是哪种自由,都代表了我们的向往和追求。

7 月的某天早晨,我打开 Airtable 准备记录自己的健身计划时,突然发现账上多了 5000 刀的余额。

我之前一直使用的是免费版,因为高级版 20 刀每月的昂贵价格实在让我承担不起。而现在,5000 刀的余额足够我用上二十年的高级会员了(当然 Airtable 二十年之后是否存在都是个未知数)。我一脸懵逼的同时也兴奋不已,因为我终于实现了「Airtable 自由」。

最高级别的会员需要 20 美元一个月!

Airtable 和 Airtable Blocks 是什么?

打个不太准确的比方,Airtable 是一个为更美观、更易用且位于云端的 Excel。借助于云服务和强大的拓展能力,Airtable 能做的不只是简简单单的数据统计。我开始使用 Airtable 是读了子不语大大的这篇文章:重新想像 Excel 该有的样子:Airtable 评测,而本站也有不少关于如何使用 Airtable 提高效率的好文,如 每周只需 5 分钟,我用 Airtable 轻松记录收入与支出Airtable + Workflow | 打造你专属的「豆瓣阅读」 等等,感兴趣的小伙伴可以去详细了解。

Airtable 于 2018 年 3 月 隆重推出 了 Blocks 功能,进一步拓宽了使用场景。你可以把 Blocks 理解为 Airtable 的「插件」,它赋予了 Airtable 无限的可能性——你可以将冷冰冰的数据一键可视化,也可以对特定表格进行数据分析,还可以发送短信、视频聊天等等。我甚至看到有人分享自己将 Airtable 作为自己网站后端数据库的经验。

官方 Blocks 模板库

Airtable Blocks 竞赛

自从上线以来,Blocks 功能一直不温不火。而今年,Airtable 显然意识到了生态圈重要性,因此举办了这次 Airtable Blocks 编程马拉松,希望吸引更多的开发者,一起来构建和维护 Airtable 自己的生态系统。

比赛总共分为三个赛道:商业(Business)、非盈利(Non-profit)和自由主题(Wildcard),不同赛道有相应的要求和评分侧重,其中商业赛道的奖金最为丰厚。这也不难理解,毕竟 Airtable 的客户大多为商业公司。不过这次比赛,Airtable 在评分标准中也特意强调的创意的重要性,意在挖掘出 Blocks 更多的使用场景和潜力。

选题和构思

研究 SDK

商业赛道的竞争最为激烈,对于技术方面的要求也最高。思前想后,我们最后选择了自由主题赛道。一是我们的技术水平不高,其次是我们也希望更为自由地表达创意和想法。

我们首先对 Airtable 的 Blocks SDK 进行了一次摸底,想看看它到底能做些什么,毕竟再天花乱坠的想法也要受到技术条件的约束。也许是刚刚开放,还在不断优化中的缘故,Blocks SDK 并没有特别花哨的功能,但是对于表格内数据的访问、操纵方面进行了深度优化,使得表格和 Blocks 间的双向沟通变得更加方便。

切入点

技术层面的调研结束后,接下来就是在这个范围内尽可能地想出好点子。几轮头脑风暴后,我们决定从「团队协作」这个角度进行切入。一来是 Airtable 与传统的 Excel 相比,最大的优势之一就是无缝而流畅的多人实时协作;其次则是疫情的大环境下,远程办公和协同变得越来越重要。确立好切入点后,下一个问题则是该采用什么样的表现形式。

团队内的韩裔小哥 Jun 一直是 「游戏化」 这个概念的倡导者,虽然目前游戏化的产品都不温不火,但他坚信随着技术进步,《一号玩家》中的场景最终会变成现实。他提出,我们可以借用通过增加交互性和游戏性的方式,让 Airtable 内的多人协作,变得更加沉浸和有趣。

沉浸式的办公协同体验

基于 Jun 的启发,我们决定实现两方面的功能:一是团队成员间的沟通,我们决定采用游戏聊天室的方式来使其变得更加好玩;二是对于数据的操作,将冷冰冰的数据视觉化,使得成员可以用更有趣的方式与其进行交互。

我们最终的讨论结果是构建一个虚拟聊天室,每个人可以选择自己的卡通角色,在聊天室内走动、聊天,并对聊天室内的数据(映射表格内的数据)进行修改。

撸起袖子开始干

界面

作为设计师的我,主要负责界面和视觉素材。我们仨都特别喜欢像素风的游戏,因此我们采用了大色块和粗轮廓的风格。囿于编程马拉松的时间所限,我们采用了不少的开源素材来构建虚拟的聊天室。

开始界面
聊天室界面

其中关于角色的设定还有一个小插曲。在美国,你可以通过一个人的姓名来判断其所属的族裔。由于我们团队由两个亚裔和我一个中国人组成,亚裔小伙伴在某次开会的时候还认真地提出是否应该创建几个虚拟的其他族裔的队友,来增加我们团队的多样性。虽然最后没有这么做,我们还是决定在可选的角色中,保持一定的多样性。

技术

大部分的编程工作由我的队友 Brian 和 Jun 负责。3D 世界固然体验更好,但是需要花时间建模而且对性能的要求也更高,因此我们决定还是构建一个 2D 世界。由于涉及大量的数据处理,D3.js 成了我们的首选。

在聊天室中,玩家可以自由移动和聊天,每一句话都会按照时间顺序存储在 Airtable 表格内。

一开始,所有的计算都由服务器来处理,这就造成了许多人同时移动和说话时的卡顿问题。我们后来把一部分的计算交给客户端,减少部分的卡顿。不过由于这部分的优化占用了我们不少的时间,之前将数据可视化的功能没能顺利完成。

成品

最终的成品如下:

玩家选择一个角色之后,可以进入聊天室和队友打字聊天。左边是聊天历史记录,右上角是在线的队友头像和时间。如果你想退出或者切换角色,可以点击右下角的红色按钮。

我们在 Q&A 环节测试了 6 个人(一个小型规模的产品团队)同时进行移动和打字,整个过程还是十分流畅的。

遗憾

我们的作品老实来讲,并不是特别让人满意,尤其是第二个数据可视化的功能没能在规定时间内完成。如果有机会,我们会在下面几个方面进行优化:

  • 更加好看的 UI
  • 更多的可选角色
  • 多位角色同时移动时的优化
  • 增加数据可视化

奖品

由于在完成度上有所欠缺,我们的作品没有得奖,但是获得了优秀作品的鼓励称号。结果宣布后,官方很快发来邮件登记了我们的地址寄送奖品。

由于我们获得的是「重在参与」奖,奖品没有现金,而是 Airtable 周边和 5000 美元的账户额度。周边还挺丰富的,包括一件非常舒服的印有 Airtable 标志的 T 恤、一个环保袋、一只圆珠笔、一双袜子和若干贴纸。

后记

说来惭愧,这其实是我首次编程马拉松。与很多初高中就开始参加编程比赛的大神相比,我起步可以说是相当晚了。这次比赛除了让我感受到编程马拉松的魅力之外,还让我感叹于无处不在的大神们。

和我们不同,很多参赛选手都是一个人的团队,一手包办产品、设计和编程,而且能同时保证 UI 的美观和代码的简洁。也许以后全栈工程师、全栈设计师会是大势所趋,以往技能单一而不精的设计师和程序员会越来越难以体现自我的价值。

写完这篇文章,身为设计师的我,默默打开 Visual Studio Code,继续着我痛并快乐着的编程之旅。

> 下载少数派 客户端、关注 少数派公众号 ,发现更多有趣的新玩意 🎮

> 特惠、好用的硬件产品,尽在 少数派sspai官方店铺 🛒