网站链接：https://squoosh.app/editor

Squoosh 是谷歌推出的一款在线图像压缩工具，可点击选择或直接往里面拖图片，在左下方可选择想要生成的图片格式，右下方选择图片质量，再下载即可。

二、Bejson

网站链接：https://www.bejson.com/ui/compress_img/

非常全面的一个工具类网站，不但可以压缩图片还可以在线加水印、转化格式、裁剪等。

三、iLoveIMG

网站链接：https://www.iloveimg.com/zh-cn

国外的一款工具网站可以提供图片压缩、裁剪、转换文件，以及调整文件的大小等。还可以通过几个点击来制作GIF动图！这些都是免费的。支持压缩JPG, PNG，SVG或GIF等格式图片。

四、TinyPNG

网站链接：https://tinypng.com/

之前老叫它“熊猫吃竹子”压缩站，一个专门处理png格式的图片压缩网站非常好用，不过免费用户单张图片不能超过5m 单次不能超过20张。

五、图好快

网站链接：https://www.tuhaokuai.com/

图好快在线压缩网站，可以有损压缩手动控制图片的压缩质量，部分功能是收费的，普通用户每天可扫描登录免费试用一次。

六、Smallpdf

网站链接：https://smallpdf.com/compress-pdf

国外专门处理PDF在线压缩、编辑的网站。

七、Optimizilla

网站链接：https://imagecompressor.com/zh/

国外JPEG、GIF、PNG格式图片压缩站。

八、Ezgif

网站链接：https://ezgif.com/

Ezgif.com 是一个简单的在线 GIF 制作工具和用于基本动画 GIF 编辑的工具集。在这里，您可以创建、调整大小、裁剪、反转、优化和对 GIF 应用一些效果。

九、ilovepdf

网站链接：https://www.ilovepdf.com/

在线处理PDF工具站。

十、易转换

网站链接：https://www.easeconvert.com/

免费好用的文件转换工具。

十一、Aconvert

网站链接：https://www.aconvert.com/cn/image/

Aconvert.com是一个宝藏工具站，可以在线转换各类PDF，文档，电子书，图像，图标，视频，音频等格式和压缩文件，非常方便。

十二、bigjpg

网站链接：https://bigjpg.com/

通过AI算法可以在线放大图片，提升图片质量。你可以选择在线上传处理（较慢）或者下载客户端。

十三、removeby

网站链接：https://www.remove.bg/zh/upload

自动抠图神器，上传图片一键抠图。

十四、搞定抠图

网站链接：https://koutu.gaoding.com/

搞定设计出品的AI智能口抠图工具，还有好多好玩的可以去探索。

十五、图象

网站链接：https://www.tuuux.com/

图象是一个聚焦国内外可视化创意的社区，里面的作品质量都非常不错，不管是工作中找灵感、还是上传作品宣传个人IP都是一个不错的选择。

原文地址：小六可视化设计（公众号）

作者：Mr小六

转载请注明：学UI网》效率必备！这15个图像处理网站你收藏了吗？

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

定义

其实内容创作平台严格意义上来讲，算是B端产品的运营管理类型的产品（如果不清楚运营管理类型的产品建议查看我之前文章 ），它主要依附于大型的C端产品，帮助这些产品去连接更多有价值的内容

B端设计指南 – 产品类型

在内容管理型产品当中，主要是作为平台方，提供给在平台当中创作的人们进行使用
举一个例子，我在 Youtube 上传了一个视频，我想要了解我这个视频用户的真实反馈，以及对于自己的作品进行标签、标题上的优化，这样，我便可以打开 Youtube Studio 进行查看

而目前这类内容创作平台，就是提供给这些内容创作者进行使用，因此这类型的产品主要分为两类：

• 视频：Youtube、Bilibili、抖音、快手、西瓜视频…
• 文字：微信公众号、头条号、知乎、站酷、语雀…

内容创作平台与CMS较为类似，CMS是 Content Management System 的缩写，意思为“网站内容管理系统”， 用来管理网站后台，编辑网站前台

比如我们会经常听到的 WordPress 就是一个非常典型的 CMS  产品，CMS大多数需要你自行搭建，而上方提到的内容创作平台，则是别人已经提供好了对应的基础功能，你只需要使用即可（这个概念与 SaaS 有一些些雷同）

而内容创作平台更加垂类一些，主要针对的就是 作者投递的管理平台

业务

严格意义上来说，内容创作平台只会有一个角色，也就是内容创作者，只是随着平台的不断扩大，后续会有很多运营等相关职位，比如 微信公众号，它本身只支持创作者进入，随着平台规模不断扩大，逐渐演变成 三类固定角色 提供给用户进行绑定

当然内容创作平台的整体设计，一定要与之前平台固有风格保持一直，这样才能够有统一的风格

页面

在整个内容创作平台当中，会有很多非常典型的页面，作为设计师，我们就来看看典型页面如何下手

