我们做过不少设计，往往会自我反问，这样设计是为什么？下面这篇文章试图理解为什么遵循一些常见的设计实践，帮助我们更好地理解和应用这些原则到我们自己的设计中。

❓ 确保 x 和 y 方向的填充一致

为什么？

• x 和 y 方向的一致填充有助于在设计中实现视觉和谐和秩序感。它创建了一个平衡的布局，使用户更容易在脑海中扫描和掌握，从而增强了用户体验。
• 这种做法植根于设计心理学，特别是格式塔原则。

格式塔原则是关于我们的大脑更喜欢如何将事物视为一个整体，而不仅仅是单独的部分。因此，即使有许多块或元素，我们的大脑也倾向于将它们组合在一起作为一个统一的东西。

有意使用不一致填充的情况：

• 光学间距
  它或多或少是间距系统的 “艺术” 方面。
  这里使用不一致的填充来创建视觉层次结构，从而在视觉上平衡和和谐的布局，同时考虑到角色的形状及其交互。

• 不对称焦点
  为了引起对特定内容或部分的注意，我们可能会在 x 和 y 方向上应用不同的内边距值。此技术可以引导用户的注意力并突出显示界面中的关键信息。

结论

• 在大多数情况下，在 x 和 y 方向上保持填充一致。对于需要对图像或矢量进行光学对齐的情况，应使用不一致的填充。
• 如果你想使用不一致的填充来聚焦任何元素，请确保它不会干扰设计的整体流程。

❓ 保持 8 或 4 的倍数的填充和间隙

为什么？

• 大多数现代显示器和显示器分辨率都可以被 4 或 8 整除。因此，遵循这会导致更有凝聚力和抛光的外观。
• Google 和 Apple 都推荐 8pt 系统。如果 Apple 在其设计系统（人机界面）中使用 8pt 网格，而 Google 也在他们的设计系统（Material Design）中使用 8pt 网格，那么对于我们作为产品设计师来说，它非常重要。
• 这也使得扩展设计变得更加容易。无论是增加元素的大小还是整个布局的大小，拥有一个可被 8 或 4 整除的基本网格都可以实现无缝缩放，而不会失去设计的和谐性。
• 使用 8 或 4 的倍数有助于实现更具视觉吸引力、更有条理和更一致的设计，使用户更容易导航和使用内容。

有必要一直遵循这一点吗？有哪些例子？

不，并不总是需要遵循这种做法。主要目标是平衡结构和创造力，以实现有效且用户友好的设计。

示例：
1. 艺术或创意作品集：个人或作品集网站可能会故意脱离网格以展示创造力和个性。
2. 品牌网站：希望建立独特且令人难忘的在线形象的品牌可能会使用不严格遵守传统网格的非常规布局。

结论

建议使用 8pt 或 4pt（以获得更精细的）网格系统。但没必要一直这样做，重要的是平衡设计的结构和顺序与创造力。

❓ 避免使用小数

为什么？

• 高密度屏幕可以处理小数，但低密度屏幕可能会由于缺少“额外”像素来准确呈现设计而将设计显示为模糊。
• 这可能会导致在较低密度的屏幕上渲染时出现视觉不一致和复杂性等问题。这也可能导致意外的设计问题。

结论

最好避免使用小数。

❓ 将文本的行高保持为“自动”

为什么？

• 这可确保行间距动态调整，从而保持视觉上令人愉悦的布局。
• 这也与设计人员和开发人员之间交接的麻烦有关，保持行高 auto 可以帮助缓解这个问题。
• 这允许 Figma 像 Web 一样分配行高。当行高设置为 auto 时，Figma 会根据字体大小计算行高，可以简化文本样式的维护，简化整体设计过程。

我们应该始终保持行高为 Auto 吗？边缘情况是什么？

不，没有必要总是遵循这一点。行高通常应介于字体大小的 120% 到 145% 之间，以使文本更具可读性。但这可能因不同的字体而异。

边缘情况：
1. 视觉对齐：在某些情况下，我们可能需要通过使用一致的固定行高来视觉对齐文本元素，即使内容不同。
2. 可访问性：为了提高视觉障碍用户的可读性，在这些情况下，根据需要调整固定的行高可能是有益的。
3. 不寻常的字体：如果我们使用的字体具有不寻常的固有行高，我们可能需要手动调整行高以确保文本可读且间距合理。

结论

• 在大多数情况下，保持行高 Auto 是最好的方法。为了提高可读性，行高应介于字体大小的 120% 到 145% 之间。
• 我们可以使用不同的行高，但不应干扰视觉设计流程，并且还要确保在切换时不会产生冲突。

❓ 将图标保持在 24px 的框架中

为什么？

• 图标设计为在特定大小下效果最佳，而 24px 是图标的标准大小之一。通过使用一致的框架大小并以该大小导出图标，设计人员可以确保视觉一致性并简化设计过程。
• 通常，对于移动设备，可点击区域为 40 像素，因此设计良好的应用程序中的大多数 CTA 按钮都很大，并且在 32 像素到 40 像素之间，24 像素是最小标准尺寸。我们应该避免将 CTA 按钮置于 24px 以下。

是否有任何情况下我们需要小于 24px 的帧？

• 是的。在针对小屏幕或密集内容区域进行设计时，可能需要较小的框架大小来创建图标或适应特定布局。
• 此外，在构建图标集时，建议为所有图标选择一个通用大小，例如 16px、24px 或 32px，然后允许根据需要缩放到其他大小。这有助于在设计过程中保持视觉一致性和效率。

结论

图标在创建时应遵循一些基本的大小准则。坚持使用 24×24 像素的图标大小是一个很好的中间图标大小。但是如果特定应用程序需要，我们也可以使用 16px 或 20px 的较小框架。

❓ Ghost 按钮 👻

什么是 Ghost 按钮？

• 幽灵按钮基本上是二级或三级按钮，通常用作号召性用语 （CTA） 按钮，有助于创建按钮的视觉层次结构，从而允许推广最重要的按钮。
• 它们通常是具有基本形状的透明和空按钮，通常由一条非常细的线作为边框，笔触和背景之间具有微妙的色彩对比。幽灵按钮提供干净简约的外观。
• 可以使用幽灵按钮的一些用例包括：“了解更多”、“注册”、“开始使用”、“返回”。

结论

• 幽灵按钮增强了应用程序的美感，同时提供了一种微妙且用户友好的方式来引导访问者执行重要操作。
• 最终，使用幽灵按钮的选择应与整体设计策略和目标受众的偏好保持一致。