什么是 Linear 设计风格？

Matrix 首页推荐

Matrix 是少数派的写作社区，我们主张分享真实的产品体验，有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章，展示来自用户的最真实的体验和观点。
文章代表作者个人观点，少数派仅对标题和排版略作修改。

编注：Linear 软件公司是一家提供项目管理和协作工具的公司，它的产品旨在帮助团队更高效地协作，跟踪任务和进度，从而实现项目的顺利进行。但在本文中，Linear 往往指代的是一种设计风格，这是一种风格简洁、直观、以用户体验优先的设计。

什么是 Linear 设计风格？

这是指一种在大面积暗色背景下，使用渐变、模糊、动态流光、极细描边、微噪点、外发光以及庄重的无衬线字体，外加流畅克制的微动效来组织和修饰界面元素的网页设计风格。

其独特又神秘的锋利质感，就是为了体现界面所承载产品的专业感。这种风格早已在国外设计圈流行多时，很多产品也都纷纷推出了 Linear 设计风格的网页。

大家可能在各种概念设计稿上见过 Linear 设计的影子，只是叫不出它的名字，或者并不知道这种风格源自于同名的一款 SaaS 软件。

Linear 设计风格源自同名产品

适当了解一下产品背景，会对掌握 Linear 设计风格更有帮助。

01. 为谁设计

Linear 的设计风格是为了符合软件工程师对于「专业」的要求。黑色背景、灰色 Inter 无衬线字体、一个紫色渐变圆形 logo，基于大多数工程师都很喜欢的暗色编程环境，最大限度的减少设备能耗和视觉疲劳。

以上出自 Linear 的 CEO （前 Airbnb 的首席设计师） Karri Saarinen 的一段访谈。他很好的解释了 Linear 的设计初衷，也道出了 Linear 其实是一款专门针对软件开发的协同管理的工具，目标用户主要是软件开发工程师和设计师。

Karri Saarinen 十分推崇 Apple 的设计美学和产品标准。Apple 对于设计的不懈追求，严格的成品把控，都深深启发着他们这一代人。他希望 Linear 的产品设计将来也可以与 Apple 比肩。

当然，要与 Apple 比肩，听起来是有些狂妄！Linear 的各种产品标语更是傲气冲天，比如「Linear 是构建产品的更好方式」「与你以往使用过的任何工具都不同」「只为世界上最好的产品团队提供支持」等等。

不过了解下 Linear 的发展路径，感觉他们「狂」一点倒也不是不行。

02. 发展之路

Linear 创立于 2019 年 4 月，由 Karri Saarinen、Jori Lallo、Tuomas Artman 三位芬兰籍创始人在美国联合创办。产品一经发布就大受关注，短短两个月，其内测候补名单上就拥有了 10000 名用户。

Linear 的前身是 Lallo 和 Saarinen 在旧金山开发的协作书签系统 Kippt，后来被知名加密货币交易公司 Coinbase 收购，Saarinen 和 Lallo 也在 2014 年加入了该公司并分别担任设计主管和软件工程师，只是他们都未等到 Coinbase 上市就已离开去创业。

2019 年 11 月，红杉为 Linear 领投了 420 万美元种子轮融资；2020 年 12 月，红杉再次领跑并为 Linear 筹集了 1300 万美元的 A轮融资。

从 2021 年实现盈利到 2023 年，Linear 的银行现金已高于种子轮加 A轮融资的总额。目前已拥有数千家客户，包括初创团队和企业级用户。

03. 产品形态

Linear 有网页版和桌面端应用，可以跨平台同步使用，不限于 Mac、Windows 和手机、平板等移动设备。暂时不支持 Linux 桌面端，但可以使用网页版。

虽然没有移动端应用，不过最近加入的设计师 Alex Cornell 就是专门负责 App 设计的，想必也是在规划中了。

当然，Linear 的设计重心还是在于打磨桌面端体验，毕竟 B端产品主要使用场景并不在移动端。

另外，Linear 也支持离线模式，无需做任何额外操作，不用担心断网数据丢失。数据存储方面，使用的是谷歌云加密服务，服务器在美国。

04. 功能特色

Linear 的服务市场主要面向北美和欧洲，服务器在国外，在国内几乎没有使用场景。

毕竟国内也有不少项目协同工具，中小团队用 Teambition、Worktile 或者 Tower 足够了，要求不高的用石墨、语雀、飞书、Notion 这类文档工具也都可以 cover 日常需求。大厂更不必说，出于数据安全考量，基本都使用内部自研系统。

