9大特点：

1.使用纯色

2.使用素色

3.衬线字体

4.干净的图片

5.使用几何轮廓图片

6.图片与线的组合

7.圆弧形图片配弧线文字

事情的来源是今早 9 点零三分，我还在梦里吃着澳龙，突然微信的震动把我震醒了。我一拿手机，原来是我的恩师胡晓波给我发来一条消息，让我试着能不能写一篇关于卡通 LOGO 的教程。当然我是一个很乐于分享的好人，所以有了今天的这篇分享。

准备好了吗？我要进去……哦不，我要开始了！

 

首先先去网上找一些关于青蛙的素材，当然，你可以找照片，也可以找一些青蛙的卡通形象参考。然后在网上我看到了这张图，觉得非常有意思。虎躯一震，决定把这个拿来当动作参考。

  

在做卡通logo的时候，找照片素材最好是找姿态、动作比较有故事性、有意思、有特点的，这样出来的形象也比较生动。

接着，把这张照片垫底，试着草图一下它，把它的轮廓先用 AI 钢笔工具勾出来，这样就得到了一个初始的外轮廓。

再处理下这个外轮廓，得到这个初始的轮廓后，感觉这个形象完全可行，那么我们现在需要把它的线条变的更顺滑，整体的形象显得更可爱（既然是卡通，可爱一点会更好看）。

重点 2：

怎么能让一个形象变得 Q 萌可爱？长时间的研究卡通，我得出这么一个结论：形象偏矮胖、敦厚、圆润，就比较能突出可爱的特征，把你勾勒的初始轮廓适当压扁，让它变矮胖。

经过线条的优化（使其圆滑），外轮廓的压扁处理以后，就得到了最后的这个结果。

整体形象确定以后，再给青蛙画五官，这里，我们再去网上找一些青蛙的卡通形象的处理方式（或者不局限于找青蛙也可以找一些与青蛙形象相近的动物，例如蜥蜴等等）。

重点 3：

卡通的五官，处理方式其实很简单，尽量用几何图形去作为脸部的五官特征。

在这个案例上，因为主体是青蛙，所以不能单纯用一个小圆点去作为青蛙的眼睛，我们可以看到青蛙眼睛的特征，是有一个较大的眼白与较小点的眼珠。所以这边的处理方式，就是一个白色的大圆+黑色小圆。

单单这个形象还是不太够，虽然这个坐姿已经比较生动了，我们可以根据这个形象展开联想，让它更充满故事性和趣味性，这里观察青蛙的姿势，这个屁股的角度，可以让它坐在跟大自然有关的物体上，加上这个双手护胸的动作，让它叼一根树枝，更能体现悠闲的气质。

重点 4：

卡通吉祥物的标志，利用本身的的姿态动作，适当展开联想，加一些小物件可以让它更生动，更有趣。

接下来就是上色跟补充一些细节了。如果配色较差，可以去网上找一些配色的参考。这里我找到一个卡通的配色，刚好也是绿色为主，适合青蛙，且背景也可以参考它做一个叠底。

最后，选个自己觉得较为合适的字体，如果会做字体的话最好是自己做个字儿，再做个排版，就OK 啦~

  

重点 5：

卡通 LOGO 的排版，不要太复杂，因为卡通标志本身的图形具象，排版简单更好看，用字的字体气质要符合图形。

前面的案例，想必大家都已经 get 到了步骤，还我还是要再演示一下这个案例，嘻嘻。

还是一样的，这张照片是我偶然看到的，觉得非常有感觉就保存到手机了。在做这个 LOGO 前突然想到有这么一张图，立马开始操作。

其实大家在日常生活中看到比较有意思的图片，都可以保存下来，说不定哪天它就能变成一个好看的 LOGO 是不是呢？

好了不说废话，开始勾轮廓！

这张图的松鼠，看起来还是比较饱满的，所以在后期调整优化曲线的时候会比较轻松，但是这个图的外轮廓，相比第一个案例的青蛙，是比较复杂的，这里需要耐心一些。

这里绘制的外轮廓，线条都不是合并的，但是我们发现，这个 LOGO 是需要做一些高光跟阴影的，所以这里先给大家普及一个基础知识。

三种描边模式，我们选择第三种——使描边外侧对齐，因为我在给图形做剪切阴影或者是高光时，不可能 100% 沿着轮廓去勾勒，这样太累了，所以一般会超出外轮廓一些，再去做剪切，这样能省不少时间。

  

重点 6：

卡通 LOGO 的绘制，基本都是用到外轮廓，这样好做高光跟阴影的剪切。

回到主题，我们接着画这个松鼠。

