什么是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.企业官网设计常用的风格有哪些?网站建设企业官网设计常用的风格有哪些? 源派 3067 800 一、扁平化设计 平面设计可以说是目前最常用的网页设计风格。它削弱了材料、梯度和阴影,消除了冗余信息的图形元素和排版。这种风格设计可以使图片看起来更光滑,提高网站内容信息的视觉水平,更方便用户快速找到他们需要的内容。同时,平面界面可以更好地实现不同尺寸的转换https://www.yuanpai.cc/news/yxzx1537.html
2.有哪些公司的官网设计得很好看6. 苹果 -- 极简风格,注重细节和用户体验 7. Nike -- 运动激情与时尚设计的完美结合 当今互联网时代,公司的官网已经成为了企业展示品牌形象和吸引用户注意力的重要窗口。一些优秀的公司通过出色的官网设计获得了用户的认可和好评。那么,有哪些公司的官网设计得很好看呢?接下来,本文将为大家介绍一些在设计上令人赏心https://www.300.cn/xxzx/7415.html
3.视频调色有哪些风格mg动画风格有哪些 ◎ 场景设计风格有哪些 ◎ 手绘的风格都是有哪些 ◎ UI风格有哪些扁平拟物 ◎ ui的设计风格有哪些 ◎ 剪辑影视包是什么东西 ◎ 原画的风格有哪些 ◎ 场景原画风格有哪几种 ◎ 扁平插画海报的优点 ◎ 插画的设计风格有哪些 ◎ 插画的风格特征有哪些 ◎ 插画美术风格有哪些 ◎ 插画设计都有哪https://wap.hxsd.com/wenda/64891/
4.老房改造装修,家庭装修中的老房装修风格有哪些?老房装修设计要点老房装修改造工程项目实际是指过去已经装饰装修过的住宅,由于现在生活水平的提高,对自家过去装饰的房间格局和设计水平不够时尚,已不适应现代生活的需要,所以想要重新改造一下。那么在家庭装修中适合老房装修风格有哪些呢?接下来云兰装潢小编就为大家带来关于这方面的相关介绍。 http://www.shyunlan.com/Article/lfgzzxjtzxzdl.html
5.设计原(jy.sccnn.com)设计创意群体学习、交流、让设计更有价值http://jy.sccnn.com/
6.品格乡墅设计(官网)中国未来建筑风格样式-高端生活品质居住环境-国外建筑空间分享 作为设计师的小编,内心中住着一个建筑大师的梦想,为此小编已经花费了人生仅15年来追寻这个梦想,将来可能依然只能在寻找的路上。但有智慧的大师又有多少个,能让大师遇见可以自有天马行空的建筑项目又有几个。回看,又有多少建筑大师在中 http://www.szpinge.com/
7.温州市一麦为家装饰工程有限公司一麦装饰官网温州一麦装饰公司是温州十大装饰公司,专注别墅装修设计10年、个性化定制软装配饰和高端家装设计,拥有完整的供应链体系及精准的装修报价方案,欢迎登入温州一麦高端豪宅别墅装修公司官网,热线电话:400-800-7877。http://www.emidesign.cn/
8.一文讲透响应式网页设计!附案例和工具分享为了更好地理解响应式网页设计的应用,下面我分享了5个值得学习的响应式网站,这些网站不仅展示了设计师如何解决多设备适配的问题,在用户体验和视觉效果上也很出色。 1、星巴克 星巴克是一个很好的响应式设计范例,视觉上简单、醒目又没有花哨的视差,但又通过色彩鲜艳的季节性产品图片有效传达了品牌形象,呈现出一种既直https://zhuanlan.zhihu.com/p/12019291696
9.0.2秒设计力提出人:解读日本食品包装设计的8大关键词和3大趋势图片来源:日清官网 7、kawaii:日式可爱 kawaii即可愛い,是日本独特的审美风格之一。这种可爱不仅指可爱漂亮的图案、文字等,更多地传达的风格,是能够传达日本年轻女性内心的可爱。 麒麟有一个专为女性设计的混合大麦茶系列“moogy”,整个包装设计可爱满分。清新的配色和图案、手写体的文字、瓶身磨砂的质感,moogy的包装视https://www.digitaling.com/articles/500639.html
10.火锅店装修设计的风格和重点有哪些装修百科在我们的周围,每个地方都可以看到有好多家的火锅店,尤其是在天冷的冬天,大家都喜欢喜欢和一群小伙伴去吃火锅。作为火锅店的店家,我们在火锅店装修设计时要更加的仔细细心,这样才能为火锅店带来更多的消费者。火锅店装修设计有哪些风格呢?一同来了解下吧! https://www.yijiazsgs.com/index.php?m=content&c=index&a=show&catid=11&id=367
11.常见平面设计的风格有哪些?分享平面设计的7种风格赛博朋克平面设计风格往往以蓝紫的暗冷色调为主,搭配霓虹光感的对比色,用错位,拉伸,扭曲等故障感图形体现电子科技的未来感。 赛博朋克视觉上的关键词有:控制论,外骨骼,网络,未来高科技,义肢,脑后插管,FUL全息投影,反英雄,黑客,生存,人工智能,虚拟现实,贫民窟,红蓝色调,雨天,暗场景。 https://www.szfangwei.cn/news/6485.html
12.概念说明现代室内家装设计理念有哪些内容?概念说明 | 现代室内家装设计理念有哪些内容? 现代室内设计理念包括以下内容: 一、装饰风格分类; 二、家居装饰的基本原则; 三、居室装饰十忌; 四、家庭装潢的设计理念; 五、合理家装六字经; 六、空间的功能设计; 七、家装设计三阶段; 八、业主怎样参予设计;https://www.ijuzhong.com/knowledge/3702.html
13.网页设计风格你都知道哪些?那些惊艳的网站设计网页设计风格大观:探索与选择的五重奏 在数字时代的浪潮中,网页设计不仅仅是技术的艺术,更是情感、文化与创意交汇的舞台。每一种设计风格都承载着不同的信息传递方式和用户体验理念。以下是五种主流的网页设计风格,它们各自独特,又相互交融,共同塑造了互联网世界的多彩面貌。 https://blog.csdn.net/xn983621/article/details/142594729
14.怎样设计商标的风格商标的设计风格有哪些 商标成功设计的基础就是要充分体现商品的性质、特点和风格,表现商品的特色,因为只有体现商品特色的商标,才能对顾客产生吸引力,这一特色可通过商品的结构和形状来反映,也可以间接地以它物为象征加以表达,还可以借用某种机智趣味的形象语来描述。众新点知识产权服务网在申请商标的同时也会有设计商https://www.66law.cn/laws/348529.aspx
15.可视化大屏有哪些风格帆软数字化转型知识库FineVis官网 相关问答FAQs: 可视化大屏有哪些风格? 在当今数据驱动的时代,可视化大屏已成为企业和机构展示信息、分析数据的重要工具。通过不同的设计风格,可视化大屏不仅能提高信息传递的效率,还能增强用户的互动体验。可视化大屏的风格多种多样,以下是几种常见的风格类型: https://www.fanruan.com/blog/article/235807/
16.网站建设网站设计北京网站建设高端网站制作公司尚品中国2008年成立于北京,是国内十佳品牌网站设计公司,专注于网站建设、小程序开发、业务系统定制等业务,打造了数千精品案例,为北京、天津、上海、河北、山东及全国各地用户服务,电话:010-60259772.https://www.sino-web.net/
17.中式装修中式设计中式风格惊!76平中式设计出120平的效果 中式风格!打造属于我们的个性空间,让生活更加丰富多彩 经典与时尚,中式家居里的生活美学 中式风格装修,让你的家成为那个最有质感的艺术展厅 中式装修:点亮你家的东方之美! 古典与现代碰撞,打造令人惊叹的中式风格装修! 传统韵味,中式装修华夏情 https://www.zyxuan.org/
18.齐装网专业的装饰装修网齐装网是一家专业的互联网装修行业知名平台,汇集了全国数万家装饰公司和优秀的装修设计师,提供免费的家装、工装等各类房屋装修设计方案,免费上门量房服务,有房要装,就上齐装!https://www.qizuang.com/
19.网页设计公司高端网站设计外包公司在设计页面时,首先要考虑网站内容、网站功能和用户规则,建立设计网站的目标和用户规则,然后制定可行的网页设计计划。 设计主题要清晰 优秀的网页设计要有一个清晰的主题,通过视觉设计、色彩搭配来表达内容给用户,使用户能够毫不犹豫地理解网站的主题。 设计要有整体性 在网站设计中,网页设计的总体风格、布局、色彩做到https://www.youhuaxing.cn/wangyesheji/
20.上海别墅装修设计公司专业豪宅别墅装饰装潢设计优势 全案设计服务体系 施工优势 水电隐蔽工程20年保修 建材优势 品牌热销建材差一赔五 预算报价 预算等于决算 案例展示 SHOW CASE. 现代简约风格 欧式风格 美式风格 新中式风格 混搭风格 新古典风格 法式风格 时尚轻奢 上实和墅 户型面积:520㎡ 设计风格:现代简约 http://www.tenglongdesign.com/
21.PPT模板PPT模版免费下载免费PPT模板下载PPT颜色风格 微立体 扁平化 欧美风 多边形 极简风 清新风 创意 手绘 水彩 iOS 更多 古典中国风背景的“百善孝为先”二十四孝中华美德PPT模板 古典PPT模板 国潮风传统国学文化PPT模板 古典PPT模板 唯美山水画卷背景的“山湖意境”中国风PPT模板 中国风PPT模板 https://www.1ppt.com/
22.马蹄网室内设计官网马蹄网室内vi设计官网3、别墅设计案例:马蹄网室内设计公司在别墅设计方面拥有独到的设计理念和丰富的实践经验。他们注重与客户的沟通和合作,了解客户的需求和生活方式,根据客户的个性化要求,打造出独一无二的别墅设计。无论是现代简约风格、欧式豪华风格还是中式传统风格,马蹄网室内设计公司都能够根据客户的喜好和要求,提供个性化的设计方案。 https://www.rhtimes.com/brand/logo-design-news17400.html
23.模仿苹果官网风格设计网友只服卫龙辣条!为了保持和苹果风格一样的高逼格,卫龙海报设计中都有英文!比如文案里的Hotstrip,这个词你在百度里可能搜不出来,因为它的惊天秘密在于拆分之后——hot (辣)strip(条)! 最近,卫龙淘宝某店又更新了…… 以下是观察者网编辑的发现: 我以为我误入了苹果官网…… https://news.mydrivers.com/1/497/497835.htm
24.大理紫苹果装饰官网大理装修公司大理别墅装修设计公司大理紫苹果装饰在大理别墅装饰公司中排名前十,专业提供:别墅装修、别墅设计、家庭装修,老房装修,新房装修,大宅装修,室内装修,二手房装修,婚房装修http://dl.zpg.com.cn/