谷歌Material Design & Product Icons
Google provide us a set of standard and consistent icons, we can get them from material icons.
>_ Product Icons
Product icons are the visual expression of a brand's products, services, and tools. If food looks ugly, people will lose appetite.
In the grid, there are four kinds of shape(keyline shapes) of product icon.
48dp with edges at 1dp.When you create the icon, maintain the 48-unit measure, but scale it to 400% at 192 x 192 dp (the edge becomes 4dp).
A top light cast on material elements creates a contact shadow while highlighting the top and bottom edges. An angled light reinforces the sense of surface across the elements.
The top light from above casts a soft shadow surrounding an element lightly on the top and left. The shadow is slightly heavier below and to the right. This shadow is always contained within the icon’s silhouette.
Edge tint and shade
Material elements have a standard 1dp thickness. Tint highlights the top edge of all elements, shade darkens the bottom edge of all elements.
Tint, shade and shadow values(shaded edge refers to here)
The finish layer is a result of the virtual 45º light source. It extends from the top-left corner to the exterior edge of the icon’s silhouette.
Color elements are flush to the surface without edges or shadows.
Layered paper elements have edges and shadows which is different from color. Having too many complicates the icon and lacks focus.
Elevate a key element atop a simple background silhouette focuses attenetion to the center.
Don't crop elevated material elements within another shape.
Scored material elements have the illusion of depth without losing their geometric form.
Don't use multiple scores, or position a score off-center.
Floded material elements are shewed, having greater dimension.
To avoid altering or misrepresenting key elements, spot colors should be avoided.
Overlapped material elements create unique sihouettes. All elements, edges and shadows are confined to the interior of the silhouette.
Don't exceed more than two overlaps.
Accordion folded elements are adjoined by a connecting fold, used to add dimension to a single material element.
Don't exceed more than tow accordion folds.
Product icons should never be distorted or transformed. Elements should remain in their geometric form, and not be skewed, rotated, bowed, warped, or bent.
> Human iconography
Human icon rules
Declaration: This article is adapted from online documents of Google.