图标MaterialDesign中文版

产品图标作为一个品牌下产品、服务和工具的一种视觉表现,能够简洁、显眼且友好地传递产品的核心理念与内涵。尽管每个产品图标看上去截然不同,但对于一个给定品牌,产品图标应在理念和实践中统一。

产品图标是传达品牌内涵的一个重要载体。从使用以下准则开始,确保产品图标的颜色和其他关键要素能够正确反映你的品牌标识。

产品图标设计从现实材料的质感和触感中获得启发。每个图标都像真实纸张一样被裁剪、折叠和点燃,而用一些简单的图形元素来表现。我们通过干净的折痕和清晰的边缘来表现结实坚固的质感,或是利用微妙的亮点和一致的阴影来展现材料的磨砂抛光。

现实原型

光线考究

材料原型

色彩考究

产品图标网格已经形成了一致的标准,且建立了一套明确的图形元素定位规则。这种标准化带来了灵活,而连贯的系统。

网格

关键线

方形

高&宽:152

圆形

直径:176

竖直矩形

高:176宽:128

水平矩形

高:128宽:176

设备上的启动器以48dp的尺寸显示产品图标(边缘1dp),所以当你创建图标时,请使用48dp的尺寸,必要时可将其放大400%到192x192dp(边缘变位4dp)。

保持这样的放缩比即可在尺寸在缩小时保持边缘的锋利和对齐的正确性。

1:1单元网格

4:1单元网格

我们为这几种特定的关键线制定了预设规则:圆形线、方形线、矩形线、正交线和对角线。这个通用且简洁的元素调板形成的目的是统一产品图标和规范它们在网格上的布置。

下面我们来解剖那些组成产品图标的图形元素。对于一个给定的品牌,在这些图标中,元素的一致性是形成一个共享视觉语言的关键。熟悉这些元素可以更容易地理解每个logo和它们之间细微差异的特征。它也将帮助你学会识别logo设计的底层结构。

直接从上方看,组件相互重叠。

构建视角

显示图标构造中各成分的立体分解图。

material背景

最里层的元素。

material前景

在一层阴影之上的元素。

斑点色

施加到元素中一小部分的颜色。

泛色

从边到边施加到整个元素的颜色。

亮边

在一个材质元素的顶部边缘,染上与亮色混合的颜色,以减淡了原有的颜色。

暗边

在一个材质元素的底部边缘,染上与暗色混合的颜色,以加深了原有的颜色。

联系阴影

在一个上层元素周围的柔和阴影。

抛光

在所有元素之上,自左上到右下逐渐变淡,提供照明的柔和色彩。

在material环境中,虚拟光线照射在物体上并使其产生投影。从正上方发出的光使material元素产生上文提及的联系阴影,可以突出物体的上下边缘,而带有角度的光线则可以增强元素表面的质感。

顶部光源

45度光源

对于一个产品图标来说,来自顶部的光线会使其产生一个围绕上层元素的柔和阴影。左上阴影较轻而右下阴影较重,且总在外轮廓之内。

下坠式阴影指标

模式:普通

不透明度:20%

X偏移:0px

Y偏移:6px

模糊:6px

色彩:参考色中的阴暗色

material元素的上下两边提供一种深度感和表面感,元素还有1px的标准厚度。要注意所有边的距离都是从元素的内边缘算起的。

亮边只可用在所有元素的顶边,而暗边只可用在所有元素的底边。

高度:1dp

不透明度:20%

