|
- 卷首 学生的设计项目到了高保真设计阶段 在页面布局 / 排版的时候 我建议他们使用 8pt 的倍数来控制元素尺寸和间距大小 之前在网上看到过讨论 8pt 网格的文章 今翻译出来分享给大家 希望有用~ 原文：https:///intro-to-the-8-point-grid-system-d2573cde8632 作者：Elliot Dahl 翻译：扑热息痛 感谢作者！
作为一名设计师，您可能听说过“网格”这个术语，无论您是设计网站、杂志还是APP。我们有各种网格来安排内容。我们使用列网格来水平对齐内容，基线网格垂直对齐文本。软网格和硬网格来描述我们如何严格遵守它们。在听到布林杰克逊狂热地谈论它之后，我对 8pt 网系统感兴趣。我决定了解一下 8pt 系统可以给我的设计带来什么好处（如果有的话） 我从不使用 8pt 系统做设计~有啥问题吗？— 我使用 Bootstrap 或 Foundation 等设计系统来设计 Web 项目，甚至尝试自己构建一些类似的系统。直到最近，我才意识到像按钮这样的组件可以单独而精美地布置，但是当设置更大的元素和内容时通常会比较糟糕。这是因为整个页面美观的构图很难持续下去。我可以靠我的设计眼光（感觉）在这里或那里进行微调，但我很难把这种眼光（感觉）分享给团队里的其他设计师和开发人员。若没有一个系统来定义元素的间距关系，就很难创建一致性。 在这个比较中↓，您可以看到一个 8pt 网格系统对设计的意义。 左边对齐 8pt 网格，而右边没有。 为什么我的界面需要保持一致？— 倒也不一定~但是，如果你想拥有一个专业且值得信赖的外观，设计就必须要保持一致性。若您在网上购物时，信用卡输入表单与网站的其他部分看起来不同，你就会犹豫不决。一致性其实起了很大的作用。 为什么在 Bootstrap 或类似的系统应该用它还不够？— Bootstrap 是一个有组织的自定义库，允许设计人员 / 开发人员专注于内容和用户体验。它提高了网络上无数网站的质量。但是没有一致的度量单位会导致页面之间的布局不一致，特别是在团队设计项目中。 当 Pivotal 建立它自己的品牌美学时，我们经常需要创建独特的组件和布局。尽管最近努力统一我们的 UI 系统，但我们仍然发现，所有产品顶部的品牌都略有不同。由世界各地的独立团队构建，整体概念相同，但执行方式稍有不同。 哪一个是错的？ 都没错~他们有不同的高度和填充，但没有一个明确的规则和系统，怎么去遵循它？ 那么，你的解决方案是什么？— 8pt 网格系统！使用 8 的增量来确定页面上元素的大小和空间。对我来说，这意味着任何定义的高度或宽度，边距或填充都是 8 的增量（倍数）为什么是 8 ？ — 各种屏幕尺寸和像素密度不断增加，使设计人员的切图工作变得更加复杂。利用像 8 这样的偶数来缩放大小和空间元素，使得各种设备的缩放变得容易、一致。 例如，具有 1.5 倍分辨率的设备将难以干净地渲染奇数尺寸。按 1.5 倍来缩放 5pt 会导致半像素偏移（次像素） OK，偶数就可以了呀~为什么不是 6 或 10 呢？— 大多数流行的屏幕尺寸都可以被 8 整除，这样可以轻松适配。以 8 为增量进行缩放的可用性和可能性远远大于以 6 或 10 为增量。总之，你得决定什么尺寸适合用户。“系统”只有在易于遵循和重复的情况下才有意义。 8pt 网格系统的价值是什么？
|
|
|
