Dropbox Brand

Dropbox 这时刚刚更新了品牌，而旧的品牌手册站已经跟不上。Dropbox 的副创意总监 Theresa Ma 在 Webflow 的客户案例里说，旧站僵硬、难以更新，也很少有人去查。Daybreak 的工程师 Kiran Patel 在 Communication Arts 上说得更直接，旧站已经没有人使用和维护，内容密集，也显得过时。旧站依赖开发者才能改内容，设计师和文案自己动不了。

团队这次给新站定了两个任务，一是讲清这个品牌和它的来由，二是做一份真的用得上的工作资料。Theresa Ma 在 Rive 的博客上解释了转变，过去的手册站偏重功能，这次要讲故事，让人体验品牌，而不只是读到品牌。这个站主要写给 Dropbox 之外的人，比如合作方和代理公司，所以它要先吸引人，再让人留下来查。Kiran Patel 把它称为一个互动的视觉游乐场，并说目录要像一只玩具箱，每个方块都是其中的一件玩具。Dropbox 的品牌设计师 Mike Chiu 说，公司内部没有把这个站做到最好的技能，所以请来了 Webflow 的合作伙伴 Daybreak。Webflow 的案例写到，新站平均每页有十个互动部件，而过去只有三个。

访客打开首页时，先看到一个大白方格，蓝色的 Dropbox 标志一笔一笔画出来，旁边写着这份手册的用途。访客往下滚动三屏，白方格变成蓝方格，再缩成一个小方块，八个彩色方块从四周合拢，组成目录。八个章节依次是 Framework、Voice & Tone、Logo、Typography、Iconography、Color、Imagery 和 Motion，每个方块上画着这一章的主题，比如 Typography 是一个大大的 Aa，Motion 是一条缓动曲线。

每一章都是一条独立的长页面，长度从四屏多到十屏多不等，顺序大致相同，先用一句话讲这件事的道理，再给规格，最后用真实的产品和广告画面展示它怎么用。所以这个站可以从头读，也可以只查一页。讲规范的章节里藏着很多可以玩的小工具，Kiran Patel 说它们大多不是讲故事所必需的，团队留给访客自己去发现。Framework 的第一屏可以用马克笔涂画，Voice & Tone 有一个按钮，点一下就逐词写出一条符合品牌语气的文案，Iconography 的开头可以一个个新建文件夹。章节页的左下角还有一个 Partner Info 按钮，打开后是给合作方的资料和这个站的署名。

这个站的视觉规矩是一张铺满全站的细线网格。首页、章节页和 404 页都能看到这些淡蓝色的线，内容总是对齐在网格的格子里。Kiran Patel 说这种搭好脚手架的感觉，代表 Dropbox 整齐的品牌体系。网格让访客觉得内容有条理，也让一个工具、一张图和一段文字可以放在同样大小的格子里，互相替换。

颜色的规矩是白底和近黑底交替，鲜艳的颜色放在方块里。Dropbox Blue #0061FE 贯穿每一页，它用在左侧的导航按钮和首页的蓝色方块上。Color 页把品牌色分成三类，核心色是 Dropbox Blue、Coconut #F7F5F2 和 Graphite #1E1919，另有十六种强调色和二十级灰阶，强调色里有 Crimson、Tangerine、Lime 和 Orchid 这样的名字。这样的调色板非常鲜艳，但方块的边缘都是直角，并且都落在网格里，所以画面不会散。

字体是这个站的主角。标题用 Dropbox 定制的 DB Sharp Grotesk，这是 Sharp Type 为 Dropbox 做的一款可变字体，字重、字宽和斜体都能连续调节。正文用 Atlas Grotesk，小标签用 Noto Sans Mono，这款等宽字体让标注读起来像工程图上的说明。Typography 页把这款可变字体的能力做成了九块颜色不同的字块，同一款字在这里能窄得像压缩过的海报字，也能宽得像招牌。

这个站的界面部件保持安静，把注意力留给内容。章节页的左侧中间固定着一个蓝色小方块，点开后整张目录重新铺满屏幕。目录的方块在光标移上去时变成纯黑，图形变成细线，这个状态让访客知道自己选中的是哪一块。按钮和控件都是白色的小圆角卡片，看起来像 Dropbox 产品里的界面。

到了手机上，目录重新排成两列，八个方块变成更高的比例，导航按钮移到屏幕下方，网格和颜色规矩不变。字体工具在手机上换了一套字号，Iconography 和 Imagery 的动画也另外准备了手机版。

首页的滚动是全站最主要的动作。访客一开始滚动，白方格就切换成蓝色的方格，这个变化用 0.6 秒自己播完。之后的一切都跟着滚动位置走。蓝方格一路缩小到一个小按钮，同时，八个放大一倍的色块从四面八方飞进来，缩到正常大小，最后拼在一起。色块的运动曲线前期很慢，后期很快，所以访客在前半段只看到蓝方格，在快到底时才看到色块猛地合拢。页面在接近底部时还会自动吸到底，色块在这时才可以点击。

方块的回应很快，也很统一。光标移到一块上时，底色在约 0.35 秒内变成黑色，图形换成细线的版本，先快后慢地到位。每块还有自己的小动作，比如 Imagery 方块里的太阳和月亮会转半圈，把画面从白天换到夜晚。点击方块时，这一块放大铺满屏幕，0.6 秒后才真正跳转到新页面，访客感觉自己走进了这一块。屏幕宽度在 991 像素以内，或者访客打开了减少动态效果时，网站会跳过这段放大。

