01 对比色配色实操

本次提取上期“对比色配色”理论篇讲解的部分文案，进行配色的实操演示：

方案一

在PS中新建文件，背景选择蓝色。

英文放大铺满背景，并加入边框。颜色选择蓝色的对比色红色。（英文字体：Champion)

新建图层，填充白色，用套索工具画出不规则选区。

点击“添加图层蒙版”按钮，给图层添加蒙版。

选择蒙版，执行“滤镜-滤镜库-喷色描边”，得到不规则的撕纸边缘效果。

复制一个新图层，填充红色，向上错位移动。

在白色图层添加“图层样式-投影”，撕纸效果就制作好了。

复制“文字”和“矩形”图层，移动到红色图层上方，填充蓝色。

按“Ctrl+Alt+g”建立剪切蒙版，让文字只在红色图层范围显示。

把蓝色字改为白色，白色是万能的调和色，可以缓冲蓝红对比色强烈的对抗性，也可以让作品更加透亮。

最后加入文字排版和纸张褶皱效果，设计完成：

方案二

使用AI进行制作，颜色选用对比色紫色和绿色搭配。（英文字体：Current）

给英文创建轮廓，取消群组。

使用直线工具画出一条分割线，使用“路径查找器”中的“分割”功能，把字母切割开

取消群组，右键选择“变换-旋转”180度，调整两个色块重合。

执行“效果-风格化-阴影”加入阴影。这样得到了折纸效果：

使用相同的方法制作出其他字母：

最后加入文字排版和纸张褶皱效果，设计完成：

方案三

继续使用AI进行制作，把所有英文放置在画面中。（英文字体：Current）

颜色选用黄、蓝、红的三色对比色进行搭配。

最后加入文字排版和纸张褶皱效果，设计完成：

可以尝试新的配色方案，

此方案颜色选用橙、绿、紫的三色对比色搭配。

本期使用的字体、样机、源文件，请关注微信公众号：艺海拾贝Design（ID：YHSBds），公众号主页回复“对比色”获取下载链接。

优秀作业展示

01 NoctilucaGladys

02 风少

03 沕风

04 龙娟（2张作品）

05 七陌

06 Joyce

07 蛋蛋DAN

08 珞影随行

09 咪奥mao

10 小孔呀

原文地址：艺海拾贝Design（公众号）

作者：邓海贝

转载请注明：学UI网》用好“对比色”，让你的设计更有吸引力！（实操篇）

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

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

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

什么是《请回答》

项目背景：

如何打造有温情的品牌活动呢？

01品牌的延续

 

02主视觉传达温情与品牌

 

03核心玩法渗透温情设计

  

  

 

04群像故事海报传播，扩大影响力

项目总结

文末点击原文地址 可观看教程视频；

今天用另一种角度

教大家三角构图的实用方法

▽

用三个点所相连成的线称之为三角构图，看似简单，实际该如何运用？

第一眼看好像没什么问题，但是由于文字的分段较多导致内容层级不明显，阅读上会出现断层和不够直观的体验。

三角构图作为层次空间的搭建者，将数字、主题、信息、时间利用三角的结构进行了分层以及信息主次和布局的整理，让大众可以清晰直观的看到想要体现的利益和重要顺序。

两者之间的对比一下，是不是右边的也更有设计感一些。

物体之间的三角构图，一个奥特曼放在画面中，看上去有些孤单，主要是怕万一打不过怪兽。

根据三角的结构和方向性，依次左右放置更多的物体进行组合，再放置主标题，这样是不是既显得有层次又看起来内容丰富一些呢。

可惜80、90年代人最美好的童年回忆也终将逝去，某些家长不相信光，把教育不好的锅丢给了奥特曼，可奥特曼又有什么错了，他只是单纯的想保护地球。

教程步骤

刚才这两个示例都是拆分式的讲解，如何在实际设计时完整的使用？

设计一张海报时，放置物体和文字，这样的结合看起来是不是有点单调且缺设计感。

一、解决层次和空间

根据三角构图，用刚才奥特曼的方式依次将物体有序的以三角构建的方向组合罗列。

