原文地址：黑马家族（公众号）
作者：黑马青年
转载请注明：学UI网》【UI设计作品总结】DJI 农业无人机 APP 页面重构
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
首先给大家介绍一位来自塞尔维亚插画家 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网》设计师看了都会收藏的色块矢量插画教程来了！【零基础】
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( 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字形来阅读的，所以遵循这一原理设计你想要核心表达的内容。
扩大点击区域，维护像按钮、单选、多选等控件的响应尺寸，如果你设计的点击区域太小会让用户点击困难，造成流失。
避免使用花俏和俗气的图标，它们会让整个设计显得非常不成熟，同时也是很难理解的。用上更简单的图标形式，会让界面更高级。（彩云注：当然越简单的图标其实想画出彩会更难，另外也需要区分不同的场景，像一些运营类的图标可能会为了活动氛围做的相对风格化一些。）
选错文案，会让人们对于任务缺乏兴趣，根据上下文使用更合适的词组。
轻敲和点击有时候很累人，可能不如使用滑动、拖拽等手势操作，这些操作会让界面更简洁并且也能顺利地完成既定任务。
在探索酒店、目的地甚至是阅读任何文章时，用户经常都需要点击卡片。为了使得探索更加吸引人注目和干脆，避免使用长文本导致的滚动。相反，可以加一个阅读更多的按钮方便想看全所有内容的用户。
”邻近的物体往往被视为是同一组内容“。有时候为了把内容区分开的更清晰，尝试用线对相关内容进行分组。（彩云注：其实有留白和不同颜色做区分也是可以的，建议根据自己的设计风格和具体内容来定）
在设计控件时，如果可以用图形可视化的地方就优先尝试把控件图形化，除了非常需要很精确的设置参数。对于价格范围这种，很容易将它可视化为滑块控件。
对一些人来说容易理解的东西，对某些人来说可能不是。因此，最好使用示例占位符来解释输入字段，这可以防止用户在填写内容时出错。
根据”系列位置效应“，心理倾向于记住列表的第一项和最后一项，而不是中间项。因此，在任何App中设计导航时，根据应用的上下文保持最左和最右的选项。例如instagram，最左边是”首页“，而最右边是”用户“。（彩云注：这是一个心理学上的理论，人们对于一系列的材料更容易记住开头的内容，也叫做首因效应或者首位效应；更容易记住末尾的内容，就叫近因效应。）
在设计任何体验时，点击次数都是非常重要的指标。统计用户需要点击多少次才能完成他的目标，额外的点击会减慢整个操作过程。简化过程，自然体验就会更好，所以尽可能的减少点击次数。（彩云注：下面的案例，增加可点击符号也可以减少用户思考的时间。）
为了使内容突出，没有必要使用多种字体类型，包括加粗、改色等等。只在最需要的位置使用增强的的文字层次结构、字体重量，同时只使用一种字体足以吸引用户对内容的注意力。
留白在设计中非常重要，太少或者没有留白会使得设计非常混乱。明智地使用留白可以明确地强调内容。
根据多尔蒂阈值(Doherty Threshold)这个理论：”系统需要在 400ms 内对使用者的操作做出响应，这样才能够让使用者保持专注，并提高生产效率。“。因此，我们可以使用动画、图像甚至文本来保持用户的注意力。（彩云注：给用户的提示可以先快速加载信息框架，让用户有事可做，而不是什么都看不到）
原文地址：彩云译设计（公众号）
作者：彩云Sky
转载请注明：学UI网》用上这24个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
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( 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.弥散渐变
最后，葱爷有必要提醒一下，色彩只是影响设计调性的其中一个因素，调性不是一个渐变色就能左右的，想要表达出正确的调性，还需要有图片素材、构图、字体、排版、设计风格等多个因素的配合，否则你的色彩用得再好也起不了多大的作用。
原文地址：葱爷（公众号）
作者：葱爷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
对于 UI 设计师来说，图标设计的能力至关重要，也是提升感官体验的重要方向。对于一些初入行业的设计师，习惯下载图标素材应付项目需求，失去了动手能力培养的机会。甚至一些多年工作经验的老司机，依然还摆脱不了使用素材的习惯，稍微复杂一点的技法就会难以驾驭。
对于初入职场的设计师来说，偶尔运用素材可以理解，但是一定要学会拆解和分析，掌握还原设计的技巧和能力。
过度依赖素材容易导致思维固化，不愿意去创造，失去创新设计的能力；也容易导致眼高手低，有想法却实现不出来，极容易萌生放弃的念头；素材拼贴形式完成的设计，在规范性和细节性上面也是大打折扣的，导致设计作品不够精细化和规范性。
我们需要通过刻意练习来提升图标设计的能力，根据一万小时定律，技法层面的提升都是通过反复磨练达到的。
图标设计从素材习惯过度到设计动手其实很容易，但是从会画到画好之间看似简单却很难掌握。摆脱素材是图标设计规范化的关键，然后再统一风格和细节规范，掌握数字化关系也是需要我们反复研究的课题。
比如以这个天气图标来举例，相信很多同学都能画出来，但是有没有把控里面的数字关系就难说了。通过以下示意图我们可以看出来，大圆和小圆之间的比例关系是 4:3，而间距的关系也与圆形的大小有着数字关系。这些数字关系可以使得图标设计更加精细化，也能引导我们去探索设计背后量化的标准和关系。
当我们绘制完图标的造型之后，运用合适的风格进行质感强化也是尤为重要的。这里我先运用其中的一个风格来完成，选择了磨砂玻璃质感的效果。为了质感和层级关系更加明显，这里单独对局部进行了光影强化和边界处理，看看以下步骤拆解图感受一下。
备注：运用的软件功能是背景模糊，Sketch 或者 Figma 等软件皆可实现。
为了进一步强化图标练习，延展了一个简单的界面场景，一个由宫格布局组合成的界面设计。为了填充所需的内容，先把之前的一些图标作品放进去占个位置。虽然都是质感一类的图标，但是由于透视、配色、风格和细节规范等不一致，整体还是存在一定的排斥感。
由于界面设计属于深色主题，之前练习的天气图标放入场景中显得过于突出，而且玻璃质感的通透性没有得到很好的发挥。于是根据界面环境对天气图标进行了重新调整，以深色关系调整了云朵部分，针对太阳的配色和尺寸比例也进行了调整，如以下效果图。
以调整后的天气图标作为风格规范，延续了其它业务场景的图标设计，在透视关系、细节规范、配色比例和光影效果等方面进行了直接延续。在光影方向上面选择了纵向区分，左边三个选择左上角打光，右边三个选择右上角打光。（当然也可以统一一个方向设置光影）
完成的整体设计视觉风格虽然比较统一，但是也有一些问题存在。图标之间缺少差异化，过度统一容易视觉疲劳，于是在统一性和差异化上面开始纠结了。
为了既保障图标设计表达的统一性，又能形成视觉感的差异化，做出了调整配色关系的决定。根据天气图标的配色关系延续出了其它色系，看看最终的效果如何。
你喜欢哪一版？
关于统一性和差异化因人而异，在朋友圈征集意见也是各有差异，那么你会喜欢哪一版呢？欢迎留言区一起互动交流。
原文地址：黑马家族（公众号）
作者：黑马青年
转载请注明：学UI网》画图标，我是认真的
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
色彩的调性会直接影响到整件设计作品的调性，调性对了才能传递出正确的情感和信息，而要想使你的配色在调性上不跑偏，首先你得了解不同的色彩和色彩组合分别具有怎样的视觉感受；还要深刻理解、分析你的品牌、产品、设计主题应该是什么样的调性。这些都可以通过阅览大量的作品、观察身边的事物总结出来。
下图一个手工家居品牌的海报，产品是一个草绿色的编织花盆，标题是：大自然的色彩。根据上面这些信息，我们大概能判断出该海报的配色应该要有自然、简约、安静、轻松的感觉。但下图的颜色整体偏暗，而且中间的红色圆形与背景色和产品对比太强，所以视觉上并没有自然、轻松的感觉。
在调整后的方案中我使用了产品的类比色组合，即绿色、青色、黄色，
而且把背景色的明度提高了，饱和度降低了。
注：拾色器面板中的HSB分别代表颜色的色相、饱和度、亮度值。
最终的颜色搭配效果更和谐、更符合产品和文案的调性。
颜色太灰通常是因为颜色的饱和度和亮度偏低，再加上颜色之间的对比不够强所导致的。比如下图是一本服装画册的目录设计，版面中的色彩取自图片中的粉红色与绿色，设计师应该想通过这组对比色表现出时尚的感觉，但是最终的配色效果有点太灰了。
对于这种问题还是比较好解决的，我们只要选中目前的颜色然后打开拾色器面板，然后把颜色的S值（饱和度）或B值（亮度）提高一点就好，在调整数值时要观察实际的颜色效果，直到得到最满意的效果为止，如果饱和度或亮度过高，会导致颜色太重或太爆。
与颜色太灰相反，还有很多设计师在配色时会出现太爆的情况，颜色太爆通常是因为颜色的饱和度和亮度过高导致的，但并不是说各颜色的饱和度和亮度值都很高，组合在一起就一定会很爆，还跟颜色的色相、颜色面积占比、颜色与图片的组合效果、是否与产品调性相符等相关。总之，整件设计作品在视觉上要比较舒适，而不是辣眼睛。
比如下图是一张食品海报，背景用了一个大红色，突出价格的圆形色块使用了一个荧光绿，这两个颜色的饱和度值和亮度值都是100，虽然这两个颜色都来自画面中的食物图片，但图片中的颜色其饱和度和亮度值都没这么高，所以这种色彩组合方式会让人感觉背景比主体还要突出，产品与背景不够融合。
另外，背景上的文字全部使用白色也会加强这种爆的感觉，似乎所有的颜色都在争着跑到最前面来，缺乏层次。
对于这种情况，我们则需要把它的饱和度适当降低，比较稳妥的做法是拾取图片中的颜色。把图片复制一层，然后选择滤镜-像素化-马赛克，选择一个合适的参数，就能得到上图的效果。把原图中的红色和绿色用图片中的红色和绿色替换，然后把标题和副标题的颜色改为暗红色，这种“爆”的感觉就立马消失了，如果背景使用一点点渐变效果，那么与图片的融合性会更好。
颜色太花通常是因为颜色太多、且颜色跨度较大，主次不明显，比如下面这则促销海报，颜色有七种，除了黄色是背景色面积最大以外，其他颜色的面积都差不多。设计师之所以用这么多色彩是想让不停的促销信息能有清晰的区隔，但实际上这些信息通过排版以后已经非常清晰了，所以没必要再通过不同颜色来进行区隔。
其实，把这些不同套餐的色块统一成一个颜色，个别关键字、词用一个颜色突出就好。另外用黄色作为背景色太过传统，而且与中国移动的调性不是很契合，所以改成了玫红色的对比色-蓝色，这也是中国移动的品牌色。
最终，效果变得更时尚了，虽然总共的颜色只有三种，但是并不单调，而且也不会显得花和乱。
现在大部分的品牌都开始年轻化，而且营销传播也都互联网化，所以我们在做设计的时候要尽量时尚一些，特别是那些主要针对年轻人的品牌或产品。
下面这则中国移动促销海报宣传的内容就是针对年轻人的4G套餐，但设计的调性并不时尚，主要是因为配色有点旧。虽然是以红蓝这组对比色作为主色，但是背景色的明度很高、饱和度很低；并且里面用到了大量的单色渐变，这些配色的方式比较柔和，缺乏时尚感。
在优化后的方案中，首先我把背景色的饱和度提高了一些，把之前的单色渐变改成了纯色，并使用了近几年比较流行的镭射渐变和荧光色，颜色的对比和视觉冲击力更强，风格更独特，整体的调性也变得更加时尚。
颜色太碎会有一种凌乱的感觉，造成这种问题的原因是把一种或几种比较跳跃的颜色，呈点状且很分散（不连续、不集中）的分布在版面的各个部分，比如下图的海报，设计师想用粉色突出所有他认为比较重要的词、句或者元素，结果造成了颜色很碎的效果。
这种啥都想突出的配色方式除了在视觉上会让画面看起来很乱以外，也会使得版面没有重点，因为重点太多了。
上图的产品是一款进口的儿童健康食品，设计调性应该偏向中高端，所以用色应该更加克制，这种很碎的色彩搭配方式就更不合适了。我们在使用色彩突出某些关键信息时，尽量突出句子而不是某个字词，或者通过色块的方式突出整段文字（字数不是特别多的情况下）。另外，如果仅仅是为了区隔信息，那么不同信息的颜色只要有比较小的差别就好了，不需要用对比非常强烈的颜色来做区隔，否则会破坏画面的统一性。
颜色脏主要是因为颜色明度和亮度太低，颜色处理不合理，以及暗色中的细节多且不清晰所造成的。下图这个banner设计，背景色很暗，且很多地方处理不合理，比如天空的颜色没有地面的颜色亮，在昏暗的天空中加镜头光晕。另外左边的人物完全压暗与背景融为一体也显得很脏，右边人物的重影除了让画面变得更脏以外，并没有其他意义。
针对这些问题我调整了两个方案，方案一是在保持原图明暗的基础上，提亮了天空、压暗了地面，并把背景的图层混合样式从正片叠底转为柔光，透明度降到70%，左边人物进行了适当的提亮，使其更清晰、更立体。去掉了不合理的素材，比如镜头光晕和右边模特的重影。中间的斜色块和标题填充了一个饱和度较高的蓝色，与深色背景形成鲜明的对比。
通过这一系列的调整，整个画面就变得干净了很多，而且保留了之前的氛围。而如果想有更明显的改变，可以放弃这种很暗的背景，比如像下图方案二这样，把整体的颜色都提亮，效果会更时尚、更干净。
色彩搭配也没有固定的标准，但有几个原则必须遵守：
❶ 要传递正确的调性；
❷ 视觉上要舒适；
❸ 能够方便内容的阅读和理解，提高传播效率；
❹ 能建立品牌区隔，形成一定的个性。
常见的色彩搭配问题还有很多，以后有机会葱爷再做补充吧。
原文地址：葱爷（公众号）
作者：葱爷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
品牌价值“藏品化”的可能性
通过对阿里云用户调研发现，数字藏品这项技术有着广泛的用户认知基础，有91%的阿里云用户对阿里云推出数字藏品感兴趣，其中81%的用户比较感兴趣及非常感兴趣，40%的用户曾经购买过数字藏品。这项结论让设计师们非常兴奋，这就意味着利用数字藏品传递阿里云品牌价值存在确实的可行性。
致敬里程碑
设计师和业务团队就数字藏品的设计方向进行了多轮沟通和论证，以阿里云飞天5K纪念碑为表现形态的思路脱颖而出。
出发点是设计师们想借此项目重塑营销品牌心智，回到“为了无法计算的价值”阿里云品牌主张，用“飞天5K纪念碑”这个开发者心中的图腾，在网站上进行数字藏品与任务平台的联动，通过创意与品牌为业务带来用户增长价值。
回溯历史，阿里云飞天5K是阿里云计算技术发展的一个里程碑，飞天5K集群上线是中国云计算最值得纪念的时刻，代表了中国云计算技术人勇敢追梦、追求极致的理想主义精神，其在用户心中的意义不亚于一次成功的“登月”，这种寄托已经成为阿里云品牌的核心资产之一。
因此选择云计算开发者的精神图腾——“飞天5K纪念碑”作为创意原型，进行数字藏品的设计，进一步拉进与用户的距离，同时能在开发者圈层中打造心智，营造传播声量，链接阿里云品牌与用户间的情感共鸣。阿里云首款数字藏品让用户充满期待，用户关注的将不仅是藏品的使用价值或增值价值，更多的是一种不可替代的情绪价值。
业务目标的自然融入
在整体方案设计上，团队将拉新的核心目标和飞天5K数字藏品做了深度结合，利用「阿里云IP品牌价值+首发造势+大促氛围+精准的种子用户裂变+所见即所得的虚拟权益」的超强组合拳，构建了完整的爆点传播链，带来规模化新增用户，完成了一次成功的破圈尝试。
通过所见即所得的虚拟权益，突破用户预期，引发了活动参与用户通过微信群、朋友圈、微博、论坛等各种平台的自传播，形成稳定裂变链条，吸引更多玩家参与。同时官方通过阿里云App、官方微博、鲸探App、鲸探小程序形成流量矩阵为活动背书，引爆活动传播。
用户因情感的唤醒，通过数字藏品活动自然的完成了对阿里云产品的了解，并在主会场产品力彰显、爆款价格吸引下，成为了阿里云新用户，帮助业务完美的完成了既定目标。活动仅仅上线6天即完成一万份数字藏品的发放，首购ROI达到58，同比上一次奥运小宝的拉新活动提升230%。
未来之路
数字藏品未来将成为阿里云传递品牌价值的重要载体，更多承载了中国云市场情感的作品将定期与用户见面，逐步形成阿里云独有的云数字藏品矩阵，赋能云业务的发展。
原文地址：阿里云设计中心（公众号）
作者： 阿里云设计中心
转载请注明：学UI网》B端营销创意｜数字藏品能否成为B端业务力爆发的新介质？
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
模块化设计，简单地说就是将产品的某些要素组合在一起，构成一个具有特定功能的子系统，将这个子系统作为通用性的模块与其他产品要素进行多种组合，构成新的系统，产生多种不同功能或相同功能、不同性能的系列产品（定义内容来自百度百科）。
模块化设计思维最早可以追溯到从工业革命时期，工业革命之后制造业开始飞速发展，制造业能够飞速发展得益于生产效率的大幅提升。在设计产品时采用“模块化设计思维”，是提升生产效率的一个很重要的手法。
产品设计中对“模块化设计思维”的应用也是制造业现代化的一个很重要的标志和特点。到了互联网时代，“模块化设计思维”也被应用在了操作系统、app的开发过程中，也大大提升了软件工程师的开发效率。
“模块化设计思维”是一个思维方式或者说是一个设计手法，这个“手法”可以应用在很多领域。
我们日常生活中所用到的稍微复杂一点的产品，如飞机、汽车、家电、手机、操作系统等等，都是在以“模块化设计思维”为基础的设计手法中设计出来的。
“模块化设计思维”应用最彻底的行业当属「汽车制造业」了。从汽车要素的组件化、汽车架构的模块化到生产平台的模块化，可谓是应用的非常彻底。
例如：丰田汽车的「M20发动机」用在了凯美瑞、C-HR、威兰达、亚洲龙、RAV4荣放、奕泽这些车型上，在这里「M20发动机」就是一个“通用性的模块”经过与其他汽车要素进行不同的设计组合，就形成了不同的车型。
丰田汽车的「TNGA架构」也是“模块化设计思维”的产物。在TNGA构架下，汽车模块会达到高度的通用性，车辆零件的通用率可达到70%-80%，其中包括底盘悬架、发动机、变速箱等零件。
采用“模块化设计思维”设计出来的“模块”有两个显著的特点就是「独立」「通用」。
在设计时需要选择可以独立的内容来进行“模块化封装”。怎么理解「独立」呢？判断模块是否可以独立，可以组成的模块是否“可以进行单独设计、开发、调试”不依赖其他要素即可运转。
通用这个特点就比较容易理解了，就是该“模块”可以与其他要素进行多种组合，形成不同类型、不同功能的产品。
采用“模块化设计思维”来进行产品设计，有什么优势呢？
高内聚低耦合，是软件工程中的概念，是判断软件设计好坏的标准。目的是使程序模块的可重复使用性、移植性增强。通常程序结构中各模块的内聚程度越高，模块间的耦合程度就越低。
内聚是从功能角度来度量模块内的联系，表示模块内部间聚集、关联的程度。那么高内聚就是指要高度的聚集和关联，元素之间的关系简单、明了，运行稳定。一个好的内聚模块应当恰好只做一件事，高内聚具备可靠性、可重用性、可读性等优点。
耦合是对模块间关联程度的度量，也就是模块之间的依赖关系。低耦合度特性的模块能减少模块间的影响，防止对某一模块修改所引起的“牵一发动全身”的水波效应，保证整个系统的正常运行。
由于模块具有通用性特点，需要用到此功能模块时无需重复设计，可以直接使用或简单微调即可，减少了“重复造轮子”现象的发生。
这样一来可以降低生产设计的时间成本和财力成本，二来时可以很大程度的提升产品设计、生产制造的效率。
通过上述内容“模块化设计思维”的好处显而易见，那么作为设计师在系统设计中应该怎么应用呢？这里容易陷入一个误区就是为了模块化而模块化，模块化设计需要在工作中去积累、抽象出可以进行模块设计的内容。
首先一定要充分的了解整个系统，系统的业务属性是什么，系统的功能有哪些（可以使用脑图梳理出来），然后站在“上帝视角”去观察整个系统，将具有「独立」「通用」特点的内容抽离出来进行“模块化”。
下面从「交互」和「UI」的角度来看两个系统中比较常见的例子
下图为「手机验证码验证」交互流程图，「手机验证码校验」流程可以用在登录、实名认证、修改密码、查看修改重要信息等功能中，是一个常见的可“模块化”的内容。
下图为近期涉及的一个系统中的「搜索页面」，系统中有很多搜索场景，例如：地址搜索、店铺搜索、品牌搜索、人员搜索等。通过对功能和使用场景的分析，将「搜索页面」进行了模块化设计。
“模块化设计思维”是一种提高工作效率的设计方法，需要各位在日常设计中尝试着换一种角度来观察系统。也要充分的理解“模块化设计思维”的定义才能够用好它，它并不是一个万能的方法，只有用在合适的地方才能体现出其价值。
作者：群青被注册 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~当你为你的项目创建有效的，可访问的，漂亮的ui时，只需要最小的调整来帮助快速改善你的设计。 努力创造。在这篇简短且易于理解的指南中，我收集了一些容易放置的内容。在实践中，这些小技巧可以毫不费力地帮助你改善你的设计，还有用户体验。
希望你喜欢！
用微妙的边界定义。
使用多重阴影或非常微妙的边界（只是一个阴影比你的实际影子）周围的某些元素可以使这些元素出现
更清晰，更清晰，帮助你避免那些看起来泥泞的阴影。
标题给一个更好的光学范围。减少长格式正文的字母间距？这是一个大大的“不”。但对于标题……我要说“是”!
你的标题很可能会比他们的标题更大，更重。相比于正文，字母之间的间距有时会出现视觉上更大，这并不是你想要的。减少字母间距，只是少量，可以使你的标题视觉平衡，更易于阅读，通常更赏心悦目。
为了一致性，确保你的图标具有相同的视觉风格。确保它们拥有相同的视觉风格;同样的重量，要么填满，要么秒变了。不要混搭。
只使用一种字体就很好。在设计时，使用单一字体是绝对没问题的，这样做实际上可以帮你产生更强、更持久的结果。忽略“总是使用两种字体”最小值的人群。使用以下组合重量，大小和颜色，你仍然可以产生完美的可接受的结果。虽然只有一个单独的字体。
留白是UI设计朋友。大胆的使用。适度的留白，即使是少量的白色物质，但要使用得当。能让你的设计透气，而且看起来更光亮。
创建长篇内容？给20 pt试试。对于长形式的内容（即微博文章，项目描述等等），试着这样做20pt(甚至更多一点)为你的文本字号。当然，这取决于所选择的字体，但大多数流行的字体在20pt时效果得很好，并带来更好的阅读体验当你的用户面对一堵文字墙的时候。18pt太过时了。
使用字体比例定义一个适合的字体大小集。使用字体比例可以帮助您轻松、实用地定义一组字体大小。顾名思义，Type Scale基于一个比例因子(比如1.25)工作的。从一个基本字体大小(18px)和乘(或除)它与缩放因子得到的字体大小要么更高(即;H₁，H₂等)，或较低层次(即;标题、按钮等)字体比例将帮助你产生看起来和谐的文本字号集。因为他们的大小根据设定的固定比例增加和减少。
选择一个基本颜色，然后使用色彩和色调增加均匀性。你猜怎么着?你不必总是用大量的颜色填充你的设计。如果项目允许，简单地使用一个有限的调色板选择一个基地颜色，然后使用你选择的颜色的色调和阴影可以增加一致性以最简单的方式来改变你的设计。
改善用户登录的体验。记住拇指规则。允许用户在任何时候跳过您的移动应用程序上线序列，并且放置跳过链接在拇指容易触及的位置。只是一个简单的调整，可以为你的用户提供更好的体验……
记住，拇指仍然是主宰！
你的影子来自其中一个光源对吧？确保你的影子总是来自一个光源。这是一个简单的错误，但它可以让你的设计看起来更抛光且统一。记住，我们不是生活在一个拥有一千个太阳的国度里。
使用更好的字体组合，效率会很很快。当你想要提高你的字体组合技巧的时候，当面对1000个字体选择，只是去寻找对应的自己集合，效率会快很多。
文字和图像与一个微妙的覆盖。根据文本可能放置在图像上方的位置，您可以选择尝试，并测试完整的图像覆盖，或更微妙的(从下到上，或从上到下)渐变叠加，以实现两者之间的简单对比。为了在你的文本之间形成良好的对比，不要太复杂的内容和图片。
太多就会导致用户体验不合格。尽量只在标题和小段落中使用中心文字。对于几乎所有其他内容，保持文本左对齐。你的用户会感谢你的你。
当选择一个多用途的文字，尽量找一个大量权重。你搜索的字体有很多选择吗？重量、风格？如果你打算在你的一些项目中使用它，请尝试并确保它是这样做的。只有一种重量或样式。不行的。如果可以的话，我建议你避开这些。当然也有例外，某些项目会要求“只有一种风格”
更精致的字体，但对于绝大多数项目，你想要的字体再多一点就能…嗯…选择。即使你决定只使用两种或三种重量或风格，希望你在设计过程的后期需要更多的空间。
想要创造更容易理解的界面，对吧？把你的文字调暗在光亮的背景上。在浅色背景下工作时，不要让你的文本太亮。
当涉及到长形式的内容时，某些常规的粗细字体仍然可以看。但太重了，在屏幕上会很僵硬。你可以很容易地解决这个问题，选择一些像深灰色（即#4F4F4F）的基调，把文字往下写，让眼睛更容易看。
总是通过icon最突出的内容。你认为这是常识，对吗？我并不觉得。通过使用色彩对比度做区分，尺寸和标签，确保尽可能突出。如果可以的话，不要总是只依赖图标。如果可以使用文本标签，那就使用它们，让用户更好地理解。
当你的字体变小时，请增加行高，以达到更好的通用性。这同样适用于当你的字体大小增加。简单地降低行高。
使用x-height来测试字体的可读性。基本上，x-height是一个小写字母' x '相对于大写字母高度 (T)的相同字体。如果你的字体有一个大的x高，通常有助于更好地阅读，特别是在使用长形式的正文文本。另一种确定字体可读性，并缩小范围的方法如果你有一些无法选择的字体，可以做这个测试，比较来自特定字体的三个字符：大写字母I，小写的L和数字1。
当设计一个在应用程序内部使用的菜单时，确保提供最多经常使用的动作（例如：上传图像，添加文件等)最突出的屏幕上。
颜色-从你的图像中选择，会给你的产品带来生命。简单地从你的产品图片中选择颜色，然后应用各种色调。你选择的颜色阴影到你的背景，文字，图标或更多，可以添加。你的设计具有丰富的视觉趣味和个性。
基于字体的x坐标，设置您的线高度。不同x高的字体需要不同的行高测量，实现文本行之间的正确分隔。即使你可能有两种字体相同的字体大小(即：18px)它们的x的高度可以有很大的不同，这在选择正确的线的种类起着很大的作用高度来实现。
突出最重要的元素。通过使用字体大小，权重，颜色和布局的组合，可以很轻松的突出UI中最重要的元素。只是很简单，但微妙的调整，让用户体验更好一点。
操作错误的时候，添加一个额外的视觉辅助。在用户刚刚采取的操作附近添加一个错误消息可以是简单的形式，但很有帮助，当他们填写任何形式的表格时额外的视觉辅助。
尝试在移动端创建慷慨的热区。当为移动设备设计时，尝试创建足够大的可点击区域，是好的。对于只包含文本的按钮和链接来说，这是很有挑战性的，尽可能使用带有标签的图标。
以下是iOS和Android的最小推荐点击区域：
44 x 44pt用于iOS
48x48dp用于Android
在短标题上尽量使用全大写。如果你想在标题上使用全大写，请确保它们在任何时候都很短。有可能，最好是一行。将它们用于较长的文本是不好的。和之前的技巧一样，在标题中添加少量的字母间距。能让他们呼吸顺畅，而且视觉效果更好。
在轻文本和图像之间，保持可接受的对比度。一定要确保浅色的文字在浅色的背景下是清晰的。简单地应用一个稍微不透明的背景在你的文本后面将保持这些元素之间的对比度很好。
看看这些很棒的字体，用在标题非常好的。发现他们真的很适合标题，设计感很强。（我没有推广费用，请放心用）
看看这些很棒的字体，用于长文本是非常好的，强烈推荐使用。（我仍然没有任何推广费）。
标题和正文。当你想实现一个好的垂直节奏，以及一个强大的视觉之间，需要对文本元素排版、间距作设计。我见过许多设计，最常见的是在文章列表中，它们已经被应用标题的上下空白相等，这样就失去了这种联系在它下面有正文。在这种情况下，我总是会给我的标题更多的顶部边距，而在底部，标题和下面的内容之间的连接是更强，有良好的垂直节奏，视觉层次保留在所有的文章之间。
对于下载指标，试着去做尽可能提供信息。对于用户，尝试使具有信息性的下载指示符对用户很友好。你可以通过使用颜色来实现这一点，用百分数来显示当前进度，一个简单的图标，让他们可以在任何地方取消下载时间。
如果你能保持标题简短，简洁……“想做就做”。
如果可以，如果合适的话，保持标题简短，时髦，切中要点。而不是“这是你的风格，你的方式”，简单地使用像这样的“你的风格。你的方式。”人们会浏览，保持这些标题简短有力有助于他们更快地消化中的信息。
记住，这种方式可能会让人感觉很突然，你需要考虑一下你所从事的项目类型，以及目标受众来决定方法是合适的，相对于更标准的格式。
正确的设计“声音”。在项目中处理文本时，选择正确的字体将影响就像你说话的声音一样。要大声，要柔和，要友好，要正式，要有趣。每一种字体都有自己独特的声音，关键在于找到合适的字体你正在做的项目的声音。当你刚接触字体时，这似乎是一项艰巨的任务，所以不要害怕从类似的项目中获得灵感，并从这些项目中汲取灵感它们有助于影响你的决定，并提高你的理解什么是合适的。
你的正文，并提高可读性处理正文文本，并试图找到合适的行长度可能有点平衡。对于一个单独的列页面，45到75个字符被普遍认为是满意的行长度，而行长度为66个字符(包括字母和空格)被发现是最佳位置。当然，字体大小和行高在决定可读性时也起着重要作用，但是对于行长，保持在45到75个字符之间，就会更好了。
偶尔使用纯装饰的幽灵文字也可以，但要保留阅读的问题。屏幕上的大部分文本内容应该坚持可用性最佳的做法是没有问题的。但有时，希望添加纯出于装饰目的的文本，我们不希望所有的设计都落入乏味。如果没有元素会以任何方式影响用户体验，那么出于装饰的原因，插入奇怪的元素是可以的。
使用户界面中的元素彼此区分。按钮、通知，ui中两个独立但重要的元素。如果可以的话，总是试着确保你的用户能够快速地将它们区分开来，轻松扫描您的网站或应用程序。按钮，在大多数情况下，将优先，所以确保他们是最突出的。项目在屏幕上，并很容易区分其他元素。
只是一些细微的阴影，你所需要的。我们都喜欢阴影，对吧？它们可以作为微妙又很强大的视觉线索，在您的设计中使用要适度。现实世界中的阴影，在大多数情况下几乎是不可察觉的，而且所以你应该在ui中模仿这种行为。放下沉重和黑暗的阴影并降低不透明度，以实现一些的东西更微妙和栩栩如生。
使用全部大写？选择适合的字体，能够达到光学清晰度。在你的设计中适度使用“全部大写”是很好的。选择一个合适的字体与行高和较重的字重，使用户的光学清晰度。
让面包屑脱颖而出，易于为用户解释。面包屑无处不在，经常用于内容丰富的网站，通过最小的调整，你可以确保用户能够快速定位他们在一个网站上的位置以及他们可能需要去的其他地方。如果用户已经通过使用跳转到网站的某个深度，这一点尤其有用。
使用高度饱和的颜色?试一试用浅色调来缓和气氛或者阴凉处。高度饱和的颜色(明亮的蓝色、红色、绿色等)可以让网站看起来很棒，但是当过度使用时，它们会使使用者的眼睛疲劳，主要是在使用的时候的文字内容。尽可能使用时要适度，并尽量与柔和的颜色搭配颜色或色调变化)的饱和颜色，以避免可怕的眼睛疲劳。使用这种方法还可以直接注意到饱和的色彩和使最重要的内容前面和中心，与更柔和的颜色采取较少突出角色，让用户的眼睛休息一下。记住，在选择颜色时，可读性和可访问性应该是最优先的。
在ui中使用已建立的图标，为了避免给用户造成混淆。在你的设计中添加图标时，试着选择一个有代表性的已建立的图标。不要选择一个能传达正确含义和功能的图标否则会引起困惑，成为用户的认知障碍。不要在这些图标上过于叛逆。
在众多经过尝试和测试的设计原则中，这里有一个是帮助您为用户生成更清晰的ui的关键。接近只是确保相关设计元素放置在一起的过程，表明彼此之间的关系，这有助于加快用户的认知。
4pt基线网格+ 8pt网格=单一网格。当使用类型时，8点网格旁边使用4点基线
可以为你的设计带来更和谐的垂直节奏。您需要对齐您的类型到基线网格4，使用的行高值为4的倍数（16、20、24、28等）
为什么4？我发现在过去使用特定的文本大小时，按8的倍数缩放是不太合适。
减少标题上的行高是很好的。与长形式的主体文本不同，它需要足够的行高，以便折行易读。标题的推荐行高通常约为1至1.3倍。
选颜色有困难计划吗？在颜色上进行类比论。类似的颜色，也被称为相邻或相邻的色调，是其中之一最和谐的配色方案，可以大大帮助你，如果你有很难挑选出搭配得很好的颜色。由三原色、二原色和三原色组成的一组相邻的色调帮助您创建一个简单的，颜色方案快速。当你需要快速将颜色调和到混合中时，可以使用类似的方法。
在你的设计中尽量提高信噪比。你可以在你的设计中通过最大化信号来实现清晰和可用性最小化噪声，从而产生高信噪比。您可以通过确保提供相关信息(信号)来实现这一点有效，不相关的信息(噪声)被减少或完全删除。事情更加清晰。提高你的信噪比。
我想用更非正式的方式说话。语气吗？尝试所有小写字母。使用较重的字体和大写会显得有点正式和夸张。试着选择全小写和较轻的字体。在处理特定项目时，使用类似全小写的拷贝可以呈现更非正式的、可接触的信息。记住要在图像之间使用某种颜色叠加与文字达到较强的对比。
当使用类型时，元素不需要尖叫“看看我!”一直如此但他们确实需要一个平衡的等级制度。只需通过重量、大小和颜色进行细微的调整就可以实现这一点。这样做可以让用户扫描并找到必要的元素，避免在过程中产生任何混淆。
养肥了，字体大小为最佳易读性。当设置暗色文字与浅色背景，选择一个更轻的粗细。但是…反过来说:浅色文字>深色背景。最好是看一下增加一点字体重量，特别是对于长表单副本。以最佳的易读性为目标，避免让用户的眼睛疲劳。
试着为你要呈现的内容选择合适的字体。用户是精明的，有一种直观的感觉，当内容与他们交谈当它不是。正确的字体选择是至关重要的，使您的内容讲给他们直率和情感的水平。
你是否使用全大写的短行文本？嗯…这是一个好主意，增加这些字母之间的间距，以达到更好的用户的易读性。这样做使单词更容易阅读和处理，因为字母更多彼此区分。字母之间的间距只要稍微增加一点就可以。
打开这些错误消息，您的表格有帮助。在使用表单时，请尝试并确保错误消息得到解释。出了什么问题，如何补救。总是让用户了解情况，即使是像常规一样常见的事情的形式。让这些错误消息有用，不要让您的用户蒙昧。
试着向用户保证在加载过程中会发生一些的事情你的应用程序。显示应用程序元素的框架可以帮助你快速沟通布局和确保用户正在发生一些事情。系统状态可见性是一个重要的原则要遵循，并允许用户知道发生了什么。不要让用户从一开始玩猜谜游戏。
告诉用户将要做什么如果他们应用了某个动作。在应用特定的操作之前，总是尝试并详细地告知用户可以有结果。这尤其适用于具有不可逆转后果的行为，如删除某些东西。让用户知道将要发生什么，并在此之前要求他们进行确认。他们就会按下那个标有“删除”的红色大按钮。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
作者：卡洛设计铺 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com