火星网校
有10个UI设计小技巧，帮你快速改善设计质量
发布时间：2024-04-02 09:41:29 浏览量：243次
静电说：这些小技巧，其实就是设计师在平时设计过程中遇到的所有小问题的集合，也是大家最常出错或者亟需改善的一些要点，把这些小技巧掌握好，逐渐积累，你的设计的细节就会越来越好。设计，不就是拼细节嘛~一起来看看吧！
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（元件），然后设置布局以调整您想要的方式。对于按钮样式，我将布局设置为从中心水平调整。利用智能布局功能可以很方便的来完成很多自适应布局效果，非常方便。
静电说：我们特别为大家准备了Sketch与Figma智能布局的公开课，大家可以在关注静Design公众号后回复“智能布局”，获取免费的公开课视频。
008.在按钮项目文字前加图标
添加表情符号和图标可以帮助您一目了然地描述元素的功能。看到放大镜图标，用户可以立即认识到这是搜索功能，从而更快速的使用它们。有时候，图标+文字的表达效果要比单纯的文字好很多。
009.为背景添加图案和渐变
图案和渐变是使不吸引人的内容更加醒目且美观的另一种好方法。在图像后面或背景上添加简单的图案和渐变会为原本平淡无奇的设计增添风格和风味。只需一个圆，一点曲线，就有很好的表现。来试试吧！
010.为背景添加图案和渐变
设计时不要忘记z轴！阴影是在设计中增加深度的一种好方法，它可以使您的生活看起来更具立体感。元素的高度可以帮助在应用程序中创建信息的层次结构。
用户认为深度代表了重要性-因此，越靠近的元素优先级越高。但是，仅仅因为阴影看起来不错，并不意味着它们始终是不错的设计选择。在设计决策时要有目的性，并在添加阴影时要记住这些元素的重要性，这一点很重要。在做出任何设计决策时，您应该始终这样做以改善体验，而不仅仅是美观。
热门课程推荐
热门资讯
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
7. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
8. 史上最全，平面设计UI设计必备的77个国内外素材、设计资源网站
ui设计社区,大神太多了。3、behance: https://www.behance.net/ ,著名设计... 对于品牌设计师来说,除了图案素材收集之外,还有一个很重要的,就是设计故...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
最新文章
