在这一系列符号中，您清楚哪些？驾驶员会随着时间的流逝而学习这些知识，但很多都是不直观的。您需要一本手册来解释其含义。
这大致就是他们为我筹码的方式：
When an icon uses an unfamiliar metaphor, it’s hard to understand. The seatbelt “reminder light” (3rd from the left) is quite literal and we can grasp it quickly. The “electric power steering system warning light” (far right) is much hazier.
Some of the most unclear icons I’ve encountered are in the photography app VSCO. Can you guess what they mean?
Icons in the VSCO app
From left to right these navigational icons represent: Feed, Discover, Studio, Profile, and Members. The cost of confusion for VSCO is low as it only takes a few taps to figure out what each icon stands for. The cost for driving is much higher.
Over time, what’s abstract can become familiar with repeated use. This is why car tell-tales are standardized; the intention is to build shared understanding. In 1984, Susan Kare was tasked to create an icon for the ‘feature’ key on Apple’s keyboards. She arrived at this abstract symbol, also found in Nordic place-of-interest signs.
Command icon in SF Pro
The command icon has become a classic, representing what we now call the command key on Apple keyboards. Watch Susan Kare share her incredible body of work.
Susan Kare was able to invent because there wasn’t a standard in place. When creating icons, consider if there is an existing metaphor—like a cog for settings—or if it’s appropriate to invent the wheel.
Here are a few more icons that have built up familiarity over time — symbols for love/favorite, warning, music, and up/forward direction:
The arrow is a simple but powerful symbol used in wayfinding:
When most successful, icons are not only easy to understand for one group of people but are universal across cultures, ages, and backgrounds. Consider your audience and use metaphors and colors that resonate with them.
Once you have an understandable symbol, make sure it’s readable.
Icons in the Amtrak mobile app
It’s hard to make out the Amtrak app’s Station icon above (first row) because the details are too fine.
The Transit app has a similar issue. Their clipboard icon reads as a blob because the space between the board and clip is too small:
Icons in the Transit mobile app
A slight adjustment makes a big improvement:
Adjusted clipboard icon
When working with multiple shapes, leave enough space between them. Thinner strokes, and more of them, will make the icon busier and harder to read.
Google Maps does an excellent job with their transit icons—very readable at a very small size:
Google Map icons
To make sure each icon feels balanced, align its elements optically.
Unbalanced play icon
In this play icon, though the triangle is metrically placed in the center of the circle, our eyes read it as off-kilter. The wider part of the triangle feels ‘heavier’ than the point and is tipping it to the left.
Just as typographers make fine adjustments to create the optical illusion of balance in a typeface (note the off-center dots on the “i” and “j” and overshoot on the “O”)—
—iconographers make similar adjustments to balance an icon. To correct the example above, shift the elements over a bit:
Balanced play icon
Better.
The learning is: don’t simply trust the numbers; use your eye to check your work.
An idea expressed well in just a few words feels efficient and elegant. Take this statement:
Teaching what you know strengthens your own understanding of the subject.
We could more succinctly say (from Robert Heinlein):
When one teaches, two learn.
Beautiful.
Material illustrates brevity in their system icon guidance quite well. Instead of saying:
Overly complex boat icon (Source: Material)
Brevity is apt for icon design since we are often working in small canvases. Use the right amount of detail for your icons and don’t use more than you need.
In user interfaces, a reductive style gets the point across and makes way for the content. Telegram’s icons are short and sweet:
Telegram icons
On occasion, UI icons take on a more illustrative style. These multi-tone Yelp icons are a delightful way to surface popular food searches. The shrimp in the Thai food icon is exquisite:
With app icons, which represent mobile, tablet, and desktop applications, the right amount of detail might mean more depth and color. Because viewers understand their context in mobile home screens, docks, and app stores, the icons can be more expressive of the brand and product.
Apple app icons for Procreate, Firefox, and Netflix
To achieve harmony for an icon family, maintain the same stylistic rules throughout.
Before iOS 13, Apple’s icons exhibited all sorts of strokes, fills, and sizes:
Squint at this set. Do some icons feel heavier than others?
Any given icon has a certain visual weight, determined by parameters like fill, stroke thickness, size, and shape. Keeping these parameters the same across a set builds consistency.
Apple has recently course-corrected with their introduction of SF Symbols, an impressive companion to San Francisco. SF Symbols embraces a more graphic icon style in 9 weights and 3 scales (perhaps a bit complex, definitely thorough). From icon to icon and between fill and outline variants, these feel much more harmonious.
Maintaining consistency isn’t an easy task with a large icon family, especially with multiple authors involved. It’s critical to have clear principles and rules to follow (and bend).
The Phosphor icon pack—designed by yours truly and built by my other half—keeps 700+ icons consistent by sticking to the same general guidelines and testing each icon rigorously. Though each one has a different shape, they carry the same weight and hang together well:
Every icon set has a flavor. What makes it unique? What does it say about the brand? What mood does it create?
Waze icons
Waze’s beloved interface relies a lot on their iconography. These colorful, chunky icons say, “We’re quirky!”
Twitter’s icons are soft, light, and crisp:
Twitter icons
Sketch’s icons are delicate and airy:
Freemojis are cute and lovable:
Android icon packs cater to a wide array of moods for home screen theming—here’s an abstract, pixel, bubbly, and neon style:
An icon set isn’t done after it’s been drawn to perfection. It requires further testing and preparation to make sure it’s easy for contributors to make new icons, designers to use them in their designs (for screen, print, etc.), and engineers to code them into production.
A quality icon set is organized, well-documented, and tested in context. Nice to have: it’s supported by custom tools like an icon manager as well.
Organized
Keep the master file clean, name your assets well, and place them so they are easy to find. Consider the best way to categorize. Alphabetically? By size? By type?
A Nucleo Sketch file, organized by type across pages
Well-Documented
Articulate the icon family’s key principles:
Example principles from the Phosphor icon family (a riff on what we covered above):• Clarity. Be clear first and foremost. Make the icon recognizable and readable. Never sacrifice clarity of what the icon represents.• Brevity. Use as few details as possible. Phosphor’s style is reductive. Be concise and intentional with every stroke to communicate the essence of what’s being represented.• Character. Be quirky. Add unique details sparingly to bring a little warmth and play to what may otherwise be a very austere set.
List out the technical rules:
Example technical rules from the Phosphor icon family:• Use a 48 x 48px canvas• Use a 1.5px centered stroke**• Use rounded end caps**• Use contiguous strokes unless broken segments are helpful for comprehension• Use straight segments, perfect arcs, and 15° angle increments where possible• Adjust curves when necessary to maintain the design principles• Use whole, even number increments for measurements where possible; fold down to 1px and .5px if necessary• Use the following shape keylines: 28 x 28px circles, 25 x 25px squares, 28 x 22px landscape rectangles, 22 x 28px portrait rectangles• Keep a 6px thick trim area
Iterate on these, and make the documentation public if you like:
- Material System icons
- IBM’s UI icons, App icons, and contributor guide for icons
- Shopify Polaris Icons
Tested
Check for consistency. Make sure the icons work in context, at the relevant sizes. Make sure they work in harmony with the larger visual system.
Placing icons next to each other is helpful in proofing for our principles above—clarity, readability, alignment, brevity, consistency, and personality:
Test sheets used in Phosphor’s QA process
Custom Tools
Lastly, if you have the resources, create tools to facilitate the icons’ usage.
Material makes their icons easily accessible with their custom icon library. Search for the one you need and download different styles (‘themes’), colors, and sizes in your preferred file format.
Font Awesome, though missing the mark on some of the principles above, has made their icons incredibly easy to use. They offer a variety of methods to work with their icons: through their frontend framework libraries, CDN, icon font, or raw SVGs. Extra awesome is the public backlog, where they share the most requested icons, what’s in the works, and what’s recently released.
An icon set in use is a living thing. Give it the love and tools it needs to succeed—and grow.
Icon Libraries
A few selects:
- Feather, a gorgeous set of 200+ extra minimal outline icons that scale up and down nicely
- Material system icons, 1k+ utilitarian icons for UI in 5 styles
- Nucleo, a set of ~30k icons in 3 styles: outline, flat/colored, and glyph
- Streamline, a beautifully-drawn set of 30k+ line-style icons in 3 weights
Icon Aggregators
- The Noun Project, though a mixed bag in terms of quality, is a great way to search for inspiration on styles and metaphors
Icon Managers
- With the Nucleo app, you can import icon sets, view, export, and drag and drop into your preferred design software
Icon Documentation
Material is best-in-class when it comes to design documentation: Material System icons, Product icons
IBM provides excellent visual aids: UI icons, App icons, and contributor guide for icons
Shopify 提供了一些写得最好的指南：Shopify Polaris Icons
https://uxdesign.cc/7-principles-of-icon-design-e7187539e4a2
若有收获，就点个赞吧
0 人点赞
