什么是Linear设计风格?

编注: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和开多少会,更不在于打不打卡坐不坐班,甚至不在于设计稿要不要给图层命名。

THE END
1.dw背景设置,DW如何把图片设为背景图4,Dreamweaver怎么设置背景 你是要设置整个页面的背景吗?如果是的话就写个样式吧 body{ background:url(images/bg.jpg);} 这个代码是让图片铺满整个页面的,如果你想让图片横向平铺就这样写body{ background:url(images/bg.jpg) repeat-x;} 如果你想让图片纵向平铺就这样写body{ background:url(images/bg.jpg...http://chengdu.cdxwcx.cn/article/iohhsp.html
2.html背景图片怎么铺满整个网页并且固定【html背景图片怎么铺满整个网页并且固定】要使背景图片铺满整个网页并且固定不动,可以使用CSS样式中的background属性,并设置background-size为cover,background-repeat为no-repeat,backhttp://www.mobiletrain.org/about/BBS/253253.html
3.WEB移动端.md·素晴/web基础对于一张50px * 50px的图片,在手机Retina屏中打开,按照刚才的物理像素比会放大倍速,这样会造成图片模糊 在标准的viewport中,因为iPhone6\7\8的影响,但是现在还存在3倍图4倍图的情况,这个看实际开发公司需求 背景图片 注意缩放问题/* 在iPhone8 里面 */ img { /* 原始图片 100 * 100px */ width: 50px;...https://gitee.com/huichi-chen/web-basic/blob/master/WEB%E7%A7%BB%E5%8A%A8%E7%AB%AF.md
4.网页设计需要了解的相关知识4、在PS里做的图到了网上就不一样了,颜色等等方面,因为WEB上面只用到256WEB 如果要在1024分辨率下的话图片大小设置是宽为1003是刚好满屏 如果要以800分辨率下的话图片大小设置为778是刚好满屏 站长必须要了解的九条平面设计常识 小的本身是一个平面设计人员,前一阵儿有一些空闲的时间,便在各个站长网上发布了贴子...http://www2.hnsyu.net/syxywlzx/jszc/wlxxaq/201012/t20101212_46968.html
5.AI智能生成背景色与调整方案——全面解决图片网页及设计项目...在数字时代图片、网页和设计项目的视觉吸引力至关要紧。背景色彩的选择和调整往往可以决定一个设计作品的成败。传统的背景色彩选择过程既费时又费力其在追求个性化和高效性的今天,这一环节显得为要紧。智能生成背景色与调整方案的出现,不仅全面应对了设计师在这一环节的困扰,也为非专业人士提供了便捷的设计工具。本文将...http://www.slrbs.com/jrzg/aizhishi/143409.html
6.千图网免费在线设计图片素材网站千图网(www.58pic.com) 是专注正版商用图片素材在线设计与下载的网站!提供矢量图素材、背景图片、psd素材、字体模板、设计素材、PPT模板、视频素材、插画绘画、海报设计模板、网站设计素材等下载服务。https://www.58pic.com/
1.全屏图片轮播素材制作宝典,轻松打造魅力背景,吸引目光无数...本文提供全屏图片轮播素材制作指南,帮助用户轻松打造吸引人的图片轮播背景。内容涵盖素材选择、设计技巧、制作流程等方面,简单易懂的步骤指导,让用户快速掌握图片轮播制作技巧,提升网站或活动的视觉吸引力。阅读本文,你将轻松成为图片轮播制作高手! 制作全屏图片轮播素材的详细指南 ...https://www.zovps.com/article/index.php/post/366655.html
2.如何在WPS中使图片布满整个页面(图片怎么布满wps)如果你希望图片背景覆盖整个文档的所有页面,可以通过复制图片并粘贴到每一页来实现。但这样做可能会比较繁琐。另一种方法是使用WPS的“水印”功能。点击“页面布局”,然后选择“水印”,接着选择“自定义水印”。在弹出的窗口中,选择“图片水印”,然后插入你的图片,并调整其大小和透明度,使其布满整个页面。 http://bangong.zaixianjisuan.com/office/ru-he-zai-wpszhong-shi-tu-pian-bu-man-zheng-ge-ye-mian.html
3.如何用javascript实现网页背景图片的制作和页面整体左右布局结构的设计...综合来说,要实现网页背景图片的制作和页面整体左右布局结构的设计,可以通过CSS来定义样式,然后使用JavaScript来添加样式类或创建元素并设置样式类,最后将元素添加到页面中。 在JavaScript中,你可以通过操作DOM(文档对象模型)来改变网页的背景图片以及设计页面的整体布局结构。以下是一个简单的示例,展示了如何使用JavaScript来...https://blog.csdn.net/2301_81121233/article/details/143613030
4.ppt图片排列1. 简单平铺排列:直接将图片放置到幻灯片中,调整大小和位置,使其铺满整个幻灯片。这种方法适用于展示大量图片,可以让观众一目了然。 2. 堆叠排列:将多张图片叠加在一起,形成立体的效果。可以通过调整每张图片的旋转角度、大小和透明度来实现堆叠效果,使图片更加生动。 https://news.cnsoftnews.com/smkjzn/202411/216079.html
5.用Dreamweaver8设计网页,怎么样使背景图片铺满全屏?4条回答:另一种方法是直接在CSS样式表中添加样式:`.your-element{background-image:url(your_image.jpg);background-size:cover;height:100vh;width:100vw;}`这https://wap.zol.com.cn/ask/x_7290680.html
6.HTML+CSS实现背景图片铺满页面的三种方法CSS教程CSSHTML+CSS实现背景图片铺满页面的三种方法 针对页面背景图片我整理了几种方法仅供参考 在前端页面设计的时候大家总会遇到要添加背景图片的情况去美化自己的页面,我在之前的前端学习中也逐渐了解到一些方法和问题的解决方式,在下面我为大家的整理好了,仅供参考学习。https://m.jb51.net/css/888298.html
7.怎么提取图片中的背景图在设计和开发中,使用背景图片可以为网站或应用程序增添美感和视觉吸引力。但有时候,我们可能需要提取背景图片以便用于其他用途,比如编辑、修改或重新使用。那么,您可能会问:怎么提取一张图片中的背景图呢?在本文中,我们将深入探讨这个问题,并向您介绍一些实用的方法和工具。 https://tool.a5.cn/article/show/36604.html
8.2010年7月全国自主考试(网页设计与制作)真题自考2010年7月全国自主考试(网页设计与制作)真题及答案,历年真题https://www.educity.cn/zikao/28181.html
9.前端面试题目汇总(一)CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中, 再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位, background-position可以用数字精确的定位出背景图片的位置。 优点: a. 减少网页的http请求 b. 减少图片的字节 c. 解决了网页设计师在图片命名上...https://maimai.cn/article/detail?fid=1379132340&efid=6APwtdQsqgtKv5WoAzTVYw
10.html背景图片拉伸解决办法腾讯云开发者社区background-size: 100% 100%; //关键代码,直接拉伸背景图 如果你的页面内容超过一页,那么背景拉伸会拉很长不好看,建议使用 background-attachment: fixed; 作用是图片只拉伸到当前一页屏幕大小,内容超出一夜后,滚动滚动条值会滚动内容,背景图不动 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。https://cloud.tencent.com/developer/article/2158241
11.摄图网正版高清图片免费下载摄图网是一家专注于正版摄影高清图片素材免费下载的图库作品网站,提供手绘插画,海报,ppt模板,科技,城市,商务,建筑,风景,美食,家居,外景,背景等好看的图片设计素材大全可供下载。摄图摄影师5000+入驻并进行交流成长,百万图片量和设计师在这里找到满意的图片素材和设计灵感!https://699pic.com/
12.网页设计的注意事项网页设计的工作目标,是通过使用更合理的颜色、字体、图片、样式进行页面设计美化,在功能限定的情况下,尽可能给予用户完美的视觉体验。下面是小编为大家整理的网页设计的注意事项,希望能够帮助到大家。 网页设计的注意事项 1、页面内容要新颖 网页内容的选择要不落俗套,要重点突出一个“新”字,这个原则要求我们在设计网...https://www.yjbys.com/edu/meigongsheji/308312.html
13.网页用素材网页用图片网页用素材图片下载觅知网为您找到78个原创网页用素材图片,包括网页用图片,网页用素材,网页用海报,网页用背景,网页用模板源文件下载服务,包含PSD、PNG、JPG、AI、CDR等格式素材,更多关于网页用素材、图片、海报、背景、插画、配图、矢量、UI、PS、免抠,模板、艺术字、PPT、视频等设计https://www.51miz.com/so-sucai/3103377.html