唤回软件设计的浪漫主义 -- Linear设计风格分析
多图慎入！万字长文！
截图是Arc Browser 的 Portrait Mode 功能。
第一部分：截图
第二部分：关于linear
第三部分：关于颜色
第四部分：关于模糊
第五部分：关于字体
第六部分：关于动效
第七部分：回到最初
一个简单的产品，一个好的产品。
像所有简单的产品一样，它有开发者、产品本身、用户。
跟其它喜欢的产品一样，这是一个在乎颜值和走心的产品。
产品成就用户，用户成就产品。
理想的情况下，应该有个人平静的坐下来，冲一杯咖啡，重新感受它产品的智慧。
没错，那个人就是你！
linear是什么
linear是线性，流畅的线很简单，线团就变得复杂，linear的目的就是尽可能简单，通过无尽的简化——消除、重新思考工作流程、把团梳成曲线、拉平、解决掉issue，检查每个操作是否直观且不混乱，并确保最快速度，这样就不会出现阻碍流程的滞后。把万事做简，尽可能的想办法减少摩擦，以便用户在使用该产品时不要遇到这种烦人、令人沮丧的事情，从而破坏团队或日常工作中的动力。在一个温和简单的界面里，勾掉你今日的所有工作，好似俄罗斯方块游戏的屏幕全部清空，好似40度高温的酷暑里的一杯冰美式，好似你喜欢的姑娘开着桃花般的脸正对着你笑。
当然看到上面这些截图，你应该也感觉到，linear的另一个追求---漂亮。引用他们团队的话来说，就是“我们一直希望将 Linear 设计得漂亮的原因之一是，如果你有一个漂亮的项目管理工具，那么任何东西都可以变得[美丽]”。这也是我选择软件时候的重要依据，arc browser,craft,mindnode,linear,figma,raycast or mac,还有一张我用stable diffusion生成了200次的动漫壁纸，让每次打开电脑工作或者娱乐的时候，有一种在欣赏美的心态。
linear的产品理念
从linear这个产品说起，Linear 成立于2020年,总部位于美国旧金山,由 Karri Saarinen、Tuomas Artman、Jori Lallo 等人创立。其中 CEO Karri Saarinen 曾是 Airbnb 的首席设计师,对产品设计有很高追求,希望 Linear 能达到接近 Apple 的设计标准。因为他很欣赏Apple的设计，Saarinen 和 Artman 都表示，苹果对设计的不懈、严格的关注几乎是无与伦比的，他们希望有一天，Linear 也能得到类似的描述。(不包括现在的Apple,括号是我自已加的)
那是二零零几年的一天，我利用自已电脑城混混的经验，在家里凑齐了一台电脑的设备。虽然没有机箱，主板和电源都裸露在外，用一根电笔直接开机，连接上了那台每分钟忘了多少元的56k拨号调制解调器。从屏幕亮起的瞬间，到拔号成功，再到打开第一个网页，一波接一波的多巴胺冲击着我的神经，那种循序渐进的愉悦感难以言表。当你打开与互联网的联系后，就进入了一个全新的世界——一个新奇、未知、充满无限可能性的世界。那时候还没有意识到，这是一个连接着世界各地的广阔天地。那一刻是如此令人兴奋，却又难以用言语描述，宛如亲身经历魔法一般。我们每个人或多或少都经历过这种计算机带来的革命性时刻：第一次使用软件、第一次玩游戏、第一次编写代码……这些体验通常难以用语言描述，因为它们实在是太不可思议了。这些瞬间改变了我们对世界的认知，开启了全新的可能性，并深深地烙印在我们的记忆中。
计算机本身并不神奇,真正的魔力在于其上运行的软件,优秀的软件能创造更加神奇的体验,成为创造力的倍增器。今天,我们再怀着怀旧的心情回顾那些神奇的时刻，不禁要问:它们都去哪儿了?为什么今天我们很少能感受到软件的魔力?
就像linear网站的about里面所说的“计算机曾经充满魔力。但随着时间的推移,这种魔力大多已经消失,取而代之的是阻碍团队进步、制约优秀作品诞生的低劣工具和实践。我们对现状感到失望,决定打造更好的产品。一个团队会真正喜欢使用的产品。我们将其命名为 Linear,象征着进步。”
Linear认为,随着软件在生活中的重要性日益提升,如果Linear能够帮助工程师们设计出更加周到的软件,将会以微妙但持续的方式惠及数十亿用户。它的愿景是消除数字世界中无数令人沮丧的细节,让工程师和用户都能感受到,即便不是真正的快乐,至少不会感到烦躁。
Linear不仅希望帮助开发更优质的软件,更希望为这个行业重新注入尊严和自豪感。如今许多软件工程师感觉自己的工作与更高远的目标脱节。他们希望工程师们能够掌控自己的工作,减少对项目经理的依赖,重拾工匠精神,专注打磨每一个细节,而不是急功近利。
尽管创始人每年有部分时间居住在美国，但 Linear 是芬兰产品。芬兰拥有茂密的桦树林和松树林，早在可持续发展成为全球流行语之前，商品就以木材制成，经久耐用，几乎没有任何装饰。那一瞬间我强行给linear的Logo和木材的年轮做了一个关联，当然这不是主创的意思。
芬兰属于北欧风，北欧风的设计特点：简约、自然、人性化。bingo!!! 完全符合linear的理念。
网站上黑色白字的logo符合软件工程师对于「专业」的要求。黑色背景、灰色 Inter 无衬线字体、一个类拟渐变的圆形 logo，基于大多数工程师都很喜欢的暗色编程环境，最大限度的减少设备能耗和视觉疲劳。
图片分析，linear的风格大约包括：低明度单色调，单色/同类色渐变，Glassmorphism，无衬线字体，微动效，流光。
关于颜色
我们从linear官网截四张截图，分别从截图里面吸取一些颜色，变成一个画板，如下图所示，对于这些16进制是不是不太敏感。
我们接着进行，把这些16进制的色值下面再添加上该值的HSB颜色数值。
在这里我们应该看出来了HSB的数值里面，色调分别为237，234，233，235，240.
SO 你到底要干嘛？不急，喝杯咖啡再看，这就是让你开头冲杯咖啡的原因。
我们把HSB的饱和度和明度全都设置为100，这时候我们应该看出来了。
linear的主色就是蓝色。
蓝色是三原色之一，与红色和绿色一起可以组成各种不同的颜色。这就是常见的颜色RGB。
蓝色是最常用的品牌色之一，据统计，全球前100个品牌中有1/3使用蓝色作为主要品牌色。
蓝色是最受欢迎的颜色之一，据调查，大约40%的人最喜欢蓝色。
在可见光谱中，蓝色的波长范围大约在450到495纳米之间。在色轮上，蓝色的色相角度范围大约在200°到240°之间。所以上面虽然色调有一点点区别，但他们都还是蓝色。
蓝色在设计中的作用：
建立信任感：蓝色给人一种可靠、专业的感觉，有助于建立用户对软件的信任。
提高专注度：蓝色的冷静特性可以帮助用户集中注意力，减少干扰，提高工作效率。
传递智慧和技术感：蓝色常与智慧、科技联系在一起，在软件设计中使用蓝色可以强调产品的技术特点。
创造品牌识别：一致的蓝色调可以帮助建立品牌识别，让用户对软件产生更深刻的印象。
当然不同明度的蓝色也会给人不同的感觉。
高明度的蓝色给人友好、清新的感觉，可以营造出和谐、平衡的视觉效果
中明度的蓝色传达出专业、可靠、稳重的感觉。与白色搭配可以营造出简洁、现代的视觉效果，提高界面的可读性。
底明度的蓝色给人一种权威、高端的感觉，常用于强调品牌形象或重要信息。与浅色搭配可以营造出强烈的视觉对比，吸引用户的注意力。
不同的饱和度也会给人不同的感觉。
低饱和度蓝色给人一种柔和、舒适的感觉，与其他颜色搭配可以营造出和谐、平衡的视觉效果，减少视觉疲劳。
中等饱和度蓝色传达出专业、可靠、友好的感觉，与白色搭配可以营造出简洁、现代的视觉效果，提高界面的可读性和美观度。
高饱和度蓝色给人一种活力、激情的感觉，与其他颜色搭配可以营造出鲜明、吸引人的视觉效果，但需要谨慎使用，避免过度刺激用户的视觉感受。
这时候我们再回来看上面的参数。饱和度：74，55，100，77，93算偏低。11，82，7，12，5这就单纯的是很低明度了。
综合一下：linear的饱和度和明度上面的选择。满足了权威、高端，强调品牌形象；柔和、舒适、和谐、平衡的视觉效果，减少视觉疲劳。
力求营造出一种可靠、专业的产品形象，让用户对产品建立信任感。希望帮助用户集中注意力，减少干扰，从而提高工作效率。制造柔和、舒适的视觉效果，减轻用户的视觉疲劳。
关于渐变
同样从刚才的截图里面取三个色卡，带点紫色亮是流光描边的动效渐变。
渐变有什么作用？
相比单一的纯色,渐变色在视觉上更加丰富多变,能快速吸引用户注意力。
增加空间感和层次感
渐变色可以让背景、文字、图标等设计元素更具视觉吸引力
营造氛围,传递情感
通过色彩的柔和过渡,渐变可以很好地渲染特定的意境和情绪
引导视线，聚焦重点
利用颜色明暗变化可以引导用户视线,将目光集中到重点内容
强化品牌调性,提升识别度
渐变使用可以让网页更具视觉冲击力,引导视线,营造氛围,强化风格。但是渐变也并非万能,过度使用反而会适得其反。设计师需要在颜色搭配、透明度、渐变方向等方面把握分寸,做到恰到好处。
渐变类型
写前端或者用设计软件的时候，我们知道，渐变有几种不同的类型：线性渐变、径向渐变、角度渐变、重复渐变。不同的渐变类型会给人不同的感觉，适用于不同的场景。
线性渐变
线性渐变给人一种简洁、现代、有序的感觉，它能够引导用户的视线沿着特定方向流动，帮助用户理解界面的层次结构和信息的重要程度。线性渐变利用了格式塔心理学中的连续性原则，即人们倾向于将视觉元素组织成连续、平滑的形式。这种连续性可以减少认知负荷，让用户更容易理解和操作界面。
径向渐变
径向渐变给人一种聚焦、强调、吸引注意力的感觉。它能够将用户的视线引导到中心点，突出重要信息或交互元素。这种聚焦效果可以引起用户的注意，提高交互元素的可发现性和可点击性。
角度渐变
角度渐变给人一种动感、活力、独特的感觉。它能够打破传统的水平或垂直布局，为界面添加视觉趣味和创意。认知心理学中的新颖性效应，即人们对新奇、独特的事物更感兴趣。这种视觉新颖性可以提高用户的参与度和记忆力，增强品牌的识别性和差异化。
所以linear在设计的时候绝大部分使用了符合自已名字的线性渐变，追求达到“简洁”的效果。在一些需要聚焦和强调的地方使用了径向渐变。
渐变颜色
分析了渐变类型，那么linear在渐变颜色上的选择方式是什么样的呢，我们先试一下色盘上各种颜色的取色互相渐变，然后看一下直观效果。
不难看出，下面三个的给我的感觉明显要比上面三个好看（当然你可以持保留意见）。
保留意见来了，颜色怎么配好看，怎么不能配，没有绝对的定义，主要还是看你的产品定位和设计师的配色水平。一切以你需要产出的那个产品为标准，设计是为产品而服务的，产品为用户而服务的。
互补色：给人强烈的视觉冲击和对比感，可以营造出戏剧性和动态的效果。
对比色：给人明快、有活力的感觉，但比互补色的对比效果稍弱。
中差色：给人舒适、和谐的感觉，色彩过渡自然，不会显得过于平淡或刺激。
邻近色：给人亲切、温暖、安全的感觉，色彩变化细微，容易营造出统一、协调的氛围。
类似色：给人柔和、优雅、细腻的感觉，色彩变化更加微妙，可以营造出高级、精致的氛围。
同类色：给人统一、协调、流畅的感觉，色彩变化最为细微，可以营造出专注、干净的氛围。
回到linear产品的理念，类似色和同类似符合他的产品理念，所以我们在某些地方可以看到有一些蓝紫色的渐变，其实也用得很少，大量的地方其实是用的单色渐变，通过保持同一色调，改变其明度和饱和度来实现渐变，让视觉效果更和谐统一、更柔和。Apple系统里面的图标大多数都用了单色渐变，比如邮件、appleStore、音乐、播客、keynote、pages等等一些内置图标。回到文初的“Karri Saarinen希望 Linear 能达到接近 Apple 的设计标准”。
不过我猜测Linear大部分用的都是单色渐色，调整同一色相(即蓝色)的饱和度和明度来设置渐变。
单色本身就是同一色相，色彩之间天然协调。再通过饱和度和明度的渐变过渡，可以营造出层次丰富又不失统一和谐的视觉效果。整体画面会给人舒服、柔和的感受。
利用单色明度、饱和度的渐变，可以很好地突出页面的视觉重点，引导用户视线。
低饱和度的渐变，可以让用户长时间浏览页面而不易产生视觉疲劳。
关于模糊
记忆中模糊第一次网页设计中应用，是windows vista刚发布的时候，开始流程行的半透明毛玻璃卡片效果。
然后前几年在新拟态流行了之后，重新定义了这种风格为Glassmorphism设计风格，概念是Glass（玻璃）和Skeuomorphism（拟物化）的结合。特点是半透明的玻璃质感背景，同时伴有模糊效果、鲜艳的色彩和微妙的光影。
主要的视觉特征：
- 半透明玻璃质感的背景，营造通透感
- 背景采用高斯模糊，柔化了背后的内容
- 鲜艳的色彩作为背景或者强调色，提升视觉冲击
- 巧妙的光影和边框，强化玻璃的质感
- 多个半透明层叠加，增加界面的纵深感
所以模糊是Glassmorphism的核心要素之一。
在Glassmorphism设计风格中，模糊主要应用在背景上，通过对背景内容进行柔化，可以达到以下几个目的：
- 虚化背景内容，凸显前景的信息，引导用户注意力
- 营造梦幻、科技的氛围，提升界面的美感和时尚感
- 柔化背景边缘，让前景元素更加融入背景，增强整体性
- 透过磨砂玻璃，若隐若现地展示背景信息，增加界面层次
Glassmorphism设计风格通过巧妙地融合半透明、模糊、光影、色彩等视觉元素，创造出极富科技感和时尚感的界面效果。
人是视觉动物，同样我们用两张图片分别来区别一下。右边的卡片内容更易读，更有层次感，让不同的元素存在于不同层级的平面里，给人感觉每一个层级的平面的内容更整。
当然模糊也有不同的类型，高斯模糊、动感模糊、径向模糊等，不同类型的模糊给人的感觉也是不一样。
- 高斯模糊给人一种朦胧、柔和、通透的感觉。
- 动感模糊给人一种速度感、科技感,甚至有些眩晕的感觉。
- 径向模糊营造出一种由清晰到模糊的过渡,带来深度和层次感。
但是Figma没有提供直接实现不同模糊的方式，那么技穷的我这个就不贴图了。
国内当前环境的前端大部分不太在意怎么用CSS去实现这些效果了，毕竟用框架去实现界面，抓紧处理业务流程和数据才是当前市场最需要的。通常UI Designer花时间处理完这样的一张设计图，现在的前端大概率会让你直接给其导出一张图，项目产品层面可能也会基于时间效率的考虑同意直接用图吧。本着能用CSS实现就想用CSS实现的人群之一，那天我们的美女UI Designer给我展示了一些图，历经过四五种不同角度的渐变+模糊叠加起来的时候，我表示学到了，那一刻我也有那种“你就给我导一张图”的想法，不过在固定的时候我还是唤回了挑战一下自已不愿意挑战的想法。
所以linear通过模糊有效区分内容的重要程度,突出主次层级，比如导航。通过径向模糊的渐变效果,让用户将视线聚焦到清晰的内容区域。通过模糊效果体现了linear"去繁就简"的产品设计哲学,追求视觉上的简洁和内涵。这段交互就很好的体现了渐变加Glassmorphism风格的模糊卡片，给我一种晚上打开电脑，屏幕上的壁灯亮起，关注显示器上待处理信息的场景。
关于字体
闲话少说，还是先上图
linear整站的设计99%的字体都是无衬线字体，还有1%的字体在哪儿，大家可以当个彩蛋自已找找看，正好印证一下，那些相关的场景是不是用那个字体正合适。
无衬线字体具有简洁、现代、易读的特点。我们常见的黑体、雅黑、苹方、Arial都是无衬线字体。
无衬线字体笔画粗细均匀、结构简明，有良好的可读性，减轻眼睛的疲劳，这是不是对长时间面对电脑的开发者尤为重要？
无衬线字体在小字号和斜体下的辨识度优于衬线体，更适合在屏幕上显示。程序员经常需要阅读大量代码，无衬线字体可以提高阅读效率。
Consolas、Monaco这些编辑器常见的等宽字体也算是无衬线字体。无衬线字体通常将容易混淆的字符如1、l、I 和0、O 设计得很好区分，开发者是不是爱了？
无衬线字体简洁的几何结构,与扁平化、极简主义等现代设计风格非常搭配,能塑造出简约时尚的视觉效果。
无衬线字体在屏幕尤其是小屏幕上的显示效果更好。笔画清晰利落,是网页、App等数字媒体的首选字体
所以再次从linear的产品目的出发，简洁，降低用户负担，面对开发人员，无衬线字体就是该产品的不二选择。
关于动效
细腻的边框流光动画让用户感觉界面灵动有趣、富有科技感和未来感的，提升产品的颜值和吸引力。特别是不规则的流光运动，让原本偏暗的界面增加了一点点灵动。用户的视线会跟随着光效的流动方向的引导。
动画效果可以自然地吸引用户视线,将注意力集中在最重要的内容或功能入口上。光圈的逐层放大效果就像是一个视觉指引,将用户的目光聚焦感受中心的"+"符号上逐渐放大的影响力。
动画营造出内容的层次感和深度感,使平面设计不那么单调。光圈的放大效果赋予了设计更立体、更富有张力的视觉体验。微动画让静态页面变得生动有趣,给人以网页在"呼吸"的感觉,增强了用户与界面的互动体验。动态效果让用户感受到界面是活的、可交互的。
动效设计如同一位魔法师，它用生动有趣的方式优化用户体验，引导用户自然流畅地穿梭于产品的各个角落。动效设计也是一位情感调节者，它及时给予反馈，拉近用户与产品的距离，缓解负面情绪，营造舒心的氛围。更重要的是，动效设计为产品注入了独特的生命力，提升了品质和竞争力，让产品在市场中熠熠生辉。
动效设计的三个核心原则——克制有度、清晰聚焦、自然流畅
克制有度意味着动效设计应该恰到好处，不过度设计。过多或过于复杂的动效会分散用户注意力，导致视觉疲劳，甚至引起不适感。动效应该服务于产品功能和用户需求，而不是为了炫技而存在。奥卡姆剃刀原则--如无必要，勿增实体。
清晰聚焦强调动效设计应该有明确的目的和指向性。每一个动效都应该传递特定的信息，引导用户的注意力和操作。动效应该突出重点，避免无意义的装饰性元素。清晰的动效设计能够帮助用户快速理解产品逻辑，减少认知负担。
自然流畅要求动效设计应该符合用户的认知习惯和自然交互方式。动效应该模拟真实世界的物理规律，如重力、惯性等，让用户感到熟悉和舒适。流畅的动效能够营造连贯的用户体验，使界面切换和信息呈现更加顺滑，避免生硬的跳转和突兀的变化。
Linear设计师 Alex Cornell 在 AE 中完成大部分动画，视频后期用 Premiere 剪辑，Alex 说自己大概制作了将近 100 多个小时的动画。
linear没有愧对名字linear的称呼，整站所有的动站流畅自然，大部分使用的linear匀速运动。营造视觉焦点速度恰到好处，平缓的动效运动贴合整个页面的基调，不会让你看见急速跳动的小球蹦在这样的界面上。如果我觉得可以改进的，可以考虑上Apple官网里面滚动条上滑的时候，让先前的交互效果实现流畅的倒带体验，根据用户的交互速度与用户进行动效速度上的实时互动。
最后放一个旧版官网的首页交互，在现在看来也是依然碾压了市面上了太多网站，如果是这样的效果还能持续改进，那只能是“This could be better”的理念了。
回到最初
我们再回到linear产品最初的想法上，Linear 的设计理念和产品目标是紧密相连的。Linear 旨在做一个简洁高效的项目管理软件,面向开发人员。从颜色选择、渐变效果、字体选择等方面,都是朝着 "简洁"、"高效"、"开发人员" 这些关键词去的。如果把目标人群换成其他市场,设计风格可能会有所不同。比如面向大众市场可能会选择更花哨的装饰字体,面向儿童可能会选择更鲜艳跳跃的红黄色调而不需要渐变,面向日本用户可能会选择更符合他们审美的低饱和度低对比度配色。
所以在设计一个产品之前,一定要先明确自己的产品目标和理念,这样设计师才能更好地体现出这个产品独特的设计风格，开发者亦是。如果没有很好地向设计师表达产品目标,那么最终设计很容易流于表面的好看,而脱离了产品本身的需求。在五彩缤纷的世界里,单纯追求视觉上的好看容易让人眼花缭乱,你当前的设计选择很容易被下一个新选择所取代。所以我们在浏览欣赏一些设计网站时，常常会感叹,这个好看那个也不错,到最后选择了一个当时觉得非常准确的风格，套在最终的产品上的时候，变得点总是缺点什么的境地。我们要的不是设计主导产品,而是产品目标指引着设计理念。所以对于一个项目产品来说,最重要的是要有明确的产品目标理念,这样所有参与者才能朝着统一的方向努力，打造出我们心目中更好的产品。
当今这个快节奏的社会,黄蓝骑手在路上风驰电掣,地铁里人们匆匆赶路,商家提供了宽敞明亮的落地窗，精心培植的草坪，我们却无暇欣赏这美景，纷纷打包再走，抑或是再多付几块钱，让黄蓝骑手给你送过去，辜负这眼前的美景，还顺带感叹一下这世界没有美好，会不会有这样的一天，我们猛然回头记起要去欣赏这美景的时候，发现已无处可寻。
作为一个前端开发,曾经对颜色、布局、空间有着自己的追求,PS、FW、Sketch、Figma、XD等工具信没有不会的。在那个没有高效工具的时间线，为了做出雪碧图，我们用PS一个个手工排版；在没有工程化模块化的时候，我们手写原生HTML实现各种交互效果。随着工具的升级和框架的出现,本以为可以在提升效率的同时坚持开发者的工匠精神，奈何世事难料，在追求效率的道路上，我们渐渐放弃了那些对设计的理想。某些时刻你打开无数个不同的网站，体验着打开同一个网站的感觉，曾经引以为荣的前端设计想法已经渐渐失去踪影，好象隐在了flash退出舞台的那个时间。这也是我抗拒框架的原因,但又不得不使用框架,因为在当下那确实是更有效率的选择。
最初我打算分析linear的时候，也想走优设、少数派报告里面那些方法，欣赏优点，用案例的教程来实现它。但随着整理的资料越来越多,渐渐发现我们不是不知道去实现这些风格的技术，我们是失去了那颗想要去设计、去创造梦的心?不再想去追求理想，不再想去攀登的时候，当理想触手可及时,内心涌现的不是梦想成真的喜悦,而是这是否还是当初的理想的疑问。
Linear想要带回软件的魔法，打造Be Better的软件产品。
Linear 帮助我们专注于自己最擅长的事情，打造我们的Be Better的软件产品。
Linear 可能不是一个更好的“软件工具”，而是一种更好的开发软件的“方式”。
最后我定义的linear产品设计风格：
- 明确的产品目标定位，团队达成共识。
- 团队成员发挥各自专长，以追求卓越的心态，不断打磨产品。
内容产生相关
本文内的截图工具：Xnapper
本文内的文档工具：Craft
本文内的画图工具：Figma
本文内的录屏工具：OBS
本文内的搜索工具：Perplexity
本文内提到的人物：卡卡（美丽的UI Designer）
本文内没提到人物：JUST（本文导火索）
本文内的思维工具：MindNode
本文内提到的企业：极膜环境
毁灭吧赶紧的，累了！
