编注:Linear软件公司是一家提供项目管理和协作工具的公司,它的产品旨在帮助团队更高效地协作,跟踪任务和进度,从而实现项目的顺利进行。但在本文中,Linear往往指代的是一种设计风格,这是一种风格简洁、直观、以用户体验优先的设计。
这是指一种在大面积暗色背景下,使用渐变、模糊、动态流光、极细描边、微噪点、外发光以及庄重的无衬线字体,外加流畅克制的微动效来组织和修饰界面元素的网页设计风格。
其独特又神秘的锋利质感,就是为了体现界面所承载产品的专业感。这种风格早已在国外设计圈流行多时,很多产品也都纷纷推出了Linear设计风格的网页。
大家可能在各种概念设计稿上见过Linear设计的影子,只是叫不出它的名字,或者并不知道这种风格源自于同名的一款SaaS软件。
适当了解一下产品背景,会对掌握Linear设计风格更有帮助。
Linear的设计风格是为了符合软件工程师对于「专业」的要求。黑色背景、灰色Inter无衬线字体、一个紫色渐变圆形logo,基于大多数工程师都很喜欢的暗色编程环境,最大限度的减少设备能耗和视觉疲劳。
以上出自Linear的CEO(前Airbnb的首席设计师)KarriSaarinen的一段访谈。他很好的解释了Linear的设计初衷,也道出了Linear其实是一款专门针对软件开发的协同管理的工具,目标用户主要是软件开发工程师和设计师。
KarriSaarinen十分推崇Apple的设计美学和产品标准。Apple对于设计的不懈追求,严格的成品把控,都深深启发着他们这一代人。他希望Linear的产品设计将来也可以与Apple比肩。
当然,要与Apple比肩,听起来是有些狂妄!Linear的各种产品标语更是傲气冲天,比如「Linear是构建产品的更好方式」「与你以往使用过的任何工具都不同」「只为世界上最好的产品团队提供支持」等等。
不过了解下Linear的发展路径,感觉他们「狂」一点倒也不是不行。
Linear的前身是Lallo和Saarinen在旧金山开发的协作书签系统Kippt,后来被知名加密货币交易公司Coinbase收购,Saarinen和Lallo也在2014年加入了该公司并分别担任设计主管和软件工程师,只是他们都未等到Coinbase上市就已离开去创业。
2019年11月,红杉为Linear领投了420万美元种子轮融资;2020年12月,红杉再次领跑并为Linear筹集了1300万美元的A轮融资。
从2021年实现盈利到2023年,Linear的银行现金已高于种子轮加A轮融资的总额。目前已拥有数千家客户,包括初创团队和企业级用户。
Linear有网页版和桌面端应用,可以跨平台同步使用,不限于Mac、Windows和手机、平板等移动设备。暂时不支持Linux桌面端,但可以使用网页版。
虽然没有移动端应用,不过最近加入的设计师AlexCornell就是专门负责App设计的,想必也是在规划中了。
当然,Linear的设计重心还是在于打磨桌面端体验,毕竟B端产品主要使用场景并不在移动端。
另外,Linear也支持离线模式,无需做任何额外操作,不用担心断网数据丢失。数据存储方面,使用的是谷歌云加密服务,服务器在美国。
Linear的服务市场主要面向北美和欧洲,服务器在国外,在国内几乎没有使用场景。
毕竟国内也有不少项目协同工具,中小团队用Teambition、Worktile或者Tower足够了,要求不高的用石墨、语雀、飞书、Notion这类文档工具也都可以cover日常需求。大厂更不必说,出于数据安全考量,基本都使用内部自研系统。
既然叫Linear,那么产品肯定就是要强调线性解决方案的。敏捷开发已经过时,Linear打造的是现代软件开发的新标准。
首先,一切操作都可以通过键盘组合键来进行,内置全局命令菜单,50ms的实时同步速度,内置专为现代化软件团队打造的工作流。
其次,可以快速创建任务并在上下文中讨论问题,可以无缝切换列表和看板视图并支持自定义,支持周期管理和跨团队roadmap规划。
再者,集成了专业开发组件并能联动各大代码、数据、设计平台,任务可无缝衔接,使软件开发实现自动化。
最后,Linear还提供了设计精美的高级报告和分析功能,支持数据导出。
官网有详细介绍和演示,这里不一一展开讲述了。
Linear背后是一个仅30人的小型创业团队,团队成员分布于各个国家,全部远程协作。
虽然CEO自己也是设计师出身,但目前已经不再负责设计执行。设计团队现由三名专职设计师组成。Linear的团队气质和他们的产品如出一辙:严谨沉稳但又很独特。
有一个很独特之处就是:Linear的设计师不对设计稿进行图层命名。按说初级设计师往往被教育最多的就是:图层一定要命名好,以方便与他人对接。
从上图这张公开的设计稿里我们可以看到,设计师不仅不命名图层,在Figma里甚至不会对元素做框架化和组件化处理,都是简单粗暴的编组、编组、再编组。这又很不符合我们的Figma使用认知。是不是觉得能做出一流设计的团队竟然会这么「不专业」?
团队的解释是:Linear的设计稿并不在设计师之间对接,专人专项,设计稿只和开发人员对接。这在网上一度引起争议,有些设计师表示这很不专业,有些则认为设计稿落地结果更重要,不用太在意形式。
但老实讲,如果对接时拿到图层结构混乱,命名不规范的设计文件,确实会很头大。国内设计团队大部分都做不到专人专项,一份设计稿可能要在不同设计师之间经手多次,Linear这种习惯咱就不学了!
与Arc浏览器一样,Linear也是优先考虑键盘操作的,在Linear应用中大部分操作都可以完全用快捷键来进行,这能大大提升操作效率,也很符合开发者的工作习惯。
去年3月份,Linear应用程序也集成了Arc,支持在Arc浏览器命令栏键入直接创建Linear任务。其官网更新日志中毫不掩饰对Arc的推崇,称其和Linear一样,速度极快、设计精美!可谓是英雄惜英雄了。
我们一直想把Linear设计得很漂亮的原因之一是:如果你有一个漂亮的项目管理工具,那么任何东西都可以变得漂亮。
这是Linear的联合创始人TuomasArtman对「项目管理工具为何要如此注重视觉设计」的解释。
Linear称其设计是像素级,高精度,优雅UI和一流性能的绝佳组合。倒也不觉得这算夸大其词,因为无论官网还是应用界面,都挑不出任何设计细节问题。
查看其官网CSS样式会发现:界面上的渐变背景,发光特效甚至噪点效果都是代码实现;位图切图也采用了体积更小的WebP格式,矢量图形则完全采用SVG格式,能用代码实现的就不用切图;代码层面大量应用了mask-image属性和radial-gradient以及linear-gradient等渐变函数;此外还有大量的常规动效和交互动效。
这样的实现策略,很大程度上规避了切图所带来的细节问题,但对产品性能又会是不小的考验,需要有技术团队的认可和鼎力支持才行。不然,想把这种风格的设计应用在交互层面上,是很难单靠设计师自己去推进的。
下面就通过一些界面展示图,来直观感受Linear的设计风格:
产品展示页局部图
页面交互动效
页面常态动效
招聘页面主视觉
自述页面
实时数据服务页面
这个页面配上声音,浏览体验太美妙了,要使用Chrome或Arc打开,别的浏览器可能无法播放。内嵌视频就是前面提到过的新晋设计师AlexCornell来到Linear后的首秀,动画大部分在AE中完成,视频后期用Premiere剪辑,Alex说自己大概制作了将近100多个小时的动画
Linear应用内工作台样式,弹出的浮层,背景都做了半透模糊处理。
Linear系统还内置了至少8款界面皮肤供用户选择。
但主题不能多端同步,而且只能设置自己在使用的应用程序皮肤,团队成员看到的还是他自己的主题样式。
HeroImage的动效不是一整个gif动图或者视频,而是在静态切图上叠加了一层动态点阵滤镜,打造了一种做旧失真的故障风视效。
滚动视差交互结合精美的可视化数据表,体验超级赞。数据图形全部采用SVG格式,点击按钮还可以复制完整图片。
看到这里,我们已经了解了Linear式设计风格了。
光说不练假把式,请打开Figma,和我一起拆解下Linear的设计思路(需要具备Figma操作基础)。
我们先来学习下Linear是怎么做多色渐变融合背景的:
第一步:新建一个矩形,给它添加angular(角度渐变),按你喜欢的色值来添加。
第二步:编辑angular的色值,你可以调整手柄来选择渐变的角度。
第三步:给这个矩形添加图层模糊属性,参数可随意设定。
第四步:给矩形添加mask。
第五步:复制一层渐变矩形,按你喜欢的风格选择图层叠加样式,并适当调整不透明度。
第六步:调整复制层的angular手柄来调整两层渐变融合的效果,并适当调整图片角度。
OK,一个专属于你的多色渐变融合背景诞生了!
小试牛刀,感觉如何,简单不?
趁热打铁,我们再来挑战复刻一下Linear旧版官网HeroImage里的应用图标:
查看样式会发现,此图标只在顶层贴了张SVG格式的镂空logo,其他都是用代码实现,一共分为4层。
下面,打开Figma继续跟我操作:
第一步:新建一个圆角矩形描边框,这里有一个关于设置iOS级别平滑圆角的小tip,操作见以下动图演示。
第二步:添加渐变色和模糊值,我们前面已经做好了一张渐变图,可以直接复制它的属性过来。
第三步:添加一个等比例圆形,复制渐变和模糊值。
第四步:复制矩形框,添加填充色,复制渐变和模糊值。
第五步:放上镂空logo,完成!
打开旧版官网,我们还能看到应用图标下会出现类似电影开场的激光动效,其实他们一开始只想做一个点亮图标的简单动效,考虑到是首次发布,要留下记忆点,就采用了更显著的效果。
现在的官网HeroImage使用入口按钮取代了应用图标的位置。这是因为,一方面他们不想靠太多的视效来干扰用户浏览官网,还是以实用为先。另一方面知名度和市场既然已经打开,找来官网的大部分人都是想要快速进行注册和使用,还是要以效率为先。
学习Linear的设计风格,也更应该理解其背后先进的产品理念。
Linear的CEO认为,当下软件市场竞争激烈,所有的产品团队实际上都是边冲刺边工作的,大家都在追求增长,几乎没有精力去打磨设计,造成产品同质化严重又毫无生气。
反过来,无法在功能上提供太多实用价值的产品,又会通过堆砌各种有趣的设计元素来转移注意力,造成过度设计,给用户的操作铺满障碍,让人不知所措。
如何兼顾设计体验与实用性是创新型产品必须去考虑的事情。Linear给很多产品都打了样,也帮很多初创产品树立了信心。
也许做一款设计精美、性能卓越、有格局讲格调,又能平衡好产品体验和商业价值的产品。并不在于雇佣多少人分多少组,不在于讲多少PPT和开多少会,更不在于打不打卡坐不坐班,甚至不在于设计稿要不要给图层命名。