刚刚我们已经把草图大概勾勒出来了，现在把这个草图垫底，让它形成一个合并的状态（注意先观察草图找好锚点的起点，否则很难让整个轮廓连起来），并且过程中、优化线条曲线（这一步还是有点难度的，钢笔工具不太熟的同学需要多练习）。

勾勒完成后的线条是图 1 这样的，不少同学会有疑问，为什么有些地方会呈现双线的状态？别急，把它换成外描边模式你就明白了。

因为外描边模式，当有两条相近的线条时，是有可能重叠的，这样就能形成一些细节线条。

接着，我们继续调整有些不完美的地方，比如重叠到的地方线条粗细不统一等等，调整完后我们看下效果。

到了这步以后，其实最难的点已经被你拿捏了，剩下的就是补一些细节。另外，松鼠的尾巴，这边是没有按照图片的线条去处理的，因为现在这个图形是往下走的趋势，如果尾巴还是往下垂，那整个图形的重心就不平衡了。

这边尾巴的处理也可以网上找一些参考，因为上面说的平衡问题，所以我把松鼠尾巴处理成往上走的趋势。

大体造型已经完成，现在剩下的就是填补五官、填充颜色，加高光阴影。

 

重点 7：

阴影跟高光这部分，其实不需要过于严谨。没有美术功底的同学也不用发愁，在一些有交错，遮挡的部位加阴影，在头顶或者身体外边缘加高光，基本是没有什么大问题的。

这样图形就完成了，最后加上排版就完成了。

  

第三个案例跟前两个其实很相似，都是我在网上看到比较有意思的照片，下载下来做成卡通标志。废话不多说，上图了。

其实我个人很喜欢做猴，当然大部分原因是因为我爱人叫……猴子，emmm好像离题了，收！

因为猴子本身是一种带着调皮、聪明、智慧性质的动物，做猴 LOGO 其实可以让它赋予多种性格。

如上两个案例的方法，先大概绘制一下猴子的外轮廓，看一下图形大概的感觉（这里还是与第一个案例说的，图形整体看起来比较瘦高，可爱气质会偏弱,我们可以尝试压扁）。压扁后我觉得是我想要的一个高度，但是压扁后头部也会变形，那么接下去只要我们把这个压扁后的猴子轮廓复制一个，再使用第一版绘制的头部就 OK 了（这里不做具体演示）。

重点 8：

卡通类型的 LOGO，一般身体都会比较短，头比较大，圆，这样可爱的气质才会突显。

经过一番调整操作后得到这样一个轮廓，但是现在这猴子是没有尾巴的，所以我们要给它添加一根又粗又长……的尾巴。

这样得到了一个最终的轮廓形态。接下来就是给它画上脸，五官，还有增加一些高光细节了。

这里看你想给猴子定义什么样的表情气质。原照片的这猴子，表情略带无辜，我觉得还蛮不错的。那么我们尝试一下画上表情，注意简化。

委屈、无辜的表情，如果你不知道怎么画才能表现出来，可以对着镜子装个委屈的表情看下，或者度娘一下委屈、无辜的照片。一般委屈无辜，眼睛的形状都是呈现一个眼角往下的状态。

加完五官以后，现在整个猴子的大致形象已经出来了，那现在这个姿势，需要加点什么才能让它变完整。原照片上，是两根分叉的树干，其实照着画也没什么不妥，那我们就给它画上树干，再上个色。

画完树干，上完色后，整个图形是不稳的。原因是分叉的树干其实是个 V 字形，所以我们为了让它稳住，在底部加一个类似阴影的形状去压住它就完全 OK了。

本以为到这，就完成了。端详许久，总觉得还差点啥，感觉这猴儿还不够灵性。这时候我突然想到我前几天买的毛线帽，然后想着，天冷了，给猴儿个帽子吧……

画完后，又看了许久，不禁发出感叹，我 TMD 真是个天才……最后老规矩，加排版，完事儿！

  

 

前面的都是根据一些照片去做的吉祥物卡通标志，其实创造性不属于特别高，我个人其实更喜欢是这类 MIX 标志，把两种不相关的物体结合起来，但却不违和，反而更显趣味创造性。

这个案例的灵感来源是我在 BE 上看到一个我很喜欢的设计师做的一个标志（下图） ，把老鼠与胡萝卜结合，非常有意思。

做这个 LOGO 之前，我就一直想做个胡萝卜的创意性标志（出于对波哥的爱），这类型的卡通 LOGO，有时候就是灵感一瞬间迸发的事儿。但是没灵感的时候，我都会去网上瞎看，有时候看着看着，就能想到做啥了。偶然间看到几张坦克的照片，灵鸡一动，把胡萝卜跟坦克结合，因为刚好坦克的炮管，可以用胡萝卜代替（想到这里，我露出了姨母笑）。

