UI圈儿刮起了一股势头猛劲的新拟物风（Neumorphism），起因是乌克兰设计师亚历山大·普卢托 （Alexander Plyuto） 在 Dribble 平台发布了一张应用了新拟物风格的UI作品，便引发了圈内的激烈讨论，更一直占据着当时的热点榜首。此风格出现后，也给流行的扁平化设计添加了新的展现形式。
普卢托的《Skeuomorph Mobile Banking》，在Dribble获得了3000多次喜欢
也有一些非常著名的品牌公司在设计上结合了新拟物风格，像三星召开的Galaxy Unpacked活动、MKBHD的介绍视频等，效果都很出彩。当趋势热潮退去，新拟物风格并没有像一部分评论者坚持的那样，“洗牌”式地接管整个设计圈。
三星 Galaxy Unpacked 活动
MKBHD在2020年的简介中使用了这种风格
复习结束回归正题，我们看到现今又出现了一种新样式—Glassmorphism，字面上由玻璃（glass）和拟物化（skeumorphism）组成，叫法颇多：玻璃拟态、玻璃拟物化设计、玻璃拟物风格，其实意思都对，它比新拟物风格更直观清晰。那么，玻璃拟物风格最具有定义性的特征是什么呢？一起来看：
-透明度，使用背景模糊的磨砂玻璃效果；
-物体漂浮，画面中有多个漂浮层级；
-鲜艳的色彩，在磨砂玻璃后更突出整体效果；
-浅色边框，应用在半透明物体上衬托质感。
玻璃拟物风格特征显著，用户也能快速确定界面的层次结构和深度。画面中清晰显著的则是最迫切想要表达的重点，非常好辨认。
在Drrible的#Glassmorphism#下，大家已经纷纷提交自己的作品了，也让辞典酱发现了一些它独有的「魅力」：
-颜色明艳、欢快，视觉上带来一定的刺激性；
Music Player Apps by Adhiari Subekti
glassmorphism redesign by Frédéric Musso
-icon虚实结合，营造出了一种「小而精」的质感；
MEDIACRAFT ICONS by Ayo Kid
Glassmorphism Iconography by Hemanth Ravi
-边缘细框，模拟玻璃，带来微妙的「高级感」。
Procreate app icon redesign by Zhenia ievgen
Coffee Shop App by Saud Ali
说到由来，那么苹果带来的影响力毋庸置疑。苹果早期的设计系统为拟物风格，从2013年推出的iOS 7开始，系统风格进行了全新尝试，背景模糊也是从那时起进入大众视线，虽然人们褒贬不一，但使用过的用户还是很买账的。
与苹果互为对手的微软也推出了这种类似于毛玻璃质感的Vista系统，但距离真正的玻璃拟物还有一段路程要走。
最新的macOS Big Sur 和 iOS 14系统都已经使用了偏向玻璃拟物化的半透明效果。
通知栏的弹出变成了一件有趣的事，你可以清楚地看到新面板下的图标是如何弹出和消失的。
微软的Fluent设计系统也很重视这种效果，他们称此特殊元素称为「亚克力」，并将其作为设计系统中不可分割的一部分。
Microsoft Fluent设计系统
实现玻璃拟物效果需要注意的是，与任何基于卡片的布局一样——物体离我们越近，它吸引的光就越多，也就意味着它会变更加透明，反之亦然。
它依靠3个基础元素来实现，分别是阴影、透明度和背景模糊。还可以使用一个或多个透明层，假设在一个颜色相对复杂的彩色背景中应用，那么至少加两个半的透明层级，要展示的文字或图标的可见性才会最大最突出。
不要设置对象的透明度，而是调整填充透明度。下图示例中，两种不透明度的数值调整，得到了完全不同的视觉感受。
背景在玻璃拟物效果中至关重要，太单调会导致完全不出效果。这可能就是Apple选择彩色背景作为MacOS Big Sur默认壁纸的原因，背景图片的色调差异大，玻璃拟物的效果越强烈。
别小看了这1px的细微边框，它模拟了玻璃的边缘，将其单独设置透明度，就能让形状从背景中脱颖而出。
半透明边框图形（左）vs 无边框图像（右）
建立一个良性的层次结构同样重要，和新拟物类似，它们都不是Material Design被广大用户熟知与接受的呈现形式，装饰味道会相对浓郁。所以设计师在应用前，最好能确保——元素和各层级在没有花哨背景加持下，一样能被用户以及视力障碍人群轻松识别理解。
下图就是一个很好的例子，卡片具有清晰的结构，即使完全去除玻璃背景。它也能正常使用。
作为人类，我们很容易对各种趋势感到厌倦，所以每隔一段时间就会迸发出新的灵感与创意。但作为设计师，我们需要探索所有可能创新产品的方式。在当下，玻璃拟物的应用的确会使产品看起来更好，对用户更具吸引力。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
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咨询、用户体验公司、软件界面设计公司
谈到设计思维可能有很多小伙伴会问，“设计思维是设计师的事，和自己没有关系”。其实不然，我认为设计思维不仅仅是设计师才具有的能力，关乎到各行各业不同身份的人，特别是管理层和老板更应该有的一种思维方式。设计思维无处不在，有人可能会问：“到底什么是设计思维，设计思维能带给我们什么好处，希望通过一篇文章让你彻底搞懂设计思维的概念和方法。
美国经济学、认知心理学家，诺贝尔经济学奖获得者赫布·西蒙 (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咨询、用户体验公司、软件界面设计公司
在团队活动时，从搭档的一个眼神我们就能预判他接下来的动作，相互的默契配合能让我们顺利地完成任务，在产品设计中的预判设计也可以得到事半功倍的效果。
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咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com