【外文翻譯】產(chǎn)品圖標(biāo)設(shè)計(jì)指南
翻譯自 Google Material Design 官方指南,直接挑干貨,有能力的同學(xué)建議看英文原版。
產(chǎn)品圖標(biāo)-圖標(biāo)網(wǎng)格-關(guān)鍵線形狀 (單位: dp) / Product icons - Product icon grid - Keyline shapes
關(guān)鍵線的形狀是網(wǎng)格的基礎(chǔ)。利用這些核心形狀做為向?qū)?,可讓所有相關(guān)產(chǎn)品的圖標(biāo)保持一致的視覺比例。
Keyline shapes are the foundation of the grid. By using these core shapes as guidelines, you can maintain a consistent visual proportion across related product icons.

方形 高&寬: 152 圓形 直徑: 176

豎直矩形 高:176 寬:128 水平矩形 高:128 寬:176
DP 單位網(wǎng)格 / DP unit grid

1:1 單元網(wǎng)格 4:1 單元網(wǎng)格
參考顏色,暗度和陰影值 / Tint, shade, and shadow values





產(chǎn)品圖標(biāo)模式 / Product icon patterns
顏色 / Color
讓色彩平鋪在平面上,不要裝飾邊角和陰影。

可取 不可取
圖層 / Layer
每層元素都有深度,邊角和陰影,當(dāng)心元素層級(jí)不要太多,圖標(biāo)太過復(fù)雜會(huì)喪失重點(diǎn)。
Layered paper elements create depth, having edges and shadows.
Be cautious with the quantity of overlapping surfaces.
Having too many complicates the icon and lacks focus.

可取 不可取
提升 / Elevate
提升一個(gè)關(guān)鍵元素到背景的上方,使其成為關(guān)注重點(diǎn)。不要讓提升的元素被切分。
Elevating a key material element atop a simple background silhouette focuses attention to the center.
Don’t crop elevated material elements within another shape.

可取 不可取
劃線 / Score
劃線可以制造層次感而不破壞圖形。劃線應(yīng)放在對稱中心。不要用多條劃線或是偏離中心。
Scored material elements have the illusion of depth without losing their geometric form.
Scores should be centered on symmetrical shapes.
Don’t use multiple scores, or position a score off-center.

可取 不可取
折疊 / Fold
被伸拉的折疊元素會(huì)更加立體,但斑點(diǎn)色應(yīng)避免使用,會(huì)導(dǎo)致關(guān)鍵元素扭曲改變。
Folded material elements are skewed, having greater dimension.
Spot colors should be avoided, so as to avoid altering or misrepresenting key elements.

可取 不可取
重疊 / Overlap
重疊的元素創(chuàng)造出獨(dú)特的剪影,但邊緣和陰影僅限于輪廓的內(nèi)部。不要使用超過兩個(gè)以上的重疊,會(huì)導(dǎo)致圖標(biāo)太復(fù)雜,缺乏重點(diǎn)。
Overlapped material elements create unique silhouettes. All elements, edges, and shadows are confined to the interior of the silhouette.
Don’t exceed more than two overlaps. Having too many complicates the icon and lacks focus.

可取 不可取
手風(fēng)琴 / Accordion
手風(fēng)琴式折疊的元素由兩個(gè)折疊的元素相接而成,用來增加單個(gè)元素的尺寸。不要使用超過兩個(gè)以上的手風(fēng)琴式折疊,會(huì)導(dǎo)致圖標(biāo)太復(fù)雜,缺乏重點(diǎn)。
Accordion folded material elements are adjoined by a connecting fold, used to add dimension to a single material element.
Don’t exceed more than two accordion folds. Having too many complicates the icon and lacks focus

可取 不可取
扭曲 / Distort
產(chǎn)品圖標(biāo)應(yīng)保持原有幾何形狀,永遠(yuǎn)不要扭曲,旋轉(zhuǎn)它。
Product icons should never be distorted or transformed.
Elements should remain in their geometric form, and not be skewed, rotated, bowed, warped, or bent.

不可取 不可取
