那么胡萝卜跟坦克的造型怎么画呢？首先还是打开你的网页，可以先搜一下胡萝卜的造型，再搜坦克的图片（这里找到的坦克图片，已经是手绘图了，所以我们要把它概括简化一下)。

我先不用管胡萝卜的部分，因为胡萝卜的角度是要根据坦克轮子的角度来做，所以我们先把坦克的部分绘制一下。仔细观察坦克底座的构造，拆解绘制。

到这里大家可能会有点困惑，这样的图片我要怎么下手？不要急，其实不难。上面我们已经把坦克底座的部分拆解，现在只需要绘制一排车轮跟轮子上面的铁盖。这里需要注意的是，因为坦克的特征十分明显，就是一根长长的炮管与底部的一排轮子，所以只要把这两个特征能抓出来，基本不难看出是坦克了。

重点 9：

当你要把一个实物/动物图片转化成卡通风格时，要仔细观察它原来的线条，使其更几何化，去繁从简。

坦克部分处理完就可以搞这个胡萝卜了，这里就不用做太多演示了，胡萝卜这么好画！注意跟坦克合上的角度就 OK 了！

这个角度先画个草图，放上去试试合不合适。

可以！

再观察下胡萝卜的细节，因为它要充当炮管，所以我们不加上面的叶子，但是这样会不会看不出是胡萝卜？那我们可以观察下胡萝卜身体部分有什么细节，再加上胡萝卜的橙红色，说看不出我不信！

特征：胡萝卜身上的划痕

别急，现在看不出胡萝卜不要紧，上色以后一切都会好的~

好了，可以合体了！注意各个组件的图层关系。

上色！排版！完事儿！

  

这个案例跟上个案例其实非常相似，都是 MIX 系列的卡通 LOGO 这个 LOGO ，这个 LOGO 灵感来源于我偶然在网上看到了这张图片，以猕猴桃代替了鹦鹉的翅膀，配色也完全不违和，是非常优秀的作品了。

萌生了想长做一个类似的 LOGO，当然我们不能再用猕猴桃的元素了。想想，其实很多水果可以做这样的「代替品」。但是这里需要注意的是，什么样的水果切开，还非常具有特征，让人一眼就能辨识出来。最后我选了西瓜，西瓜可以有半圆，也可以有三角形，这样的话，鸟的翅膀形态发挥空间就很大了。切开后的西瓜籽加上红色的瓜瓤十分具有辨识度。

当然我们先要做的是「鸟」这个主体的造型。这边还是先去网上找一下鸟的图片，最终，我选用这张图片来作为这个 LOGO 的主体（因为它本身图片就有可爱的气质，更方便我们后面创作）。

这里我只提取了这只鸟的身体跟嘴的部分，翅膀我们要用西瓜代替的，所以暂时先不去绘制。确定好身体部分以后，我们再尝试先画切开的一半的西瓜。这里也不难，网上搜一下西瓜，很多素材可以参考着画。

画好的西瓜，我们再尝试旋转角度，跟鸟的身体部分合体一下。

看起来真可以啊！

现在的造型看起来是不是还不戳！是吧~但是还没完！一般展翅的鸟儿，爪子是什么状态？别慌，继续度娘！

可以看到，展翅后的鸟儿，爪子都是往前伸。我们秉着卡通能简化就简化的原则，把爪子处理成线的形式即可。加以上色，「西瓜鸟」就出来了。

图形这样已经是完成了，现在就剩下排版。当我加上文字以后，发现这个 LOGO 越看越显得空，那咋办？加个背景色块其实就解决了（这里的背景色块,也是根据鸟的身体走势做的椭圆）！

  

重点 10：

当你的卡通 LOGO 做完后发现整体看起来不饱满，尝试加个背景色块，屡试不爽。

   

总结Tips：

• 在做卡通 LOGO 的时候，找照片素材最好是找姿态，动作比较有故事性，有意思，有特点的，这样出来的形象也比较生动。

• 怎么能让一个形象变得 Q 萌可爱？形象偏矮胖、敦厚、圆润，就比较能突出可爱的特征，把你勾勒的初始轮廓适当压扁，让它变矮胖。

• 卡通的五官，处理方式其实很简单，尽量用几何图形去作为脸部的五官特征。

• 卡通吉祥物的标志，利用本身的的姿态动作，适当展开联想，加一些小物件可以让它更生动，更有趣。

