原文地址：Martin_K（站酷）
作者：Martin_K
转载请注明：学UI网》为什么你始终做不好版式设计？
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
qiu~
变成了沈腾。
看到那根点燃的火柴吗？
qiu~
变成了火腿肠。
从贾玲变成沈腾，将火柴变成火腿肠，有趣的同时却没有影响到整个画面的调性，这便是移花接木的方法，设计理论叫做置换同构。
这是一个8,这是一个苹果，
你想到了什么？
利用苹果置换成8的形状，但显然看起来有些粗糙，融合调整下，让苹果有了8的样貌，当然还可以此类推成其他的样式。
一个冰淇淋与一座富士山，找到近似相同可置换的区域。
![[优化输出图像]](https://imgs.xueui.cn/wp-content/uploads/2022/05/ezgif-5-3755c0b106.gif)
在原有结构不变的基础上，将冰淇淋替换成了富士山，创意就是这么简单。
置换的理念是将两个毫无关联的图像，比如这样，将其中一部分与另一个部分替代，
![[优化输出图像]](https://imgs.xueui.cn/wp-content/uploads/2022/05/ezgif-5-6213e0ac01.gif)
形成一种新的组合形式，替代后的物体和原来造型保持相对的一致，置换的设计就产生了，当然这都是相对简单的。
由此我们可以尝试更多脑洞的置换设计，比如人在蛋黄里游泳，农场种在蛋黄里。
水壶倒出来的不是水而是云朵，顺着这样的思路还可以增加场景元素形成全新的创意设计。
▽
看到这样一个场景，如果要做一个手机的海报，
你想到怎么置换吗。
将场景调整成手机外边的形状，手机平躺在场景中。
放置主题文字，再利用相关的场景元素增加融合的真实感，这样简单、有趣、创意的设计就做好了。
原文地址：修先森撩设计（公众号）
作者：修先森
转载请注明：学UI网》还在为没灵感发愁？那是没学过移花接木这招！
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
以下作品主要是练习通过 Sketch & Adobe Illustrator 软件配合实现立体图标设计，掌握通过色彩的变化营造质感和光感。
以下作品主要是练习圆柱体的绘制和光影的处理，以此来表现排行榜。配色比较趋向于年轻化，青春活泼的风格探索年轻化的设计趋势。
这一组作品主要是研究极光风的配色和磨砂玻璃效果的结合，用磨砂玻璃层作为图标的保护罩，带来朦胧美的感官体验。
随着网民年轻化的趋势，UI设计也逐渐趋近于更加青春活泼的风格。探索了一组低饱和度高明度的图标配色，利用不透明度渐变实现晶白风格图标。
这是在五一假期前绘制的一个相机 APP LOGO，探索多色环形组合来进行色感营造，利用简单的内阴影和蒙版工具刻画效果。
一组带给大家好心情的 IP 表情设计作品，超椭圆的造型和青春可爱的风格结合，练习表情设计的能力和光影把控的技巧。情感化设计的技能被逐步放大，也是提高作品亮点和视觉感的一个不错的方向。
想要休息的时候来了一个灵感，大家都喜欢喝咖啡，我还是比较喜欢喝茶~O(∩_∩)O哈哈~有感而发绘制了一个关于茶的 APP LOGO。
带有纹理的球体绘制，你可以想象这是一个瑜伽球。利用 AI 软件的 3D 功能进行造型绘制，然后利用 Sketch 软件进行质感细节的刻画完成。
这组作品主要是研究 B 端设计的栅格化系统，以及配色风格的尝试。随着 B 端 C 化的趋势，在 UI设计层面的风格探索中，将会变得更为大胆，突破风格定义的束缚。
以上是近期输出的一些 UI设计探索作品，后期将会继续探索更多设计风格和细节的刻画。
原文地址：黑马家族（公众号）
作者：黑马青年
转载请注明：学UI网》近期输出的一些UI设计探索作品
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
常见的图标风格有线性、面性、彩色、写实、3D等，图标的选用因页面的设计风格、图标的位置等原因会有所差异，主要的作用是反馈动作和吸引用户更多注意力。
线形/面性：最基本也是做常用的风格，广泛用在页面设计中。
彩色：通常用于反馈用户的操作或者增加用户的注意力。
3D/写实：当页面中的某哥内容需要引起用户高度注意时使用，一下抓住用户的视线。
Tips: 现在字节、百度新推出的一些年轻化产品中，有很多精致的3D写实图标，极具个性，很好地迎合了年轻用户的喜好。在扁平风格流行的当下，这样的尝试也是一种突破。
简单的线性图标重量轻，看起来更简约，不会给页面带来太大的视觉负担。比如当页面中已经有很丰富的图片和内容，那么更适合选用简约的、重量轻的线性/面形图标，防止页面过于杂乱。
相反，如果当前的页面中只有文字，信息量很少，那么更适合利用重量大的彩色甚至3D图标来增加页面的丰富性，让页面看起来更有设计感，给用户带来视觉上的愉悦，简约而不简单。
构成图标的元素包括描边的粗细、端点的方圆、圆角的大小、色彩的轻重等，表达式规则是统一的，以便只给观看者识别图标所需的最小更改。
描边粗细：手机上常用到的描边粗细有2px、3px、4px。2px的看起来会显得更加精致，4px的描边视觉较重，可以用在优先级较高的区域作为功能性图标,。
端点/节点：图标的端点有平头、圆头和方头，图标的节点有斜接连接、圆角连接、斜角连接，具体使用哪种样式要根据页面的情况统一设置。
圆角半径：方形的图标边角过于锋利，用户有时候看起来会不舒服，圆角图标更圆滑，相对来说更容易让用户接受。虽然圆角用的更普遍，但具体使用哪种，还是要考虑页面的整体风格再决定。
图标的外形有圆形、方形、三角形甚至不规则形状的，所以我们很难将不同形状的图标尺寸完全统一。
这个时候网格就起到很关键的作用，有了网格相当于提前将图标限定范围，在网格范围内根据图标的重量和重心灵活调整大小，这样会让不同形状的图标看起来更统一。
由于设计软件的局限性，虽然有些图形已经居中对齐，但有时候还需要进行视觉校正。
最典型的图标案例是“播放”图标，利用设计软件对齐中间的三角形后，会发现三角形的位置看起来偏左。
利用软件对齐后，我们还需要再用眼睛确认一遍，我们可以将三角形向右移动，保证三角形的重心与圆形的重心一致，这样整个播放图标看起来会更舒服。
设计图标时，我们的第一反应是不带透视的二维图形。因为我们观看手机的视角都是平视，所以大多数的图标都没有透视，看起来会更简洁。
带透视的图标会给用户营造一种空间感，可能会感到认知失调。虽然这种带透视的图标能引发用户关注，但不建议这么设计。
图标比例通常使用8的倍数作为基准，例如8px、16px、24px和32px，以便在各种环境中进行流畅地切换。除此之外，在移动端等屏幕尺寸较小的页面中，还会使用4px的倍数，来实现多功能性。
图标的设计要使用用户能够快速理解的且最简洁的元素。图标的尺寸通常很小，要尽可能做到对用户友好，可以使用一些简单的隐喻设计，但含义不能过于复杂。
一个图形能说明的问题，没必要再添加多余的图形。复杂的图标可能需要花费用户很长时间才能理解它们的含义，这样反而会影响用户的操作。
这一点和刚才说到的图标清晰道理一样。图标最重要的目标是快速传递信息，特别是对于尺寸很小的系统图标，最好只保留最基本的内容，移除多余的装饰元素。
这里说得一致性，并不是指一个产品中所有页面都只能使用一种图标风格。一个产品有很多页面，线性、面性等多种图标风格可以一起使用。
但在同一个页面场景中，执行相同功能的图标应该保持相同的样式。
面对不同的操作系统，例如iOS和Android，同一功能对应的图标也会有差异。针对不同的系统，我们可以选用大多数用户熟悉的图标，这样用户能更快地理解图标的含义
以上就是常用却容易忽略的图标设计细节，希望通过这些内容能帮助你对图标设计有更深的认识。
原文地址：Clip设计夹（公众号）
作者：Clippp
转载请注明：学YUI网》如何更好的设计图标？优先注意这些容易被忽略的细节
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
我们先来分析一下这个 LOGO：
1. 基本形状为字母 D；
2. 一大一小、一长一短均匀的进行向外发散渐变。
如果我们把一大一小、一长一短分别单拿出来，都是比较方便做出来的，先做出两个不一样的线然后绕着 D 的外轮廓混合就好，但是同时满足这两个条件的话，就需要采取其他的办法，ok，下面我们来看一下演示步骤。
第一步，我们先把字母 D 的外轮廓画出来，直接用一个方形右边拉圆角即可！
然后我们选择【对象】➡️【路径】➡️【偏移路径】，数值改为负数，向内缩小复制一个。
将里面的 D 左边断开，并连接到外面的 D 里面。
用上面同样的方法再次向内整一个小 D。画好后我们就可以直接删掉它了…不是，删一半就行，因为图形是上下对称的，我们先画一半直接镜像！可以事半功倍，能偷懒就偷懒。
画完这三条线有啥用呢？不急，我们先从最外面的入手，先在左右两个端点出分别画一大一小的圆。
然后对这两个圆进行混合，用【混合工具】分别点击两个圆，指定步数改为 9，然后再【替换混合轴】，就可以让圆沿着我们画好的路径进行大小重复排列。
然后我们在最小的线的两头端点处分别画一个很小很小的圆，再次执行前面同样的操作，混合 9 步，替换混合轴。
然后我们分别让上面的大圆对下面的小圆进行混合，步数给的大一些，这样就会出现发散效果的图形啦。（别忘了先扩展和取消编组）
那一大一小的发散该怎么实现呢？这就用到了我们第二根线了，我们分别把单数混合上面的圆向下移动到第二根线上，然后调整一下间距，就搞定了！
画好一半了，直接镜像复制一下，整体就出来了，然后我们给每一根线添加上渐变色。
最后加上排版就搞定了，这个 logo 的难点在于他是一大一小的进行发散，所以直接用单个线来混合达不到这个效果，所以我们就采取单一作战模式，用同样的方法，选择不同的混合对象，会实现不同的效果。
红点奖作为世界三大设计奖之一，一直以来都是设计师们梦寐以求想要获得的奖项，它的 logo 大家应该都很熟悉，但这种球形环绕式 LOGO 很多同学都不知道应该怎么实现，ok，下面我们就来设计一个红点奖颁给日夜操劳却依旧菜 b 的自己…
首先第一步我们先画两条相等长方形，其中第一个填充为红色，第二个去掉填充色和描边。
然后我们就向下复制多个，但也不用太多，给太多不好…
之后调出符号窗口，将这个图形编组后整体移动到符号窗口里面，也可以取一个好听的名字，虽然没什么用。
放完后先不管它，我们额外画一个圆形，注意用描边模式，之后砍掉它的一半。
选择【效果】➡️【3D】➡️【绕转】
先选择【贴图】，将符号部分改成我们刚才设置的图形，然后点击【缩放适用】及【三维模型不可见】，可以适当拉高拉宽，之后确定回到绕转页面，拖动左边的方块更改它的绕转方向，然后选择下方【表面】改为无底纹。
得到新的图形之后，是漫长的取消编组和扩展，多操作几次，你就可以得到下面两个部分。
将他们居中对齐，然后给下面的图形增加一个渐变，这样效果就出来了！
最后就是更改一下细节了，将上面和下面的部分可以单独切一下，做出一个角度。ok，基本的方法就是这样啦，虽然最终效果和红点的原 logo 不太一样，有点像破产版，但没办法，想得到真正的红点奖，还得靠你自己的努力！！！
我们在遇到相对比较复杂的图形的时候，一般就会用到形状生成器工具，它可以通过合并或删减简单形状创建出复杂的形状，掌握了这个工具，可以说你的 logo 就多了无数种可能性。下面我们通过一个看起来比较复杂案例来演示一下如何使用它！
越是看似复杂的东西，往往越具备一定的规律性，我们看一下这个图形，可以发现它是由一个部件通过旋转复制得到的，如下图：
所以我们只需要把这红色部分先绘制出来，就很容易画出来了！我们看一下操作步骤。
第一步先画出他的网格，先画出横线部分，再倾斜 60 得到右斜线，然后将有斜线镜像复制出左，最后三组居中对齐。
接着我们画出它的圆形框架，注意与线段的对齐关系。
ok，这样就把所有的网格线全部绘制好啦！这个时候就可以回到开始的时候讲的，我们只绘制那六分之一的图形即可。选择【形状生成器工具】按住 alt，将多余的线删除（记得提前复制一份圆备用）。
得到这个图形后，我们将它描边加粗一些，然后扩展，之后绕大圆圆心旋转 60 度复制一圈（为了方便切割，我们把线往外延伸一些）。
这时候我们再次请出形状生成器工具，一是将大圆外圈的部分删掉，二是将内部闭合的地方填充上。
最后我们再在中间连接一个矩形色块，就做好啦！为了充分体现形状生成工具的强大功能，特意选了这么个复杂的 logo，真是累瞎了我的狗眼… 总之总之，形状生成器工具的作用有很多，可以提取闭合图形，可以删除多余图形，线或者面都可以进行操作！
我们无论是在做 logo 还是做辅助图形的时候，这种异形扭曲空间图形真的很常见，它们看似复杂，其实用一个工具就可以搞定，就是封套扭曲工具。
他一共有三种表现形式，第一个是用变形建立，也就是我们在效果中看到的旗形、波形、鱼形等，常用于文字；
第二种是用顶层对象建立，比如先画一个苹果，然后打上文字介绍，用这个建立就可以让文字扭曲成苹果的形状；
而第三种，用网格建立，是可控性非常强的扭曲变形，我们通过建立网格体系产生大量的锚点，拖动任意一个都可以产生不同的变化，下面我们就用这个方法来做一下这个 logo。
第一步，我们先画一个长方形，向下均匀复制多个，形成多个等距的长条。（也可以用混合工具）。
第二步，给图形添加渐变色。
第三步，我们选择图形，执行【对象】➡【封套扭曲】➡【用网格建立】，行数和列数均设为 1。
然后就是关键的一步了，我们用直接选择工具（A）拖动调整网格的锚点和手柄，得到一个扭曲的图形（如下图 1234 各点的位置变换）。
调整完之后将图形扩展，用形状生成器工具将中间重合多余的地方删掉（按住 alt 删除）。
ok，最后加上排版，一个通过扭曲得到的抽象鸟 logo 就做好了，这个方法基本的套路就是这样了，主要在于锚点摇杆的调节和把控，另外，在设置网格半径时，数值越大，可操作的空间及难度也就越大，大家可以多去试试看。
参加过波波品牌课的同学们应该都知道，这类 logo 就是贵为九大构成之一的重复构成！因为特有的重复性和规则性，使它呈现出来的效果会很高级很实用。但是我看很多同学在做的时候都是单个的缩小放大摆放…这样往往是很不标准的，下面给大家安利一个简便高效的方法！
首先第一步我们还是先把基础图形画出来，用钢笔工具勾一个造型即可，注意线条要丝滑一些！
然后就是重点部分了，我们选择【效果】➡️【扭曲和变换】➡️【变换】依次调整一下的参数（参数不是固定的，要打开预览根据自己的实际情况来设置）
缩放：控制变换的大小对比
移动：控制变换的路径方向
旋转：控制变换的路径角度
副本：变化添加的图形数量
ok，调整完后就可以得到下面这个造型了！
然后我们给它添加颜色啦，这里再来一个快速设置渐变色块的方式，先做好最深色和最浅色，然后用混合工具很容易就做出来了。
做好颜色后我们就一个一个的给它上色就可以了。
最后加上底色和排版就搞定啦！
变换这个方法真的非常好用，非常适合重复构成的 logo，这里给大家留个小作业，可以用这个方法试着自己做一下华为的 logo。
立体 logo 往往拥有比纯扁平 logo 更加良好的视觉展示，在色彩上也更多运用渐变色进行搭配，使其更具吸引力。
但是实现起来往往比扁平 logo 要困难的多。下面我们通过这个案例来演示一下绘制立体 logo 常用方法。
先简单分析一下：
由三个立方体堆积搭配渐变色形成视觉错位感，ok，我们第一个思路就是先从单个立方体入手，下面我们就来绘制一下立方体。
首先我们画一个正方形，大小给到 80px（也可以是其他数值，但要记住这个数值）。
点击【效果】➡️【3D】➡️【凸出与斜角】，执行三步操作：
1. 将位置改为等角上方；
2. 凸出厚度改为 80 的两倍也就是 160；
3. 表面材质选择无底纹。之后点击确定。
这样一个基础立方体就出现啦，为了方便后面的操作，我们可以换成描边模式。然后通过这个立方体进行旋转，分别旋转 -30、-150，90 度得到三个不同倾斜角度的立方体。
将他们组合在一起，然后用形状生成工具绘制出错位感。
再依次给每个面添加上渐变色，就完成啦！
那除了这个方法还可以怎么做呢？假设我们已经画好了草图，在草图的基础上绘制 3Dlogo 的时候，可以使用网格大法！
可以看到这个图形的斜边是直线倾斜 30 度来完成的，那我们就可以用这个角度先把网格绘制出来。
然后通过网格可以直接用【形状生成工具】或【实时上色工具】将视觉错位之后的图形绘制出来，省去了 3D 的步骤。
之后就和第一种方法一样添加渐变就完成了，这个方法比较适用于在已经有草图或想法的基础上来绘制，会更精确更快捷，如果是想单纯的绘制立体图形，那还是更多的用第一种 3D 凸出与斜角的方式。
这是全球市场调研咨询公司 PRS IN VIVO 推出全新品牌 LOGO，相信大家看到它应该不会陌生，没错，它就是运用了彩色半调效果来进行视觉设计。它会帮你生成一个波点圆形点阵，呈现出一种像素化感觉，同时也是波普艺术中重要的变现形式，下面我们就看一下如何做出彩色半调效果的 logo。
我们在进行设计前，先新建一个 cmyk 模式的画板，分辨率也给的大一点。
我们画一个正圆，给它添加一个黑白渐变。
将渐变模式改为径向渐变，再点击反向渐变，再将黑色部分改的稍微灰一点，得到一个新的渐变圆形。
然后我们就用这个图形进行彩色半调。【效果】➡【像素化】➡【彩色半调】
那么如何控制点阵中原点的排列疏密和数量呢？
我们在进行彩色半调的时候，会添加一个半径参数，这里数值就决定了点阵的数量（也可以随便输入一个数值，然后放大缩小圆形进行控制）而疏密程度，则是由一开始我们给予黑色的黑度所控制的，越黑越密，越浅越疏。
OK，调整完参数后，我们将它变成矢量图形。具体操作为：
1.【对象】➡【栅格化】
2.【图像描摹】➡【黑白徽标】➡【扩展】
这样一个矢量的彩色半调圆形点阵就做好了，之后添加一个粗一点描边的圆框，将圆框与之前的圆重复部分用形状生成工具提取出来，删除多余的波点，再添加渐变和文字排版，就得到了这个 logo 图形。
彩色半调不仅仅局限于圆形哦，其他任何形状都可以用这个方法进行点状像素化，还不快去试试？
上面这些图，虽然可能没有见过，但大家一定都不会太陌生，是的，上面的图形都是用黄金比例圆来完成的，只要是做过 logo 有一定时长的同学就一定会接触。我也曾经遇到过好多次客户直接在设计需求中点出了要用黄金分割比例做设计图形…至于它为什么好看，那不是我们今天所研究的，今天只负责教会你该怎么用！
工欲善其事，必先利其器。想要用黄金比例来绘制图形，那首先你得把黄金分割比例的圆先做出来，这里介绍两种比较方便快速的绘制方法：
第一种是黄金比例分割，也就是通过绘制 0.618 倍数的多个图形，如下图。
但是我们在实操中没有必要用这么规整的来方形堆积来绘制，只需用一个工具就可轻松搞定！
双击【比例缩放工具】，等比数值改为 61.8%，点击复制。
这样就得到了 1：0.618 的两个圆啦，我们只需按住 CTRL+D，重复复制多个，一个黄金比例圆就画好了！
第二种方法是利用斐波那契数列绘制。斐波那契数列指的是：1，1，2，3，5，8，13，21，34，55，89…这样从第三项开始，每一项都等于前两项只和。换算成设计语言的话就是这么个图形：
我们用这个结构，把每一个正方形都换成圆形，组合起来就是一个黄金分割比例的圆形环。
以上两种方法哪一种都可以！灵活运用！下面我们就用画好的黄金比例圆来绘制 logo。
首先，你得先画一个草图…纸上或者 PS 都可以，将它垫底。
然后我们把黄金比例圆放进来，注意不要随意放大缩小，先整体编组，将最大的圆环对准图形最大的弧线部分，之后就可以将剩下的圆进行一一对应摆放了。（可无限重复使用，一些小细节可以适当拉大拉小一点点）
摆完之后我们用【形状生成工具】或【实时上色工具】，将切割得到的大象绘制出来！
黄金比例固然好，但是我们在设计的过程中不能过度的去依赖它，毕竟无论你用不用它，只要 logo 是好看的，那就有价值！PS：不过它确确实实能够为你的提案加分…很多客户都吃这一套，嘘…
好勒，八个案例全部完事了，不知道大家吸收的怎么样，其实虽然分了八个方向，但有很多技法都是互相通用的，而且AI中隐藏的小技法远远不止这些，相信跟着一起实操过来的你，一定可以丰富自己的武器库，给自己的LOGO作品集，增添一大波可能性！
好了，时候不早了，做 AI（Adobe illustrator）也做的有些累了，大家晚安！记得实操！
作者： 告白天
转载请注明：学UI网》拿捏8种LOGO设计技法！
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
工具：Photoshop、手绘板
笔刷：art-markers：Round kyle 70（文末附笔刷下载链接）
适合：板绘零基础入门
打开PS，新建一个2000px*2000px的文档，颜色模式为RGB。
我们不要急着开始画，先试试用马克笔笔刷Round kyle 70画出蓝色的水平线和波浪线，熟悉一下笔刷画出的效果，和笔刷培养一下感情。
这个过程中，你会发现，这个笔刷如果只是从头到尾画一条线，看起来很平淡，但如果在蓝色线条之上多画上另一条红色线，两条线的交叉位置就出现一个颜色更深的“点”，我们把它叫做叠色区，它能让整个造型变得不俗气，高级起来了~
这时，我们正式开始画小盆栽啦，用笔刷画出一条蓝绿色水平线。然后再画出整个容器的“身体”。
这里要营造一个小心机，不要让水平线和容器身体连接起来，这样就能制造一个断线，断线表示我们下笔也是要休息的，这是一种线条的呼吸，极简的感觉就是这样来的。
用亮蓝色画出盆上的花纹，这里我用了波浪线，还可以把它画出框。
高级的感觉靠的就是“有技巧的画不像”来制造的，比如植物大都是绿色，但我们这里用了红色。这种故意用错颜色的方法，就会让画面看起来很时尚。
试一下，用红色线条画出植物。植物叶片很简单，由一条线加一个圆圈组成。
这里注意一下，相同的颜色也可以制造叠色效果哦。
有点感觉了吗？再来试试另一个盆栽吧~
这个花盆的造型是个六边形，用亮蓝色先画花盆的上下两条等长的水平线，然后用红色画出花盆的左边和右边的折线，框出一个花盆轮廓。
再用黑色画出花盆内部的线条，花盆中间就不会显得空空荡荡。
在花盆上面的左右两边分别画上两片叶子，像两个猫耳朵。然后再画出中间的叶片，叶片和叶片之间可以叠色表现，看起来就像一顶皇冠。最后再在上方继续画叶子，类似菠萝头的造型。
最后，我们再用红色在每片叶子尖上画一个小线条，就像给叶子涂指甲油。这是一个点睛之笔，多肉的颜值就又提升了。
最后把画好的两幅小盆栽放在一起，看看效果~每幅小画我们都可以配点文字，有点仪式感，这样画起来也很有趣。
最后，这里的有我画好的一页简笔画练习，不焦，不躁，一天进步一点点吧~
长图版更适合临摹：
百度网盘下载
链接：https://pan.baidu.com/s/1OdfNVJID_Cq3UbgawGQxbw
提取码：aqdb
原文地址：飞屋设计
作者：飞屋睿UIdesign
转载请注明：学UI网》超级可爱！插画萌新必学的PS极简马克笔简笔画：盆栽篇
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在团队活动时，从搭档的一个眼神我们就能预判他接下来的动作，相互的默契配合能让我们顺利地完成任务，在产品设计中的预判设计也可以得到事半功倍的效果。
1.历史记录
a.用户操作行为记录
广告优化师通常会管理几十至上百个账号，需要在多个账号之间频繁切换去盯盘和新建广告，频繁的操作难免会造成信息遗忘和决策卡顿，从而会影响操作效率。在管理后台的设计中可以通过记录用户最近操作行为，恰合时宜地为用户提供帮助。
案例：在新建计划环节，标识出本账号上次的选择记录（最近一次的投放目标），辅助优化师快速做决策。
b.基于操作习惯的系统预测
平台系统可基于个体操作习惯和大数据分析来预测用户需求，提供高概率的操作建议，给予用户贴心指导。
案例：针对广告平台表格信息密集，不易快速获取关键指标的问题，Google提供了用户自定义栏，而Facebook的表格栏会根据用户列操作习惯和自定义栏行为进行大数据分析，预置一些高频意图的组合栏，一键切换即可查看关键指标，操作更便捷。
2.效果预知
a.效果预览
表单页对填写的物料内容进行映射，展示真实效果预览，降低用户心理的不确定性。
案例：在进行广告创意创建的过程中，优化师填写完标题和上传完物料后很难知道广告投放到手机端用户看的真实效果。而所见即所得的可视化编辑方法支持创意样式实时预览，可以辅助优化师更好地进行创意优化。
b.效益预估
针对一些需要效力评估的页面，平台通过预置好的算法对用户内容的表达及时给出估算值，给出建议，从而提高内容填写质量，降低填写的盲目性。
案例：Google广告平台在新建创意环节，对广告素材资源的组合方式和数量进行估算，呈现当前广告与高质量广告设置的差距，辅助用户进行高质量的广告制作。
3.智能辅助
用户在进行输入等操作时可以提供智能辅助，例如表单填写时对需要录入信息的区域提供辅助提示，通过自动补全或联想词来帮助用户快速录入信息，在保持用户的操作自由度的情况下提效。
4.行为惯性
在一些场景里，用户的行为具有很强的关联惯性，例如上班时间进到办公区域打开办公APP首要目的一般是打卡签到。通过梳理主线任务或整理用户体验地图可以挖掘出很多基于行为预判的设计机会点。
案例：预判用户在工作台内截屏后大概率是去反馈遇到的问题，适时将反馈入口透出，可以提高反馈的效率和用户体验。
现实生活中，在与他人交往时，清晰的表达尤为重要。同样是演讲，有的演讲者“词不达意”没有重点，或者内容晦涩难懂让听众感觉索然无味；而好的演讲者则会用场景化的方式将逻辑复杂的事情讲给听众，让听众有身临其境的画面感。
好的设计也应该是清晰好用的，能让用户沉浸其中轻松高效地完成自己的任务。
如何让用户通俗易懂地了解产品功能，并能快速上手？我们可以从功能易理解、内容强吸引和选择无负担三个方面来降低用户的操作门槛。
a.术语转换
将一些晦涩难懂的词汇转化表达方式，转化为更贴近用户视角的文案描述，传递细节感受；
b.信息有效展示
透过需求背后的真实意图分析和高效率的信息展示可以让用户更方便地获取更多信息，提升产品的服务效益。
案例：服务器预警平台从传统的表格形式优化成拓扑图。将所有的云服务器都抽象成一个个矩形，矩形的颜色代表服务器监控指标的状况。当方块颜色显示为黄色，则表示该云服务器内有监控指标出现了异常，这个时候目标用户就需要重点关注。
对于老用户来说，从之前习惯的平台迁移到新的平台一般会有很大的抵触心理。迁移前用户考虑的关键点包括：不迁移是否有影响？新平台有什么优势吗？迁移起来麻烦吗？
以百度营销客户中心迁移引导页方案为例，初期方案首屏只告诉用户平台升级了，但是不能快速了解到升级后的核心优势有哪些，同时迁移按钮设计得很弱，传达的信息是迁移可能会很麻烦，很容易让用户止步于此。
所以在进入迁移导流页面时，首屏首先要讲清楚新版平台的能力和迁移方式。对于当下想迁移的用户，明确迁移方式和入口；对于徘徊不定的用户，告知迁移后的好处并做好最后下线时间的提示。这些信息不仅能够消除用户迁移前关于成本的顾虑，也能吸引用户立即开始迁移行动。
B端产品操作链路通常比较长，用户很容易迷失其中。对于逻辑复杂的功能在做页面设计时需要突出主次和流程引导，尽可能提供一个主要触发的主按钮，让客户不用过多思考就知道模块和操作的隶属关系，降低认知的负担。
我们在执行任务时总是希望有过往经验可借鉴，如果事情按照自己的预期发展了会觉得很踏实有可控感。同理，用户在操作一个系统界面时也会有类似的心理变化，对于自己熟悉的功能希望主动权在自己手里，能复用之前的经验无需额外的学习成本；对自己不熟悉的功能希望有及时的引导，能很快地上手并能掌握主动权。
不可控的操作体验会让用户在使用过程中产生很强的挫败感，一旦有了这样的心理感受就很难被扭转。那如何保障体验的基线确保用户正向的感受呢？下面就结合操作一致性和明确指引性两方面进行说明。
针对同类型的功能，在交互设计上要尽可能地保持逻辑对齐，保证平台的一致性同时降低用户的学习成本。一致性设计对产研提效也有很大的益处。
案例：下例中的批量操作项的逻辑，都是通过选中复选框之后在模块上方展示批量操作栏且支持一键关闭。这样该平台的用户无论在任何场景下只要注意到复选框就对批量操作功能有了预期，没有额外的学习成本。
对于复杂的使⽤流程，最好能够在客户使⽤的过程中建立统一的指引，引导客户⼀步步完成操作，从而提高任务的完成率，促成业务目标达成。
案例：当一个平台需要用户完成的任务繁多且流程性强时，需要把所有的核心任务按照层级进行呈现，并作为一个固定模块展示在醒目位置。这样用户既可全局视角理解业务又能作为功能入口快速触达。
B端业务中，交互设计的核心在于为特定场景设计择优的行为路径；通过分析用户当前所处的阶段和场景来判断此刻遇到的关键问题。针对不同的问题去选择对应的解决策略，例如对于新手来说降门槛会是首要任务，对于熟手来说操作的效率会显得更为重要。结合预判设计、表达清晰、操作可控三个维度的案例可以让我们在对业务理解有限的情况下，产品设计能有更多思考角度，也能有更明确的设计主张。
原文地址：百度MEUX（公众号）
作者：商业用户体验部
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
咦，同样是用Figma，为什么同桌小花早早下班，隔壁二狗岁月静好，而你却在Figma中焦头烂额？设计提速的秘诀就在于Figma中功能各异的插件。但当打开Figma插件库，海量插件让人头晕眼花，究竟哪一款才是最适合你的呢？为此QQ设计师在日常工作中反复实验，终于找到了这些宝藏插件，让UI设计领域的你成为高效的设计师。
很多设计师在从Sketch转换使用Figma的时候，找不到对应Sketch里的缩放功能。此时你就需要Skale，这是一款热门好用的缩放插件，可以设置元素缩放中心，缩放比例或者缩放到特定的宽度、高度（包括该对象的所有属性也会随之缩放）。
下载地址：https://www.figma.com/community/plugin/808289809557716614/skale
经常做平面的设计师会遇到的一个问题，Figma内要如何在创建曲线的文字呢？你不妨可以使用To Path插件，它的功能是可以按照指定的路径来变换图形和文字。
下载地址：https://www.figma.com/community/plugin/751576264585242935/To-Path
Morph可以在Figma内快速创建一些特殊视觉效果，如浮雕，霓虹灯，抖音故障效果，倒影，玻璃等。可以帮助设计师快速进行一些风格化的尝试和探索。
下载地址：https://www.figma.com/community/plugin/906950256777348534/Morph
当我们需要多种颜色混合渐变的效果时，Mesh Gradient的作用是可以在Figma内以网格的形式编辑渐变，你可以编辑、拖动、填充这些网格点，做出极光的效果。
下载地址：https://www.figma.com/community/plugin/958202093377483021/Mesh-Gradient
做设计非常常用的一个方法就是多去尝试，当我们在做某个界面的时候不知道配色该如何处理的时候，可以使用Webgradients插件内置的多种高级配色，或许你的灵感就此诞生。
下载地址：https://www.figma.com/community/plugin/802147585857776440/Webgradients
相比Sketch，Figma在Auto layou方面极大的提升了设计灵活度。而Auto Layout Styles插件可以很好的管理或者单独对某几个元素配置Auto Layout，设计师可以在插件内设置好布局关系并进行命名，然后应用到设计中。还可以对已经设置好的布局样式进行修改，Auto Layout Styles会同步到所有调用过这个布局样式的元素中。
下载地址：https://www.figma.com/community/plugin/939173063111899081/Auto-Layout-Styles
大家在工作中经常会需要去修改大量样式，这时候你就可以使用Batch Styler插件，它的主要提效点在于可以批量修改颜色属性样式，批量更改排版样式，批量删除、重命名样式。
下载地址：https://www.figma.com/community/plugin/818203235789864127/Batch-Styler
当需要批量创建样式的时候，手动逐个去创建并不是有效的做法，而Styler插件可以快速批量创建样式（包括文本，颜色，效果等），它可以基于图层属性批量创建、修改或更新样式，当设计师在搭建组件库样式的时候，Styler可以大大提高工作效率。
下载地址：https://www.figma.com/community/plugin/820660579767995949/Styler
设计师在Figma内搭建组件库时，Design System Organizer插件可以更方便设计师创建，管理和修改组件库。超级提效实用的功能包含：1.像文件管理器一般管理组件内容。2.项目在类别树之间拖拽移动。3.文件之前批量转移样式。4.批量重新链接实例和样式。
下载地址：https://www.figma.com/community/plugin/802579985985331070/Design-System-Organizer
在Figma内，当需要展示界面因为拉伸拖拽而发生响应变化的效果时，使用口头描述和各种静态界面标注并不是最优解，使用Breakpoints插件，可以做一些响应式动态布局的效果，并共享动画原型。即使团队其他设计师没有安装这个插件，也可以在拉伸界面时预览到动态布局。
下载地址：https://www.figma.com/community/plugin/824289601590456356/Breakpoints
同时设计深色模式和浅色模式的视觉稿会耗费设计师不必要的精力，Themer的主要功能包括一键切换样式，主题管理，团队共享主题。能够从团队库中的已发布的组件创建和交换主题。将其作用于颜色、文本和效果样式的替换。设计师使用Themer可以一键切换成深色模式和浅色模式的设计稿，避免无效的适配模式工作。
下载地址：https://www.figma.com/community/plugin/731176732337510831/Themer
当需要在做界面的动画时，很多设计师会问，Figma要如何导入AE？其实未必要导入AE才能做动画。Motion插件的作用是可以直接在Figma内完成关键帧动画设计，将大部分图层属性创建成关键帧动画，避免设计师做动画时需要不停切换设计工具，在Figma内就可以轻松愉快的完成静态和动态的设计稿。
下载地址：https://www.figma.com/community/plugin/889777319208467032/Motion
在Figma内使用LottieFiles可以将自己的dotLottie（.lottie）和Lottie JSON（.json）文件导入Figma作为gif动画或高质量的svg图层，且可以访问和预览免费Lottie动画库内的资源，意味着有时候设计师甚至不需要使用其他设计软件来配合展示UI动画。
下载地址：https://www.figma.com/community/plugin/809860933081065308/LottieFiles
设计工具与设计师是相辅相成的。所有的设计工具本身都有局限，但合理利用插件可以放大工具的价值，为设计提效，让设计师有更多的时间去思考设计方案本身。
你在设计中是否也遇到过一些宝藏插件呢？欢迎在评论区分享给我们，大家一起做最高效的设计师~
Tips：
配合上期“工具趋势”阅读，收获更多噢~
原文地址：腾讯ISUX
作者：ISUX设计
转载请注明：学UI网》设计提效-Figma插件篇
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
对于渐变一词的解释：“一种有规律性的变化”。作为设计师我们提到渐变，首先想到的就是渐变色，在工作中渐变色的使用随处可见，比如色彩搭配、文字处理、图形图标等等。
那么在设计中使用渐变色具体有哪些作用呢？希望本期文章对你有所帮助。
你也许不止一次的在工作中使用渐变色，但你对渐变色的了解有多少？它有哪些属性？如何分类？
接下来让我们重新认识一下渐变色。渐变可分为有规则和不规则两种。
所谓有规则，顾名思义就是可以通过一些具体参数进行调整的。
首先从基础属性上来看，渐变色会根据方向、长短的不同，呈现出不同的视觉表现形式。
方向区别：
长短的区别：
在保证其他属性不变，只改变其长度时：渐变越长，色彩的变化越平缓；反之就会越急促。
如果将设计中的渐变色进行简单分类的话，可以根据渐变呈现的样式和颜色属性作为分类切入点。
从呈现样式上区分的话，可以将常用的渐变色分为线性、径向、角度、对称、菱形。
根据色彩色相数量的不同，可以将渐变色分为：无彩色、单色、多色。
同理可以根据色彩的明度和饱和度不同，将渐变色分为高明度、低明度、高饱和度、低饱和度。
再来说下不规则的，就是没有太多规律、主观性比较强，工作中常用的就是通过滤镜中的模糊或模糊画廊里的模糊工具，制作不规则渐变。
下面列举几个比较常用的制作不规则渐变的方法：
① 利用高斯模糊制作。
方法：绘制图形填充合适的颜色，通过模糊工具调整。
② 利用光圈模糊工具
方法：绘制图形之后，通过模糊画廊里的光圈模糊工具，对其每个图形进行模糊处理，多调整即可。
③ 利用液化、路径模糊工具
方法：简单画几个图形，填充颜色之后用液化工具随便涂抹两下，再通过路径模糊进行调整。
这里给大家提供几个制作思路，工具使用的先后顺序不同，得到的结果也不同，都是尝试尝试，也许会有意想不到的效果。
所以你会发现，渐变色的表现形式是多种多样的，就跟我们上学时候学习排列组合一样，每种不同的组合都会产生不一样的结果。
重新认识渐变色，目的是让你对其有更系统的理解和认知，那么接下来就详细说下：渐变色在设计中的妙用有哪些？
对于“质感”一词，百科上是这么解释的：指造型艺术中运用不同的表现手段表现出的各种不同物体所具有的特质。
如金属、竹木、陶瓷、玻璃、呢绒等的软硬、轻重、粗细、糙滑等真实感觉。
而渐变色对于我们营造整体设计质感，有一定的辅助作用，用最简单的渐变色和纯色对比：
单纯只看背景的话，很明显右侧渐变色背景在视觉表现上质感更强、也更加丰富，下面结合案例来看，你认为哪款海报质感更强？
比如我们经常会看到一些工业设计，在展示产品时经常会用到一些单色渐变或无彩色渐变作为背景。
如上图所示，背景使用渐变色的目的也很明显，更利于产品质感的凸显，与产品本身形成视觉上的呼应。
接下来我们用AirPods耳机做个演示：
不改变整体元素，只在其背景上拉个简单的灰到白的渐变：
是不是感觉质感提升了很多？
类似的案例还有：
综合来看，一般当渐变色的目的是提升整体质感时，多为无彩色渐变或单色渐变。
在设计工作中，画面空、枯燥乏味是很多设计师容易碰到的棘手问题，面对“空”最常见的解决方式就是做加法，也就是说增加视觉元素，而色彩也是视觉元素的一种。
渐变色在视觉上会给人很强的节奏感和审美情趣，通俗来讲：相比纯色，渐变色在视觉上的变化更丰富、层次感更强。
人们对于色彩的感知度是非常敏感的，所以当我们的设计作品出现单调、缺少层次感时，通过改变色彩属性，营造更多视觉上的变化，也能帮助我们解决问题。
比如使用渐变色，就是能很好的解决上述问题，下面看个简单的案例：
通过案例对比我们不难发现：在只改变背景配色的情况下，渐变色背景让作品整体在视觉上变得更加丰富、有层次感。
类似的案例还有很多：
不仅如此，丰富画面的渐变色不只是局限于背景，还可以是文字、装饰元素、图形等等，前提是要兼顾整体性，以免出现乱的现象。
下面做个案例，用最近很火的歌曲《漠河舞厅》撸个简单的海报，先把文字和构图确定好。
整体略显单调，简单做下调整，适当的加些装饰的元素。
这样就有点感觉了，但整体视觉上还是不够丰富，给背景加点渐变试试。
适当的加点杂色，会不会更有质感一些？
再改个配色形式试试：
来波红配绿：
花里胡哨再来一个：
当使用渐变色的目的是丰富画面时，不管是单色、多色，线性还是径向、规则与否等等，对其就没有太多的限制。
聚焦，理解起来很容易，就是视线、注意力等集中于某处，举个例子：
我们将其看做两块黑色的幕布，左侧除了漆黑一片，没有其他任何视觉元素，这就导致我们的眼睛会一直在这块幕布上来回游离，视线没有着落点。
而右侧幕布上出现了一个绿色的亮点，与周围大面积的漆黑形成了强烈的视觉反差，此时我们看这块幕布时，视线就会不由自主的落在绿色亮点上，这就形成了视觉上的聚焦。
正如无印良品的这组“地平线”系列海报一样，视线总有着落点。
所以在商业设计中，一直在强调主次、层次，目的就是为了让用户看懂你的设计，而不是一味的炫技。
我们也可以把设计上的聚焦理解为强调突出，使得作品整体主次分明，视觉富有逻辑感。
而说到强调突出，很多人都会想到放大、加粗、变色等，常见的表现手法有：对比、留白、光效等等。
另外，渐变中有个模式叫径向渐变，由四周向中间过渡，给人最直观的视觉感受就聚焦，很适合用于强调、突出，比如：
把渐变色用于强调突出作用时，其表现形式有很多种，比如：给需要突显的标题、文字添加醒目的渐变色、或者是通过使用渐变色块、图形、形状营造视觉差异化，从而达成强调突出的意图。
在案例中的表现：
想要在设计中实现聚焦，核心还是营造视觉差异，只有这样在视觉才能形成层次、节奏、主次，这对于商业设计来说是非常重要的。
有氛围感的画面，即便没有太多精细化的处理，也能通过整体营造出独特的美感。
比如暖色调的画面会给人一种温馨、阳光、浪漫的感觉；提到春节我们就会想到喜庆、快乐等等，这就是氛围带来的特殊感受。
举个简单的例子：看到下面的渐变色，第一时间你会想到什么？
应该会有很多人想到：夕阳、落日、黄昏等等，就像下面这张图一样。
这就是有氛围感的画面，即便是简单的两个颜色形成的渐变，也能给人带来无限的遐想。
渐变色本身在视觉上就富有一定的节奏感和层次感，所以用于提升画面整体氛围感是再合适不过了。
这也是为什么在电商设计中，一提到大促活动、氛围感要求强些的专题，设计师都会想到蓝紫、红黄、蓝青等渐变色的原因。
渐变色之所以对提升画面氛围感有帮助，主要是因为不同色彩属性变化带来的视觉差异化感受。
所以当渐变色用于提升作品氛围感时，无彩色渐变和单色渐变出现的相对会少一些。
通过整篇文章的见解，你是不是对渐变色又有了新的认知？
渐变色对于设计师来说都不陌生，甚至是不起眼的，但却能帮助我们解决很多设计中的棘手问题。
当然，渐变色还有其他作用，比如：传递品牌价值、体现设计美学等等。
你会发现，很多时候并不是说你遇到的问题有多难解决，而是你缺少系统性的知识，不能将单个知识点串联起来，所以才导致你每次看到文章知识点时都会恍然大悟，到工作中又是不知该怎么办。
所以一定要利用非工作时间，多做练习，只有大量的练习、总结，才能真正将理论知识变成自己的。
原文地址：美工美邦（公众号）
作者：老张
转载请注明：学UI网》硬核干货！渐变色在设计中有哪些妙用？
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
我究竟要用哪一个插件？我不知道，每一个插件的是用来做什么的？我不清楚。因为身边的同学不停的给我推荐插件，而我便不停的安装，导致这么很多插件，我都没怎么用。今天为了解决这个问题，花了一下午的时间整理，分享一下我最常用的7款Figma 插件，大家也可以跟着我的思路，一起来整理一下你的 figma 插件
Contento 是一款内容填充插件，当然，在插件市场上你会发现，类似这样的插件非常多，但是我在使用过一段时间过后我都放弃了
有的是因为 操作过于复杂，比如：Content Reel ，他没办法做到本土化的数据，因此不能 开箱即用
有的是因为功能简单，比如：Chinese User Data Generator，我没办法做到自定义数据内容
使用Contento主要能够满足我三个需求
1.内容简单：
其实在日常的使用当中，我们要填充的无外乎就是常见的 “姓名、地址、电话、邮箱”等内容，在常用功能当中，我们最主要的是想要功能地快速上手，当我打开 Contento 就可以直接进行使用
2.社区强大：
如果系统预设的内容不满足你的需求时，你也可以打开社区，在社区里作者会更新一些较为常用的图库和文本，然后你只需要这样点击，即可拥有这个素材内容
3.自定义：
假设 系统自带 以及 社区的内容库 还不能够满足你的需求，你还可以利用 Contento 进行系统的自定义，在插件当中点击这里的 “加号”，选择想要添加的 文本、图片 等格式，进而将自己产品独有的内容放到里面，下一次就可以直接使用
Figma 的中文字体选择，真的无力吐槽，Figma 你看看其他同学，像 PS、Sketch、甚至是 PPT、Axure
别人字体选择是怎么做的，再看看你，Figma，长点心吧！
因为 Figma 软件本身自带有很多种字体，而这些系统字体也就造成了我们很难从众多字体的字体当中，选择用户想要的字体内容
另一方面，我们没办法快速预览字体，因此只能够通过 猜测这款中文字体的英文名字，来进行寻找
因此被逼无奈，只能够曲线救国，使用字体选择插件来解决这个问题
Chinese Font Picker 插件就能够快速呼出字体选择器，并且这里展示的字体都是经过筛选，会主要展示支持中文的字体
通过每一款字体，我们可以预览字体具体的样式，方便我们快速的做出判断，Chinese Font Picker 是我使用频率最高的插件
Figma 当中使用插件也会非常的麻烦（专业一点来说应该是操作路径过长 : ），因为 Figma 本身插件呼出非常低效，再加上很多设计师并不会记住插件的名字，导致寻找插件非常鸡肋
在 Figma 当中，比较难使用的便是如何高效的切换插件。这其实是一个交互问题，恰好 FigmaEX 解决了这个问题
我们都知道电脑屏幕的布局本身就是以宽屏的形式存在，也就意味着，FigmaEX利用了横向的宽度，在右侧固定一个区域用于展示基础的信息，这样就能够固定快速你想要的figma插件，并且这款插件是国人产出的，也更令人骄傲
不过Figma EX 需要单独安装，不过这类插件确实已经超过 Figma 可以开放权限的范畴，只能够单独安装
在我们B端需求当中，一定会存在很多图表类的需求，这时候便可以使用 NB Charts 这款软件来快速实现页面，方便与团队明确这样的方案是否能够接受
并且还可以根据图表进行内容的调整，导入对应的数据 JSON等等…，可谓是非常强大
这款老牌插件，含金量自然不必多说，因为我平时也只是简单用一用标注功能，因此这款插件还是非常不错
流程图怎么办？有的时候想要快速连接原型之间的交互，便可以使用它，可以快速连接不同的页面，还可以自定义这条流程线条的颜色、粗细、圆角大小等等
虽然比不了传统的流程图工具，但是解一解燃眉之急还是非常不错的
如果想要把一个页面稍稍倾斜一下，你会怎么办？在没使用 这款插件，我需要将这个图片导出、打开PS、通过PS来对图片进行调整，然后导出，再导入到 Figma 里面，整个操作方式可谓是“一气呵成”
SkewDat 恰好能够解决这个问题，同样，它可以斜切：图片、形状、文本 等内容，在使用上可以更加方便，并且这里的倾斜操作是非破坏性的，也就是说我们可以倾斜了过后继续调整字体
当然上面的所有插件都可以在 Figma 社区找到，大家按照名字自行下载即可，不过在公众号放这么多动图真的痛苦，后续做一个视频详细给大家分享一下…
原文链接：CE青年Youthce（公众号）
作者：CE青年
转载请注明：学UI网》B端设计师常用的七款 Figma 插件
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com