看了就会做系列！Linear风格实操教程，所有效果一网打尽！【UI设计0基础教程】

UP主: 即时设计-在线UI设计 · 时长: 9:22 · 🔗 B站原视频

标签: UI设计 · 网页设计 · Linear风格 · 即时设计 · 设计教程

什么是 Linear 风格

大家好，欢迎来到即时设计5分钟案例教程。本期主题是 Linear 风格的网页设计。Linear 是国外一家软件公司的名字，提供项目管理和协作工具。因为公司的设计能力太强，尤其是官网设计好看，以至于形成了一种流行的网页设计风格。

Linear 风格常用的设计元素包括：大面积暗色背景、渐变、模糊、动态流光、极细描边、微噪点、外发光、无衬线字体以及流畅克制的微动效。整体上简洁直观的设计风格可以增强用户的沉浸感，适用于直播、视频、工具软件等需要用户沉浸使用的场景。下面我们就通过一个具体案例，用 Linear 风格制作即时设计的官网，看看 Linear 设计的实现方式。

新建画板与顶部导航栏

进入即时设计工作台，新建一个文件。快捷键 F 创建宽度为1440像素、高度不限的画板，填充蓝黑色。

先来制作顶部导航栏，快捷键 O 绘制 2186×1542 的椭圆形，调整到合适位置。添加从上到下的线性渐变，颜色参数看标注。添加描边，内部一像素，颜色从上到下的线性渐变，两端都是蓝紫色，不透明度从0%到100%。一层内阴影参数也是看画面中的标注。

快捷键 R 绘制一个 1440×80 的矩形，填充蓝黑色，不透明度45%，添加背景模糊数值4。为了控制时长，像文本排版这样我们就不讲了，重点来看看左上角的图标和右上角的按钮要怎么画。

绘制图标与网格按钮

快捷键 R 绘制 40×40 的矩形，圆角8，添加从上到下的线性渐变，添加描边，内部一像素浅紫色。绘制两个 40×1 的矩形，添加从上到下的线性渐变。复制两个矩形，旋转90度，分别填充一浅一深两种蓝色。复制 40×40 的矩形，取消填充，只保留描边，放在最上层。即时设计 Logo 素材的大小为 16~18，填充白色，添加外阴影。

接着绘制一个 138×38 的矩形，圆角20，填充蓝紫色，右键设置为蒙版。绘制宽度或者高度为一像素的矩形，填充白色，不透明度5%，组成网格，网格间距为5像素，放置在蒙版内。绘制一个 138×30 的圆角矩形，填充蓝黑色，添加22的高斯模糊，放置于蒙版内。网格下层放置文本和方向图标，图标大小为 14×14 像素。

第一屏主视觉与选项卡

复制刚才做好的图标，放在页面第一屏的中间位置，按 K 等比缩放到 60×60 像素，选中全部编组，并添加外阴影。绘制几个 2×2 像素的白色小圆作为装饰。快速完成下面的文本排版。

这里有一组选择操作系统的选项，我们来做一下这部分的效果。绘制 260×28 的矩形，用编辑功能调整成倒梯形，形成从上到下的线性渐变。绘制 200×2 的矩形，填充蓝紫色。再绘制一条 425×1 的深灰色矩形，放置在下方。输入文本和图标，最后绘制几个 2×1 的浅灰色小矩形作为装饰，在这里面也可以穿插两个白色的，有一些变化。这些界面和图标素材会直接给到大家，获取方式在评论区的置顶链接，介绍资源广场整合内容。

制作流光卡片与边缘发光效果

重点是一组流光卡片。绘制 480×740 的矩形，圆角16，填充黑色，添加描边，内部一像素深灰色。为了让卡片有边缘发光的效果，我们绘制一条长236的线，和卡片的顶部对齐，添加从左到右的渐变色，三个节点都是蓝紫色，中间点不透明度100%，两边的不透明度为0%，图层不透明度调到40%。在卡片右侧描边上也添加一个发光效果。同样的方法把其他的卡片也绘制出来。

文本排版没啥好讲的，这里有个圆形图表，如果大家忘了怎么画，可以去看看我们第14期的案例教程。

全流程体验：发光背景效果

全流程体验这个模块，重点是发光的背景效果。绘制 700×700 的圆形，填充从上到下的线性渐变，再降低整个填充的不透明度为75%。添加描边，内部一像素，颜色也是从上到下的线性渐变，看画面中的标注。再绘制 300×300 的圆形，位于大圆的下方作为发光点，填充蓝紫色，不透明度10%，添加100的高斯模糊。绘制一些网格作为装饰元素，网格周边填充几个矩形，做出渐变的效果。

资源与工具模块：明暗状态对比

资源与工具一体，这部分重点也是发光背景。我们绘制 1150×1150 的圆形，添加径向渐变，中心和边缘都是黑色，不透明度从100%到0%。再绘制 460×460 的小圆形，填充蓝紫色，不透明度20%，添加100的高斯模糊，图层不透明度50%。

把前面的网格和图标复制过来，在网格中添加光线效果，绘制方法跟前面流光卡片的边缘发光一样。网格上的四个模块排好以后，把右下角的一组放在圆形背景上层，另外三组放在圆形背景下层，形成明暗两种状态。这里用到的所有图标素材都会提供给大家。

最新动态模块：层次感背景

再下个模块，最新动态。还是先做背景，绘制 1456×1456 的圆形，填充从上到下的线性渐变，添加描边，内部一像素，颜色也是从上到下的线性渐变。还是复制一组图标过来，绘制 60×358 的矩形，放置在图标的下层，填充从上到下的线性渐变。复制两组，调整大小，更换 Logo，降低不透明度，在视觉上形成层次感。下面几个小矩形的大小为 40×40，矩形里面也是网格装饰。

注册模块：发光边框与渐变立方体

注册模块，首先是一个发光边框的效果。快捷键 R 绘制 1228×598 的矩形，圆角16，取消填充，添加描边，内部一像素蓝黑色，添加内阴影，形成轻微的发光效果。

还有个渐变立方体的效果。先绘制一个正方形，通过轴测图插件生成立方体。用钢笔工具勾出立方体内部的三条边，描边宽度一像素，颜色为径向渐变，端点都是蓝紫色，中间的不透明度100%，外边的不透明度20%。再用钢笔工具勾出立方体的形状，隐藏原来的立方体的图层，给形状路径设置大小为1的居中描边，颜色为蓝紫色，并添加两层内阴影，参数看标注。这样渐变立方体就做好了，编组之后可以任意调整旋转角度和大小。

底部水波纹与流光线条效果

最后一屏有个圆形水波纹的效果。绘制 104×104 的圆形，填充蓝黑色，添加内阴影，并在外侧再添加 156×156 的圆形，取消填充，添加描边，内部一像素，从左上到圆心处的线性渐变。绘制 173×79 的矩形，填充深灰色，不透明度10%，增加20的背景模糊，并在上面覆盖五条流光效果的线，从上到下，五条线的长度依次缩短。

获取素材与设计规范

案例操作部分就讲到这里。大家别忘了通过评论区的链接，获取视频中案例的设计素材和源文件。

在这里要特别感谢本期案例的作者及即时设计的设计顾问——资深UI设计师梦想家。为了让大家更方便地使用 Linear 风格，他还整理了一份 Linear Design 的设计规范，获取链接一起放到评论区了。大家也可以多多关注老师的账号，有很多设计干货。

以上就是本期教程的全部内容，感谢你能看到这里，我们下期再见。