• 卡通 LOGO 的排版，不要太复杂，因为卡通标志本身的图形具象，排版简单更好看，用字的字体气质要符合图形。

• 卡通 LOGO 的绘制，基本都是用到外轮廓，这样好做高光跟阴影的剪切。

• 阴影跟高光这部分，其实不需要过于严谨，在一些有交错，遮挡的部位加阴影，在头顶或者身体外边缘加高光，基本是没有什么大问题的。

• 卡通类型的 LOGO，一般身体都会比较短，头比较大，圆，这样可爱的气质才会突显。

• 当你要把一个实物/动物图片转化成卡通风格时，要仔细观察它原来的线条，使其更几何化，去繁从简。

• 当你的卡通 LOGO 做完后发现整体看起来不饱满，尝试加个背景色块，屡试不爽。

初试卡通，或许效果没有很好，但是都是能靠多看，多练，练会的。喜欢它，你就能静下心去做它，练它，兴趣是最好的老师。所以如果你也喜欢卡通类型的 LOGO，让我们干起来吧！

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

作者：小章鱼

转载请注明：学UI网》五个案例教会你怎么做卡通 LOGO （一）

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

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

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

三种加载状态

页面加载进程会受多方面的影响，例如页面里图片、图标的数量，页面中是否有三维场景或模型，是列表式设计还是卡片式设计…

逐一加载

对于可以同时进行多个加载任务的产品，更适合应用逐一加载的形式，这样做能减少用户对于等待的感知程度。任务列表逐一加载的过程会给用户带来一种秩序感。

完全加载

进入一个网站或App，很多页面都会一下就显示出来所有内容，这种页面完全加载的形式对用户来说更熟悉。

同样，页面完全加载的形式会让用户的操作和浏览过程更流畅。

延迟加载

延迟加载是用户主动触发的操作，根据操作系统反馈对应的结果。延迟加载包括三种形式：

• 无限滚动：当检测到用户快要到达列表或页面的末尾的时候，通过无限滚动来作为触发器，引导用户获取更多内容。

• 加载更多：通过点击“加载更多”按钮来获取更多内容，这个过程由用户主导决定，是否选择点击。

• 分页加载：分页是在不同页面上进行的延迟加载。这个过程也是由用户主动选择，但和“加载更多”按钮不同的地方在于，分页是页面间的切换，并且用户能清楚地看到具体的页面数量。

五种加载模式

加载模式需要依托场景去考虑。比如一个1秒就能加载的页面和一个需要5秒才能加载出来的页面，我们就需要考虑使用不同的加载模式设计，这样才能做到差异化设计。

这里我做了一个表格，将页面加载需要的时间以及对应的加载模式进行了整合。

0.1秒以内

如果加载时长低于0.1秒，用户不需要等待加载过程，内容就能即时呈现出来，有一种“还没开始就已经结束”的感觉。

0.1秒以内的加载不需要在页面中添加任何加载状态，但要一个场景需要格外注意，如果用户刚完成一系列复杂的操作，点击提交之后，考虑为用户提供撤消机制。

▲用谷歌邮箱发送邮件时，发送成功之后会弹出一个撤销提示，允许用户在5s内撤销刚才发送成功的邮件。

0.1-1秒间

大多数产品的页面加载速度都在这个区间，用户几乎不会注意到这种加载延迟。所以我们不需要增加额外的加载动效来填充这段加载时间，不然可能会起到画蛇添足的反面效果。

试想一下，如果在每个页面加载的过程中都加上加载动效，不仅会分散用户的注意力，并且屏幕上总出现不断跳动的内容，会让人感到很焦躁。

1-2秒间

如果加载时间超过1秒，用户就会感知到这个加载过程，这个时候我们就可以考虑适当添加加载动画，缓解用户等待的焦急感。

• 微加载：1-2秒的加载时间对用户来说，说长不长说短也不短，优先推荐轻量级的动画加载形式，为用户提供一种进度感。

▲在下载内容的过程中，使用这种轻量级的环形动画来显示加载进度，简洁清晰，而且还能作为组件来复用，能够极大提升工作效率。

• 骨架屏：用于整页加载，这种加载形式在产品中的应用也越来越频繁。骨架屏可以让用户在等待加载的过程中，先了解页面的架构。

在骨架屏基础上，可以“选装”一些好看的效果，增加页面加载时的视觉体验观感：

• 微光效果：在骨架屏基础上添加微光效果，光感的加入能将用户的注意力从等待中转移开，有效地减少等待感知。

• 脉冲效果：效果和微光效果很像，差异的地方在于脉冲效果用于单个的任务或卡片列表。

2-10秒