将文字做出透视感放置到物体脚下，增加质感让文字贴合到背景中。放置一些城市元素在物体身后，这几步的操作都是增加远景以提升空间感。

二、解决画面的融合和完整度

调整整个画面包括物体的质感。

将主标题放置画面时，主标题区域与下面物体还没能很好的融合在一起，我们可以将主标题以扇形或者同以三角构图的方法展开结合到画面中，这样一来，视觉的完整度就有了很大的提高。

到这很多人可能就做完了，但其实还缺点睛之笔，我们发现人物的视线是直视着画面前方，可以利用这样的引导，增加一个兵乓球在视线前方，让画面具有一定的律动感和视觉的穿透力。

我们再对比下前后的效果。

这就是今天带来的三角构图方法，视频完整版内容都在我最新的直播课程当中。

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

作者：修先森

转载请注明：学UI网》版式技巧 | 不一样的三角构图技巧

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

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

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

5分钟教你快速设计网易云banner

▽

▲往下继续看文章，内含设计实操案例干货！

作为老网抑云的铁粉，最近的2020年度报告刷红了朋友圈，不看不知道，原来这一年小编一共听了954小时3089首歌，如果24小时不间断也要40天才能听完，不知道这算不算老网抑云了，如果有听歌时间比我长的可以留言batter一下！

▲小编的2020歌单

为什么偏偏网易云成为了年轻人和大众的最爱

网易云做对了两件事情

-懂音乐

听着歌曲，看着评论，有无数个故事在治愈和慰藉那些深夜不眠的孤独患者，总能有一句话戳到你早已满目疮痍的内心，吃着火锅眼眶里含着泪水，发送了分手文字的短信，所以在网易云里听的不只是音乐，还有故事。

▲评论来自网易云

-懂设计

打开网易云，我们可以从banner的设计中感受到听取音乐的风格，甚至发行EP所要阐述的理念都能在一张小小的banner设计中有效读取，在小编认为这是与音乐融合出来的设计，而不只是为了设计和推广这首歌曲的目的。

▲图片来自网易云

1、让色彩情绪化

色彩并不只是用来配合文字和图片的工具，而是需要赋予设计灵魂，让色彩变得富有深度和画面感，小编称为色彩属性，每一首歌不管是流行、民谣、摇滚、电子、独立音乐类型，都有着背后的创作故事和曲风类型，从色彩属性最直观的将故事里的情绪化表现出来，让观者看到画面就能知道这首歌大概是什么曲风，是悲伤的还是开心的歌曲。

▲图片来自网易云

图上歌曲想要体现的是一场与自由的角逐，曲风也偏向于Hip-Ho说唱和电音的一种结合，代表着勇敢与激情的红色调铺满了整个画面，结合展露的肌肉身材，从中释放出想要自由和寻找自由的情绪性。当颜色调整为黑白配色后，原本代表着勇敢和自由的感觉突然消失了，从画面中反而获取了一种孤独和悲伤的情绪感。

▲图片来自网易云

再看图上的banner结合歌曲名，我想大部分人都能判断出这首歌是写的对另一伴的不舍和留念，雨天昏暗的深夜加大了对于观者的理解与感受，而如果整个画面的色彩调整为黑白色，只留出灯、红酒、相框的颜色后，那种失去的强烈是不是会更加的明显和深刻。

▲图片来自网易云

2、控制画面留白

留白的目的除了解决画面内容层次的一种梳理以外，还会为设计增加很多艺术美感和想象空间。

▲图片来自网易云

我们可以看到两张图的对比，从本身版式的理解上，文字居左对齐，将文字的大小、粗细通过层次分开得到流畅的阅读感，本身是没有问题，但却失去了音乐特性的本质，而留白就是改变和拆分版式编排的结构，将其原有连串起来的主题文字拆分重组，让版式内部得到一个流通。

▲图片来自网易云

3、让设计变得有趣

设计不是表格也不是冷冰冰的数字，设计是为了让人们感受人和生活的理想化，所以有趣就变成了一种特质化标签，可以提升对于大众的新鲜感。利用字体之间的变化，符合主题的元素图形或者涂描来放大画面设计的趣味性，就像烤羊肉一定要放孜然或者椒盐才算吃的够爽是一个意思。

