火星网校
掌握这些技巧，让你快速入门UI设计
发布时间：2024-03-12 12:17:33 浏览量：130次
本文指在创建在整个设计过程中应遵循的限制和规则。你可以通过多种方式组合用户界面中的元素，因此你需要设置一些规则和界限，否则你的设计会变得变得繁琐和没有说服里。您可能正在为所有可能性而苦苦挣扎，并试图在许多“正确”选项中选择最佳选项。通过设置（并遵循）一些基本规则，您还将使设计看起来也更加一致。
本文适用于初学者UI设计师。您不需要太多经验就能遵循其中的提示和技巧。
使用户界面设计保持一致的重要性
让我们从头开始。您希望您的设计看起来不错并且值得欣赏，并且需要避免混乱。为此，拥有一个用于设计工作的系统非常重要。
您的开发人员也会喜欢一个系统-他们会喜欢您的设计井井有条，而且您使他们的工作更加轻松的事实。
1. 预定大小的尺寸调整系统
是否要调整文本块大小，调整图像大小或调整一些空白都没有关系。您需要确定每个元素的大小。我敢打赌，您一直处于这种情况：您是否曾经为一个元素选择过一个尺寸，然后在五分钟后更改了它，然后又一次，也许又一次又一次？
哪个尺寸最合适？可能是您尝试过的一种，对吗？您需要避免这种无休止的浪费时间的陷阱！
首先选择基本单位：8像素网格
为了使整个设计看起来更整洁，首先设置测量值，然后确定所有尺寸是有帮助的。选择哪种价值完全取决于您，但是通常，最好的选择是遵守一些公认的规则。这些规则之一是将元素调整大小并精确移动八个像素。此规则将简化您的决策。
注意：（如果您使用较小的元素或对象，也可以使用4像素而不是8像素的增量-有时，您可以根据需要进行进一步的调整。）
· 但是为什么恰好是8个像素？
有八个为什么在这里经常像“魔术数字”一样工作的原因：
1. 八个像素是足够的最小“跳跃”。
2. 八是个很大的数字，因为它可以被四和二整除。
3. 如果您使用8，则可以轻松调整任何元素的大小而不会以半像素结尾，例如8/2 = 4、4 / 2 = 2和2/2 =1。如果从10开始，您最终会得到5像素，然后是2.5像素，然后是1.25像素。在设计屏幕时，您希望尽可能避免半个像素。通过使用整个像素，设计中的元素将与精确的像素边界对齐，因此看起来更清晰。
4. 八的倍数（8、16、24、32、40、48、56、64、72、80等）与二进制值（1、2、4、8、16、32、64、128、256 ，512等）。
· 使用8像素网格的优点是什么？
1. 作为设计师，您的决策时间很宝贵。这将使您更快，更高效。
2. 如果您与开发人员一起工作，则可以创建一个对您和您的团队有帮助的系统。如果开发人员需要进行一些快速更改，则可以按8像素的增量来调整值。这将确保一致性和顺序。
3. 使用您的网站的人在访问该网站时会感到很舒服。他们将信任该网站，并使他们更易于使用该界面。
使用网格布置所有元素
· 水平方向
你在设计时已经使用了网格。使用网格可以帮助您将所有元素准确地放置在画布上。
网格形成界面的骨架，并确定可以在何处放置元素。模板包含组成，并定义了清晰的边界，以使您的设计更加一致。现在，您可以更轻松地决定将元素放置在何处。
但是，如何创建此网格？接下来，我们将详细介绍。基本上，列的数量和大小可能是随机的，具体取决于您的需求。您的设计越详细，网格将需要越多的列。
· 垂直方向
与保持水平和声类似，在设计中保持垂直距离的一致性也很重要。像电子表格中的行一样，它们可以帮助您将文本保持均匀的间隔。
这些行应该有多大？同样，这取决于您。但是，我建议使用8像素或8的倍数（例如16）。重新定义元素或文本要对齐的边界。
正确选择字体大小
如果你查看一些精心设计的设计，将会发现字体大小的一致性。这是有原因的。
首先定义一些在整个项目中使用的关键字体大小。（例如，使用30、31和32像素是错误的。而是将这三个非常相似的尺寸合并为一个尺寸。）
· 标准字体大小带来两个好处：
1. 您的设计将更一致，更优雅。
2. 这将加快设计过程，并使您效率更高。
· 字号
定义字体大小时，请确保不要以相同的增量来增加字体大小。当您放大文本时，它应该是非线性的。这意味着您创建的文本越大，增量应该越大。
假设您有一个12像素字体大小的文本块，并且想要放大它。您尝试14像素，您会感到满意。从视觉上讲，文本需要进行更大的更改。您可能需要将其增加24像素，从而获得更大的64像素标题。
简而言之，这意味着您希望文本越大，则需要使用的增量越大。这个非常简单的原理不仅适用于文本，而且适用于按钮的大小，空格和其他所有内容。
它通常基于几何级数。这是显示字体比例的非常有用的图表：
但是，对于排版，您将要永远使用的字体大小使用一种经过验证的比例。比例尺为12、14、16、18、20、24、30、36、48、60和72像素。
准备元素的不同大小，类型和状态
在进行设计时，通常将使用无数的图标，按钮和其他组件。同样，最好为它们预先准备几种尺寸，并将选项限制为尽可能少。在设计过程中，请勿添加其他尺寸，也不要尝试调整组件的尺寸以满足您的需求。相反，只需使用您已经定义的设计，整个设计就会更加一致和整洁。设计之后会有自己的设计规范。
让我们以按钮为例。开始时，您需要定义它们的层次结构。为此，使一个按钮具有主要作用，一个按钮具有次要作用，也许另一个按钮具有次要作用。为每个按钮指定其状态（有效，无效）和颜色变体。始终尝试将元素数量减少到最重要的元素。
结论
为了使您的设计干净，一致，更具有规范化，请定义一些边界和明确的过程路径。
· 处理设计的每个元素时，请记住以下几点：
1. 一致性：查看您是否已在设计中的某个地方使用它。如果是这样，您可以简单地复制该元素。使相同的元素保持一致性。
2. 统一性：遵循水平和垂直方法，并使用一开始定义的调整元素的大小。
3. 系统化：避免复杂的设计，使得设计像素永无休止的修改。有一个规范化的设计系统。
福利：关注回复“噪点插画”，即可领取噪点插画视频教程+笔刷
热门课程推荐
热门资讯
-
怎样可以提升你的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设计培训班的学费价格以及学习内容。
最新文章