这个加载时间对于用户来说已经很长了，对于设计师来说，需要对这段加载时间进行合理有效地设计，来提升用户体验。

• 时间提示：在开发中很难以分和秒为单位来精确地估计加载时间。

如果在加载的过程中，想给用户一个期望的时间值，告诉用户整个加载过程需要多长时间，我们可以用“这可能需要几秒钟”这种提示方法，既能展示加载需要的时间，又能给用户一个时间预期。

• 进度条：最常使用的加载形式，加载过程中使用缓入动画会让整个过程看起来更像在加速。

• 分步提示：如果加载过程过长，可以将整个过程分为几个不同的步骤，帮助用户预估操作完成需要的时间。如果系统正在处理多个项目，分步提示的设计能让用户明确了解已完成的操作。

10秒以上

• 百分比加载：使用百分比加载虽然不能告诉用户加载完成需要多长时间，但是能提供一种过程感，让用户自己来估计加载时间。圆形进度条+百分比是最常见的加载形式。需要注意的是，不要在加载到99%的时候让进度条卡住不动，这样会让用户感到焦急。

• 后台加载：如果一项任务需要加载很长时间，我们不能让用户看着进度条干等，其他什么都做不了，这种情况我们可以考虑将任务放到后台去加载。

最后

把加载细分成这五种模式，可以覆盖很多使用场景，这样的对症下药既能保证用户体验，还能让产品丰富化，起到锦上添花的作用。

在对的时间和对的场景下做对的事，这句话用在什么地方都不为过，设计也是一样。

最后考虑到大家经常使用卡片式UI排版，为大家整理了90+个iOS卡片模板，源文件已经打包好，大家可后台领取。

领取方式：关注公众号，后台回复【小组件】获取源文件。

慢慢来比较快，希望对你有帮助！

原文地址：Clip设计夹（公众号）

作者：Clippp

转载请注明：学UI网》3种状态+5种模式，从UX角度分析加载设计

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

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

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

02.插画与文字

热衷于插画设计的设计师们将文字巧妙的融合的图形元素中，这种形式更能传达设计师的想法，使其更为具象化的表现在欣赏者的面前。

03.3D设计

3D软件让设计师们不在拘泥于二维世界当中，更全面的视角和细腻的质感表达，让设计作品焕发出全新的力量！

原文地址：设计师深海（公众号）

作者：设计师深海

转载请注明：学UI网》2022的100种设计法！

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

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

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

前言

影响APP转化率的因素有很多，设计也是其中重要组成部分，那设计师需要如何应对，才能助力用户转化呢？从用户角度来看，助力转化就是扫清理解障碍，提升浏览意愿与顺畅度。

想要以设计语言达成以上目的，快速传达有效信息是十分重要的一环，接下来，我们结合案例，聊聊快速传达重要信息是如何通过节省用户时间来助力转化的。

01.为什么要快速传达

研究表明，人类在面对非自身兴趣的事物时，注意力只能高度集中 10 分钟左右，短暂休息后再次集中注意力的时间则为7-10 分钟[1]。

当用户使用服务类APP的时间超过这个阈值后，就会因为迟迟没有达到目的而产生焦躁情绪，随之而来的负面影响要么是跳出到其他APP，亦或者对软件产生厌烦感，而无论哪一种都不是我们想要看到的结果。这也就意味着，我们每次只有20分钟的时间让用户完成从筛选到下单的时间。

因此，在用户有限的时间与精力中，迅速的传达有效信息，不仅可以缩短用户从挑选到下单的流程，站在用户角度来说，因为可以快速的找到自己想要的信息，也可以让用户切实的感觉到这是“好用”的软件。

因此我们需要快速传达的理论依据就此成立：

02.如何快速传达

那么如何快速传达有效信息呢？方法有很多，今天我们重点阐述以下三个技巧：

接下来我们结合实际案例看看如何运用以上手段以达到快速传达的目的。

 · 塑造视觉焦点

什么是视觉焦点呢？就是画面中让我们能多停留几秒的视觉元素，可以是一个点，一条线，一个面，通俗来讲，就是页面中最引人注意的地方，视线上交汇集中的地方，这个位置就叫做视觉焦点，而焦点可以通过构图，色彩运用，比例等手段进行塑造。

接下来我们结合十一活动的实际案例说说如何进行焦点塑造，我们需要先构建合理的视觉层次结构，好的层级能使观者快速浏览信息，位于层级顶层的信息也可以在最短的时间内让人注意到。

根据人眼对画面的阅读习惯，位于顶部和正中这两个位置的信息会最先被注意到，我们应优先将重要信息放在此处，符合了阅读习惯之后，通过运用色彩对比，字号大小等差异化手段，可以将信息的层级提高。

