Balance Visual Weight in an Icon Family

平衡圖標(biāo)家族的視覺重量

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

通過賦予一系列圖標(biāo)相同的視覺重量使它們看起來像是同一系列的

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.

當(dāng)我們談到在設(shè)計(jì)中運(yùn)用網(wǎng)格娇钱，我們通常說的是Foundation——我們（ZURB）的響應(yīng)式CSS框架伤柄。但是在任何作品中網(wǎng)格都僅僅是一個(gè)排版校直和把控視覺節(jié)奏的工具。盡管如此文搂，網(wǎng)格是輔助線适刀，不是標(biāo)尺。有時(shí)我們不能僅僅像表面上那樣完全貼合網(wǎng)格煤蹭。

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:

通過精確的網(wǎng)格可以看出上面的圖標(biāo)有相同的尺寸笔喉。但是人們是看不到像素和網(wǎng)格的。他們看到的只是外形硝皂、顏色常挚、對(duì)比——我們稱之為視覺重量。去掉輔助線就能看到各圖標(biāo)的比重是如何和相鄰圖標(biāo)產(chǎn)生聯(lián)系的：

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.

設(shè)計(jì)圖標(biāo)時(shí)吧彪，你不可以在你的作圖工具里將圖標(biāo)形狀恰好貼合輔助線待侵。在完成的產(chǎn)品中，圖標(biāo)要看起來像一個(gè)和諧的家族姨裸。圖標(biāo)設(shè)計(jì)是一回事兒秧倾，圖標(biāo)家族設(shè)計(jì)則是另一回事兒。這里有四個(gè)技巧可以讓圖標(biāo)像是一個(gè)圖標(biāo)家族傀缩。

1. Don’t judge an icon by itself.

1.不要單獨(dú)審視一個(gè)圖標(biāo)

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?

要在有其他圖標(biāo)對(duì)比的前提下評(píng)價(jià)一個(gè)圖標(biāo)那先。而且不是隨意的配對(duì)：越多越好，三個(gè)赡艰、四個(gè)售淡、五個(gè)或更多。（這就是為什么鮮有大的成功的圖標(biāo)家族）看上面的圖標(biāo)慷垮，那一系列看上去更相似揖闸？

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.

同樣也要和除圖標(biāo)以外的其他上下文元素放在一起預(yù)覽。例如料身，如果你想把圖標(biāo)放在文字旁邊汤纸，那么就把它們放在一些字母或文字中檢測它們的視覺重量。

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.

將圖標(biāo)尺寸縮小或放大再觀察可以發(fā)現(xiàn)隱藏的問題——特別是縮小之后芹血。當(dāng)圖標(biāo)小于16px時(shí)它們會(huì)失去那些華麗裝飾的元素贮泞。沒有什么比改變圖標(biāo)尺寸更能反映不和諧的問題了楞慈。

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.尖角。一個(gè)相同的角度啃擦。一段特定的曲線囊蓝。將這一兩個(gè)相同的細(xì)節(jié)運(yùn)用到盡可能多的圖標(biāo)上，讓他們有統(tǒng)一的元素令蛉。

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.

訓(xùn)練用自己的眼睛去直觀判斷視覺重量聚霜。網(wǎng)格輔助線雖然有幫助，但是判斷圖標(biāo)是否和諧統(tǒng)一的主要工具還是你自己的經(jīng)驗(yàn)言询。試著分別把圖標(biāo)放在屏幕上和紙上俯萎，并用余光觀察。它們不會(huì)全都看起來一毛一樣运杭。但是當(dāng)視野模糊的時(shí)候夫啊，不應(yīng)該有圖標(biāo)過淺或過深。

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

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

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