1、内容编辑页

在内容创作平台当中，必须要提供的功能便是内容上传，因为无论是文章、又或是视频，都需要创作者进行上传、编辑
因此作为设计师，我们首先应该关注的便是这个内容编辑页的使用体验

比如文章类的产品中，我们需要去编辑内容排版，那就一定会用到富文本编辑器。富文本编辑器目前会分为两个流派，一类就是传统的 顶部编辑器 ，一类是 Block 编辑器

顶部编辑器：其实这个我不知道专业的术语，根据外形随意起的名字

Block 编辑器：毕竟我是深度 Notion+飞书的用户，如果对这个感兴趣，可以去到文末留言，我们之后单独出一篇文章来讲

不过目前，内容创作平台的产品都是按照基本的 富文本顶部编辑器的方式来进行，Block 更多只在笔记软件当中出现

这里分享一些开源的富文本编辑器，很多B端产品可以让前端直接使用

https://www.wangeditor.com/

https://summernote.org/

https://dhtmlx.com/docs/products/dhtmlxRichText/

再比如视频类的产品，就主要围绕 上传视频、设置封面、标题、等内容进行展开，其实功能上都大同小异

因此你会发现，内容编辑部分，大家的功能都会比较趋同（因为无论是 视频还是文字媒介，因为前台系统对于内容的要求都基本一致，因此如果想要了解前后台系统的逻辑关系，其实可以从基础的内容创作平台入手去做分析）

2、数据查看页

数据查看页在内容创作平台非常重要，因为绝大多数内容创作者都会非常关心自己的内容数据情况，可以通过数据，来为自己的内容方向进行合理的规划
可以把数据查看页比作是一个小型的 数据分析 产品，区别的是 内容创作平台 的数据查看，是已经提供了默认的分析维度与指标，你只能通过筛选去查看数据之间的关系，这里就不再赘述，给大家看看不同产品的数据查看页，了解它们的设计方式

3、其他页面

当然这类产品还会涉及到比如 常见话题、热门话题、素材库 等等…  完整的图片内容我就打包放在图库平台上，大家可以进入查看

花瓣：www.huaban.com/user/youthce

语雀：www.yuque.com/youthce/pic/

原文链接：CE青年Youthce（公众号）

作者：CE青年

转载请注明：学UI网》内容创作平台的解析与分享

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

原文地址：黑马家族（公众号）

作者：黑马青年

转载请注明：学UI网》【UI设计作品总结】DJI 农业无人机 APP 页面重构

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

首先给大家介绍一位来自塞尔维亚插画家 Alex Krugli。他擅长通过丰富的图形组合和绚丽的色彩表达，来使原本简单的画面内容变得层次丰富，百分百吸引你的眼球。

*图片来自插画师 Alex Krugli，仅供赏析

分析Alex Krugli的画风特点 

我真是一个善于总结的好学生，下面开始画起来吧~

本次的主题我想以建筑为主元素，构建一个室外场景画面，首先我们可以去百度或者花瓣搜索些漂亮的房子照片，找找灵感，关键词可以是欧式建筑，复古小房子等。

搜索建筑素材图片时，需要注意两点：

1、几何感强

2、设计感强的建筑做参考

这里我找到了两张建筑图片，将其中一张作为主元素建筑，另一张作为远景建筑群，然后可以再去找找场景相关的素材，如：车辆、邮筒、植物等，同样也是靠百度啦~

图片来源网络，仅供赏析

在 Alex Krugli 的插画作品中，非常注重画面层次的划分，我们可以先分析一张他的作品。

从颜色分区可以看出画面分了四个层次，图中的红色区域是画面的前景，蓝色是中前景，绿色是中后景，紫色是远景。

那如何把画面安排的有序且丰富呢？

1. 划分建筑层次，由近及远。如图，建筑可以有单体和建筑群两种形式，相互穿插，区别各个层次建筑的大小宽窄高低，中景建筑一般占比最大，比较密集，前景建筑起遮挡作用，背景建筑概括，占比较小。

2. 拉开建筑大小等级，近大远小。（如下图中近似造型的建筑在画面中大小变化）

3. 丰富建筑剪影形，高矮、粗细、方圆相互结合。

4. 近景的造型更复杂，背景简化处理。

通过分析确定了我的构图方向，利用搜集的素材，我们可以大致的摆放一下位置，将画面分四个层次，蓝色区域的中景建筑是这次画面的主体元素，红色前景区域起到遮挡作用，绿色中后景区域丰富了画面的层次，紫色远景作为背景衬托前面的元素。

• 主体建筑物的绘制

1. 抓住照片中建筑物最有特点的几个地方

2. 根据构图调整建筑的长宽比例，用几何形体概括外形，扁平处理，不做透视的变化。注意：对参考照片做一些主观的调整，不要完全一样哦~

• 远景建筑群的绘制

1. 概括建筑群中的几种建筑形态

