Balance Visual Weight in an Icon Family

平衡图标家族的视觉重量

Learn how to make a series of icons work together by giving them the same apparent visual weight.

通过赋予一系列图标相同的视觉重量使它们看起来像是同一系列的

When we talk about using grids in design, we usually refer to Foundation, our responsive CSS framework. But grids are just a tool to create alignment and visual rhythm in any composition. And even then, they’re guides, not rules. Sometimes we may adhere to the grids more than what they represent.

当我们谈到在设计中运用网格，我们通常说的是Foundation——我们（ZURB）的响应式CSS框架。但是在任何作品中网格都仅仅是一个排版校直和把控视觉节奏的工具。尽管如此，网格是辅助线，不是标尺。有时我们不能仅仅像表面上那样完全贴合网格。

They’re the same size — according to a strict grid. But people don’t see pixels or grids. They see forms, colors, contrast — what we call visual weight. Take away the guides to reveal how much (or little) mass each icon appears to have in relation to its neighbors:

通过精确的网格可以看出上面的图标有相同的尺寸。但是人们是看不到像素和网格的。他们看到的只是外形、颜色、对比——我们称之为视觉重量。去掉辅助线就能看到各图标的比重是如何和相邻图标产生联系的：

When designing icons, you can't just make shapes that adhere to guides in your drawing tool of choice. A set of icons should look like a harmonious family in the finished product. Icon design is one thing. Family design is another.Here are four techniques to make a group of icons feel like family.

设计图标时，你不可以在你的作图工具里将图标形状恰好贴合辅助线。在完成的产品中，图标要看起来像一个和谐的家族。图标设计是一回事儿，图标家族设计则是另一回事儿。这里有四个技巧可以让图标像是一个图标家族。

1. Don’t judge an icon by itself.

1.不要单独审视一个图标

Critique every icon against one another. And not just random pairings: Compare as many combinations of three, four, five or more icons as you can. (This is why you find few large successful icon families.) Look at the icons above. Which set feels more similar?

要在有其他图标对比的前提下评价一个图标。而且不是随意的配对：越多越好，三个、四个、五个或更多。（这就是为什么鲜有大的成功的图标家族）看上面的图标，那一系列看上去更相似？

Also try them in context of elements other than icons. For example, if you intend the icons to appear next to text, then test their weight against a few letters or numbers.

同样也要和除图标以外的其他上下文元素放在一起预览。例如，如果你想把图标放在文字旁边，那么就把它们放在一些字母或文字中检测它们的视觉重量。

2. Test small.

2.缩小后查看

Viewing icons at different sizes than they’re created will reveal hidden problems — especially when they’re small. Icons smaller than 16 pixels wide lose their ornate details. Nothing shows mismatched weights quite like checking our work at different sizes.

将图标尺寸缩小或放大再观察可以发现隐藏的问题——特别是缩小之后。当图标小于16px时它们会失去那些华丽装饰的元素。没有什么比改变图标尺寸更能反映不和谐的问题了。

3. Use common traits.

3.使用通用元素

Round corners vs. sharp points. A common angle. A particular curve. Incorporate the same detail or two in as many of the icons as possible to keep a note of familiarity.

圆角vs.尖角。一个相同的角度。一段特定的曲线。将这一两个相同的细节运用到尽可能多的图标上，让他们有统一的元素。

4. Trust your eyes.

4.相信自己的眼睛

Train yourself to judge visual weight. Grids and guides are helpful, but your main tool for judging if a set of icons works together is your experience. Try squinting at a set of icons — both on screen and on paper. They won’t all look the same, but when blurry, no single icon should be especially light or dark.

训练用自己的眼睛去直观判断视觉重量。网格辅助线虽然有帮助，但是判断图标是否和谐统一的主要工具还是你自己的经验。试着分别把图标放在屏幕上和纸上，并用余光观察。它们不会全都看起来一毛一样。但是当视野模糊的时候，不应该有图标过浅或过深。

原文来自：ZURB University／Product Design Lessons／CREATIVE DIRECTION  ／LESSON #11

原文链接：http://zurb.com/university/lessons/balance-visual-weight-in-an-icon-family

由于原文有些配图怪怪的就自己改了....