▲图片来自网易云

实操案例步骤

▲实操案例分享

设计诠释：”破碎的光线在水彩浸润过你的脸，Tsing River，it will wash me” 这是白皮书乐队里关于《清河》歌曲里的一段歌词。从歌词中感受到人浮在水面上，斑斓的色彩光照进全身，又随着余晖渐渐消失殆尽的感受。所以在设计中利用了双色渐变将整体的画面颜色变成了涂抹色彩，扭曲和波澜的水面塑造出与众不同的设计感。

步骤1：

利用参考线找到中心区域，并放置主体图片。

步骤2：

• 【渐变隐射】工具绘制绿色与蓝色的渐变
• 【渐变隐射】工具绘制紫色与蓝色的渐变并选择图层模式中的【饱和度】
• 【色彩平衡】将整体的颜色往青色与蓝色两块区域拉伸参数

步骤3：

使用滤镜>液化工具，选择左侧工具栏的「褶皱」将重心的画面拉出层次距离，在将湖面做变形处理，得到扭曲的画面效果。

步骤4：

将文字的字间距拉松并且放置到中心区域，将英文字母拉出高度形成设计元素与文字融合成整体。

步骤5：

复制画面中的一部分进行变形处理得到一个类似纸张飘散在空间的效果，放置到文字框架的中间，与白皮书乐队得到一个很好的风格统一。

步骤6：

用类似毛笔字笔刷的字体绘制出清河的歌曲名，再分散到左右两侧，形成一个版式上的平衡，否则会显得两侧过于留白过多，当然中心区域与两侧之间形成的留白区域是作为一个空间进行想象。

注意事项

▽

设计版式中的留白和文字段的分拆和组合处理对于banner设计来说非常重要，可以很有效的体现设计感的美观。

原文地址：修先森撩设计

作者：修先森

转载请注明：学UI网》都在听网易云，却不知道banner设计这么好用

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

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

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

教程示范：

1.打草稿

首先，选择一个硬笔刷打一个草稿，花花和叶子注意一下疏密大小关系。

2.草稿基础上再打线稿

这一步依然是选择一个硬笔把藤枝画出来。

3.画花瓣

画花花的部分选择一个勾线笔刷，用打圈的方式先定好花瓣的位置，然后再去一层一层画花瓣。

我这里的话因为笔刷选择的有点大，所以画出来的线条有点粗，大家在画的时候要把笔刷刷头缩小一些。因为这里没有打草稿，所以我画的时候是边画边修线稿。

4.画叶子

叶片也是选择一个硬笔笔刷直接去把大型画出来就可以了。注意叶子形状要好看哦~

5.上色

在花花线稿图层下面新建一个图层填充颜色，然后再整体把线稿的颜色修改一下。

这个地方是我觉得花枝在整个疏密大小上还不够好看，所以在做调整修改。

6.继续上色

接着给叶子上色，选择一个透明笔刷刷一些渐变色在叶子上，花花上面也刷刷渐变色。

7.添加阴影

然后开始细化加花花的阴影，直接在有花瓣遮挡的部分添加阴影之后，选择水彩笔或者涂抹笔刷把刚刚画好的阴影涂抹开（注意不要过度涂抹哦！）

8.勾线

接着把叶子勾一下线，然后稍微细化一下。

最后整体也可以再调一调颜色。

那我们的花花就画好了，希望对大家有所帮助，我们下一期再见，如果有收获记得分享给身边画画的朋友哦！

原文地址：空青肆绘（公众号）

作者：Tcat

转载请注明：学UI网》插画教程 | PS 手绘板~日系蔷薇花

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

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

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

上图来源：Monday

不要给用户选择

有些产品还挺重视新手指引的，准备了好几个课程。

由于内容太多，所以拆分出来展示给用户，甚至让用户自己选择。

上图来源：Zendesk

例如上面的案例，虽然并没有强制用户手动选择，光是新手指引的内容列出来给用户这件事情，已经让人压力山大了。

其实用户刚进来时，只想要利用新手指引快速上手，并不想要看到关于新手指引的介绍，更无法决定选择什么新手指引。

如果真的不同人群的使用功能相差很大，那么直接根据对方情况提供相应内容即可。