2. 将几种建筑形重新组合，做高低大小的演变，形成新的建筑群，添加植物、台阶等元素丰富层次变化，并添加建筑内部的细节。

• 其他元素的绘制

1. 汽车的绘制：

② 用几何图形进行概括和演变，车辆主要用到的几何形是半圆角矩形和圆形。

2. 邮筒的绘制：同样也是对照片进行几何图形的概括，主要用到了半圆形、矩形以及圆形。

然后我们将二者和小植物做组合搭配，形成画面的前景，元素组合的形式可以避免元素的单一，并且更有层次。

3. 植物：植物同样可以从照片中提取几何形，再进行演变，这里我通过照片提取了圆角矩形，三角形，圆形，再通过组合叠加的形式，演变成新的几何形。植物在画面中可以作为前景，或者穿插联系其他单体，也可以作为点缀元素重复出现。

4. 人物：人物在画面中也是起到点缀的作用，面积不大，不需要五官的刻画，画出基本动态即可。

① 从照片中提取动态。

线稿的绘制是在 illustrator 中完成，在草图的基础上添加物体内部细节并对整个画面做最后的调整。

1. 建筑的屋顶造型用三角形、梯形、半圆做了统一的规范。

2. 在草图的基础上，用AI把线稿画出来。

最后再检查一下画面的疏密关系，线稿就完成了。

1. 梳理黑白关系

因为画面的层次比较多，我们可以先确定下画面的黑白关系，场景设定是夜晚的场景，整体氛围可以是暗色调，中景区域的颜色亮暗对比较强，是重点突出的地方，背景统一在暗调里，不做太强烈的亮暗对比，起衬托作用，前景压暗，稳定画面效果。

2. 配色：配色我选择蓝紫色调为画面的主色，辅助色选取主色的邻近色（绿色）来丰富颜色，互补色（深红色）来增强画面冲击力，用纯度高的橙色与红色作为画面的点缀色，使整体配色既和谐统一，又丰富多彩。

为了避免配色杂乱，可以将画面分块，大致安排下画面颜色的占比，主色大概占到画面的 65%，邻近色 15%，互补色 15%，点缀色 5%。

结合之前的黑白关系，我们就可以完成色稿了，注意冷暖的变化也可以体现画面的层次感，背景偏冷，过渡到前景，逐渐变暖，我们以植物的颜色变化为例。

最后整体观察，注意颜色在画面中要分布均衡，相互呼应。不要一种颜色只出现在一处（如下图的红色运用），饱和度高一点的点缀色，可以起到点亮画面的作用。

• 建筑的刻画

2. 加阴影：在房檐下方绘制阴影，阴影的添加可以丰富画面层次，增加体积感。

3. 加装饰：创建一些小的装饰图形作为花纹填补在块面中，点面结合，使画面装饰细节更为丰富与细致。注意装饰图形的安排要有疏密变化，亮面图形的颜色可以用物体暗面的颜色，暗面图形的颜色可以用物体亮面的颜色，既不破坏整体色调，又使画面更加丰富。

同理，远景建筑也用同样的步骤刻画。

1. 加明暗：远景的建筑块面颜色对比可以减弱，相对更加统一。

只需将墙体做一个亮暗的区分，窗户这些小的块面就不用再做区分了。

2. 加阴影：在建筑交接处添加阴影，丰富层次。

3. 加装饰：添加装饰元素，种类可以不用很多，统一一些。

• 汽车刻画

1. 加明暗：物体进行明暗的块面区分。

● 人物刻画

• 植物的刻画

1. 圆角矩形树的刻画：首先对同组树丛做颜色区分。

• 远景的处理

远景对整个画面起衬托作用，先将背景做图形的分割，在与建筑交接处做重色的衬托，在图形上延用了 Z 形元素，与屋顶相呼应，再依次加入月亮星星云彩、小树、小鸟、图形装饰等元素，点，线，面相结合，在统一中富有变化。

再这样那样之后，我们的画面就完成了，啦啦啦~撒花~

1. 画面构图的层次安排

2. 照片元素的特征提取，几何图形概括及组合

3. 色调的统一和变化

4. 装饰元素的添加

那么今天的教程到这里也就结束了，你学废了吗？喜欢记得点个赞哦，我们下次再见。

原文地址：胡晓波工作室（公众号）

作者：蓝贵莲

转载请注明：学UI网》设计师看了都会收藏的色块矢量插画教程来了！【零基础】

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

高饱和度的颜色能形成强烈的对比。在暗黑模式下使用高饱和度会很刺眼，给用户很不好的体验。暗黑模式一般在晚上使用，因此对设计师来说，需要做的是让整个配色相对柔和，让用户感到放松。基于此，在设计的时候应该将饱和度限制在200-500之间。

(彩云注：这里的200-500彩云去查了不少资料，但没有找到最好的答案，这里引用的是Material Design中的颜色规范，感兴趣的同学可以自行查找)

二、 按钮要有优先级