章节里的动画多数是在演示这一章的内容。Color 页的大字一开始只有描边，随滚动一个字母一个字母地填上颜色，背景同时在深绿、深棕和深紫之间切换，所以这句话本身就在展示调色板。Motion 页的标题也按字母出现，下方的时间轴跟着滚动移动，访客看到的等于一段被拆开的动画时间线，旁边的滑块还可以缩放时间轴。

可以动手的工具都把一条规范变成了一次操作。Motion 页第一屏的曲线有两个控制点，访客拖动其中一个，旁边的 cubic-bezier 数值马上更新，一架橙色的纸飞机随后按新的曲线飞过屏幕，慢起快收的差别一眼就看得出来。Iconography 页有三排图标，一进入视野就像老虎机一样飞快转动，四秒内减速到正常速度，三排的速度还略有不同。Voice & Tone 页的 Generate options 按钮逐词打出一句新文案，词与词之间的间隔是随机的，看起来像有人在打字。

页面的结尾用一个小动作把访客送回目录。访客滚到页面底部后继续滚动，目录就会被拉出来，这样读完一章不用回头找入口。Partner Info 面板里的署名也有一个小动作，光标移到署名上时，十个写着团队成员名字的光标标签会以最多 0.25 秒的随机延迟出现，位置每次都不一样，看起来像很多人在同一份文件里协作。这个站的 404 页也保留了同一种趣味，目录的方块散落在屏幕下方，旁边写着找不到页面，上面有一个带访客回首页的按钮。

这个站建在 Webflow 上，但大部分效果都是手写的原生 CSS 和 JavaScript。Kiran Patel 在 Communication Arts 上说，这里没有 CMS，也没有框架，只有 vanilla 代码，Rive 用在老虎机和几页结尾的部件上。页面里没有 GSAP，也没有平滑滚动库，每个章节把自己的脚本内嵌在 HTML 里。这样做的好处是每一页只带自己要用的代码。

首页的滚动动画只用了一张表和一条缓动曲线。八个方块各有一对系数，比如 Framework 是 4 和 2，Logo 是 -1 和 -0.1，系数决定它从哪个方向、从多远的地方飞来。脚本把滚动进度过一条 cubic-bezier(1, 0.25, 0.85, 1) 的曲线，再算出每块的位移和 2 到 1 的缩放。这个曲线前段几乎不动，所以方块集中在最后才合拢。

蓝方格则是一个三段状态机，前两段用 CSS 过渡切换，第三段的尺寸直接由滚动进度算出。网格线因为跟着方块一起缩放，脚本用 1 除以缩放值反向补偿，线的粗细才保持不变。手机使用另一张系数表。

字体工具里的随机按钮是全站最精巧的一段代码。这个按钮要给每个词随机分配字重、字宽和斜体，但每一行的总宽度又要刚好填满方块。脚本先随机取值，再把所有字宽乘上同一个系数，用一个隐藏的 span 量出这一行的实际宽度，然后二分查找这个系数，最多 12 次，误差在 2 像素以内就停。字符成对的括号和引号还会被强制用同一种斜体。可变字体的三个轴直接写进 font-variation-settings，所以这些变化全部是真实的文字，不是图片。

Rive 负责需要状态的矢量动画。Logo 页就是一个例子，页面在半屏到五屏之间打开了 CSS 的强制吸附滚动，每滚动一屏就吸到一节，脚本再点击一个隐藏的触发元素，让 Rive 动画切到这一节的状态，依次讲解完整的标志和单独的图形。这个做法把 Webflow 的触发器当作 Rive 状态机的遥控器，页面脚本只需要知道现在滚到第几节。

这些内容的体积在不同页面上差得很远。首页大约 3.8 MB，其中最大的是 1.8 MB 的 TTF 可变字体，它没有压缩成 WOFF2，这是全站最容易省下的一块。Imagery 页最重，约 27.8 MB，其中两个 Rive 文件占了 16 MB，一个 9.5 MB 给电脑，一个 6.8 MB 给手机。电脑上两个文件都会下载，访客白白多下了手机版那一份。

首页打开很快，首次绘制约 0.2 秒，但加载过程中目录方块的位置跳了一下，画面的跳动比较明显。开场时页面先锁住滚动约 1.8 秒，等网格线和标志画完。方块放大之后是一次真实的页面跳转，这个站不是单页应用，所以每次进入章节都要重新加载脚本。

这个站认真照顾了对动画敏感的访客。多处动画读取了减少动态效果的设置，老虎机图标在这个设置下直接不转，页面切换的放大也被跳过。键盘访客可以用 Esc 关闭目录，目录关闭时里面的链接也会退出焦点顺序。首页的结构比较薄弱，页面没有一级标题，第一下 Tab 还会落到 cookie 框里。

Dropbox Brand 的四个分项相当接近，Content 最高，Usability 最低。Content 高和这个站的特点一致，它是一份真的能查的品牌资料，规范和工具都有实际内容。Usability 略低，可能和章节页的导航入口只是侧边一个小按钮有关，访客要滚动到底部或者找到这个按钮才能换章节。开发评委给了 7.8 分，其中 Responsive 最高，为 8.6，手机上的目录和动画都单独做过。Semantics 和 Accessibility 最低，都是 7，这和页面缺少一级标题相符。

战绩是截至 2026 年 11 月 7 日的累计数。这是 Dropbox 内部团队和外部工作室的合作，Dropbox 的 Brand Studio 负责品牌方向和内容，Webflow 的客户案例写明，Daybreak 负责技术实现，并把交互做了出来。Dropbox 这边的署名者包括 Theresa Ma、Bijan Rafie-Tari、Mike Chiu 和 Otis Rubottom，这些名字只出现在站点的结尾署名里。