（在芝加哥2014的An Event Apart上，Jon Hicks討論了現(xiàn)代圖標(biāo)設(shè)計(jì)過程，并分享了有用的設(shè)計(jì)和對(duì)于圖標(biāo)的發(fā)展一些建議。這是我對(duì)他的演講做的筆記。
by Luke Wroblewski August 26, 2014）
{翻譯水平有限，請(qǐng)多包涵，文末附原文}
- 圖標(biāo)可以在網(wǎng)站和app中被用在支持導(dǎo)航、動(dòng)作、和傳遞信息。它們還可以通過提供除了顏色外的更多的信息來增強(qiáng)地位。
- 視覺語言出現(xiàn)在書面語言之前，比如符號(hào)，象形文字等。所以在1974年符號(hào)出現(xiàn)在計(jì)算機(jī)之前它就已經(jīng)存在了很久了。
- 今天有很多可以免費(fèi)在網(wǎng)站或者app上使用的圖標(biāo)，那么為什么還制作自己的圖標(biāo)？因?yàn)榭赡芤惶讏D標(biāo)的大小或者風(fēng)格可能不適合你使用。你可能需要比一套已經(jīng)做好的圖標(biāo)多一些或少一些的需求。在這些或者其他類似情況下，你可能需要定制的圖標(biāo)了。
- 圖標(biāo)設(shè)計(jì)的過程：調(diào)查，繪圖，展開（這部分經(jīng)常變化）。
- 調(diào)查：客戶的陳述和圖標(biāo)的審計(jì)可以揭示出圖標(biāo)不協(xié)調(diào)，缺口和在圖標(biāo)設(shè)計(jì)中一個(gè)網(wǎng)站的副本。編寫出你將會(huì)用到的圖標(biāo)的列表以及他們代表的含義。
- 你怎樣做才能把一個(gè)描繪好的圖標(biāo)實(shí)現(xiàn)？你有兩個(gè)選擇：圖像性的或者符號(hào)性的（需要學(xué)習(xí)）。
- 可能的話，你的圖標(biāo)設(shè)計(jì)應(yīng)符合慣例。The Noun Project是收集常見的視覺符號(hào)的一個(gè)很好的資源。但是注意當(dāng)?shù)厝说牧?xí)慣思維習(xí)慣。像小豬銀行，貓頭鷹和豎起的大拇指可能在其他文化中使用不合適。
- 真正的符號(hào)圖標(biāo)更容易理解。線形圖表和實(shí)心圖標(biāo)之間的差別并不是影響理解的關(guān)鍵因素。
- 不要為了追求與眾不同而把你的圖標(biāo)設(shè)計(jì)得太復(fù)雜華麗。讓你的圖標(biāo)盡可能地簡(jiǎn)單到不能再簡(jiǎn)單 。
- 繪圖：使用你習(xí)慣的任何工具。從一個(gè)以像素為單位的網(wǎng)格中繪制一個(gè)圖表中的圖形和空白。你的網(wǎng)格不一定是偶數(shù)的{原文是even，我理解為偶數(shù)的意思}
- 自動(dòng)調(diào)整圖標(biāo)大小來創(chuàng)建更大的圖像可能會(huì)導(dǎo)致比例(元素間的平衡）不對(duì)。你可能需要微調(diào)粗細(xì)或長(zhǎng)短來讓圖標(biāo)在不同尺寸下視覺效果同樣好。
- 對(duì)于一套圖標(biāo)，你可能需要調(diào)整大小和準(zhǔn)線來讓它們看起來一樣。不同的形狀在一套圖標(biāo)中顯示會(huì)看起來大一點(diǎn)或者小一點(diǎn)。
- 思考一下你的陰影落在圖標(biāo)的哪部分能制造出空間的平衡。
- 當(dāng)人們開始熱衷SVG時(shí)，Adobe開始從他們的app中去除SVG，因?yàn)橹皼]人用。
- 對(duì)于制作圖標(biāo)，Sketch開始變得足夠成熟成為Illustrator的之外的另一個(gè)可行的選擇。
- Svgo-gui是一個(gè)簡(jiǎn)單通過拖拽優(yōu)化SVG圖像的工具。你可以在你的服務(wù)器上通過GZIP-ing壓縮SVG。
- 展開：圖標(biāo)字體和SVG用哪個(gè)？?jī)烧叨夹校?/li>
- 為什么用圖標(biāo)字體？一個(gè)小文件，可進(jìn)入可測(cè)量，容易通過CSS布局，支持IE4+
- 為什么用SVG？麻煩少，可使用豐富色彩，也能用css布局。
- Grumpicon是一個(gè)能幫助你網(wǎng)站創(chuàng)建SVG的工具。
原文：
An Event Apart: Icon Design Process
by Luke Wroblewski August 26, 2014
At An Event Apart in Chicago IL 2014, Jon Hicks discussed the modern icon design process and shared useful design and development tips for icons. Here's my notes from his talk Icon Design Process:
Icons can be used to support navigation, action, and messaging in Web sites and applications. They can also reinforce status by providing more information than just color.
We had a visual language before we had written language: symbols, hieroglyphics, etc. So symbols were around for a long time before they made their way to computers in 1974.
Today there's lots of royalty free icon sets available for use in sites and apps -so why make your own? Icons sets might not be the right size or style for your usage. You may need more or less icons than exist in a ready-made set. In these cases and more, you may need custom icons.
The icon design process: research, drawing, and deployment (which changes frequently).
Research: a client brief and icon audit can reveal areas of inconsistency, gaps, or duplicates in the icon design of a site. Compile a list of the icons you'll need and what they represent.
How do you go from a word to a finished icon? You have two options: iconic (literal) or symbolic (needs to be learned).
When possible, follow conventions for your icon designs. The Noun Project is a great resource for common visual symbols. But be aware of local considerations. Symbols like piggy banks, owls, and thumbs up may have inappropriate meanings in other cultures.
Truly symbolic icons are more easily understood. The difference between outlined and solid icons is not the determining factor for comprehension.
Don't get too fancy with your icons just to make them different. Make your icon as simple as possible but no simpler.
Drawing: use whatever tools you are comfortable with. Start with a pixel grid to align gaps and weights within an icon. Your gird does not need to be even.
Automatic resizing of icons to create larger images might not provide the right ratio/balance between elements. You may need to tweak line weights or sizes to make things look right at different sizes.
With an icon set, you may need to adjust sizing and alignment to make things appear optically the same. Different shapes will appear bigger/smaller when displayed as part of a set.
Think about where shadows will fall within an icon to create the right balance of space.
Just when people started embracing SVG, Adobe started to remove SVG features from their apps since no one was using them before.
Sketch is starting to mature enough to be a viable alternative to Illustrator for drawing icons.
Svgo-gui is a simple drag and drop tool for optimizing SVG images. You can further compress SVG by GZIP-ing them on your server.
Deployment: Icon fonts or SVG -which one to use? Both can be right for your project.
Why use Icon fonts? One small file, accessible & scalable, easily styled with CSS, no sprites needed, supported in IE4+
Why use SVG? less hassle, support (3 versions back), avoids sprites, can use multiple colours, are still style-able with CSS animations
Grumpicon is a tool that can help you create SVG art for your sites.
