谷歌Material Design & Product Icons

2016-04-19 · 🙈Ray · 0条 · 220次

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.

Grid


In the grid, there are four kinds of shape(keyline shapes) of product icon.



Size

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).

> Metrics

Lighting

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.

Shadows

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)

Finish

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.

> Patterns

Color

Color elements are flush to the surface without edges or shadows.

Layer

Layered paper elements have edges and shadows which is different from color. Having too many complicates the icon and lacks focus.

Elevate

Elevate a key element atop a simple background silhouette focuses attenetion to the center.

Don't crop elevated material elements within another shape.

Score

Scored material elements have the illusion of depth without losing their geometric form.

Don't use multiple scores, or position a score off-center.

Fold

Floded material elements are shewed, having greater dimension.

To avoid altering or misrepresenting key elements, spot colors should be avoided.

Overlap

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

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.

Distort

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.


  0