这让我想起了第一次在牛肉火锅店点菜的情景，我这种牛肉小白用户根本看不懂菜单，能不能给先上一份普通牛肉？

指引气泡不需要标题

Windows 系统给界面设计带来一个奇怪的习惯，那就是不管什么面板，都必须有一行标题。

如果实在想不到用什么标题了，就把描述文字第一行拆出来做标题，甚至哪怕是用系统 logo 占位，也必须要有标题！

这让很多新手指引的气泡，也习惯性地配一个标题。

如果标题就能直达主题也还好，但如果是为了占位了凑出来的，那可就太浪费用户时间了。

不要强调跳过按钮

科技产品改变了人们的生活习性，其中之一就是让我们形成了条件反射：看到任何突然出现的弹窗和气泡，快速点击主按钮并让其消失。

后来因为移动端广告弹窗的泛滥，现在已经进化到了，看到弹窗先找 ❌ 了。

上图来源：不要这样用弹窗，真的很烦

很多新手指引的气泡都会提供跳过按钮，这样做挺好的，因为有的用户可能真赶时间。

但是如果跳过按钮做得太强，就会激发用户的条件反射，想都不想直接点跳过：

这个我尝试过了，大脑真的控制不了自己，手速已经跟膝跳反射一个级别了！

所以，这个跳过按钮一定要做小一点，尽量不要激发用户的条件反射：

只要不是单击，就得有图示

前面提到，千万不要小看条件反射这个东西，这个是生物本能。

用户最习惯的操作就是单击，如果你指一个箭头给他们，十有八九立即就上去点一下。

点一下不行，就多点几下，实在不行就双击。

如果双击还不行，就直接放弃了。

大半人根本不会看到，旁边赫然写着「点击鼠标右键」几个字。

以上就是我多年做用户测试的常见场景，总结就是：只要不是双击，就要有图示，写字根本没什么用。

如果是右键，可以把鼠标画出来：

如果是双击，可以给个动效：

如果是拖拽，除了操作对象之外，还要把目标位置高亮，并给一个指示箭头：

没错，一定做要扫一眼就能懂的程度。

遮罩别太深

有些产品，为了让更多用户走完新手指引，会给操作对象和气泡之外的部分加遮罩。

这样没什么不好，看起来还挺清晰的。

但是我发现有的新手指引遮罩太强，反而起不到学习的作用。因为用户看不清界面整体的样貌，还是记不住操作路径，引导完后全忘了。

新手指引的遮罩，一定不要按照弹窗的遮罩标准去看。

因为有弹窗时，页面的其他部分确实不用看了；但是新手指引只需强调重点，界面其它部分最好还是能看到。

总结

把上面的几点都集合在一张图，对比一下：

这些问题，如果放在产品的一般功能上，也许不算什么。就算第一次出错，下次也总能习惯。

但是新手指引不一样，这是产品给用户的第一印象，而且通常只出现一次，错过就没有第二次机会了。

这个步骤，也能直接影响到用户的转化意愿。

所以，新手指引真的要避免任何小问题，把体验的标准往上高一点。

原文地址：体验进阶（公众号）

作者：设计师ZoeYZ

转载请注明：学UI网》测试了新手指引方案，总结下失败经验

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

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

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

再酷炫一点的，甚至可以让3d动起来：

这样的效果如果做成封面，是不是老帅了！

如果你不会动效也不会3d，没关系，今天给大家介绍一个神奇，上面的3d动态效果非常多：

咔咔就是一顿选择! 还有各种属性各种调整：

调整出自己满意的效果之后，文字往上面咔咔一放：

尤其是后面的元素是动态的：

为什么要 C 端化？

其实 B 端产品 C 端化，并不是因为传统的 B 端产品没 C 端好用（不是这么比的）。

其实关键还是获客模式的转变。

传统的 B 端产品是销售驱动，销售人员通过电话、上门拜访等形式促使客户下单。

一旦成功卖出，只要后续的服务不太差，客户就没必要更换迁移。

现在 B 端市场越来越大、行业信息越来越透明、客户的判断能力越来越强，传统销售模式开始变为互联网营销。

