Material Design Product icons 产品图标

这是一个翻译系列,原文是谷歌18年所出的材料设计指南(文末有链接),强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇,一共百余篇,欢迎关注哦。

产品图标是品牌、服务以及工具的视觉表现。

目录

设计原则网格和关键线形状规格图标处理

设计原则

品牌表现

产品图标是品牌和产品(包括其服务和工具)的视觉表达。它们以简单、醒目和友好的方式传达了产品的核心理念和目标。虽然每个图标在视觉上有所不同,但特定品牌应统一所有产品图标概念和表现。

这些规范是确保通过产品图标颜色和关键元素来表现品牌特质的起点。

rxea2fpjmnv.png插图

设计方法

材料的触感和物理质感反映在材料图标设计之中。每个图标都可像纸张一样被剪切、折叠和照亮,只是一般都由简单图形元素来表现。材料材质坚实,具有干净的折痕和清晰的边缘。表面通过细微的高光和一致的阴影来反映与光线的交互。

sucmlpo4nrl.png插图(1)

网格和关键线形状

图标尺寸

创建一个图标时,以400%(192 x 192 dp)来查看和编辑,其边缘单位尺寸也将变为4dp。为保持这个比例,原始的任何变化都将按比例放大或缩小,这样当恢复到100%(48dp)时就还能保持锐利的边缘和恰当的对齐方式。

m2mi1xbpdst.png插图(2)

图标网格为图形元素的一致性和灵活的定位建立了明确的规则。

wsiu342nseg.png插图(3)

关键线形状

关键线形状的基础是网格。通过使用这些关键形状作为基线,可以使你的产品图标在视觉比例上都保持一致。

rpzpmcqhela.png插图(4)

几何结构

这些关键线形状使用预设标准:圆形、方形、矩形、正交线和对角线。它们统一了产品图标规格,并使其在网格中的位置保持一致。

y25squv0f53.png插图(5)

规格

剖析

为了共享视觉语言,组成产品图标的图像元素在所有的品牌图标中应该保持一致,特别是logo,应具备帮助品牌元素建立熟悉度的特征。

产品图标的基本结构将每个元素置于其上一个的前面,因此每个logo都是自下而上设计。

eyn2ugw5kc5.png插图(6)

抛光材料背景材料前景颜色阴影

h30pvnj12l3.png插图(7)

光线

在材料设计环境中,虚拟的光线照亮了场景并使元素投射出阴影。灯光在元素顶部投射,照出的阴影突出了图标顶部和底部的边缘。有角度的光线增强了元素间的立体感。

mqnil1al0td.png插图(8)

阴影

接触阴影

接触阴影是上方虚拟光线投射的结果。元素的顶部和左侧围绕着柔和的阴影,而在其底部和右侧会稍微加重。阴影始终包含在图标的背景轮廓内。

dltyvoldmno.png插图(9)

浅色边缘和深色边缘

材料元素顶部和底部边缘表现出了深度感,通过浅色边缘和深色边缘加以强调:

浅色色调突显了元素顶部边缘(左侧、右侧和底部边缘没有浅色色调)深色色调使元素底部边缘变得更暗(左侧、右侧和顶部边缘没有深色色调)

ob13chu414x.png插图(10)

抛光

抛光层表现了一个Material Design 45°虚拟光源产生的效果。它从图标轮廓的左上角延伸到外边缘。

dltyvoldmno.png插图(9)

*请注意本文中的概述值参考于Adobe Illustration。

图标处理

颜色

材料元素具有触感表面。当与颜色结合时,这些表面可以产生许多独特的组合。

颜色与元素表面齐平。因为颜色本身没有深度,所以它不包含边缘或阴影。

ulxj1s1wlcg.png插图(11)

图层

当材料元素分层时,每一层所投射的阴影产生了深度。应限制所叠加的表面层数,太多的图层将导致图标过于复杂。

nk2boh35553.png插图(12)

折痕

图标折痕通过将表面对半分创造出错觉深度。折痕应居中放置在对称的形状上。

e4bqpfpbkwr.png插图(13)

折叠

当以多个角度折叠时,材料元素将拥有更高的维度。

pzpgdmjjbrn.png插图(14)

部分重叠

当材料元素部分重叠时,它会创造出独特的轮廓。所有的元素、边缘和阴影都应限制在轮廓内。

0q211hvjglr.png插图(15)

手风琴

手风琴折叠使用连接叠层将两个材料元素结合,从而为元素增加了维度。

iems0wik2j4.png插图(16)

扭曲

元素应该保持其几何样式,不应歪斜、旋转、翘起或弯曲。

bi43oolquph.png插图(17)

原文地址:Material Design

译者:招财鱼

人已赞赏
UI设计

Material Design System icons 系统图标

2020-10-13 18:06:13

UI设计

横滑or竖滑?

2020-10-13 20:05:03

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索