01. 在工作中遇到的状况
设计师常常会遇到这样的问题，在新产品发布之前，都会做一遍线上的UI视觉校验，在这个过程中，前端开发工程师所写的界面总会发生图片变形，文字字号不对，元素与元素之间不对齐的事情发生。
设计师给前端开发工程师标记了页面中错误的地方，但是多数前端开发工程师一听那么多头都大了，在紧张的上线日期限制下更有甚者不予理睬直接上线，用户吐槽设计不严谨，导致设计背锅。
就好比下面这个例子，为什么老板会觉得不好呢？其实是产品在用户体验的本能层次出现的不好的体验。
02. 好产品具备的特征
互联网产品可以利用产品五要素把产品划分为5个层次。全球的认知心理学家（美）诺曼在《情感化设计》这本书中讲产品本能水平的设计——本能层；行为水平的设计——行为层；反思水平的设计——反思层。
互联网产品可以用诺曼教授提出的感情感化设计的3个层次联系起来，并把这些情感分为5个纬度进行考察，就可以得到下面这张知识网络图。
从上面这张图我们可以看出用户评判一个产品好坏的标准还是来自产品的表现层、框架层、结构层中的直观体验也就本能层次和行为层次的感受，如果产品的吸引度、完成度、满意度、忠诚度、推荐度的数据很高也就证明产品很好，如果数据表现不好那可以判断产品还是有需要提升的地方。
回到第一张图片，老板觉得有问题的原因就在于产品在本能层次的不合格，那重点来了有什么设计方法可以避免本能层出现问题的情况吗？答案是毋庸置疑的，那就是“设计走查。”
03. 设计走查的意义
一名专业的B端设计师，并不是说你把设计稿做得很完美，把标注和切图完整地交给开发小哥哥之后就完事了，其实在这个阶段设计只是完成设计工作中产出效果图的工作，并没有进行最后验收的环节，如果开发还原出来的产品跟设计稿差距较大的话，设计其实也是要负很大责任的。
就好比工厂的流水线中一台电脑的生产，把电脑从工厂搬到运输车上也算是电脑生产完毕，但是必须要送到客户手里，客户签字确认，工厂才能算是电脑卖出去了，由此可见设计走查是保证用户有高质量体验的不可缺少的一个环节。
设计走查的意义在于3点：
1、确保产品的设计细节的还原度合格，从而保证产品的视觉效果和交互体验能满足用户需求。
2、是衡量设计师是否是一个合格设计师的重要指标。
3、通过细致入微的专业设计素质赢得公司团队内部设计话语权的提升。
既然设计走查这么重要为什么大家还会忽视呢？其实大家对设计走查的看法有一个误区，如果你想成为一名专业的B端设计师，一定要改变以上的错误观念，摆正一个正确的设计观念。
设计师在公司代表着视觉上的最高水准，设计稿则是设计师专业能力的体现，如果一个设计师的能力是100分，设计稿的分值90分，开发实现后的产品分值为50分，在没有进行设计校验的情况下，这时候将产品发布出去，用户或者老板只知道该公司的产品设计只有50分，而不会知道背后设计师最高的水准是100分。
慢慢地设计师就会在开发团队中做设计变得很被动，越被动就会越没有话语权，所以对一名专业的B端设计师来说，除了拥有很强大的效果图设计能力之外，还需要有保证效果图落地能力。
01. 设计走查的种类
设计走查是一种设计层面找寻问题的方法，多数应用在找寻产品问题或者是对项目开发过程中的测试环节。具体的方式归类为3种：
1）体验设计走查：是指人机交互之间的细节体验、比如非力度测试、满意度测试。可用性测试的调查这些方法都是体验走查的一部分。
2）交互设计走查：是指针对产品场景与场景之间的动态交互效果进行走查。
3）视觉设计走查：是指前端开发出来的静态页跟设计师出的效果进行视觉细节的校对和检查，确保开发出来的视觉和设计图保持一致。
02. 制作走查表的三种方法
很多人会纳闷了，公司要是没有这种走查表，那怎么进行这三种设计走查呢？这里告诉大家我的一个工作办法，总共分为3个阶段“寻找·借鉴”——“思考·定制”——“优化·完善”。
a.寻找·借鉴
当大家有一个知识的概念，如果想更深入了解这个概念就需要在网上找一些关于这个概念的信息，这个过程就是寻找。如果大家没有做过类似这种设计走查的经验，那第一时间也是去寻找，寻找设计走差的概念，甚至是做好了的走查表。
可能还会有人问，别的公司和我们公司做的行业不同，那别人公司的走差表我们公司能用吗？大家可以复用70%左右的，那剩下的30%就需要进入下一个步骤“思考·定制”阶段了。
b.思考·定制
当我们完成第一步之后，就需要对自己所处的行业或者产品有一个认知，思考我们的用户类型是什么，他们的使用场景是什么，他们最需要解决的需求是什么等等问题，然后再根据这些问题定制一系列体验、交互、设计的问题，那就成为了自己产品定制的一份设计走查表了。
c.优化·完善
任何工作为了更好地适应当前的工作，都需要持续迭代。假设，在第二阶段定制的问题有些微交互动效果的问题，但是这是前年用户比较在意的，现在很多产品都有了微交互动效了，所以现在、意义就没有那么大了，我们的设计走查表也要根据互联网的大环境不断地进行优化和完善。
03. 产品表现层——视觉校验
设计走查和设计校验并没有大的区分，但是我理解设计走查是一个比较新型的词，设计走查的范围要比设计校验的范围大一些。
有些公司会把设计走查应用于改版之前，当作找寻产品问题的一种方法，也有一些公司会把设计走查应用于项目做完开发在测试环节做测试的一种方法。比如在启动产品改版前可以通过“视觉设计基础自查表”来收集产品目前的视觉体验问题。
04. 视觉校验需要审查哪些纬度
设计校验验收表可以简单地理解为是用于审查产品表现层的形状、色彩、字体、构成、质感、动效这六点问题的记录的表格。其实这六点也是诺曼教授提出的感情感化设计中本能层次和行为层次审查的六点。
再讲如何做之前，大家还是要先了解一下验收流程中的步骤。
01. 视觉校验做什么
这里描述两点，一个是开发阶段，另一个是测试阶段的流程。
在公司的项目开发阶段：是设计师设计完效果图，进行标注（现在大家都是使用第三方标注软件比如蓝湖、摹客、Sketch Measure 等），在交付开发。
在项目测试阶段：一般都是产品经理发起一个项目进入测试阶段的通知把设计师、开发、测试、和产品经理都设置为参与者，之后由测试人员进行产品功能逻辑的测试、设计师进行视觉验收；验收完成后产品经理验收测试结果，如有问题找开发进行修改；修改完毕再找测试、设计、产品进行确认，没问题就封版了，产品经理确认发版日期，如果还有问题就再修改。
02. 视觉校验的验收标准
很多刚入行的设计新手，在校验阶段不知道检验哪些维度信息，以至于很多视觉元素都需要查看，对于c端来说界面的场景、交互比较简单还能应付。
但是对于模块功能复杂、交互场景众多的B端产品来说每个场景都要查看很耗费精力工作效率也不高。
所以我总结以下几个高频出现问题的点供大家参考，大家可以按照以下几个纬度进行视觉走查，提高自己在工作中的效率。
a.检查设计稿的可行性
人无完人，再专业的设计师，也不可能100%保证自己的设计方案就是最好的设计方案，在交付设计稿前期设计师应该自我检查自己的设计稿是否能清晰地传递信息，对于一些重要的模块是否能凸显出来，对于一些比较复杂的交互场景开发是否能够实现，市场上众多的屏幕尺寸，这样的布局方式是否是最为合理的等这些纬度进行思考做设计，保证设计方案的可行性。
这里我举一个我真实的案例，起初我接到的需求就是设计一个模块里面信息排版，如果我采用第一个方案那肯定是不行，因为信息层级区分不够明显，第二个方案把数字标签用颜色进行了区分，但是我又想如果出现文案比较多的场景，对齐方式都是左对齐，那“指标值”的信息就不可能保持左对齐，所以我又出了第四个方案，目前来看第四个方案算是最佳方案。
假设当时我就交付前端开发第一种方案，上线后出现问题，还需要调整到第四种方案，慢慢的前端开发就会质疑设计的专业能力，后续合作也会难以推进了。
b.组件调用是否正确
B端产品的业务复杂，模块交叉设计数量多，所以在设计b端产品起初都是用原子化的思维搭建一个组件库。前端是开发阶段在样式库中写一个标准的控件样式，然后在不同的页面场景中调用公共样式，原理类似于我们在 Sketch 中搭建 Symbol。我们要从两个方面看组件是否调用正确。
1）公共组件是否正确
公共组件调用正确，好处就是公共产品的整体视觉风格是一致的，比如页面的侧边导航，搜索场景、详情页场景布局是否一致，在断网或者报错的场景中出现提醒条样式是否一致。可进行交互的按钮样式、交互状态的按钮是否一致等等。
2）业务组件是否正确
在真实开发场景中，有一些前端开发虽然调用一个样式，但是在设计规范中一个样式可能会有多个尺寸，比如这个按钮，在开发阶段避免不了出现样式虽然是对的，但是尺寸调用错误的情况出现，所以要查看一下组件的样式和尺寸前端开发是否调用正确。
按照这个思路去设计最为重要的就是要检查开发人员调用的组件库的规格是否是我们设计稿的规格，以此类推检查整体的布局、按钮样式，报错样式。
这里需要描述的内容相对较多，以后有机会我可以再补充一份关于《如何搭B端建组件库》的文章，咱们详细聊一聊。
c.空间关系是否一致
空间关系可以简单地理解为模块与模块之间的“间距”关系和组件与组件之间“间距”的关系。
1）模块与模块之间——间距
所有模块（卡片）之间的间距，这里具体指的页面布局包括横向间距和纵向间距，大家可以采用4px（或者8px）的倍数进行删格布局，把删格布局的基础规范梳理出来，以这个规范当作标注来审查横向间距和纵向间距。
2）组件与组件之间——间距
另外一点就是我们在搭建组件阶段，组件与组件之间的间距关系是否一致，不要出现不对齐的情况出现。
3）为什么要用统一间距
大家了解空间关系都要看哪些纬度后，我们再来解答一下大家心中的疑惑，为什么要保持间距一致呢？主要原因有以下三点：
对于如何使用间距，我建议大家可以看一看《写给大家看的设计书》里面关于版式设计四大原则的讲解和有关格式塔原理的文章。
d.文案的显示是否清晰
在UI设计中，我们总避免不了与字体打交道，字体也经常是我们在设计中容易忽视的部分，影响字体的清晰度无非是字体、字号，字重，段间距这几个参数的设计。
1）字体
字体的实现其实是电脑渲染的一个过程，Mac电脑默认字体是苹方，Wids电脑默认字体是微软雅黑。在字体的选择里面行业里是有标准的规范的，比如ont-family：serif、sans-serif、monospace、cursive和fantasy这五种字体，前端在编写代码时候会把这种多个字体名称保存为“字体的回退机制”来定义，意思就是如果展示的设备（浏览器）检索时没有第一款字体就依次顺延使用下一款字体，这个大家只需要了解就好，在字体选择中使用频次最多的还是对数字字体的选择。
对于数字的字体设计要提前查看是否字体有版权。这里分享一个可以免费查询字体的网站：
https://fonts.safe.360.cn/?from=bd
不同的网站对字体排序的方式可能不一样，有兴趣的小伙伴可以用下面的这个方法进行查看。
2）字号/行高
对字体的字号也要进行走查，因为在开发阶段在不同的浏览器中显示的字号会有变形的情况出现。
另外考虑各个浏览器的兼容问题，PC端建议使用最好的字号是12PT，因为12PT可以保证在现在市面上的浏览器中是可以清晰显示的，如果有特殊场景需要用到12PT以下的字号，需要和开发说明并且标注出来。
3）字重
设计区分文案层级的场景使用频率最高、视觉效果最好的设计方法就是给字体加粗的字体样式了。
这里要注意的是初级设计师的眼力可能还没有达到很高的水平，尤其是最小的字体显示加粗或者不加粗的效果视觉在电脑那么大的屏幕上感官并不是很明显，所以最好可以通过从代码的层面进行核对，具体方式可以看图：
e.颜色的选择是否科学
颜色是给用户呈现面积最大的一个元素，对用户来说感官层里表现最为明显的一个元素，所以在校验中“颜色”是最容易造成落地页面与设计稿视觉差异的一个因素。
1）色差
因为大家手机屏幕的技术一般是LG屏幕（屏幕的使用时间越长色彩的还原度越低）。
虽然有的时候在查看代码时候色值设置是正确的，但是也要根据具体的场景进行分析。这里建议大家不要使用具有不透明度的色值（虽然在c端中经常会使用，有不透明度会使颜色比较透亮但是在B端产品中定位是工具，工具就要以效率在第一位，美观在第二位，所以这个场景的颜色使用尽量以清晰展示为第一准则。）
2）颜色种类
b端产品中，柱状图、折线图的样式比较多，在设计这类图标时候尽量避免多种颜色的出现，还是因为B端产品定位的原因，太多的颜色设计势必会干扰用户进行判断。
f.图标的尺寸是否合理
不管是在C端产品还是B端产品中图标都是高频出现的一个元素，图标本身的意思就是简化文字信息，通过图形去高效地传达文案信息。
对于图标的设计走查分为两点：
1）大小
我们在设计图标时候，会根据不同的场景进行图标尺寸的规范输出，但是在真实的开发环境当中，开发在使用我们提供的插件（蓝湖）进行icon下载时候，会提供3种icon的尺寸下载，前端开发在使用切图时候往往会忽视掉图标的尺寸问题，对于图标的设计走查，是否图标使用的尺寸是我们设计使用的规范，所以第一个就要看大小是否能清晰的展示。
2）SVG格式开发
因为PC电脑的屏幕尺寸、分辨率往往是高于移动端的屏幕尺寸、分辨率，图标的切片做得太小上传到屏幕上会出现模糊的展示效果，如果图标不能清晰地展示图标所呈现的图形，那就会造成用户一定的识别障碍，所以一定要保证图标不要有模糊的情况出现，尽量使用SVG格式图标切片给到开发。
设计校验工作不能说难，有耐心有细心的设计师都可以完成的，一次视觉校验需要1——2天的时间，相对来说比较耗费精力。
换个角度思考，如果我们从项目开发的前期就控制设计走查的工作量，那我们可能会减少了走查的工作量。接下来我们就聊一聊怎么减少设计校验的工作量。
01. 了解需要视觉校验的原因
前面我们一直讲的是做视觉校验需要校验的维度，我相信更多的设计师还是希望把精力放在做设计效果图阶段，毕竟知道从哪些维度做只能单纯地提高我们的校验的效率，想要在开发过程中减少对项目的设计校验的工作量 ，就需要我们清楚两个答案，一个是“在开发过程中为啥需要设计走查”和“开发不愿意修改的原因”。
a.谁负责实现样式
开篇我已经讲了设计走查的意义（原因），现在我想从开发流程再聊一聊。
在一个产品开发中，设计师下游需要对接人的人员角色统称为开发工程师。但是在这类角色中其实也是会细分为三种角色：前端工程师、后端工程师、测试工程师。因为做项目多数情况是多人协作共同完成的工作，前端工程师是实现我们效果图样式的主要人员，也是我们主要对接工作内容的对象。
b.前端工程师心里所想
前端工程师的工作内容需要一一查看设计师提供的标注，然后再一一去实现，所以难免不了心里会这样想：好麻烦，不如我自己按照感觉写。
在真实的工作中，前端开发按照规范进行项目开发这种思路是对的，但是设计师强硬地要求前端开发工程师，按照规范进行开发是过于“理想化”的一种表现。
所以我们还是要先从自身出发，循循渐进地要求前端工程师按照我们的设计规范进行开发，这就来到我们下一个话题。
02. 如何避免呢
那么接下来我们来聊一聊身为设计师我们要怎么做，才能避免进入过多的设计校验呢。
a.了解开发实现原理
如果想成为一个高端进阶的设计师，我们要给自己增加筹码，那最为直接增加筹码的方式就是——站在开发者的角度看待问题，了解开发思维。
国内前端写样式的代码基本上是HTML+CSS，Jacascript，注意这不算是编程，只是一个写样式的语言，简单地理解就是盒子模型（CSS语言）
1）盒子模型
CSS盒子模型又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如图：
举一个图文模块的例子：图（1）是设计师输出的设计稿，图（2）是开发需要的标注信息（我们实际给到开发的标注）开发需要查看的就是色块的尺寸和色块之间的间距。
2）用框架化思维做设计稿
了解完前端制作咱们效果图的原理后，我们就要用这个盒子模型的概念，像是搭建房子的原理去制作效果图，所有的组件之间都是有理有据的，那这个专业术语就叫做框架化UI。
前端开发工程师通过一个个盒子填充来将我们的组件元素放入其中，最终形成前端展示的页面。注意：标准的框架化就像前面的盒子模型是一块一块制作的，考虑到开发同学开发阶段组件的嵌套逻辑。
3）开发者模式
如果还是不太了解盒子模型具体是什么的同学可以在线上使用下图的方法自己去查看。
设计师在视觉校验时使用浏览器就可以看到开发写的盒子，了解盒子也可以方便我们走查时知道问题在哪。具体操作步骤：
b.检查自己的设计稿
在给前端开发工程师提供设计标注阶段需要提前保证自己出的效果图是有效的设计方案，符合基础的视觉需求，都能保证模块设计的可扩展性及规范化，避免定稿后再反复修改设计方案。
比如，当我们设计B端产品中的搜索条件模块时候，应提前需要考虑，在一行展示3个搜索条件、一行展示4个搜索条件、一行展示6个搜索条件等场景。
我们设计完一个场景的设计稿之后，还要考虑不同屏幕尺寸下这套效果图的布局是否能满足产品需求，如果不满足那设计稿需要调整成什么样式的设计稿。
03. 做好标注文档
除了确保设计稿的可行性之外，还要做好设计稿的标准文档。如果项目是小版本的迭代就只需要进行简单的描述即可，如果是组件库升级，那就需要给前端工程师的标注文档，尽量是详细的、准确的。
其中包括设计稿、切图（规范的切图命名、压缩好的图片文件）标注、设计规范以及交互文档（包含字体标注）。
a.描述到什么程度
那细致描述到什么程度呢？这里我简单地说几个点：
·侧边导航栏在正常模式下、缩紧模式下，导航栏的宽度是如何变化的。
·如有图片信息的上传的场景，考虑图片比例是什么，是21:9、16:9、4:3还是1:1。
·如果出现文案超长的场景，不可展示的文案信息用什么样子展示，是文案后面用省略号展示？还是鼠标滑上去有气泡弹窗的样式。
b.图标命名的规范
随着业务增多，团队内对图标的随意命名的习惯也开始凸显出弊端，这种不好的习惯会造成同一类功能的图标会出现不同样式尺寸，所以我们在搭建图标规范时候，就可以把切片的命名规范好。
在图标规范中，图标需要有着单独的后缀，这样可以让公用图标与业务图标更方便地进行溯源。SVG格式的图标可以不用写切片的尺寸，而PNG的图标我建议写上切片的尺寸。
有些公司习惯用icon进行英文的格式命名，左侧是我整理的比较高频使用的命名，文章末尾我会分享出来文字格式，供大家使用。
c.图标的上传
可以在开发前在与前端开发沟通达成共识、图标制作完成确认后，将图标上传到阿里巴巴图标库中，更方便前端调用图标大小和调整颜色。
如果开发需要自己去找到相关图标，也可以给予权限让开发从蓝湖上传图标（前提是得整理好图标到蓝湖上）。
04. 和前端开发工程师的沟通
虽然很多时候项目在发版本时间、验收标准，在团队内部都是有明确的规划和标准，但是有些问题还需要特别分析、特别对待，这里我就列举几点我在项目中几个比较重要的点。
a.进行设计宣讲
设计宣讲最大的意义就是加深大家的印象，提前给大家一个心理预估，把一些容易忽略的问题暴露出来，把关键核心点和规则讲清楚，后面可以减轻设计走查的工作量，开发也轻松一些。
1）用认知对齐，目标一致
如果团队内部四个角色成员大家的认知都是一致的——提升用户体验是我们公共目标。
如果不一致，那就要说服其中一个角色，最好是项目负责人，说明校验影响发版时间，如果大家都按照规范去完成自己工作内容，可提高效率。确保大家理解一致：设计师要和开发、测试确认视觉表现层的验收内容、确保内容大家理解一致。
2）做有效的沟通
认真是前提、尊重是法宝。在部分开发团队中，设计师也不能太过于教条地要求开发还原自己的设计稿，毕竟开发生气、请假了，那就真的没有人可以进行代码的修改了。
所以在开发之前，就要和开发沟通，目前这些界面的效果在技术层面上是否能实现，针对比较复杂的界面场景，实现出来的代价有多少，权衡利弊后再确定是否按照效果图进行开发。
针对复杂的页面需要把标注标记得更加详细，并且明确告知他们，我的删格在哪里说明，布局规范在哪里说明，在这个交涉过程中设计师就需要尊重他人工作成果，明确自己的需要做的事情，把问题描述清楚就好，不可要求开发同学100%还原设计稿、过多地干预别的开发团队的开发步骤和内容。
3）不必焦虑
前端开发工程师找我们沟通他们的疑问点时候我们要积极回应他们，并且和他们一起处理问题，比如某些复杂的页面，避免不了实现效果图不好的情况出现，这时候不要一口咬定就是开发的原因，先沟通具体原因，然后找出解决办法。
开发人员在修改代码的阶段，开发人员的效率是有限的，而且大家都是身兼多条业务线，在这种开发的场景中可以在不影响正常发版日期的阶段，把不太重要的视觉问题，放到下一个版本中再进行修改。
4）规划时间节点
在工作项目中也要注意分配自己的精力，可以把重要的界面优先处理，也可以定期跟程序员沟通，跟他一起制定解决方案和时间。如果时间允许的话，也可以慢一点修改，只要改对了就可以，毕竟完成比完美更加重要。
对于设计校验的工具有一个原则，就是提高设计师在设计走查中的工作效率。对于用什么工具并没有限制，只要顺手就好，工具的最大作用就是提升工作效率，只要你觉得能提升你工作效率，你喜欢用啥就用啥。
我把我使用的工具主要分为两类工具，第一类是发现开发问题和效果图的不符合的工具；第二类是针对问题高效记录、追踪问题的工具。
01. 四款发现问题的工具
我在工作中发现很多时候开发不愿意检查自己代码样式的一个原因就是不知道以下四种工具，在很多公司里面前端开发工程师都是多条业务线并行开发的局面，没有更多的工作时间自己做设计审查。这时候我们可以提供工具给予开发，帮助他们提高工作效率。
设计师同学也可以借助以下4款工具进行校验：
前三款都是Google Chrome浏览器的具体操作步骤可以看下面的图片，如果还有不懂的地方可以在评论区给我留言，我看到后会为大家一一解答。
至于“他山石”这款软件大家有兴趣的话可以在网上直接打名称就会出来软件信息，大家下载后自行体验吧。
02. 记录追踪问题的工具
介绍完发现问题的工具后，咱们再聊一聊记录追踪问题的工具，有的人会问了，你前面讲了视觉校验都要看哪里，又推荐了视觉校验的工具，我直接把需要修改的地方告诉前端开发工程师不就可以了吗？为什么还要知道这个记录追踪问题的工具呢？
a.进为什么要使用记录追踪问题的工具
在一些设计团队稍微成熟的公司里面由于项目的规模比较大，涉猎的模块多，参与的人员相对也多。
面对这种体量的项目如果不进行问题的记录的话，这周做项目里面的1号模块，下周做项目里面的2号模块，过了几周再对项目里面的1号模块进行修改，然后自己就会发现1号模块当初的修改问题是什么忘记了，更有甚者都忘记一起协同工作前端开发工程师的名字了。
这时“记录追踪问题的工具”就显得尤其重要了，因为这种工具的出现可以帮助我们回忆起当初具体的修改问题和修改的进度，从而降低上线安全性的风险度。
b.TO DO LIST 思维模式
to do list是一种实际走查阶段使用的一种走查模式。
在设计走查阶段，主要由设计师发现问题、记录汇总递交到前端工程师这里进行修改和跟进，主要的优势是在于协助走查可以顺利地开展，不遗漏掉任何信息。
在制作表格时候，可以关注这三点3点“1、问题需要逐条记录。2、需要截取问题图片及描述修改正确内容。3、相关对接人员的名称和处理进度。”
一个优质的项目落地是各部门协同合作的成果，视觉校验是设计师必须掌握一项技能，我们本着“认真是前提、尊重是法宝”十字真言去校验开发输出的真实页面，希望这篇1万多字的文章可以帮助到你在校验的工作上少走弯路。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在色彩方面，虽然UI是一个相对独立的设计环境，但其实一直是在跟随平面的趋势。
年初潘通发布了2021年的色彩流行趋势，灰黄色一时间成为了我们追逐的目标。
但是潘通流行色更多是表现了一种当下的社会情绪与远景追求，并不是用来指导设计的。
(图片来源：Dribbble)
在UI的色彩方面，我们都记得2020年还是流行的是高饱和色彩路线，而2021年UI色彩一下子就被冲淡了，各种低饱和度色彩的作品更加得到设计师的青睐，似乎也昭示着大家的情绪也从疫情中慢慢稳定了下来，这个世界的确需要设计来对情绪进行即时表达，在5月份Google的全新Material You设计语言中，这种低饱和色彩也被发挥的淋漓尽致。相信低饱和度色彩将在2021下半年会延续发展！
有关Material You信息可以看一下我的另一篇文章《Material You 为你而来！》
(图片来源：Google Material You)
(图片来源：Dribbble)
图形方面，亮点在3D！毫无疑问3D插画在2021上半年继续着他的强劲势头，2021上半年涌现出了大量优秀的3D风格插画，并且不止是3D卡通人物，在产品渲染和背景展现上也在酝酿新的力量。特别说明的是，设计工具的高速发展也让3D门槛不断降低，如果你只盯着C4D那就真的OUT了，像Blender Spline Stager 这样的新兴轻量级3D工具软件是需要特别关注的，也许这些新工具是真的能让你跑出与别人不一样的赛道。
(值得关注的3款新兴3D软件)
在2D图形方面，也有突破，除了传统的矩形、圆角矩形、圆形之外，UI中将会引入到更多的形状，像多边形、三角形、不规则形都会大量的出现在UI设计中，UI设计越来越开放和放得开了！
(图片来源：Google Material You)
随着去年底苹果BigSur操作系统的发布，3D图标着实火了一段时间，出现了不少3D风格图标。但是后来大家发现在图标在2D层面其实还是很有创新点的，并且也更加实用，所以我们又看到了磨砂玻璃风格图标走入了我们的视线。这种采用背板透光设计的风格图标，看起来清新自然，一经亮相就让设计师们喜欢起来了！
(图片来源：Dribbble)
但无论是3D风格还是磨砂玻璃风格图标设计，从某种意义上说，这些都是拟物化设计的一种新的回归方式，设计就是一个圈哪！
排版设计，块状与字体成为了关键词。先看几个作品，你发现了什么了吗？
(图片来源：Dribbble)
UI设计的排版不止是为了视觉好看，更多是要做信息的分割与归类，让信息阅读快速准确且优雅！从某种方面也就是我们说的用户体验。当下仍然是扁平化为主体UI设计语言的时代，阴影设计几乎已经退出了当下的主流设计，所以在信息的区分上靠的就是留白与文字，所以加粗大字体，卡片留白、形状色彩块就在UI排版设计中起到重要的作用。再辅助通过一些微交互动画，一切都是那么自然丝滑，主次分明！
(UI排版的三个趋势)
最后我们说说行业趋势方面，在2021上半年的UI设计作品中，除了常规的移动端APP UI设计之外，我们更多看到了一些针对于其他设备的UI设计，比如说电脑B端应用、车载HMI、数据可视化、交互动画等这样的新端趋势，并且这些作品的数量越来越多了，所以从行业趋势来讲，UI设计师们还是要打开更多的眼界和格局，设计的竞争不止是在水平能力上，更重要的是行业赛道的选择！关注趋势尤为重要！
(图片来源：Dribbble)
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
认知负荷是完成一项任务所需的精神努力总量。您可以将其视为用户与产品交互所需的处理能力。如果需要处理的信息超出了用户的处理能力，那么认知负荷就太高了。
造成用户认知负荷的的原因大多都是，产品在交互和视觉上过于复杂，设计的统一性不够，导致用户在使用时不断进行思考无法形成习惯
例如移动端中的空状态，目的是为了引导用户完成任务，在设计时无论是文案展示与视觉表现都应简单明了、层次分明、视觉统一
用户获得的初始信息会影响后续的判断，用户对某件事做出判断时，会不自觉的将开始看到的信息作为衡量标准。
在日常生活中锚点效应非常常见，例如平常不带帽子，偶尔带帽子出门的你，走在大街上会发现挺多人都有带帽子，因为心理活动是把带帽子这件事作为起始衡量，而你刻意的在寻找与帽子产生共鸣的事
在产品设计中最典型的就是会员体系，例如某视频平台的会员价格默认选中的那一栏会比其他的价格低，那么用户在使用时心理会默认这是会员的价格，相对应其他更高的价格只是作为衡量这个最低价格而存在
又称对比效应，指人们对两个不相上下的选项进行选择时,因为第三个新选项(诱饵)的加入,会使某个旧选项显得更有吸引力，通过对比诱导人购买商家想让他购买的商品。
有一位著名的行为经济学家他叫丹·艾瑞里教授，他曾经做过一本《经济学人》杂志的定价策略，这里不细讲感兴趣的可以搜一下。诱饵效应运用最多的是在超市场景，我们经常看到超市的货架上会有看起来很实惠的物品在，如一袋泡面可能是5元，而旁边还有3包泡面一起出售可能也就12元，然后开心的拿走了，这就是诱饵效应，那一袋5元的就是诱饵，商家的目的就是为了让你买走12元的
而在线上产品策略中运用最多的则是电商场景，如下图中的图书商品，单价610元，定价980元，三件单价488元，这里的单价和定价都是诱饵，目的是为了让用户同时购买三件商品，而用户内心是欣然接受因为更划算
在检查所有可能的结果时，我们倾向于关注一些看起来合理且熟悉的事物，从而忽略了其他结果。
13年9月twitter公司宣布IPO，当时11月份才开始交易，但是在这两个月时间里有一家名为twweeter的公司三天内涨了13倍，只是在名字上与推特公司极为相似，但实际业务毫无关系，机构就是利用用户的注意偏差让不了解实际情况的投资者只看到相关性，而另一面的不相关的结果用户自然的忽视掉
在产品设计的客服助手中，就属于注意偏差，我们习惯的认为向客服回复人工等关键字时，会自动切换人工客服，而产品则会设置一些虚拟的智能客服来节省成本，而用户在这个过程中则忽略了细节，误以为智能客服是人工客服
前苏联前苏联心理学家菜斯托夫提出特殊事物才易被人牢记。也就是说，有个性的人、与众不同设计得商品、不寻常的事情，都会让人留下更深的印象。
生活中我们很难记住某个点或某件事，但是当这件事足够突出拥有独特的个性我们便会深深印在脑海里，比如一串字符ezol4tpmb，我们最容易记住的是4，因为他是唯一的数字，在比如说让你去记忆国内某些城市的特点，如西安、开封、浙江我们想到的就是秦皇陵、包青天、西湖等著名具有特征的地点，因为这些事物比较特殊更容易被记住
在品牌设计中菜斯托夫效应运用的比较广泛，如何通过视觉的表现让用户对产品更加的印象深刻，对此就衍生出产品IP、品牌符号这种具有特殊意义的标识便于加强产品印象
任意一点移动到目标点的时间与该目标点的距离和大小有关，距离越远时间越长，目标越大时间越短，公式：
T = a + b log2(D/W+1)
在交互设计中经常用到此定律，无论是正向还是逆向此定律都能够很好的运用到交互中，如mac系统上的关闭按钮，始终在左上角并且很小，我们的鼠标在右侧，移动到左侧上角时间会随之变长，因此这一交互结构就避免了用户误操作关闭软件
再例如移动端中会把重要的按钮操作放置在屏幕右下或者居下，因为大多数人是右手使用手机，因此在使用时右手拇指距离点击区域会更近
幸存者偏差是指把一些事的不同角度的人员筛选出来，筛选出一部分人进行采访从而制造舆论，观察者只能看到事物的一面，而另一面则被忽略，也被称为以偏概全
某次春节记者采访到一些在火车上的群众，聊一些购票的过程以及买到票的心理感受，最后向公众公布出今年回家的票大家都买到了，但这个过程中却忽略了那些不在车上或者没买到票的人们，因此就以偏概全的传输单方面信息，这些被采访到的人们就是幸存者
在做产品时经常会听到用户画像这个词，用户画像就是利用幸存者偏差而把广大的用户数据通过典例呈现，当然这个幸存者的样本必须是压倒性的庞大，否则就掉入幸存者偏差的陷阱
彼此靠近或接近的对象往往会组合在一起，相近的元素可以建立关系，人们会不自然的把相近的元素看作一个整体。
在UI设计中，经常会用到邻近法则进行设计，如一些组件、卡片的建立，由不同的元素组成变成一个整体，其次邻近法则能够有效的用户层级的划分，如下图中的一些卡片、icon进行规律的排布最后组成一个整体，与上下模块的层级有效的区分
特斯勒定律又称复杂性守恒定律，他指出对于任何系统都存在一定的复杂度并且是无法避免的，问题是谁来处理它。
在任何产品设计中无论是功能还是流程都存在一定的复杂度，依据特斯勒定律有些复杂度是无法避免的，那么需要我们在设计中去解决这些问题，保证在用户的角度来看它是合理的简单的
像我们常见的话题功能，输入#自动引导出关键词供用户填写省去用户输入时间，再例如b站的一键三连，长按点赞的同时会把收藏、打赏功能一并完成；结构层面也会用到此定律如产品中的设置页面，按照不同的维度进行区分如系统维度、反馈维度、功能维度帮助用户更快的完成操作
它是由意大利经济学家帕累托提出，它指出对于许多事件，大约80%的影响来自20%的原因
在设计中我们会发现一个产品页面有几十上百个，对于用户而言能够提供价值的可能也就那么几个功能页面，这几个页面可能占总产品的20%左右，那么我们在做优化的时候则需要去考虑如果把20%做好把它的价值放大
再往细了说，例如打车软件在这个页面中能够为用户提供核心价值的区域则是地图区域和选择目的地区域，那么在做优化体验时应当着重关注此区域，而页面中剩下的区域则受上面20%的影响
社会证明是用户用来确定行为方式的便捷捷径，当他们不确定目标时，他们最有可能认为并接受他人的行为是正确的，人数越多，行动似乎越合理。
最近抖音在评论区新增了一个踩一下与点赞进行互补，但是奇怪的是我们进行踩一下时并不会展示具体数量，试想一下当点赞的数量大于踩一下的时候，我们有时就会被影响认为这条评论值得点赞
再例如购物中的评论排序，像京东把好评优先展示在前面，当好评的数量大于其他维度时就会影响用户判断，用户会把数量多的好评当作参考依据认定这个商品符合自己的需求
指用户知道的内容与他们想要或需要知道的内容之间的空间，这个空间叫做差距，差距会导致痛苦，要消除痛苦，用户需要填补知识差距。
例如在做产品设计中都会涉及到登录注册流程，那么对于有些产品则需要在登录注册阶段大量收集用户信息完成更好的推荐策略，但对于用户而言用户的认知是固有的流程，如填完手机号就收到验证码，最后完成注册进入首页，如果说中间的过程需要收集用户信息，则需要对应的解决方案来弥补用户的心理差距
即可App在收集用户信息的阶段使用了偏趣味性的一些设计表现，在用户的这个空间差里面来缓解用户的情绪，激起用户填写欲望
心智模型是对某人关于事物在现实世界中如何运作的思考过程的解释，它是对周围世界的表示，可能准确或不准确，用户认为他们对您的产品的了解会改变他们使用产品的方式。
心智模型其实就是我们对未来发展的预测，内心对要发生的事情进行预判，然后采取行动，例如我们要购物想到的就是淘宝、京东，想到吃饭可能就是美团、饿了么，这些产品就打入了用户的心智。往细了说心智模型是一个广泛的概念，它还包括行为模型、实现模型、表现模型
像我们常用的聊天软件，在聊天过程中撤回消息，就会有个重新编辑功能，这就是满足用户的心智模型，预判用户的操作例如微信、钉钉、飞书
拟态是在页面中模仿现实世界物品，通过它的外观和交互模仿现实，拟物化适合用来让用户适应新的页面和技术形态。
我们在做页面时都会涉及到图标的绘制，那么那些具有业务属性的图标则需要通过拟物的方式进行呈现，对于用户能够降低理解成本，如经典的红包、自如的金刚区等
与群体相比，用户对个人的关注不成比例，与大型抽象群体相比，人们更愿意同情一个单一的、可识别的人。
这个如果用逆向思维来想的话，类似于我们说的“对抗性人格”在大多数人都对一件事或事物看法一致时，出现一个不一样的声音，试想一下我们在刷短视频时评论区总有那么些人与大多数人的看法不太一致，这就是奇点效应
在设计中体现最多的是等级体系和勋章体系，一方面为用户的攀比心理，另一方面则是奇点效应，这类用户的想法就是为什么要一样，为什么不可以独树一帜。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
谈到设计思维可能有很多小伙伴会问，“设计思维是设计师的事，和自己没有关系”。其实不然，我认为设计思维不仅仅是设计师才具有的能力，关乎到各行各业不同身份的人，特别是管理层和老板更应该有的一种思维方式。设计思维无处不在，有人可能会问：“到底什么是设计思维，设计思维能带给我们什么好处，希望通过一篇文章让你彻底搞懂设计思维的概念和方法。
美国经济学、认知心理学家，诺贝尔经济学奖获得者赫布·西蒙 (Herbert Simon)，在他的著作《人工科学》提出了设计作为一种思维方式的概念。
1987年，哈佛大学设计学院教授罗伟(Peter Rowe)出版了《设计思维》一书，书中首次使用设计思维的概念。
1991年，戴维·凯利（DavidKelley)成立了设计和创新咨询公司IDEO，将设计思维推向商业化，成为设计思维的教育和推广先驱。全球最大的设计咨询机构之一。1992年，卡内基梅隆大学设计学院院长布坎南(Richard Buchanan)发表了一篇名为《设计思维中的难题》的文章，他指出：“设计思维可以扩展到社会生活的各个领域”。
2004年戴维·凯利（David Kelley)创办了斯坦福大学设计学院（D.School）致力于提供设计思维的教育和推广，以Design Thinking为核心教学思想，教授设计思维方法与实践。在美国，设计学院正取代商学院成为热门，该学院已成为斯坦福大学最受欢迎的学院。
“设计思维是以人为本的利用设计师的敏感性以及设计方法，在满足技术可实现性和商业可行性的前提下，来满足人的需求的设计方法。设计思维是一个可以被重复使用的解决问题的方法框架或一系列的步骤，提供解决问题的原型和一系列的工具。” ——蒂姆·布朗(Tim Brown)教授，设计思维的提出者和倡导者
首先设计思维是以用户为中心的，从用户的需求开始出发，针对产品看看用户有哪些需求，能不能通过科技手段去实现，有了科技的可行性，再看看能不能不断的实现商业变现，才能使我们的产品不断的给用户提供价值，所以设计思维指的是用户的需求，科技的可行性和商业的持续性，这三者之间的交界就是设计思维带来的创新。
设计思维其实也是一种思维方式，能帮助你打破当下的一些卡点，包括企业遇到的一些问题，设计思维能够帮助企业创新，从而在企业发展的不同阶段实现升级和转型，甚至有些企业用了设计思维的方法实现第二增长曲线。设计思维的应用领域也非常的广，比如：实物产品、服务设计、商业模式、软件应用、工作流程、企业文化等。有些儿童教育机构也用设计思维开设了创造课程引导和教育孩子，斯坦福大学还运用设计思维开设了人生设计课，就是一个人的人生也可以被设计的，我也曾读过这本人生设计课，有空给大家分享读书笔记。一些全球领导品牌公司早已意识到设计思维对于其产品开发及公司发展的重要性，采取一系列措施加大对员工在设计思维方面的培训，从苹果、美国银行、 宜家、可口可乐，星巴克、Airbnb、FOTILE方太、到GE通用电气、宝洁、IBM、三星、3M 等，都已经把设计思维纳入其经营策略，成立设计思想工作坊，并大量运用于为各种企业和社会难题提供实用和具有创造性的解决方案，下面就来谈谈设计思维具体步骤和方法。
设计思维的第一个方法是共情（Empathy）也叫同理心。大家可以想一下，我们在设计或者解决问题的时候，是不是站在需求人的角度去看待问题的，有的设计师可能只看到冰山模型最上面的一层，而冰山下用户真正需求却看不到，这就需要我们去了解用户，了解用户最好的方法就是共情。
观察是共情最基础的方法，其实就是深入洞察用户，如何从用户身上发现问题。你可以回想一下上大学时，是如何谈恋爱的，是不是一开始先默默的观察对方，看看有什么习惯和行为，喜欢什么东西，想办法去靠近和了解，找到一个突破点。比如你帮她修好了电脑，解决了她的问题，就这样自然而然交往，进入了恋爱状态。这就是观察，观察是人的本能，也是建立情感最基础的第一步。这里的观察是带有目标性的，并能解决实际问题的观察。
最近看了一个节目叫秘密大改造，就是帮助用户改造装修老旧房的节目。栏目组安排室内设计师装作成记者和用户一起住一起吃，设计师发现房子特别小，空间利用很低，观察房主人生活习惯、爱好等，通过交流了解房主的内心世界及对生活的向往等。完全和房主建立共情基础，等了解观察的差不多了，节目组就赞助房主和节目组一起去做公益的名义外出一个月。节目组故意不告诉房主在这一个月之内帮助房主改造房子，设计师就根据之前观察发现的居住问题，设计改造了房子的方案，并监督工人进行装修。等一个月房主人回来后，惊讶地发现自己的房子都认不出来了，完全超出了自己的想象，房主人太满意了，每一个细节都考虑到用户的需求，最终设计的方案用户当然比较满意了。这个栏目就是用了设计思维帮助用户解决实际问题的。我举这个例子希望帮助大家能更容易理解，大家有空可以看一下这个节目，看看设计思维是如何运用的，如果是自己该怎么用设计思维的方法去做。
共情的第二个方法就是沉浸式体验，就是把自己当成用户去体验真实用户的感受才能更好的发现问题。比如IDEO公司被委托设计一款儿童车，就让工程师坐在现有的儿童车上去沉浸式体验，推着这些成年儿童去户外或去购物。体验结束后这些工程师就总结了：儿童车太矮了，前面看到的都是脚，还有灰尘，最重要的看不到妈妈没有安全感，小孩总爱哭，于是工程师就把儿童车做成可折叠并能升高，下面可以放东西，然后再转过来面向妈妈，儿童就喜欢了。这就是通过沉浸式体验来挖掘用户需求。
共情最后一个方法是用户访谈，可以通过定性或定量访谈目标用户，可以面对面的交互式访谈，焦点小组访谈、专家访谈、也可以是问卷形式的等，网上有很多访谈模版和发放问卷的网站。上文提到的例子秘密大改造的设计师和用户一起吃一起住，在不轻易的的交流中就知道了用户的真实需求，这种访谈方式用户是最不会感觉到有压力的，也最能发现用户真实需求的，所以最好的访谈是先和用户做朋友，就是完全把用户当成自己的好朋友，试问有几个公司能做到这一点呢？
通过共情的方法我们充分理解需求，并挖掘了用户的诸多问题和需求，那么是不是所有的需求都要满足用户呢，怎么找到用户的真正痛点呢？这就需要重新定义需求，找到核心问题并进行设计。作为设计师你是否会遇到：接到需求就去设计，而反复设计的结果却不被用户满意，只是做到了被领导满意，而被陷入盲目的尝试误区中，这个时候应该回头想一想需求有没有被正确定义，有没有明确用户真正的问题。只有对设计需求进行有针对性的，有目标性的定义和理解，设计师才能找到最佳的落脚点，从而高效省时省力的完成任务。比如我们使用的Iphone，有没有发现不能自定义铃声，乔布斯肯定发现了这个问题，但为什么到现实还没有改进这个功能，但Iphone依然卖的很好。这就说明了自定义铃声不是用户的核心需求，没有谁会经常换铃声来炫耀自己的身份，这个功能有没有都不影响最终的销售成绩，原因可能是苹果希望用户不要被打扰，更尊重用户隐私。需求定义不是产品经理或老板拍脑袋定下来的，要把自己放到空杯状态，不要相当然的拍脑袋，也不要拍胸脯说自己的想法一定是正确的、要深挖用户需求，找到用户真正痛点，重新界定问题，从而确保解决产品核心问题的正确方向。
设计思维的第三步生成想法，要生成想法可以利用头脑风暴来共创更多的好主意。提到头脑风暴可能大家都听说过，其实就是聚集各式各样的人一起思维发散，俗话说 “三个臭皮匠顶个诸葛亮，三人行必有我师焉” 就是这个道理。头脑风暴的前提是正确理解用户的真实需求和明确设计需要解决的核心问题，头脑风暴尽量不要找领导参与，因为领导一句权势的话会扼杀很多好意的产生。其次要注意自身思维的局限性，我们在思考问题时经常会带有自己的经验、习惯和思维方式，从而走进了盲区，如果有人提出一个好主意，有些人就不愿意思考了，这也说明了人的惰性。所以开展头脑风暴还可以帮助我们打破传统思维方式，打破盲区和惰性，从而打开多视角全方位的开放性思维，帮助产品找到创新的方法。还有要注意的是：面对别人提出的天马行空的主意，不要评判和否定，而是说Yes,and, 在别人想法上再去想，并且鼓励越多这样的想法越好，这样就会激发出更多人愿意出来分享自己的想法。最后，设计师从发散思维中收集灵感，再由灵感转变成可实现的想法，最后把最佳想法转变成全面、具体的实施方案。
在找到最佳的解决方案之后，需要在原型上呈现出来，这就把抽象的概念与想法变成具象的模型来验证用户问题，这样能避免不合理不准确的假设。为了快速搭建原型可以采取精益创业的精神做出最小可行性产品MVP，花最少的时间和金钱来快速试错。最简单的原型可以利用随手可得的材料快速制作或现场绘制草图，达到易理解快速沟通的效果，从原型中看看有没有准确解决用户的问题，发现问题后，再去迭代和优化。
原型设计好之后可以进行小范围测试，A/B测试，灰度测试等。我们要考虑在测试中要得到什么结果或验证什么问题，然后从观察真实用户的使用习惯和喜好出发。抓住用户的本能行为，重点看用户做出了哪些操作行为，用户真实的反应和你所预期的可能是不一样的。当用户提出不一样的反馈时，不要为自己的设计而辩护，用户说的不一定对，但用户说的一定是个事实，用户觉得不对，就说明哪里可能出了问题，要虚心接受批评。如果用户说的对，就去改，收集用户的反馈后，再进行快速迭代和优化，最后发布上线，产生商业价值可持续性。
能读完这篇文章的你应该对设计思维有一定的概念了，你已经有了改变世界的能力，也许你在以后的面试中能更好的运用设计思维的方法来进行面试问答。最后简短总结一下设计思维的方法过程：“首先要学会与用户共情，帮助我们定义问题，再用头脑风暴的方式帮助我们解决问题并产生创新的方法，把创新可行的方法转变成原型，用原型进行测试和验证假设，再通过原型测试去了解用户，并重新定义问题，所以这五个步骤是不断反复和叠加的，最终打造出用户喜爱并能产生商业价值的产品”。
读了这篇文章你可能会发现，其实市面上所谓的产品思维，商业思维，突破性思维，服务设计，体验设计，其实都是来源于设计思维的核心理念和方法。设计思维帮助了很多企业，但也不要认为是万能的，它只是帮助我们解决问题的方法和工具框架，只有在项目实战中不断运用和实践，才能更好的理解和转化成自己的理论体系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
原文地址：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咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com