大字号更容易让人一眼看到信息，因此就算是同处高层级的信息，通过内部字号大小的对比，可以进一步细分层级，让视觉焦点更加具体

饱和度与对比色的运用同样重要，我们将彩色的图片去掉颜色之后可以发现，色彩关系对画面层次的影响，通过对灰度，明暗和色相的使用，可以使焦点位信息产生视觉前推感。

视觉焦点在具体案例中的应用展示：

58到家活动

小结：通过构建画面层级之后，运用字号大小和颜色对比等手段做出差异化设计，可以快速将用户注意力吸引至焦点区域，并被引导着跳过次要区域，视线按从上到下，从左到右的顺序，在各个焦点位中跳跃，从而达成我们优先传递重要信息的目的。

· 前置思考过程

我们平时在想要达成某种目的时，需要先获取大量信息，在脑内罗列整理，然后归纳出有用信息后，再进行处理。

用户在使用APP时也是这样，比如想点餐时，要挑餐厅，挑口味，挑菜品，而这一系列的信息整理过程是十分繁琐又消耗耐性的，正因此，我们才经常面临：不知道吃啥啊 这样的难题。

而这个思考过程是可以通过设计语言来简化，甚至提前完成的。通过将页面中的信息分类后，将同类信息放置在不同组块中的相同位置，使用相同的颜色和格式，会帮助用户形成阅读惯性。

 结合十一活动案例来看，每个组件中都会包含有几类基本信息：产品名，利益点，和下单跳转按钮，每个组件中的信息都在固定的区域展示.

同时用高饱和度的红色来强调，在这样的固定排列中，用户想要取得什么样的信息时，可以第一时间去固定的位置寻找，大大提高了信息获取的效率。

前置思考在具体案例中的应用展示：

小结：通过将画面中的信息整理并归类，我们可以缩短用户的信息获取与脑内整理归纳的时间，让用户将有限的时间更多的放在优惠对比与决策中去，这不但有助于提高下单率，易读的版式也更容易让用户产生“好用”的感觉。

· 米勒定律[2]

我们先来看以下两段数字

是不是后一段更容易记忆，这涉及到一个叫“组块”的概念，人脑记忆一组信息的时候，这组信息内的元素数量小于7±2时最容易记忆，具体数量因人而异，老年人的记忆数量会显著降低。

因此一长串数字看起来毫无规律难以记忆，而3个数字一组分成多个组块后，则容易记忆很多，同一组块内的信息越少，越容易让用户记忆深刻。

这个定律对设计画面同样有着重要的影响，一个板块中如果包含了过多的组块，不仅会让用户对这个板块的内容难以记忆，也会因为信息过多且没有主次而大大增加筛选成本，用户将时间过多的花费在筛选上会延长下单之前的流程，也会提高下单之前的跳出率。

结合我们的页面设计来看，每一区域内的组块分布都不超过5个，同时组块内的信息类别也只有图片、产品名、简要介绍与下游链接4部分组成，通过做减法，让重要信息可以迅速被提取，更容易被记忆。无论对于新老用户来说，都可以有效的降低筛选成本，新用户能更容易理解板块功能，老用户则更容易记住自己想找的功能在什么区域。

米勒定律在具体案例中的应用展示：

58到家电商首页展示

 小结：通过简化板块中的信息类别，能有效缩短新老用户寻找服务的时间，同时老用户也更容易记住想要的板块在什么位置，下次再使用的时候，迅速触达。

03.写在最后

作为设计师，兼顾商业化与用户体验是我们的必修课，好的设计不仅仅是要“好看”，更需要兼备用户与产品两方面的功能性，将视觉语言与心理学、行为学的结合运用，既可以有效的提升用户体验，提高粘性，又能缩短下单前的必要流程，提高转化率。

注释：

[1]出自《教书育人》2016年1期38页，【运用心理学规律提高课堂学习效率】章节 

[2]米勒(Miller，1956)的分析，人脑处理信息有一个魔法数字7(正负2)的限制，也就是说，人的大脑最多同时处理5到9个信息(chunks)。原因是短期记忆储存空间的限制，超过9个信息团，将会使得大脑出现错误的概率大大提高。

原文地址：58UXD （公众号）

作者：环铁艺术家

转载请注明：学UI网》三个小技巧，轻松提高设计转化率

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

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

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

特别有仙气的名称和颜色，长春花蓝是一个全新创作的颜色，代表着一种自在的信心和大胆的好奇心，期望激发个人的创意与创作力，拥抱充满可能性的未来。

