图标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.CSS修改png图标颜色2. 升级功能:改变图标颜色 对于上述html结构,我们想要插入一个黑色的定位图标。而目前的素材只有一个蓝色的图标 location.png .icon{display:inline-block;position:relative;height:30px;width:40px;}.icon-del{background:url(location.png)no-repeat;height:100%;width:100%;display:inline-block;} 这么写...https://www.jianshu.com/p/f2cc9c93dd9b
2.关于软件图标颜色的问题关于软件图标颜色的问题我发现现在不管是word,excel,还是ppt,打开以后图标都是wps的蓝色图标,辨识度太低,当我多开应用在三种文件切换的时候经常找不到文件,这是你们把三种文件合并以后导致的,建议你文件可以合...https://www.wps.cn/learning/room/d/183879
3.颜色识别图标图片免费下载颜色识别图标素材颜色识别图标模板千图网为您找到352359张颜色识别图标相关素材,千图网还提供颜色识别图标图片,颜色识别图标素材, 颜色识别图标模板等免费下载服务,千图网是国内专业创意营销服务交易平台,一站式解决企业营销数字化、协同化,实现营销转化效果增长!https://www.58pic.com/tupian/yanseshibietubiao.html
4.教您如何选择APP图标的颜色产品的目标用户是什么,产品的个性是什么,图标将会出现在用户设备上的什么地方,等等,这些都是在选择图标颜色时需要考虑的问题。 1、红色使人想到兴奋,青春,强烈。 2、橙色是一种友好、欢快的颜色。越来越多的公司在选择图标颜色时开始避开常见的红色和蓝色,所以橙色逐渐成为一种流行的图标颜色。 http://www.lei-niao.com/news_5743.html
5.各种颜色的图标图案大全熊猫办公精心为用户挑选80张高清精美颜色图标图片、支持专业级颜色图标设计素材下载,更多风格的颜色图标,免抠元素,卡通手绘素材图片、图标图案、免抠矢量图,尽在熊猫办公。https://www.tukuppt.com/speciall/yansetubiao0419.html
6.怎么改变图标字体颜色?怎么改变图标字体颜色? 一加Ace 2 Pro 怎么改变图标字体颜色? #ColorOS 14.0https://bbs.oneplus.com/thread/1450498081547091974
7.Win10电脑文件夹图标颜色怎么改?文件夹颜色方法在Win10系弘下,文件夹的图标颜色清一色的都是黄色,相信很多朋友都不太喜欢了,那么如何更改颜色呢?这里小编给大家分享一个方法,有需要给文件夹改颜色的朋友可以学习一下呀! 需要的一款工具:更改文件夹图标工具 1、先安装这个工具,安装后打开是这样的 http://m.winwin7.com/JC/15870.html?ivk_sa=1024320u
8.华为手机桌面图标变成灰色的了怎么办?公司事务在手机桌面选择设置。打开设置后滑动到最下方位置。选择打开辅助功能。选择进入无障碍选项。在这个界面选择关闭颜色反转。关闭手机颜色反转功能,返回桌面即可查看图标颜色恢复。 演示机型:华为P40 系统版本:Android 11 以华为P40,Android 11为例。 1、在手机桌面选择设置。 http://www.027yaju.cn/gongsishiwu/343717.html
9.颜色表图标素材免费下载觅元素为您提供颜色表图标素材免费下载,此作品编号为jjrqxupuai,图片大小为 0.01M,图片规格为 512*512 | 72dpi,下载更多图片素材就来觅元素!https://www.51yuansu.com/sc/jjrqxupuai.html
1.图标的颜色怎么修改呀·Issue#330·PanJiaChen/vue我使用了@yuanyuanyuan给的建议从http://iconfont.cn/ 下载默认图标是可以通过color改变图标颜色(没有fill属性),但发现其中也有不可以通过color改变图标颜色(有fill属性)。 其中“如果您选择一个把颜色调整为白色或其他颜色,就可以看到变色效果了”,我也实践了一下,我这边是不可以的(有fill属性) 然后我猜想可能和...https://github.com/PanJiaChen/vue-element-admin/issues/330
2.ChangeColor下载图标颜色修改软件v1.0绿色版ChangeColor是一款非常简单且实用的图标颜色修改软件,顾名思义,通过这款软件,可帮助用户快速将图标颜色进行修改,有的时候,我们可能会用到不同颜色的图标,想要修改这些图标的颜色,就可以用到这款软件,其具备了简洁直观的操作界面,旨在为用户一个一套最简单的图标颜色修改方案,只需添加图片,一键即可调整图片颜色,根据实...https://www.xiazaiba.com/html/114346.html
3.如何制作自己的APP图标资讯你有没有想过流行的APP图标是如何蓬勃发展的?可识别的风格,品牌色彩,没有不必要的元素。由于可识别性,用户不仅可以按功能对应用程序进行排序,还可以按图标颜色对应用程序进行排序。 那么如何为APP设计图标呢? 创建应用程序并为其命名是非常重要的过程。它们脱颖而出,掩盖了应用程序的图标。但是用户会通过图片来识别...https://www.appzzgs.cn/newsinfo.php?id=131
4.纯css修改图标颜色的五种方式css改变图标颜色纯css修改图标颜色的五种方式 原图 我们以目标色红色为例,逐一看是如何实现的 利用filter属性进行修改 1、filter:drop-shadow+ transform 移位变色 .img-wrapper-1 { overflow: hidden; } .img-wrapper-1 img { transform: translateY(-100%); filter: ...https://blog.csdn.net/weixin_42202310/article/details/129209403
5.定义图标和主题颜色PWA 可以为标题栏定义一组图标和主题颜色。 定义图标 在Windows 中,用户可以通过图标识别应用。 图标显示在任务栏、“开始”菜单中,以及系统设置等其他位置。 PWA 可以配置操作系统应使用哪些映像文件在这些不同位置显示图标。 可以根据上下文提供多个映像供操作系统选择。 在Web 应用清单文件中,应用图标是使用 icons ...https://learn.microsoft.com/zh-cn/microsoft-edge/progressive-web-apps-chromium/how-to/icon-theme-color
6.2022图标icon设计趋势大全!你pick哪一个?数字化时代背景,创建悬停状态或动画效果的icon图标能给用户带来强烈的科技感。提及网络图标,我们最常见的便是通过一组配对的图标,Pixso资源社区的edit类图标,在一个填充了黄色的图标周围,创建没有颜色填充的图标。如果UI设计师想要在图标上创建图表的效果,就需要考虑到图标颜色填充这一点。 https://pixso.cn/designskills/2022tubiaosjqs/
7.iOS18使用技巧:如何更改iPhone桌面图标颜色在iOS 18中,苹果引入了多项个性化功能,包括自由排列桌面应用程序(App)和更改桌面图标颜色。如果你想让iPhone桌面更具个人风格,更新到iOS 18后,可以根据自己的壁纸颜色轻松调整图标颜色。无论你想使用浅色、深色或其他颜色,都能一键应用到桌面上的所有App和小工具。 https://www.fonegeek.cn/change-iphone-app-colors-theme-ios-18.html
8.如何在Excel中更改条件格式的图标集颜色?当您使用Excel中设置的条件格式图标时,有三个颜色图标。 如果相对值大于所有值的67%,则图标显示为带有绿色的向上箭头;如果相对值大于所有值的33%但小于所有值的67%,则图标显示为带有黄色的水平箭头。值小于所有值的33%,该图标显示为带有红色的向下箭头。 您是否曾经尝试过更改这些图标设置的颜色,如下所示的屏幕截...https://zh-cn.extendoffice.com/documents/excel/4765-excel-change-icon-set-color.html
9.Instagram更新图标,颜色越来越刺眼了5月16日,Meta公司旗下知名社交平台 Instagram 更新应用程序,其中最为明显的变化是,更新后的App图标颜色变得更加明亮鲜艳。这是自2016年 Instagram 将写实的「立...https://www.logonews.cn/instagram-new-colors.html
10.Noticons轻松为Notion添加可自定义颜色背景的个性化图标和其他图标网站相比,Noticons 不仅仅是提供给你可以直接使用的图标,更重要的是它可以让你定制图标的颜色,你会看到在图标搜索框的下方会有一个颜色工具,你可以用它来改变每个图标的颜色,可以设置图标颜色以及对应的背景颜色,还有一个很方便的地方就是它会记录下你之前选择过的颜色,这样当下次再需要图标就不需要再设置...https://www.v1tx.com/post/noticons/
11.win10正式版开始菜单图标颜色变了怎么办?windows10Windows系列今天正聊天呢 发现我的win10系统的电脑下面的任务栏和开始菜单和里面的图标颜色都变成了橙色的,看着特别别扭,想改回装机时候的默认蓝色。 1、以前在win7系统的时候也调整过这个主题颜色,所以轻车熟路在桌面上右键点击鼠标,然后选择个性化。 2、打开的对话框中的【背景】一栏中,在右侧可以看到预览中的效果和我们电脑...https://www.jb51.net/os/win10/364410.html
12.支付宝知乎AppStore的图标为什么都是蓝色的?译者按:天空的颜色是蓝色的,大海的颜色是蓝色的,支付宝和饿了么的 app 图标颜色也是蓝色的。为什么蓝色这么好看?为什么那么多 app 的主色调是蓝色? 微信公众号 AppSo 今天分享的这篇文章,带你进入蓝色世界,了解蓝色背后的故事。 你有没有发现,很多图标都是蓝色的,比如支付宝、饿了么、App Store、Safari、LinkedI...https://www.36kr.com/p/5088279
13.电脑图标字体颜色设置好酷屋教程网小编为您收集和整理了电脑图标字体颜色设置的相关教程:电脑图标字体颜色设置怎么弄,下面我们来教教你吧。1、鼠标右键单击桌面空白处,选择个性化,进入页面2、点击下方的窗口颜色,选择高级外观设置3、弹出窗口,将项目设置为已选定的项目4、然后选择字体,设置字体 ...https://www.haoku5.com/shuma/640d6f4d308c6e2ec80e7717.html