B 端产品在网上发布信息并投放广告，吸引客户自己前来试用并购买，只需提供少量客服人员即可。

这与以往的 B 端业务模式有很大不同，所以就需要变革。

所谓「B 端产品 C 端化」，表面上是学习 C 端的用户体验，背后的真正意图是要学习人家 C 端的互联网获客能力。

怎样才是好的 C 端化？

我发现 B 端产品的 C 端化程度，和他们的互联网广告投放力度成正相关。

例如我在油管上经常受到 Monday、GoDaddy 这两款 B 端产品的轮番轰炸。

先不说好不好用（毕竟我也不是目标客户），我发现他们用起来真的很有「C 端感」，和传统的 B 端产品果真不一样。

倒不是什么“轻量化、趣味性和人文关怀”，而是因为他们在我打开网站的那一刻，就开始不断吸引我探索使用。

我拿 GitLab 和 Monday 的官网首页对比一下，也许你就能感受到了：

前者像是一板一眼的「老实人」，后者则像是对你笑眯眯的「绿茶妹」，高下立判。

“轻量化、趣味性和人文关怀”这些东西，并不足以打动用户试用和购买，顶多只能算是「低段位」手段。

只有「高段位」手段，才能让用户不自主地地被吸引，心甘情愿地掏钱。

可是要做到「高段位」真的很不容易，我今天就总结几个技巧吧～

1. 直接坦诚

遇到两个陌生人：一个打官腔又遮遮掩掩的；另一个说话友善接地气又诚实，你会更喜欢哪个？

可能大多数人跟我一样会喜欢第二个。

C 端化做得好的 B 端产品，会把自己的产品预览图直接放到首页供人观看，而不是搞一张概念图外加一堆高大上的广告词。

前面放过的那张案例，这里也可能拿来用：

GitLab 的官网画了一些很抽象的概念图，写了一些很抽象的描述，给人感觉很模糊。

Monday 的官网明确把自己的业务类型列了出来供用户选择，还把每种业务对应的图标和展示方式画了出来，感觉很明确清晰。

2. 有效互动

遇到两个健身房销售：一个上来就说一个劲地介绍服务；另一个则先确认你平时的健身习惯，再根据你的情况介绍服务，你会更愿意听谁说话？

我肯定更喜欢第二个。

C 端化做得好的 B 端产品，不是简单地展示信息，而是先了解用户，再根据用户的需求提供不同的信息甚至服务。

Zendesk 的网站，会把自己的功能列出来给用户，给的图像和描述又很抽象，毫无互动感。

而 Asana 会让用户选择自己需要的功能，并直接给出具体案例的界面展示图。

3. 降低门槛

遇到商场逛街时遇到两个陌生餐馆，一家在二楼；另一家在一楼，你会愿意尝试哪家？

肯定是第二个。

很多 C 端化做的好的 B 端产品，会把表单用弹窗的样式放在产品上面，让用户感觉只要填写完就能立即使用了

比起 Trello， Smartsheet 只是在表单展示了一下产品内部，就让用户感觉门槛低了好多。

即便 Smartsheet 的新用户后面发现背后那张图真的这是一张图而已，要填的一点不少，但这时都已经快填完了……

4. 循序渐进

两家陌生的两家餐厅都把菜单摆出来了，一家的菜单写得密密麻麻；另一家的菜单虽然菜品不多，但是推荐菜品和菜式分类很清晰，你会更愿意尝试哪家？

我相信很多人都会更愿意尝试后者。

C 端化做得好的 B 端产品，不会太在意自己的产品是不是看起来功能齐全，而是更在意用户是否能够很好的理解产品，不要造成心理负担。

上图来源：Figma这些交互细节，B端设计也值得借鉴

Sketch 和 Figma 的属性面板在功能上其实没有很大的差异，但是后者看起来却清晰简洁许多，对新用户更加友好。

总结

B 端产品 C 端化这个理念其实很好，但如果被误以为只是向 C 端学习用户体验那就可惜了。

用户体验只是手段，关键目的是在没有销售人员参与的情况下，如何从互联网获客。

这次的经验的提醒我，以后如果再看到一些很火概念，不要简单的从表面理解，而是要站在决策者的角度，多思考背后的真实意图。

