“本文试图理解为什么遵循一些常见的设计实践，帮助我们在自己的设计中更好地理解和应用这些原则。”

“你们从第一份作业中学到了什么？”

当我分享我的想法时，Yug 给了我们一个很好的建议：虽然遵循最佳实践至关重要，但了解这些实践背后的原因也同样重要。他解释说，这种更深层次的理解有助于我们分层思考并做出更明智的设计决策。

自然而然，我天生好奇，因此被深深吸引。我很快记下了一些主要收获，并开始在网上搜索，以找出这些设计实践背后的原因。我的目标是尽可能详细地了解这些看似简单的原则背后的原因。

.     .     .

❓ 确保 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（以获得更高的粒度）网格系统。但没有必要一直这样做，重要的是平衡设计的结构和顺序与创造力。

.     .     .

❓ 避免使用小数

为什么？

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

结论

避免使用小数是最好的做法。

.     .     .

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

为什么？

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

我们是否应该始终将行高保持为“自动”？有哪些极端情况？

不，不必总是遵循这一点。行高通常应为字体大小的 120% 到 145% 之间，以使文本更易读。但不同字体可能会有所不同。

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

结论

• 在大多数情况下，保持行高为“自动”是最好的方法。为了便于阅读，行高应介于字体大小的 120% 到 145% 之间。
• 我们可以使用不同的行高，但它不应该扰乱视觉设计流程，并且还要确保它在交接时不会产生冲突。

.     .     .

❓ 将图标保持在 24px 框架内

为什么？

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

有哪些情况我们需要小于 24px 的框架？

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

结论

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

.     .     .

❓ 幽灵按钮 ?

什么是幽灵按钮？

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

结论

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

.     .     .

关注我不错过?

亚星管理平台菁思福科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！

亚星管理平台菁思福科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。亚星管理平台菁思福科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信亚星官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。