aDrive 阿里云盘

Jan 07, 2022

从零搭建阿里云盘设计系统，并参与其长期维护，支撑全端设计语言统一与设计组件复用。参与首页、各版本导航结构与启动器框架，以及影音播放器等业务设计；同时开发或协作开发设计系统文档工具 ADS 客户端与 Figma design token 导出工具。

Teambition 网盘

Teambition 网盘是阿里云盘的前身。前期为了快速搭建并验证方向，我们选择在 Teambition 主产品内「生长」：底层天然具备协作能力，无论面向企业还是个人，都比从零起步更省力。设计侧同样如此，直接沿用成熟的 Clarity design，也无需再搭一套全新的设计系统。

首页、传输列表、相册分享菜单

文件预览、文件预览讨论圈点、视频弹幕圈点（概念）

在获得外界与集团内部认可之后，我们决定把它做成独立的客户端，并争取到更充裕的研发资源；资源到位之后，也就有条件从零建立一套新的设计系统。

ADS 有两个驱动核心：一是设计目标，二是业务目标。我们刻意不把二者混为一谈——业务诉求本身并不会自动指向更好的用户体验。持续迭代、不断补全的设计目标，才是拉升体验的主轴；业务目标则负责在收益与体验之间拿捏分寸，避免过度设计。

好的工作流能够显著提高团队效率；相较某些偏形而上的设计方法，它对组织而言往往更落地、也更容易推广。设计系统本质上就是设计、产品、工程有机融合的一条工作流，Figma 等工具协作可以帮助完成约 60% 的工作，其余部分要靠管理机制与各相关方达成共识来补齐。

ADS 客户端基于 Gatsby 与 Electron 开发，用于承载设计系统文档、组件演示与设计资源整合。对仅有 Figma 查看权限的同学，它还能把多条设计稿链接拼成一张「设计地图」。在团队语境里，大家默认：凡与云盘设计相关的内容，都会在 ADS 客户端里找到对应落点。

Fridge 也被纳入阿里云盘项目，用于把更完整的色板与 icon 实时同步给使用者。

Figma Time Line 是我们借助 Figma 的 Auto Layout「搭」出来的排期看板，全组的工作日程都通过它来对齐。

阿里云盘在上线初期收获好评之后，为了在行业内做出差异化、参与竞争，团队探索了以「场景」为核心的个人云：用户不仅能把数字资产放进云盘，还能按不同使用场景在云盘内完成消费，而不必反复跳转到其他应用，从而形成「存—用」一体的个人数字资产闭环。

滑动导航与启动器

滑动导航是一次有趣的探索：我们希望单一导航栏仍能完整呈现「个人云」的能力版图，又不能牺牲可用性。这一方案在设计冲刺阶段我曾持保留态度，但在原型与可用性测试之后我改变了看法；我接手了与滑动导航相关的全部设计工作，并最终推动上线——日后有机会可以再单独展开当时的推演与取舍。

多功能菜单、分享菜单

多功能菜单既贴合当代产品的操作习惯，又比层层模态与二级页面更轻、更快；相较传统的 Action sheet，它在布局与信息密度上也更自由。这也是许多优质 iOS 与 Android 应用正在采用的设计趋势之一。

音频播放器、视频播放器、放映室

占位符

高度统一的桌面端

最后，在阿里云盘与 Teambition 的这段经历非常充实：不仅让我的设计能力有了明显提升，也结识了许多一路互相促进的伙伴。