在同一个界面，最理想的状态是只有一个最主要的关键按钮和紧跟着的次要按钮。这是因为如果一个界面上有太多这种行动按钮（CTA）按钮，会让关键操作淹没在这些按钮中，让用户不知所措。

三、简化不必要的动词

没必要在菜单上增加动词和短语，用最少的信息写清楚功能就足够让用户理解了。所以，在菜单设计上要尽量避免增加无关紧要的词，这样才不会影响用户体验。

四、字体尺寸类别越少越好

你可能注意到，很少有表单的字体大小不平衡，字体之间的类别尽量少一些看起来会更加平衡。在决定字体大小时，尽量规范字号的标准。比如标题（16px），副标题（12px），正文（10px），说明文字（8px），这些尺寸都是以2为倍数的。

五、不要混用图标风格

尽管我知道要做好图标一致性，但在实际工作中依然经常犯错。很多设计师经常用不同风格的图标混在一起，这样会让整个UI界面的设计显得很不成熟。图标是为了让用户更有效率地理解事物。在使用图标的时候一定要注意图标的一致性，尤其是一些是一些风格细节。

这里也跟大家分享2个我自己常用的figma图标库：

1)Unicorn    (https://www.figma.com/community/file/931512007012650048)

2)Basil Icons     (https://www.figma.com/community/file/931906394678748246)

六、不同背景下的颜色饱和度适当微调

通常情况下，我们会认为一个颜色在深色模式和亮色模式下是用的同一个颜色值，但这其实是错误的。一个颜色在亮色模式下看起来非常漂亮，但在深色模式看可能就太暗了，反之亦然。解决这个问题最好办法是使用2套不同饱和度的颜色。

七、新手引导多给用户自主权

App的新手引导决定了用户第一次体验产品时的感受。在设计的时候，试着公开需要哪些具体步骤，增加”跳过“和前后移动查看的能力对新用户来说非常重要。

八、在图片上增加叠加层

许多网站和App都是用图片驱动的，但在图片上直接增加文字内容有时候会被淹没掉。在图片上增加一个叠加层可以提升内容的可读性。

九、信息部分露出

对于一些大屏设备来说，像笔记本电脑，平板电脑和智能电视，它们都有非常多闲置的空间。对于这些闲置的空间来说，尽量通过设计告诉它底部还有更多内容。这对UI和UX方面都有好处，因为空间的使用方式能够让用户清晰的知道所有内容。

十、拆分大段文字

为了让用户聚焦阅读，应尽量避免使用大段的长/宽行。保持短句和简洁能够增加内容的可读性。（彩云注：这点用在你的作品集里也是很合适的，有些人经常使用大段的文字内容来描述，很可能直接劝退面试官）

十一、Z字形原理

Z字形原理，也就是大众所熟知的”古腾堡原理“，它描述了当人们看到一个均匀分布元素的设计时，眼睛的总体运动情况。通过这个原理我们知道，用户在内容上的视线是沿着Z字形来阅读的，所以遵循这一原理设计你想要核心表达的内容。

十二、扩大可点击范围

扩大点击区域，维护像按钮、单选、多选等控件的响应尺寸，如果你设计的点击区域太小会让用户点击困难，造成流失。

十三、尽量使用简洁的图标

避免使用花俏和俗气的图标，它们会让整个设计显得非常不成熟，同时也是很难理解的。用上更简单的图标形式，会让界面更高级。（彩云注：当然越简单的图标其实想画出彩会更难，另外也需要区分不同的场景，像一些运营类的图标可能会为了活动氛围做的相对风格化一些。）

十四、正确的文案表达

选错文案，会让人们对于任务缺乏兴趣，根据上下文使用更合适的词组。

十五、考虑手势操作

轻敲和点击有时候很累人，可能不如使用滑动、拖拽等手势操作，这些操作会让界面更简洁并且也能顺利地完成既定任务。

十六、展示部分文案

在探索酒店、目的地甚至是阅读任何文章时，用户经常都需要点击卡片。为了使得探索更加吸引人注目和干脆，避免使用长文本导致的滚动。相反，可以加一个阅读更多的按钮方便想看全所有内容的用户。

十七、接近法则

”邻近的物体往往被视为是同一组内容“。有时候为了把内容区分开的更清晰，尝试用线对相关内容进行分组。（彩云注：其实有留白和不同颜色做区分也是可以的，建议根据自己的设计风格和具体内容来定）

十八、文字控件可视化

在设计控件时，如果可以用图形可视化的地方就优先尝试把控件图形化，除了非常需要很精确的设置参数。对于价格范围这种，很容易将它可视化为滑块控件。

十九、占位符要接近要填写内容

对一些人来说容易理解的东西，对某些人来说可能不是。因此，最好使用示例占位符来解释输入字段，这可以防止用户在填写内容时出错。

二十、系列位置效应

根据”系列位置效应“，心理倾向于记住列表的第一项和最后一项，而不是中间项。因此，在任何App中设计导航时，根据应用的上下文保持最左和最右的选项。例如instagram，最左边是”首页“，而最右边是”用户“。（彩云注：这是一个心理学上的理论，人们对于一系列的材料更容易记住开头的内容，也叫做首因效应或者首位效应；更容易记住末尾的内容，就叫近因效应。）

二十一、减少点击次数

在设计任何体验时，点击次数都是非常重要的指标。统计用户需要点击多少次才能完成他的目标，额外的点击会减慢整个操作过程。简化过程，自然体验就会更好，所以尽可能的减少点击次数。（彩云注：下面的案例，增加可点击符号也可以减少用户思考的时间。）

二十二、少即是多

为了使内容突出，没有必要使用多种字体类型，包括加粗、改色等等。只在最需要的位置使用增强的的文字层次结构、字体重量，同时只使用一种字体足以吸引用户对内容的注意力。

二十三、留白定义重点

留白在设计中非常重要，太少或者没有留白会使得设计非常混乱。明智地使用留白可以明确地强调内容。

二十四、别让用户闲着

根据多尔蒂阈值(Doherty Threshold)这个理论：”系统需要在 400ms 内对使用者的操作做出响应，这样才能够让使用者保持专注，并提高生产效率。“。因此，我们可以使用动画、图像甚至文本来保持用户的注意力。（彩云注：给用户的提示可以先快速加载信息框架，让用户有事可做，而不是什么都看不到）

原文地址：彩云译设计（公众号）

作者：彩云Sky

转载请注明：学UI网》用上这24个UI体验优化经验，果然做出来的设计更高级了！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

写在前面 

其实 dribble，Be 上有很多几何化风格的 logo,大家多看看，其实可以发现都有一些共性。在这类 logo 风格占满市场的时候，考虑怎么做，才能让这一类更出彩。

我在这类 logo 的执行，分成三个阶段。

1. 图形的大概造型参考

简单来说就是找图形实物/绘制造型参考图，这跟大多数风格 logo 的设计步骤是一致的。

2. 根据造型，用基础几何图形表达

基础几何图形，其实就是很常见的「矩形、圆形、三角形、菱形」等等，你找的一张造型，尽量用工具自带的「矩形」「三角形」「圆形」去代替所有的部件。

3. 创意的加分

把大概的轮廓造型做出来以后，可以适当结合字母，或是添加一些小元素,把你的 logo 整活起来，让它更生动，画面感、故事感更强。

好了，现在我们开始讲案例。

我们先试着观察它，发现这个 logo 是猫头鹰与 L 的结合，那这个 logo 从 0 到 1，是怎么做出来的呢？

老方法，我们先找一些猫头鹰的图片， 作为造型的参考。提取猫头鹰特征。

找参考这步，我一般会分为找两种图片，1. 实物照片(为了观察整体造型与提取特征)  ；2. 设计师处理好的造型图片(为了借鉴和观察别人的处理方式，但是需要注意的是不要过渡借鉴，会构成抄袭)

先看实物图片，发现其特征

1. 眼睛

2. 头上的小耳朵

3. 脸上的内轮廓

概括完猫头鹰的特征以后，我们开始绘制整体轮廓(先不加细节)。

网上这张插图，其实概括的很几何化了，我们只需要在它的基础上再修改、变化，就可以做出我们要的整体造型。可以发现，身体-矩形，翅膀-半圆，眼睛-双圆。我们根据这些概括，开始实现这个 logo。

把基础组件绘制出来，再把它们组合成一个初版造型。

到这里 01，发现猫头鹰的感觉还是少了一点，原因在于最关键的脸部的内轮廓没有绘制，这是能突显猫头鹰这个物种的很重要的元素；结合实物图片与处理好的插图，我们进行绘制，注意透视角度得到 02 图。

继续观察，还差了一个小耳朵是不是，那我们就给它加上，这边可以直接用矩形，也可以用三角形，可以输出两个效果，对比看看。

通过对比我发现，矩形看起来跟整个大体图形,更能融合到一起，整体感更强，最终我选择了矩形的小耳朵版本。

得到这个初版造型以后，我们再进行调整与创意结合；在翅膀与身体的连接处，我们可以做一个切割，让翅膀与身体的轮廓更清晰；同时，眼睛的轮廓也可以调整，与脸的内轮廓斜线，可以做平行(这样的处理，会让整个图形看起来更规则)。

继续观察、优化这个图形，现在会感觉，小耳朵与身体的连接，稍显生硬。脸内轮廓的直角连接同样有这种感觉。那我们就可以给它加上圆角，这种平滑的处理，使得图形视觉上看会显得柔和。

最后，我们根据 logo名称「L-OWL」，让这个图形加上 L 的小尾巴，再上个色~就完成了！

这个 logo 的诞生是之前我去吃海底捞的时候，服务员小姐姐送了我一个小玩具。当时看到，一阵狂喜 ，这不是很适合拿来做 LOGO 么!

在执行的时候，我发现按照原图的绘制，整个造型会显得的怪异，所以，我们可以试着把它改变一下。

我们尽可能先用矩形、圆形去绘制这个小恐龙减少原图那些细节，比如脚指之类的，能简化就简化它得到这个轮廓，发现造型不太好看，特别是头部，不说的话有点像狗子。那我们就可以给它改变下造型，尝试减少线段。

尝试找出可以删除的锚点，让形状以最少的线段表达出最清晰的轮廓；在这一步的修改，做了比较大的改变，不仅改变了图形的原始造型，也修改了侧面头部的角度(因为去掉了长开的嘴，所以把仰着的头往下调整)。

这一步是一个尝试的过程，也是一个试错，需要耐心的过程，大家可以多找一些图片参考，得出你想呈现的造型形态。

得到了这个图形 01 以后，基本是完成了一半。接下来，我们需要做的是让各个部件层次清晰点。比如，头跟身子的连接处，需要一点切割或者是阴影；腹部与腿的分层，尾巴与身体，也需要阴影。这样做的目的，是让你的小恐龙各个部件更清晰，而不是一坨色块 。

这个 LOGO 不知道大家能不能感受到，它很卡通，也很几何。现在我们来讲讲这个案例。

老方法，我们第一步是要找到合适的造型参考。

在网上找到了这张插画，是的，就是用它当造型参考。

然后，我们去拆分这个小女孩的各个部位。帽子、头发、眼睛、鼻子、耳朵、脸型。我们用基础几何形状，先尝试组合一下初版的图形。没办法用基础形状的，我们先用钢笔大概勾勒一下。

初版造型出来以后，观察一下发现是可行的。我们再把它们(描边)转化成面性色块，再观察调整。

这边的小细节：耳朵被头发盖住，被盖住这块的线条，跟头发的弧度呈平行状态加上五官，( 这边看你想赋予这个小女孩什么样的性格，但是看装扮来说，酷酷的气质是比较符合的)想表达酷，可以加上墨镜。歪嘴笑更加重了 cool，不屑的气质。

用圆形去剪切，是很常用且好用的一种方式。它会让你的图形看起来更规整，更几何化。

最后，我们得到这个图形以后，在排版上，也做一些变化。对应圆形框内的图形，我们用圆形的路径文字，去排品牌名称。

现在很多同学应该还是在大量做练习的阶段，有时候不知道做什么，就感觉很头疼。这个时候，知道了某种设计方法，那就可以把你看过的图都变成你的 LOGO 了。这个 logo 也是我偶然看到的一张狗狗的照片。然后就有了把它做成这风格 logo 的想法。

我们先绘制这只小狗的头部(身体的形态，是不是要按照这个照片来，完全取决于你，这边我们先把头部做出来)。

观察照片狗各部分的形态，尽可能用基础形状去代替。头部其实是比较简单的，我们先暂且搁置一边。接下来，我们来绘制身体。这边我没有按照原图的形态去绘制，觉得太过于安静了，就去网上找了一些，正在行动中的狗狗的形态。

可以多找几张参考图，方便我们结合调整。

因为这个小狗的头部是比较可爱的，跟这个身子搭配不了。这个时候，我们可以先调整身子与头部的大小比例，看看效果。

身子这么一缩小，是不是顺眼多了？比例调整到和谐以后，我们再开始优化身子的部件。( 如果描边模式你觉得很难观察，那我们先把它转成填充模式)

通过观察找出问题，再优化。因为狗狗走路的时候，走路的后腿是一前一后，所以会有层次关系。

我们可以尝试把初版的图形，把一条腿与身子切割开，这样处理就可以很好地表达前后层级关系。

优化处理以后，大概的形态已经完成了。可能大多数同学到这步，就直接上色排版了。想做出有意思的图形，姿态、动作是很关键的。现在这个图形，其实直接上色是没什么问题的，但是就会少了那么一点灵性。

要让你的图形生动有趣，有时候只需要把你画的动物/人物，头部与四肢做一点点角度，就会比之前的生动很多。比如这个小狗，我们把它的头，往上抬一下，就会比之前的更灵性了。

最后，我们可以调整确定好的图形形态，比例关系与加点阴影细节。

我们在小狗的眼睛旁边加个星星让它 wink~ (谁会拒绝对你wink的小狗呢)增加调皮可爱属性。大功告成~

设计来源于生活~善于发现， 善于联想。

这个 LOGO，可能 80 后，90 后，看着都比较有亲切感，还记得小时候玩过的铁皮青蛙么~

老办法，先用基础形状把青蛙的大概轮廓拼出来。我们在绘制初版轮廓的时候，先观察你的这个参考图片，比例，形态的长短是不是符合你心中所要，如果不适合，那你可以先复制一个图片，再对它进行拉伸/缩短。

就像这个青蛙的图，我就觉得身子有点过长了，咱们把它压缩一下。

观察我们勾勒出来的形状，青蛙的后腿，稍显长了一点儿，我们先调整后腿的长度调整腿与身体的比例关系。简化线段，能平滑的地方，我们删减锚点青蛙的肚子部分，我们用半圆去剪切规整尽量让我们绘制出来的大轮廓饱满得到这个轮廓以后，我们再绘制青蛙的蛙掌我们还是多搜一点青蛙的图片，去观察蛙掌的结构。

蛙掌还是比较容易概括的，只要几个矩形跟圆点就可以绘制出来了我们把绘制好的蛙掌，跟上面绘制好的大体形态拼起来。

调整各个部件距离，适当加点圆角添补未绘制的眼球。

四肢与身子加点切割，增加部件结构清晰度。

加上我们的旋转小开关，最后为了防止青蛙左下侧的空间太大，会造成图形不稳，我们加一条矩形横线，去平衡版面。

生活当中的很多美好的事物，都值得我们去记录，或许哪一天你没有灵感的时候，它就能变成你笔下的一个 LOGO，一张插画~

技法都不是最难的，需要你去归纳总结它。说了这么多，动笔试一试吧！行动才是硬道理!

原文地址：胡晓波工作室（公众号）

作者：Douta

转载请注明：学UI网》5 个案例带你领悟几何面性趣味LOGO

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

一、以下几种情况适合使用渐变色 

1、想把背景当作天空 

如果你的背景有起到天空的作用，哪怕不是真实的天空，那么用渐变色都是比较合适的，通常是用单色渐变（色相一样，只是明度和饱和度有变化，比如蓝色到浅蓝色）或类比色渐变（比如蓝色到青色）。并且，即使是类比色渐变也是要有明度上的变化，因为这样的渐变可以让画面更透气、更有空间感。

▲渐变的方向通常是模拟真实天空的光感，即上暗下亮，或者中间亮四周暗。

2、想表现小清新的调性 

小清新在平面设计中通常是指视觉感受是自然、淡雅、静谧的画面，这样的画面其色调应该是柔和的，所以很适合使用渐变色，而且一般是使用明度比较高、饱和度比较低的单色渐变或类比色渐变，在饮料、护肤品、家居等品牌的设计中比较常见。

3、想表现科技感

诸如3C产品，或与AI、互联网相关的品牌、产品或者主题，其设计通常需要表现出科技感，而科技感是一种怎样的视觉感受呢？这类视觉有一个共同的特点就是光感很强，比如下面这些作品。

所以为了表现比较强的科技感，画面中通常少不了使用渐变色，因为只有渐变色才能呈现出鲜明的明暗对比、强烈的光感，而且这种渐变色的明暗跨度会比较大，色彩的饱和度会比较高。色相以冷色为主，比如蓝色、青色、绿色、紫色。

4、想表现食欲

食品海报最基础的要求就是要能表现出食物的食欲，让人看了会有想吃、想喝的欲望。我们都知道，在色彩中，暖色是比较有食欲的，比如红色、橙色、黄色、粉色等。另外，如果是夏季，蓝色绿色会给人清爽的感觉，所以也能加强食欲（通常指饮料、雪糕类产品）。

吃是人类的生理需求，也是最基础的需求，所以对于食欲的表现肯定要朴实有亲和力，渐变色就具有这样的特质。而且食物的色彩通常也是渐变色，所以使用渐变色作为背景可以与实物图片形成呼应。

食欲强的渐变色具有以下特点：

a.明度不会太低；

b.饱和度不会太高；

c.明度对比不会太大；

d.以单色渐变和类比色渐变为主。

二、怎样的渐变色更有高级感? 

确实，很多视觉高大上的设计都喜欢用纯色，但并不代表渐变色就表现不出高级感，葱爷研究了大量奢侈品牌、中高端品牌的视觉设计，发现高端的渐变色通常具有以下几个特点：

1、使用单色渐变

大家都知道高端的设计在色彩使用上是很克制的，即颜色的数量会比较少，而单色渐变相比多色渐变就要克制一些。

2、颜色明度较低

高端的设计喜欢用黑色作为背景，想必你也发现了，因为黑色具有高贵、神秘、厚重的感觉，所以容易营造出高端的氛围，除了黑色，其他颜色的深色也具有这些特点，比如深蓝、深红、深绿等等。所以渐变色要想高端，整体的颜色也要偏暗，比如黑色到灰色渐变，深蓝到蓝色渐变等等。

3、颜色来源于画面中的图片

如果版面中是有图片的，比如产品图片或人物图片，那么从图片中吸取颜色用于填充背景，会使背景与图片关联性更强、更融合，画面的效果会更和谐，否则容易出现生硬、拼凑的感觉。

三、时尚的渐变色有什么特点?  

自从进入数字营销时代，各个品类的设计都在逐渐互联网化，相比传统营销，数字营销更讲究年轻化和个性化，所以在视觉上通常也要求更潮、更时尚，特别是对于一些针对年轻人的品牌。时尚类的视觉设计中也很喜欢用渐变色，其特点如下：

1、颜色的饱和度和亮度较高

注意，亮度不是明度，亮度高不代表明度高，但是明度肯定不会太低(在ps拾色器面板中观看HSB模式中的B值)。饱和度和亮度较高的渐变色更鲜艳、更张扬，更符合年轻人和互联网的特性。

2、颜色对比较强

比如对比色和补色渐变是时尚类设计很喜欢用的颜色，这样的颜色反差比较大，视觉冲击力也更强。

3、几种效果比较时尚的渐变

a.炫彩渐变

b.镭射渐变

c.弥散渐变

最后，葱爷有必要提醒一下，色彩只是影响设计调性的其中一个因素，调性不是一个渐变色就能左右的，想要表达出正确的调性，还需要有图片素材、构图、字体、排版、设计风格等多个因素的配合，否则你的色彩用得再好也起不了多大的作用。

原文地址：葱爷（公众号）

作者：葱爷

转载请注明：学UI网》渐变色的正确打开方式

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

对于 UI 设计师来说，图标设计的能力至关重要，也是提升感官体验的重要方向。对于一些初入行业的设计师，习惯下载图标素材应付项目需求，失去了动手能力培养的机会。甚至一些多年工作经验的老司机，依然还摆脱不了使用素材的习惯，稍微复杂一点的技法就会难以驾驭。

一、切勿过度素材化 

对于初入职场的设计师来说，偶尔运用素材可以理解，但是一定要学会拆解和分析，掌握还原设计的技巧和能力。

过度依赖素材容易导致思维固化，不愿意去创造，失去创新设计的能力；也容易导致眼高手低，有想法却实现不出来，极容易萌生放弃的念头；素材拼贴形式完成的设计，在规范性和细节性上面也是大打折扣的，导致设计作品不够精细化和规范性。

二、刻意练习强化

我们需要通过刻意练习来提升图标设计的能力，根据一万小时定律，技法层面的提升都是通过反复磨练达到的。

三、摆脱素材才能规范化

图标设计从素材习惯过度到设计动手其实很容易，但是从会画到画好之间看似简单却很难掌握。摆脱素材是图标设计规范化的关键，然后再统一风格和细节规范，掌握数字化关系也是需要我们反复研究的课题。

比如以这个天气图标来举例，相信很多同学都能画出来，但是有没有把控里面的数字关系就难说了。通过以下示意图我们可以看出来，大圆和小圆之间的比例关系是 4:3，而间距的关系也与圆形的大小有着数字关系。这些数字关系可以使得图标设计更加精细化，也能引导我们去探索设计背后量化的标准和关系。

四、质感的层层强化

当我们绘制完图标的造型之后，运用合适的风格进行质感强化也是尤为重要的。这里我先运用其中的一个风格来完成，选择了磨砂玻璃质感的效果。为了质感和层级关系更加明显，这里单独对局部进行了光影强化和边界处理，看看以下步骤拆解图感受一下。

备注：运用的软件功能是背景模糊，Sketch 或者 Figma 等软件皆可实现。

五、延展界面场景

为了进一步强化图标练习，延展了一个简单的界面场景，一个由宫格布局组合成的界面设计。为了填充所需的内容，先把之前的一些图标作品放进去占个位置。虽然都是质感一类的图标，但是由于透视、配色、风格和细节规范等不一致，整体还是存在一定的排斥感。

六、根据界面环境重新调整

由于界面设计属于深色主题，之前练习的天气图标放入场景中显得过于突出，而且玻璃质感的通透性没有得到很好的发挥。于是根据界面环境对天气图标进行了重新调整，以深色关系调整了云朵部分，针对太阳的配色和尺寸比例也进行了调整，如以下效果图。

七、延续风格补全设计

以调整后的天气图标作为风格规范，延续了其它业务场景的图标设计，在透视关系、细节规范、配色比例和光影效果等方面进行了直接延续。在光影方向上面选择了纵向区分，左边三个选择左上角打光，右边三个选择右上角打光。（当然也可以统一一个方向设置光影）

八、统一性还是差异化

完成的整体设计视觉风格虽然比较统一，但是也有一些问题存在。图标之间缺少差异化，过度统一容易视觉疲劳，于是在统一性和差异化上面开始纠结了。

为了既保障图标设计表达的统一性，又能形成视觉感的差异化，做出了调整配色关系的决定。根据天气图标的配色关系延续出了其它色系，看看最终的效果如何。

你喜欢哪一版？

关于统一性和差异化因人而异，在朋友圈征集意见也是各有差异，那么你会喜欢哪一版呢？欢迎留言区一起互动交流。

原文地址：黑马家族（公众号）

作者：黑马青年

转载请注明：学UI网》画图标，我是认真的

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司