在设计时，您是否为各种可能性而苦恼，例如将文本变大或变小，或者增加（或减少）元素周围的空间，颜色应该更深还是更浅？在这篇文章中，我将分享一些关于如何解决这些常见问题并使您的设计更加一致和用户友好的技巧。本文的主要内容是谈谈在整个设计过程中要遵循的约束和规则。在一个界面中组合元素的方式有无数种，因此需要设置一些规则和界限，否则设计工作流程很难顺利进行。您可能正在与所有可能性搏斗，试图从众多“正确”选项中选择最好的一个。通过设置（和遵循）一些基本规则，最终的设计也可以更加一致。这篇文章是为初级设计师准备的，没有太多经验也能很快掌握这些技巧。△系统性思考很重要界面设计一致性的重要性让我们从头说起。您希望您的设计看起来不错，值得信赖，并且不惜一切代价避免混淆。为了实现这一点，拥有完整的系统思维非常重要。开发也希望设计师使用系统思维，他们喜欢有条理的设计，这样他们的工作会更轻松。给定尺寸的尺寸设计系统无论是调整文字尺寸、图片尺寸，还是调整留白都无所谓，只要确定每个元素的尺寸即可。我敢打赌你一定遇到过这样的情况：你有一次给一个元素选了一个size，五分钟后改了，没多久又改了，可能改了无数次才确定。哪个尺码最合适？它可能是您尝试过的尺寸之一，但真的应该避免这种无休止的浪费时间的陷阱！首先选择基本单位：8像素网格基本单位，然后再确定所有尺寸。具体选择多少完全取决于您，但通常最好的选择是坚持一些久经考验的真实规则。规则之一是以8像素的倍数调整和移动元素。这条规则使决策制定更有效率。px和dp：“dp”一词也用于界面设计和原型制作。“dp”是“密度独立像素”的缩写。》这个单位是以160dpi的屏幕为基准的，在160dpi的屏幕上1dp等于1像素，在320dpi的屏幕上等于2像素，以此类推。数学换算公式为'px=dp*(dpi/160)'。注意：如果您正在处理较小的元素或对象，您也可以使用4像素的增量而不是8像素的增量-有时您可以根据需要进行进一步调整。但为什么是8个像素？以下是8经常表现得像一个“神奇数字”的几个原因：8像素是足够的最小“增量”。8是一个很好的数字，因为它可以被4和2整除。如果使用8，则可以轻松调整任何没有半像素的元素的大小，例如8/2=4、4/2=2和2/2=1。在另一方面，如果您从10开始，您将获得5像素，然后是2.5像素，然后是1.25像素。在设计界面时，尽可能避免使用半像素。通过使用全像素，您设计中的元素将捕捉到精确的像素边界，最终看起来更清晰。8的倍数（8、16、24、32、40、48、56、64、72、80等）和二进制值（1、2、4、8、16、32、64、128、256,512,等等)交织在一起。（蔡云注：对程序很友好）最后，这些数字也好记。使用8像素网格有什么优点？作为设计师，决策时间非常宝贵。这将使您更快、更有效率。如果与开发对接，这可以创建一个系统来帮助团队提高效率。如果开发需要一些快速修改，他可以以8像素为增量调整值。这确保了一致性和规律性。当人们访问你设计的网站时，会感到很舒服，增强信任感和用户体验（彩云注：秩序感可以让用户感到信任和舒适）。△使用8px网格的有效方法△使用8px网格的结果使用网格布局所有元素1.水平网格相信你在设计网站时使用过网格，使用网格可以帮助你准确对齐所有元素放置在界面上。网格构成了界面的骨架，并决定了可以放置元素的位置。模板定义了明确的界限，使设计更加一致。使用网格系统可以更轻松地决定元素的放置位置。随着您变得更有经验，调整界面将变得更加得心应手。但是如何创建这个网格呢？我们将在下面讨论具体细节。基本上，列的数量和大小可以是随机的，具体取决于您的需要。设计越详细，网格需要的列就越多。如果您仍然有疑问，您应该向有经验的同事寻求帮助。△Horizo??ntalGrid2.VerticalGrids与水平网格类似，在设计中保持垂直距离一致也很重要，就像电子表格中的行一样，它们有助于保持文本间距均匀。行应该有多大？同样，这取决于您的需求。但是，我建议使用8个像素或8的倍数（例如16）来重新定义元素或文本对齐的边界。△垂直网格选择正确的字体大小如果你仔细观察一些设计良好的字体，你会发现字体大小的一致性。有一个原因。注意：请记住，您的设计中只需要两种或三种字体大小。但是，如何选择正确的字体并使它们协同工作超出了本教程的范围。首先定义一些在整个项目中使用的关键字体大小。（例如，使用30、31和32像素会很愚蠢。相反，应该将这三种非常相似的尺寸合并为一个。）标准字体大小有两个好处：设计会更加一致和优雅。它将加快设计过程并使您更有效率。字体大小定义字体大小时，确保不要以相同的增量增加大小。放大文本时，它应该是非线性的。这意味着创建的文本越大，增量应该越大。△有字体大小系统假设有一段文字，字体大小是12像素，你想把它放大，那就试试14像素，你就满意了。但是想象一下你有一个大标题（40px）并且你想把它变大。你能把尺寸从40px增加到42px吗？当然不是。在视觉上，文本需要更大的改变。设计时可能需要将其增加24像素，从而产生更大的64像素标题。简而言之，这意味着文本越大，您需要使用的增量就越大。这个非常简单的原则不仅适用于文本，还适用于按钮大小、空格和其他一切。（彩注：两个元素之间的大小差异一定要明显，如果距离很近，会给人一种不对劲的感觉。）通常是按等比级数排列。这是一个非常有用的显示字体比例的图表：△几何级数但是，对于排版，一种行之有效的方法是使用一组经过验证的字体大小。比例为12、14、16、18、20、24、30、36、48、60和72像素。△经验证的字号比线高所有字号定义好后，就要注意线高了。对于行高，再次使用4个像素增量。例如，对于16px的文本，我们将行高设置为24px。如果您希望文本更生动，请将行高增加4像素至28。在您的项目中定义颜色颜色的组合如此之多，如果您不预先定义颜色的深浅，就会浪费太多时间。你不能将自己局限于特定的颜色，如黑色、白色、蓝色。对于每种颜色，都需要其他色调，重要的是提前设置它们，以便颜色在整个设计项目中保持一致。每种颜色有5到10种色调，我喜欢为每种颜色定义9种色调。让我们仔细看看颜色的深浅。为什么每种颜色有9种色调？第一个优势是颜色命名。无论您使用的是设计软件还是CSS代码，您都会从本技巧中受益。每个色号都会被分配一个数字，比如100、200、300、400、500、600、700、800、900。（为什么是百？来源于css中自重的定义，文章链接：https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight）。其次，9是定义颜色的方便数字。准备这些色调的最佳方法是准备一排9个正方形，并用颜色填充这些正方形。中间的是基色，然后定义最亮的色调（最左边）和最暗的色调（最右边）。下一步是设置色调之间的颜色。△每种颜色九种色调准备不同尺寸、类型和状态的元素在设计时，通常会使用无数的图标、按钮和其他组件。同样，最好提前准备好一些尺寸，并将您的选择限制在尽可能少的范围内。在设计过程中，不要添加额外的尺寸或尝试调整组件的大小以满足需要。相反，只使用已经定义的那些，整体设计会更加一致和干净。我们以一个按钮为例。首先，您需要定义它们的层次结构。为此，创建一个具有主要操作的按钮、一个具有辅助操作的按钮或另一个具有辅助操作的按钮。对于每个按钮，指定其状态（活动、非活动）和颜色变体。总之，尽量减少元素个数到最重要的元素（彩云注：目的是尽量减少选择时间，保证一致性，提高设计效率和质量）。△一个按钮样式的例子定义其他元素的属性UI设计师经常在他们的设计中使用阴影。然而，对于没有经验的设计师来说，阴影有时会是一个难题。投射阴影时，必须设置阴影沿x轴和y轴的距离，以及模糊半径、颜色和透明度。预测可能需要很多时间来调整，这就是为什么他们在深入设计之前就做好了准备。提前准备投影组件（使用与颜色相同的方法），然后在整个设计过程中应用它们。此外，请注意确定您将使用的元素的所有其他属性，例如圆角半径、透明度和颜色渐变。△阴影样式空间的例子适当调整空间很重要。无论您是从外部（空白）还是从内部（填充）调整元素，您都应该再次依赖神奇数字8，将偏移量增加8个像素（小元素为4个像素）。与字体大小一样，间距越大，增量就必须越大（同样，最好预先定义这些增量）。△空白总结为了使设计清晰一致，在整个过程中定义一些边界和清晰的过程。在设计每个元素时，请记住以下几点：看看它是否已经在设计中使用。如果是，请更多地重复使用它。遵循水平和垂直节奏并使用开头定义的步骤调整元素大小。避免复杂的决策和无休止的像素大战需要有一个适当的系统。不要两次创建相同的元素。如果设计有条理，你的工作就会更好、更有效率，设计就能迭代得更快，与开发的衔接也会更顺畅。开发会根据你做的设计风格预先设置变量，所以定义清楚。最终结果是一个干净的设计，开发人员可以编写更好、更可持续的代码。每个人都会享受这个过程。