当很多网友在讨论这到底是蓝色还是紫色时，潘通表示它是蓝色和紫红色的混合，将前者的「恒久」与后者的「活力和兴奋」结合在一起，并展示了多种配色组合方式。

其实这种分不清具体色系的颜色也出现在2001年潘通为Tiffany打造的独有品牌色Tiffany蓝，同时也成就了这个品牌。

很多女生买Tiffany大多为了这个颜色的包装。这个品牌色在潘通色库中是找不到的，除非是Tiffany授权，否则任何印刷厂都无法印制。

潘通就像统治了色彩世界一样，只要跟潘通合作过的品牌色都会火，比如星巴克、可口可乐、腾讯企业官方色、华为P10的手机、欧拉汽车的粉色、五菱mini的马卡龙色等等。

到底潘通为什么会这么火，而潘通到底是家什么公司，我们今天就来科普下。

潘通介绍

Pantone的前身是一家印刷品公司，创始人劳伦斯·赫伯特（Lawrence Herbert）原本是在一个小的广告印刷公司做兼职。

同时拥有生物、化学双学位的他利用自己的专业知识简化了油墨生产流程，并且帮助公司的印刷部门实现盈利。

后来一想，印刷部门盈利都是靠我，不如就自己单干，于是花费9W美元把这个印刷部门也买了下来，并命名为潘通（Pantone）。

但在销售自己生产的颜色时，他经常发现会与客户需求颜色信息不对称的问题，比如客户需要一个湛蓝色，而油墨厂可能无法调制出与客户需求一样的颜色，就会导致在很多色彩上认定的误差。

他意识到解决办法就是建立统一的色彩系统，每一种颜色都用数字代号来表示，比如设计师与印刷厂说，我要印制一个例如007颜色，而印刷厂只要拿着色卡找到与型号相符的油墨进行配置，就可以得到目的颜色，这样会极大的降低颜色的试错率，对印刷厂也可以减少库存，缩减成本。

在1963年，第一代潘通（Pantone）配色系统

（简称PMS）上市

接下来的20年，潘通逐步建立起了一整套色彩标准体系，使原本模糊不清的颜色概念发展成一门精准的科学，减少了设计师、制造方、零售商和终端客户间的沟通成本。

因为便捷的色彩系统使用，应用人群也越来越广，这一套配色系统为潘通赚的盆满钵满，潘通也逐渐被市场认定为色彩标准的代表，就像国际通用货币一样的主导地位。

可赫伯特的野心不仅仅是这样，潘通建议所有的色卡用户每年都购买最新版本，理由是印刷的油墨会随着时间的推移而变黄，从而失去精准度。

呃，虽然有点道理，但一看这色卡的价钱（割韭菜还是你狠），于是“卖色卡”成了一个持续带来现金的业务。

但是大众也不傻，心想只要买一本色卡回去就能用好多年，于是潘通利用色卡所能涉及到的平面设计、家居装潢、服装纺织、工业产品的庞大人群便渗透到大众。

在千禧年开始发布了第一个年度代表色，将天蓝色命名为千禧蓝（Pantone 15-4020）。

并且植入到了《穿普拉达的女王》电影中，成为了潘通里程碑的时刻，这一招是真绝，因为电影与时尚行业是最能传播到大众市场的，加上各大品牌与潘通合作的专属色大火。

从这一刻开始，潘通成为了全球色彩趋势的老大，之后的潘通每年都会推出一个新的年度代表色，每个代表色都有单独的色卡。

利用每年的色彩流行趋势影响着众多产业的产品开发与采购决定，包括服装、家饰纺织品和工业设计，以及产品、包装和平面设计。

而作为商家想跟时尚潮流就必须使用每一年的色卡，比如今年的长春花蓝，潘通的色彩帝国已经在影响着全球的消费心理和时尚变革。

最后来看看长春花篮的色彩

不得不说这颜色确实挺好看的

原文地址：修先森撩设计（公众号）

作者：修先森

转载请注明：学UI网》潘通（Pantone）是如何靠“色”赚钱的

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

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

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

 01.  

动效，让点赞与众不同 

动态表情为社交场景带来更活跃的体验，使得交流过程变得更加趣味性。一个动态的表情不仅活跃了氛围，也使得通过简单的一个符号代表了千言万语。

最近在使用钉钉 APP 进行聊天的过程中，发现输入框的大拇指图标在长按的时候结合了动效的变化，对话场景中出现的大拇指表情会随着长按而增大。结合动效和长按手势，为点赞的图标增加了不一样的趣味性，带给用户不一样的社交体验。

02.  

