这些UI设计技巧可以改善你的设计质量

这些小技巧，其实就是设计师在平时设计过程中遇到的所有小问题的集合，也是大家最常出错或者亟需改善的一些要点，把这些小技巧掌握好，逐渐积累，你的设计的细节就会越来越好。设计，不就是拼细节嘛~一起来看看吧！

001. 使用Sketch中的Scale（缩放）工具进行缩放

初学者经常会犯的一个错误就是，在Sketch中直接拖动来进行缩放。但是这种缩放会让你的设计稿一团糟，尤其是文本等元素。

现在，推荐大家使用Sketch中的缩放工具来完成缩放。如下图所示，这种缩放会等比例缩放画面中的所有元素，大家不用担心文字之类的元素了。

使用它很简单，只需选择要调整的项目或者组，然后单击工具栏上的“缩放”按钮，或者用快捷键CMD+K。在弹出的面板中直接调整百分百或者尺寸就可以啦。

002. 使用Craft或者sketch自动填充虚拟内容。

Invision for Sketch 的Craft插件具有大量非常酷的工作流程增强工具。除了将画板上传到Invision之外，我使用的主要工具是自动填充。

使用它很简单，我们要做的就是在文件中选择图像或者文本，然后选择要添加的内容类型即可。当然你也可以用Sketch内置的Data功能来填充，但是Craft要灵活很多，它甚至可以直接将网页上的内容添加到你的设计稿中。

003.在illustrator中生成完美的调色板

使用Illustrator的混合工具，很容易在几秒钟内创建一个调色板。混合工具为我们在取色是提供了方便。其他工具可以做到这一点，但是我认为这是最快的方法。

方法如下：

⭡ 步骤1：制作两个矩形。分别将这两个矩形设定为你所需要的两种颜色开头和结尾的颜色。

⭡步骤2：选中这两个矩形，然后执行菜单 对象>混合>混合选项。然后将间距设置为“指定的步骤”，并将数量设置为所需的颜色选项数量。

⭡ 步骤3：选择两个矩形后，转到“对象”>“混合”>“生成”，或按Option + CMD + B，这样就搞定了！

004.整理&智能对齐

整理（Tidy Up）是Sketch和Figma中我最喜欢的功能之一。如果需要在列表或网格中对齐一组项目，选择它们，然后单击角落的蓝色整理图标。在“Sketch”中，单击右上角的“整理”。然后，可以按住shift键并将元素之间的填充拖动到所需的数量。

Sketch＆Figma中的智能布局是另一个很棒的功能。如果我有一个项目网格，则可以通过单击中间的圆圈并将该项目拖动到新位置来快速交换对象的位置。就这么简单！

005.在尺寸和位置输入框使用数学公式

这个功能可以在Sketch，XD，Figma等其它设计工具中使用。如果我有一个100px宽的矩形，则可以在width字段中快速键入100/2，它将对象缩小到50px。我们同样可以使用加减乘除这四个操作。

当我需要将对象的大小加倍（* 2）或将对象缩小（/ 2）时，直接在输入框输入公式运算即可。

006.通过按数字键更改对象不透明度

当你需要更改文件图层的不透明度对象时，不透明度的快速键可以节省大量时间。要使用它，您要做的就是选择一个对象，然后按键盘上的任意数字（1–9），不透明度将立即调整。希望它的不透明度为70％？点击键盘上的7就可以了，这适用于Sketch，Figma等程序。

007.Sketch中的智能布局

智能布局使您可以调整符号的内容，而无需更改给定的填充。

要使用它，您要做的就是创建一个布局，然后单击并创建一个Symbol（元件），然后设置布局以调整您想要的方式。对于按钮样式，我将布局设置为从中心水平调整。利用智能布局功能可以很方便的来完成很多自适应布局效果，非常方便。

008.在按钮项目文字前加图标

添加表情符号和图标可以帮助您一目了然地描述元素的功能。看到放大镜图标，用户可以立即认识到这是搜索功能，从而更快速的使用它们。有时候，图标+文字的表达效果要比单纯的文字好很多。

009.为背景添加图案和渐变

图案和渐变是使不吸引人的内容更加醒目且美观的另一种好方法。在图像后面或背景上添加简单的图案和渐变会为原本平淡无奇的设计增添风格和风味。只需一个圆，一点曲线，就有很好的表现。来试试吧！

010.为背景添加图案和渐变

设计时不要忘记z轴！阴影是在设计中增加深度的一种好方法，它可以使您的生活看起来更具立体感。元素的高度可以帮助在应用程序中创建信息的层次结构。
用户认为深度代表了重要性-因此，越靠近的元素优先级越高。但是，仅仅因为阴影看起来不错，并不意味着它们始终是不错的设计选择。在设计决策时要有目的性，并在添加阴影时要记住这些元素的重要性，这一点很重要。在做出任何设计决策时，您应该始终这样做以改善体验，而不仅仅是美观。