颜色:White(#FFFFFF)

颜色:参考色中的阴暗色

抛光层是45度虚拟光线照射的结果。它从左上延伸至右下,且只在图标边界之内。

渐变渐变

类型:放射

角度:45o

中点位置:33%

渐变1不透明度:10%位置:0%

渐变2不透明度:0%位置:100%

当颜色、暗度、和阴影改变时,每种颜色表现出的变化并不相同。元素的颜色或每条边缘的色调和暗影都需要根据相邻的颜色进行调整。为了确保颜色看起来较和谐,请遵循下列合适的各值。

借鉴现实材质的表现,我们简单约定表面质感和触感的表达。材质与颜色之间的相互作用也会产生许多的独特成分。

让色彩平铺在平面上,不要加上任何的边角装饰。

(上图)可取

(上图)不可取

每层元素都会有深度和边角,布局中不要超过两层,否则将因过于复杂而丧失重点。

折角(或叫狗耳)用来隐喻与传统纸张文档有关的表格或文件。不要放在左边,这样会产生破坏和谐的阴影。

划线能在不破坏形状的情况下营造层次感,不过要放在对称中心。不要用多条划线或是放在非中央位置。

被伸拉的折叠元素会更加立体,但斑点色应避免使用,会导致关键元素扭曲改变。

重叠的元素创造出独特的剪影,但边缘和阴影仅限于轮廓的内部。不要使用超过两个以上的重叠,会导致图标太复杂,缺乏重点。

手风琴式折叠的元素由两个折叠的元素相接而成,用来增加单个元素的尺寸。不要使用超过两个以上的手风琴式折叠,会导致图标太复杂,缺乏重点。

产品图标应保持原有几何形状,永远不要扭曲它。

系统图标或者UI界面中的图标代表命令、文件、设备或者目录。系统图标也被用来表示一些常见功能,比如清空垃圾桶、打印或者保存。

系统图标的设计要简洁友好,有现代感,有时候也可以带点趣味性。多重含义在一个简化图标上表达出来,还须保证在小尺寸下,图标仍然清晰易懂。

使用较粗的几何线条。

图标独特的品质依赖于对称性与一致性,且须兼顾鲜明和简洁。

简洁

直观

可操作

一致

系统图标以24dp的尺寸显示,当创建图标时,以能够100%的精确像素缩放设计图标是非常重要的。

100%缩放

800%缩放

图标网格已经形成一致的标准,且建立起统一元素放置的规范。此标准化带来了一个富有弹性而连贯的系统。

内容应该保持在活动区域以内,如有必要,内容可以延展至修饰区域之中,但不能超出。

活动区域

修饰区域

关键线形状是网格的基础,通过关键线,即可保持系统图标的一致性。

宽&高:18px

直径:20px

高:20px,宽:16px

高:16px,宽:20px

我们为这几种特定的关键线制定了预设规则:圆形线、方形线、矩形线、正交线和对角线。这个通用且简洁的元素调板形成的目的是统一Google系统图标和规范它们在网格上的布置。

构建

组成

一致的圆角半径(2px)是统一全系列系统图标的关键,不要修改它。

图标内部的角应为直角,也不要修改它。

外部角

內部角

一致的画笔宽度(2px)也是统一全系列系统图标的关键,请在内外部的边角上保持使用2px的宽度。

折线和角

笔划末端

内部角

极端情况下必要的校正能够增加图标的清晰度。如有必要,需与其他图标保持一致的几何形状,不要加以扭曲。

复杂

缩小

为了可读性和触摸操作的需要,图标周围可以留有一定的空白区域。

清空区域

放置

一致的图标可以有利于用户理解,在不同应用中也尽量使用已有的系统图标。

使用相同的画笔宽度以及方形的笔划末端。

不要使用不相同的画笔宽度以及非方形的笔划末端。

让图标显得正面且坚定。

不要倾斜、旋转图标,或是让图标显得立体。

简化图标使其更具清晰度和可读性。

不要过度拟物化使得图标复杂。

让图标更加几何化而变得更加显眼。

不要过度精细,使用过细画笔宽度。

使用一致的几何形状。

不要使用过于松散的形状。

让图标在像素点上(X、Y坐标值不包含小数)。

图标应有相等的宽高(e.g.24x24),避免扭曲。

图标不在像素点上。

宽高不等。

可用图标的标准不透明度在亮色背景上是54%(#000000)。可视等级较低的禁用图标的不透明度应为26%(#000000)。

可用图标的标准不透明度在暗色背景上是100%(#FFFFFF)。可视等级较低的禁用图标的不透明度应为30%(#FFFFFF)。

THE END
1.logo图标设计图案模板下载简单图标设计图案大全熊猫办公精心为用户挑选81张高清精美logo图标图片、支持专业级logo图标设计素材下载,更多风格的logo图标,免抠元素,卡通手绘素材图片、图标图案、免抠矢量图,尽在熊猫办公。https://www.tukuppt.com/speciall/logotubiao8846.html
2.标志图标ico图标图片标志图标ico图标素材六图网为您提供标志图标ico图标设计作品免费下载服务,您还可以找到标志图标ico图标图片、标志图标ico图标素材、标志图标ico图标模板等设计素材,我们为您提供标志图标ico图标图片下载,标志图标ico图标模板下载、标志图标ico图标素材下载等服务!https://www.16pic.com/sucai/3330247.html
3.设计图标免费设计图标背景图片设计素材模板下载2024新年字体创意设计图标矢量素材下载 网页设计图标标志矢量图素材免费下载 卡通学习毕业设计图标矢量素材下载 手机界面ui设计图标矢量素材 创意立体设计图标矢量素材下载 智能手机广告设计图标环绕矢量图素材https://www.zsucai.com/tag/SheJiTuBiao.html
4.图标设计素材图标设计图片元素觅元素是设计素材的免费下载网站,提供图标设计素材,图标设计图片,图标设计免抠素材设计元素,图标设计png图片透明背景等素材免费下载。https://www.51yuansu.com/tupian/tubiaosheji.html
5.图标设计全面指南对B 端设计来讲,独立设计图标的步骤是必不可少的,应该掌握的图标规范还是必须要懂的。 我们虽然没有 C 端那么多风格和技法的拖累,但想画好 B 端图标却多出了其它难点,那就是一个页面中出现的图标实在是太多了。 这就引发了我们要讲的第一个规范要点 —— “统一性”,所有同规格类型图标具有一致性的特征,...https://www.51zxw.net/TechArticleDetails.aspx?id=326
6.图标图标大全图标图标设计图标图标素材图标图标是由千图网正版图库提供下载服务,除此之外,还提供了图标图标,二维图标,相册小图标,请勿图标,母婴小图标等下载服务。找正版商用素材就上千图素材网!https://www.58pic.com/zt/21926.html
7.免费商标设计LOGO免费设计在线生成专注logo商标设计和知识产权保护服务6年! 为企业提供logo设计,商标注册查询以及免费的logo设计在线制作服务.注册品牌商标,就上LOGO世界!商标设计与注册一站式搞定!https://www.logosj.com/
8.图标设计LOGO设计设计建议: 袋鼠图标请参考天猫:哈吉斯,图标的风格, 预览201708041519582830.jpg 初稿完成;项目进入后期完善7 年前 作品隐藏中…#16 by 潘乐 作品隐藏中…#14 by 钟炬 作品隐藏中…#12 by 唐国强 作品隐藏中…#11 by 林思源 作品隐藏中…#10 by 安冬 作品隐藏中…#9 by 周金进 作品隐藏中…#7 by 张俊 作...https://www.logo123.com/contest/22150
9.图标设计风格和类型汇总图标类型千变万化,实际上万变不离「线性、面性、线面结合」3个方面, 再结合透明度、渐变、颜色叠加、质感、多维空间等表达方式设计而成。 线性图标 使用轻量线条勾勒的图标,趋向于精致、细致、锐度感,细线轻量、直线硬朗、曲线柔美。 1、极简风格 整体风格极为简约,还原图形的本质,外形简单却具有很强的识别性,在...https://www.jianshu.com/p/59424a4388c6
10.图标,icon图标,icon图标免费下载PPT分析数据图表分析图标设计元素素材下载 设计元素 407 166款旅游酒店宾馆温泉餐厅休闲购物线性ICON图标下载 实用图标 156 健康体检健身食谱热量ICON图标 实用图标 409 可爱扁平化UX工作流程ICON图标下载 实用图标 397 74款线性平面ICON下载图标下载 实用图标 http://www.wowops.com/design/icon/
1.深圳力英品牌设计公司力英品牌(深圳)设计公司是一家提供全球视野高度的品牌设计公司。专注高端企业LOGO设计,VI设计与升级,卡通IP设计,吉祥物,网站设计,画册设计,包装设计,导视系统设计及平面广告设计等.https://www.leezon.net/
2.创意logo设计创意logo设计图片创意logo设计模板觅知网为您找到230个原创创意logo设计图片,包括创意logo设计图片,创意logo设计素材,创意logo设计海报,创意logo设计背景,创意logo设计模板源文件下载服务,包含PSD、PNG、JPG、AI、CDR等格式素材,更多关于创意logo设计素材、图片、海报、背景、插画、配图、矢量、UI、Phttps://www.51miz.com/so-sucai/4065263.html
3.5种风格的icon图标免费下载,设计师必备!本文将为大家带来 5 种风格的 icon 图标,包括:扁平风格的简洁和明亮、线条风格的细致和精确、简约风格的极简主义、插画风格的生动有趣以及实物仿真风格的逼真和真实感,免费下载,设计师必备。对于许多设计师来说,设计图标或者寻找高质量的图标素材可能是一项耗时且费力的任务。因此,今天本文将与大家分享 5 种风格的 ...https://js.design/special/article/icon-style.html
4.ICON图标设计icon设计当然如果实在不能一笔也别勉强,设计图标的时候需要考虑到使用场景及规则,所有的视觉风格应该有相关联的点,比如线条的粗细,圆角的统一,断点的统一等。 总结: 最后,功能图标和桌面上的应用图标不是一回事,比如应用图标非常需要设计师打造一枚个性十足的icon,来引起用户的注意。 https://blog.csdn.net/LZNxiaoxiang/article/details/108301048
5.图标icon设计图片专题,图标icon设计下载雨伞下的一家人共享分:40 人物图标设计共享分:40 人物图标设计共享分:40 人物图标共享分:40 创意设计图标共享分:40 创意图标共享分:40 创意图标共享分:40 创意图标共享分:40 创意设计图标共享分:40 蜜蜂元素图标共享分:40 招聘创意图标共享分:40 商务图标矢量设计共享分:40...https://www.nipic.com/zhuanti/1840558_8.html
6.功能设计图标的风格有哪些图标是UI设计中除了文字之外最不可或缺的视觉元素,图标在我们的生活中可以说是随处可见,不论是出口入口,还是我们手机上使用的app,它们都是图标的应用。那么你知道设计图标的风格都有哪些吗?下面我来分享一些关于设计图标风格的相关经验。 功能图标在图标设计中占据非常重要的作用,几乎存在于每一个应用界面中,无论是...https://modao.cc/design/styles-of-functional-design-icons.html
7.设计图标素材设计图标图片设计图标模板设图网为您提供设计图标设计素材、设计图标图片、设计图标背景、设计图标设计元素、设计图标模板在线下载。更多设计图标设计素材,就选设图网。https://www.shetu66.com/so-sucai/shejitubiao/
8.LOGO和图标,你真的明白两者的异同点么?优设网比如 Instagram 的图标和LOGO就是一样的,而Twitter 现在差不多也是这样了。而开头提到的Netflix 公司则通过这次设计,在Twitter 上声明了两者之间的差异,并强调新的图标“并非新的LOGO”,新的图标中就是一个字母 N 只是基于现有LOGO的一个创新设计,而Netflix的 LOGO 依然不变。https://www.uisdc.com/everything-about-logos-and-icons/
9.设计图标(designicons)图标icon免费下载网页设计师(Web designer),免费的(Free),装饰者(Decorator),平面设计师(Graphic designer),文件夹(Portfolio)https://www.aigei.com/view/95432.html
10.图标设计图片素材图标设计图片大全智能精选为您提供丰富的图标设计图片素材,图标设计创意,图标设计图片素材下载。助力您对于图标设计创意的创意设计灵感,充实饱满作品,查找更多创意作品选择摄图网下载https://699pic.com/image/382493.html
11.免费图标设计素材下载图标设计图片素材下载生活图标设计,平面图标设计图下载 药品图标设计,化学图标设计图案必备 图标设计,css图标代码下载 图标html代码,通用图标设计模板 图标设计制作,GitHub图标素材 扁平图标设计,简单日常生活图标设计 图标动效设计,电池图标创意设计素材 css图标代码,彩色图标设计制作 照片图标设计,实用立体图标素材 立体图标设计,简约png图标免费...https://www.17sucai.com/pins/tag/13252.html
12.图标设计中的图标类型全面分享装饰性图标只是用来增强界面的整体视觉体验,它没有任何功能。这类图标通常是为了迎合用户的喜好和期望而设计的,通过丰富视觉体验来增强内容的观赏性,既能吸引和留住用户,又能让整个用户体验更加积极向上。大家最熟悉的就是滴滴出行APP中的“汽车图标”。 https://www.yutu.cn/news_51746.html
13.主图图标模板主图图标设计模板用Canva可画,轻松完成主图图标设计 “造节”是电商平台的最好写照,商家们几乎每周都要为各种促销活动做准备,其中,为产品“量身定做”的主图图标则是必备的物料。在信息愈发透明化的线上,若想吸引用户点击浏览商品,一张合适的主图图标是最基本的,它就相当于视频封面,用户点击进来后才有可能进一步去了解商品详情、...https://www.canva.cn/templates/search/5Li75Zu--5Zu--5qCHX64/
14.2022图标icon设计趋势大全!你pick哪一个?分享2022年15个图标icon设计趋势,让你大饱眼福,并附有Pixso资源社区的图标模板,让我们一同来享受这场由Pixso带来的视觉盛宴吧。 图标icon元素在UI界面中随处可见,是每个UI设计作品集中不可缺少的示例之一,也是UI设计的一个热搜关键词但各不相同,优秀的图标设计能够让设计项目更加出彩,因此,图标设计是值得UI设计师花...https://pixso.cn/designskills/2022tubiaosjqs/
15.图标大全图标下载设计素材AB素材网AB素材网:免费提供各类图标大全、图标下载、设计素材、图标素材等其他设计素材,助力网页设计师腾飞(Sc.AdminBuy.Cn)。https://sc.adminbuy.cn/
16.logo设计价格标志设计欣赏设计logo多少钱好的logo设计费用是多少?一品威客平台上的logo设计团队专业,价格透明,深受客户满意认可,可以根据自己的价格预算来选择logo设计任务和团队。https://www.epwk.com/fuwu/logo/