动态提醒，增强消息的关注度 

各类通知/消息在产品中随处可见，红点提示刚出现的时候还引起了用户强迫症，短时间内也增强了消息的阅读率。随着红点效应逐渐淡化，未读消息的点击率逐渐降低，大家都在尝试更多提高关注度的形式。

支付宝在消息模块的服务提醒中，采用了动态形式提高关注度。当用户点击消息进入界面时，小铃铛图标会左右晃动，以此来吸引用户的目光，达到增加关注度的目的。

 03.  

图标动效，让你脱颖而出 

在金刚区众多的业务模块中，想要突出重点模块的关注度，采用动态图标是比较常用的方式。采用动静结合的形式，会让动态表达得到突出。

比如 Keep App 将活动挑战图标动效化，在不改变配色规则和图标设计规范前提下，依然可以达到突出主题的作用。

 04.  

博人眼球的动态悬浮广告 

在不破坏产品结构的前提下，融入广告的做法中，悬浮层广告是较为明显的形式。通常是静态异形和动态异形较多，而动态的关注度相对更强一些。

比如 Keep App 将活动的折扣信息以悬浮层的形式表达，既不会占用太多空间（随着滑动会隐藏显示），又能吸引用户的关注度。如果用户觉得影响操作，也可以直接关闭，就不会反复提醒而形成干扰。

 05.  

内容模块结合动效替换突出存在感 

在一些内容量比较多的产品中，比如电商产品，很多内容模块都是百花齐放。都想要突出自己模块的存在感，带来更好的流量引入。而动效的结合也是不错的选择，但是需要考虑动效的干扰度。

当当 App 在突出今日抢购栏目时，为了不影响临近板块的干扰度，利用动效转场来替换展示的商品信息。缩放替换商品时的动效既能达到差异化，也不会破坏整体的结构，算是一举两得的设计解决方案。

 06.  

微弱的动效也能呈现有温度的设计 

有时候在进行产品设计的时候，动效带来的关注度并不是需要很强的表现力，一些微弱的动效依然可以提升产品体验，带给用户更有温度的设计。

自如 App 整体的设计都是做得非常不错的，在“我的”板块头部区域，结合背景插画视觉感也是非常不错。插画中部分元素的微动效增强了生活气息和真实感，让用户感受到这是一款有温度的产品，提升用户的好感度。

 07.  

动态感十足的底部标签栏 

图标动效运用到底部标签栏十分普遍，在这个频繁切换的操作中，动态的形式可以带来更强的趣味性和关注度。

优酷 App 底部标签栏采用多种颜色变化转场，结合路径动效带来动感十足的体验。首页图标还结合了刷新的功能，方便用户进行内容的刷新，增强用户体验感。

 08. 

 拓展功能的动态指引设计 

针对一些功能体量较大的产品，会经常结合一些隐藏式设计，拓展出更多功能操作。通常默认为展开状态，在滑动浏览内容时隐藏，通过动效吸引点击展开，不会造成主内容的干扰。

比如平安口袋银行底部标签栏上方的拓展功能区，动态形式的展开与隐藏方便用户浏览主页内容。个别内容采用动态设计（点我抽奖），突出其点击欲望。动态设计不仅提高了功能的曝光度，也能引导用户操作，将繁琐的操作变得更便利。

 09. 

 结合动态 IP 的下拉刷新 

针对下拉刷新这一常规操作，设计形式也是丰富多样。结合 IP 形象进行动态演变完成刷新动作，被很多产品设计师所采纳。

美团外卖就将品牌 IP 形象结合得恰到好处，下拉刷新时两只耳朵摇摆非常俏皮可爱，松开后 IP 形象露出，还配合眨眼睛等可爱的表情动效。情感化设计结合动态表现，拉近与用户之间的亲和力，带给用户更人性化的使用体验。

 10. 

 图标动效带动局部功能的关注度 

对于一些局部功能或者模块占比较小的栏目，为了提高曝光度，获得用户的关注度，动态的形式是比较常用的方法。通常会在图标部分、文字部分、装饰元素部分等进行动效设计，带来的效果也是显而易见。

比如 QQ 音乐在“我的”模块中，将活动中心、会员中心、每日签到的图标采用动态设计形式，虽然几个模块占比较小，但是依然能够获得用户的关注度。

 小结 

动效表达在产品设计中的应用越发普及，不仅可以强化功能的关注度，也能带给用户感官体验上的升级。优秀案例的积累和分析，有助于我们掌握更多的表现形式，灵活的运用到项目设计中。

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

作者：黑马青年

转载请注明：学UI网》发现了10个非常棒的UI动效案例

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

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

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