既然叫 Linear，那么产品肯定就是要强调线性解决方案的。敏捷开发已经过时，Linear 打造的是现代软件开发的新标准。

首先，一切操作都可以通过键盘组合键来进行，内置全局命令菜单，50ms 的实时同步速度，内置专为现代化软件团队打造的工作流。

其次，可以快速创建任务并在上下文中讨论问题，可以无缝切换列表和看板视图并支持自定义，支持周期管理和跨团队 roadmap 规划。

再者，集成了专业开发组件并能联动各大代码、数据、设计平台，任务可无缝衔接，使软件开发实现自动化。

最后，Linear 还提供了设计精美的高级报告和分析功能，支持数据导出。

官网有详细介绍和演示，这里不一一展开讲述了。

05. 设计团队

Linear 背后是一个仅 30 人的小型创业团队，团队成员分布于各个国家，全部远程协作。

虽然 CEO 自己也是设计师出身，但目前已经不再负责设计执行。设计团队现由三名专职设计师组成。Linear 的团队气质和他们的产品如出一辙：严谨沉稳但又很独特。

有一个很独特之处就是：Linear 的设计师不对设计稿进行图层命名。按说初级设计师往往被教育最多的就是：图层一定要命名好，以方便与他人对接。

从上图这张公开的设计稿里我们可以看到，设计师不仅不命名图层，在 Figma 里甚至不会对元素做框架化和组件化处理，都是简单粗暴的编组、编组、再编组。这又很不符合我们的 Figma 使用认知。是不是觉得能做出一流设计的团队竟然会这么「不专业」？

团队的解释是： Linear 的设计稿并不在设计师之间对接，专人专项，设计稿只和开发人员对接。这在网上一度引起争议，有些设计师表示这很不专业，有些则认为设计稿落地结果更重要，不用太在意形式。

但老实讲，如果对接时拿到图层结构混乱，命名不规范的设计文件，确实会很头大。国内设计团队大部分都做不到专人专项，一份设计稿可能要在不同设计师之间经手多次，Linear 这种习惯咱就不学了！

06. Linear 和 Arc

与 Arc 浏览器一样，Linear 也是优先考虑键盘操作的，在 Linear 应用中大部分操作都可以完全用快捷键来进行，这能大大提升操作效率，也很符合开发者的工作习惯。

去年 3 月份，Linear 应用程序也集成了 Arc，支持在 Arc 浏览器命令栏键入直接创建 Linear 任务。其官网更新日志中毫不掩饰对 Arc 的推崇，称其和 Linear 一样，速度极快、设计精美！可谓是英雄惜英雄了。

通过产品界面了解 Linear 设计风格

我们一直想把 Linear 设计得很漂亮的原因之一是：如果你有一个漂亮的项目管理工具，那么任何东西都可以变得漂亮。

这是 Linear 的联合创始人 Tuomas Artman 对「项目管理工具为何要如此注重视觉设计」的解释。

Linear 称其设计是像素级，高精度，优雅 UI 和一流性能的绝佳组合。倒也不觉得这算夸大其词，因为无论官网还是应用界面，都挑不出任何设计细节问题。

查看其官网 CSS 样式会发现：界面上的渐变背景，发光特效甚至噪点效果都是代码实现；位图切图也采用了体积更小的 WebP 格式，矢量图形则完全采用 SVG 格式，能用代码实现的就不用切图；代码层面大量应用了 mask-image 属性和 radial-gradient 以及 linear-gradient 等渐变函数；此外还有大量的常规动效和交互动效。

这样的实现策略，很大程度上规避了切图所带来的细节问题，但对产品性能又会是不小的考验，需要有技术团队的认可和鼎力支持才行。不然，想把这种风格的设计应用在交互层面上，是很难单靠设计师自己去推进的。

下面就通过一些界面展示图，来直观感受 Linear 的设计风格：

01. 官网界面展示

产品展示页局部图

页面交互动效

页面常态动效

招聘页面主视觉

自述页面

这个由首席设计师 Griveau 操刀的自述页面，主插图复刻了 iMac 的前身 Macintosh 的外观样式，内容展示结合视差滚动创意十足。

实时数据服务页面

网页地址：https://linear.app/features/insights

这个页面配上声音，浏览体验太美妙了，要使用 Chrome 或 Arc 打开，别的浏览器可能无法播放。内嵌视频就是前面提到过的新晋设计师 Alex Cornell 来到 Linear 后的首秀，动画大部分在 AE 中完成，视频后期用 Premiere 剪辑，Alex 说自己大概制作了将近 100 多个小时的动画