原文地址：体验进阶（公众号）

作者：设计师ZoeYZ

转载请注明：学UI网》B端产品C端化，抱歉我想的太简单！

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

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

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

【视频完整版观看可抖音搜索: 野川设计】

今天我们讲讲，好的设计如如何被借鉴出来的！

▽

我们先来这两张电影海报，发现什么端倪没？

尼玛不能说是毫无关系,只能说是一模一样！

不着急，我们再来看这一组！

–

我试着把两张海报的人物扣掉对调一下

竟然还无违和感啊，这亲妈都分不出来吧？

以上几组设计抄袭的例子，很多人问这抄袭它等同于借鉴吗？我想说：肯定不等于。

但就是这么很明确对抄袭与借鉴划分的判断，在度娘上竟然搜出了一千多万条相似信息。代表着大部分设计师还是无法判断抄袭与借鉴具体的界限在哪里，于是作为专注传播设计内容的我来说，促使了做今天文章的原因。

这是A作品，这是B作品，发现相似度基本可以达到90%以上，而抄袭的意思是指窃取他人的作品当作自己的，在相同的使用方式下，完全照抄他人作品和在一定程度上改变其形式或内容的行为。

最直接的案例就是汽车行业里的揽胜极光告陆风X7抄袭，据说当年把揽胜极光的车主气的半死。

但要属抄袭界的最强骚操作，非众泰改装保时捷莫属，当年众泰最辉煌的时候还成为屌丝把妹专用车，甚至连保时捷车主都无法分辨。

这些相似度极高，且没有原创而只是在原有构架上使用相同方式来改成自己设计的都属于抄袭，甚至都可以说原封不动的套娃！

其背后原因仅仅是因为：方便！

这就像X音一个视频火了，接着你会在一周内刷到成千上万条同样的视频，你甚至误以为X音开启了重复模式，其目的也只有一个，方便出效果！

但试问如果都以这样的方式展现给大众，其带来的后果就是以后所有人都缺少原创精神，当你要做一件事情时，不是想如何去创作，做成不一样，而是说：“那么麻烦干嘛，现成的东西直接抄啊！”

这是A作品，这是B作品，以A作为原型做到举一反三，透过别人作品中的某些元素提取灵感进行深度再创作，对作品的创意做了更多延展空间，使之有了自己设计的灵魂。

虽然一切设计的起源本质都来自于模仿与再创造，但是模仿的目的是为了锻炼初期的扎实基础，为了能够让之后的设计可以举一反三。

并且不作为商用途径来源，而抄袭是指不但模仿他人作品还作为商用途径获得利益，甚至在大众不知情的眼下，有了一定行业名声，这才是为什么人人都痛恨抄袭者的原因，是因为他不尊重设计，更不尊重原创者。

这里我一定要点出拼XX，每日烧香拜佛的，谁发砍一刀的立马绝交，于是就这样差点跟我妈绝交了，儿子不孝！

如何做到既能将好的设计借鉴到，又能原创出自己的设计呢？我们可以通过以下4个方向进行借鉴学习。

1、借鉴其设计技法及风格

比如这两张海报中，对其画面上绘制的线条与纹理的刻画是原设计的特点，而技法是一种设计性的能力，可以作为创造的一种条件，以及整个带有偏国风的设计风格都是可以汲取到借鉴上。

2、视觉构图

左边这张海报通过5:5对等构图，在上半部做出了大量留白，而用三角构图的原理将视觉引导至上方焦点，也就是飞出去的猴毛，解决了上半部分大量空白的问题，并且点出了是所要表达的故事剧情。

右边的这张海报通过中心焦点的构图，将视觉牢牢抓住在中心，再通过焦点所体现出的人物形象来传达给观众。这两张海报虽然构图的方式不一样，但是都有着相同之处就是，都不会让主体视觉完整的展现出来，而是让观众通过联想的方式猜测这个形象，以此获取观众对内容或海报的好奇观感。

3、人物刻画

观察两张海报，人物的设计或者绘制是使用水墨和毛笔墨迹等方式的结合融入。

4、画面配色

