UI备忘录: 间距友谊 Spacing friendships
对我来说，了解界面设计师技能的最简单方法是通过他们在设计中如何使用间距。颜色、排版、图像等通常在品牌指南中提供给你——但正确使用间距是一项技能。一段时间后，它变成了第二天性，但只有在你学习并使用了基本规则之后。
在这个备忘单中，我解释了一个相当俗气的比喻，我告诉新加入者解释如何间隔元素。这些基本规则有望帮助你训练你的眼睛以更批判性的方式看待间距。
在这个备忘单中我们将包括：
- 为什么间距很重要？
- 点网格简介
- 间距友谊
- 间距的三个C
- 结束语
1. 为什么间距很重要？
当我在我的第一份产品设计工作中还是一名大三学生时，我记得我为自己完成的设计感到非常自豪。我把它交给了一位资深设计师，我们亲切地昵称他为 Pixel-Perfect- Piet。当我再次看到我的布局时，我被震撼了。它看起来好多了，但具有完全相同的元素。通过简单地改进我设计中的间距，他创造了一个更有条理、更干净、更有凝聚力的布局。
皮特运用了一种我才刚刚开始理解的新魔法。
当你改善间距时，会发生以下情况：
- 用户更容易消费内容。
- 它创建了一个信息层次结构，将重要性传递给用户。
- 它在你的设计中创造一致性。
- 它看起来更好。
2. 点网格介绍
像大多数界面设计师一样，我的职业生涯始于平面设计师。为了设计印刷版式，我们被教导（我不骗你）使用正方形来测量不同元素之间的距离以创建一致性。
这在数字产品设计中是行不通的，因为它不够准确。
我们界面人员更喜欢在组件和形状之间使用更有意的测量方法。那么问题来了：物体应该间隔多远？作为一个有十个手指和十个脚趾的人，倾向于以 10 为单位间隔项目。这也是一个很好的整数，很容易记住，经常用于平面设计布局。但 10pt 实际上太大了，不能很好地乘或除。
输入 8pt 网格。8pt 网格允许你使用 8 的倍数来分隔设计中的元素。这些单位包括 0、8、16、32、64 等。
数字 8 有点像一个神奇的数字——它就是有效。
然而，（产品设计）传闻中的消息是 8pt 网格已淘汰，4pt 网格已流行。这意味着你可以使用 4 的倍数，包括 0、4、8、12、24、32、64 、72等，Dries De Schepper，德勤数字界面设计师说，4pt网格将给你的工作带来更大的灵活性，你会惊讶于你使用12pt而不是8或16pt的频率。
8pt 网格的优点是可以使用的数字更少，更容易保持一致。相反，4pt 网格的好处是可以处理更多数字，从而更容易创建更紧凑的设计。
3. 间距友谊
在我谈论间距友谊之前，让我们先谈谈友谊，让我们在课堂上谈论它。
在一个班级中，通常会形成不同的朋友群。在这些朋友群体中，形成了更密切的友谊。因此，你可以在亲密朋友圈中找到最好的朋友，甚至在更大的朋友圈中。
（实际上，朋友圈的重叠要多得多，但为了比喻，让我们假装它们没有重叠。）
那么在 UI 设计中，友谊与间距有什么关系呢？
将设计中元素之间的距离视为朋友圈。有些更近；有些则不然。这两个方面越熟悉，它们就越接近。相反，他们越不友好，距离就越远。
比较下面的两张图片。左边的那一个在所有地方都使用相同的间距。右边的一个是使用间隔友好关系创建的，这意味着容器填充，图标、文本和按钮之间的空间都是不同的。
你能看到左边的图像看起来很凌乱吗？你能看到右边的那个看起来很平衡和整洁吗？
如果你看看下面的示例，你可以看到我如何将不同的元素分组到不同的朋友组中。
正如你在上图中所看到的，不同的元素被分成不同的朋友组。你可以根据元素的相关程度来决定元素彼此之间的“友好”程度。例如，在上图中，标题和正文比按钮或图形更相关。但是图形、按钮和文本都有相似的信息，所以仍然组合在一起。
那么完整的布局呢？同样的原理也适用，只是有更多的活动部件。
所以如果上面的组件是一个朋友组，一个页面布局就是一个类。每个人都在一起，但只有一些人是朋友。在下面的示例中，你可以看到我如何在完整布局中使用与在小组件中相同的原理。
正如你在上图中所看到的，将元素分成不同的朋友组有助于创建一致性和层次结构。自然，这不是一个完美的比喻，并且可能有一些例外，你决定打破规则。
4.间距的三个C
Facebook Design System 的产品设计师Priyanka Godbole有一种类似但更结构化的间距方法。她将元素分为三个主要类别，即容器、内容和组件。对于这些类别中的每一个，它们都有一个预定义的间距。
容器（包括卡片、模态、页面等）应该具有最大的间距值。例如，Godbole 使用 16pts 作为她的最大值。
内容（包括标题、段落、表格等）是关于正确地间隔排版。标题、段落的高度以及它们之间的空间都应该被考虑和间隔。
组件（包括按钮、输入字段、图标等）是关于较小组件之间及其内部的间距，例如，按钮内部和周围的间距。
5. 结束语
使用正确的间距是一项非常直观的练习，需要数年时间进行微调。见鬼，我敢打赌 Pixel-Perfect-Piet 仍然能够找到我的间距错误。
我希望通过将设计中的组件视为“朋友”，将帮助你更好地了解元素应该如何间隔。
作者Tess Gadd， UI Designer，译自https://uxdesign.cc/ui-cheat-sheet-spacing-friendships-e37a6fccc407
有关构建自己的交互作品集的更多提示和建议，请查看以下文章：
- 【深度好文】2021年UI / UX设计师自学成才超完全路径
- 交互设计神器Figma!10款高效率插件推荐➡️
- 交互设计师必看的10个TED演讲｜Top TED Talks in UX Design
- 关于交互设计：学习和就业，边看边整理
学长学姐成功申请经验：
- Pratt全球最高奖Calarts,SAIC, OCAD（专业选择、作品集准备）
- 交互设计ACCD&CCA每年1.3w美元奖学金（专业选择、作品集准备、灵感来源）
- 建筑转HCI，没考GRE，3个月拿下综合大U王牌项目：IUB/ Umich/ NYU...
- 作品集收获： SCAD萨凡纳24000$奖学金+SCI论文+大厂实习
最靠谱的作品集制作方案：
艺术留学作品集可以DIY么，作品集培训机构有哪些坑？艺术留学怎么找靠谱的老师？