使用有鲜明对比的配色，比如间隔色，互补色这样的方式会让画面具有视觉穿透力，色彩的冲突可以把故事中的情绪化带给观众。

综合以上几点，流体性的线条、墨态人物笔触、局部性的展示视觉主体、以及强烈的色彩冲突，于是我作为借鉴方式设计出了这张电影海报。

对比之前的几张海报，即从中获取到了不同的借鉴元素，同时又保留了自己设计特色。

比如这张海报在左右对称式的构图基础上，增加三角构图的原理让视觉有一种从上至下的引导阅读，再利用鲜明对比的配色使画面有了冲突感的色彩吸引。

最后说回抄袭问题，毕竟设计行业又不是宫斗剧，既要天天改稿被甲方来回折腾，还要处处防范被同行小人乱蹭，本是同根生，相煎何太急，何必呢！好好吃自己的饭他不香吗！

原文地址：修先生撩设计

作者：修先森

转载请注明：学UI网》借鉴=抄袭？好的设计是怎么借鉴出来的

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

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

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

1.清晰

大家先想想图标在APP里的主要作用是什么呢？可以作为功能和信息的提示标识，引导用户的操作。

而且我们通过看图获取信息的速度要比阅读文字获取快得多，图标作为一种通用化的视觉语言，让页面更容易被阅读。

▲ 图标代表的隐喻越准确，就越容易被用户准确识别。

2.简洁

图标本身的尺寸就特别小，如果在里面掺杂着大量没必要的装饰性元素，会让图标的阅读变得很困难。

可以通过使用尽可能简单的设计元素来创建图标，保证形状的简洁易懂。

▲ 如果在设计过程中发现图标变得很复杂，大胆尝试去做减法，删除不必要的细节，只留下最重要的部分。

3.风格统一

在Dribbble中搜索“icons”，会看到很多不同风格的图标样式，但同一个集合中的图标都会保持统一的设计风格。

▲ 不同风格的图标可以在设计中穿插使用。例如在APP底部导航中，使用线形风格的图标作为基本状态，点击选中时可以变换为面性风格，用来区分不同的状态。

4.基础网格

网格有助于我们建立一个明确的尺寸规范，常见的网格尺寸有16×16、24×24、32×32、48×48、64×64、96×96。

▲ 所有的图标都将建立在基础网格之上，图标的每个部分都应该放在像素网格内。

5.安全区域

图标的主体部分应该保持在安全区域内，这种情况适用于大多数的场景。

安全区域可以作为设计建议，而不是一项必须的规则，如果有需要，我们完全可以在安全区域外扩展图标的形状。

6.关键形状

如果想让一组图标放在一起看起来很和谐，那这些图标的视觉权重应该保持一致。

在设计前首先确定图标的基本形状，例如圆形、正方形、矩形等，能有效帮助我们确定图标的比例关系。

可以用数学面积公式来计算一下不同形状图标的权重，找出近似值。

来吧，先从圆形开始：

▲ 在这个例子中，直径d是20px，半径r是10px，圆的面积约等于314px²。

把圆的面积开个根号√，方形的边长a大约为17.7px，四舍五入到整数，那么边长a为18px，接下来算算方形的面积：

▲ 边长a为18px，方形的面积为324px²。

最后算一下矩形的面积：

▲ 边长b为20px，边长c为16px。

最后我们根据这些科学的尺寸设计一组相对和谐的图标：

7.描边宽度

除了保持相同的视觉权重，图标的描线宽度也应该保持一致，达到像素级统一，这里我建议描边使用整数值，这样更便于设计。

8.圆角

图标的和谐还在于边角的统一。尖角不用说了，保持统一的垂直90度就可以。

这里需要重要说的是圆角，不能所有的形状都使用同一个圆角度数，而是要根据图标形状的不同灵活调节圆角度数。

▲ 例如一个图标有里外两个平行的圆角时，不能里外都使用1px的圆角，这样会让图标看起来不统一。

正确的做法是让外面的圆角更大，设置为3px，里面的圆角为1px，让图标看起来更和谐。

▲ 根据对象大小，设置不同的圆角数，保证视觉统一。

9.角度

转载请注明：学UI网》如何强化图标设计的细节？我总结了12个关键点！

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

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

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