泰顺网站建设:材料设计调色板,工具和资源的最佳列表

2019.07.26 mf_web

152

Google的Material Design使开发和设计变得更加容易。以下是设计人员的11种Material Design调色板,工具和资源的列表。

由于Google的Material Design被用于许多网站和应用程序,因此设计师不可避免地将材料设计原则与突出的配色方案区分开来,以区分他们的品牌。值得注意的是,Material Design的颜色大胆而明亮。

根据材料设计的官方文件:

“材料设计中的色彩灵感来自大胆的色调,与柔和的环境,深色的阴影和明亮的高光并置。”

颜色是品牌标识最重要的元素之一。例如,UBER中的黑白主题或Facebook上的蓝白主题。如何明智地在UI设计中使用颜色来创建品牌标识?是否有比其他颜色更有效的颜色?哪些工具最有帮助?我已经汇总了一系列有用的材料设计颜色工具,可以帮助回答这些问题。

材料设计颜色工具

1. Material.io

Material.io

特点:完整的配色方案

Material.io是Google的官方材料设计色彩匹配工具。用户只需在调色板中选择自己喜欢的颜色,它就会立即显示在App界面上。使用右下角的颜色方案调色板应用当前原色,辅助颜色和文本颜色的颜色编号。

提示:

(1)在Material Design中,主要颜色是应用程序中最常出现的颜色。辅助颜色是用于强调UI关键部分的颜色。

(2)二次色最适合用于:

  • 按钮,浮动操作按钮和按钮文本

  • 文本字段,光标和文本选择

  • 进度条

  • 选择控件,按钮和滑块

  • 链接

  • 标题

2.材料颜色

材料设计调色板

  • 颜色预览

  • 支持下载

  • 在线分享

材质颜色不仅是调色板,还是图标工具和颜色工具。材质颜色的主要特征是它允许用户选择颜色并实时预览颜色效果。它操作简单易行。您只需选择1或2种颜色,系统将匹配一组APP UI颜色方案。值得一提的是,该网站提供各种格式的在线共享和下载。

3.材料UI

材质UI

特征:

  • 可以直接复制和粘贴颜色代码

  • 支持多种颜色格式切换

该工具主要面向希望快速设计符合Material Design标准的颜色代码的开发人员和设计人员。用户可以单击颜色框,它会自动将相应的颜色代码复制到剪贴板。该网站也称为颜色“备忘单”,它将所有可用颜色组合在一起,供用户选择。

4.材料设计调色板生成器

材料设计调色板生成器

特点:定制色板

如果您对自定义色板感兴趣,请尝试使用Material Design Palette Generator。要手动设置颜色,请键入颜色代码或从颜色对话框中的调色板中选择颜色,可以通过单击打开调色板中的颜色框来打开颜色。Material Design Panel Builder将根据您选择的颜色生成样本。

5.颜色 - 物化

颜色 - 物化

特点:支持色彩调整

这是一种基于材料设计基色的调色板。每种颜色都定义为基本颜色类和可选的增亮或变暗类。

Android材质颜色资源

1. Sketchappsources

Sketchappsources

该站点提供了各种与设计相关的免费资源供下载。您可以在此处找到适用于Android材料设计的调色板资源,并免费下载。

2. Android Material Design Colors

Android材质设计颜色

这是Github上用户提供的Android材质颜色代码。每种颜色涵盖各种不同的颜色代码。直接复制和粘贴模式为设计人员节省了大量时间。

材料设计应用

1. Google环聊

谷歌,视频群聊

Google Hangouts是Google的产品之一,遵循Material Design的设计原则和配色方案。这是Google材料设计的典型案例研究,有效地应用了材料设计配色方案。

2.天气时间表

天气时间表

本申请的颜色匹配与上述材料设计颜色工具的颜色匹配原理非常一致。主色,二次色,文字色以及纽扣色的组合非常独特和大胆。

材料设计网站

1.谷歌

谷歌

谈到Material Design,我们怎么能不提到Google呢?这是其自身材料设计指南的最佳实践。材料设计风格的特点是干净的排版和简单的布局,易于理解,因此用户可以专注于内容。

2. WhatsApp

WhatsApp的

WhatsApp是世界各地人们喜爱的及时沟通工具,在网页设计和移动应用程序设计中很好地实现了材料设计的概念。在色彩方面,WhatsApp没有使用色彩丰富的调色板作为主色调,选择了更加宁静的灰色和绿色混合。

这些Material Design颜色工具和资源将帮助您进入构建网站或应用程序的下一步。

实际上,并不难。要创建包含Material Design的网站或应用程序,您只需要一种材质设计风格的原型设计工具。在这里,我对Mockplus投票,因为它在网站原型设计和移动应用程序原型设计方面具有独特的优势。结合Mockplus的内置材料设计组件和我在上面总结的材料设计配色方案,设计材料设计风格的应用程序或网站不再是一项艰巨的任务。

Mockplus

摘要

颜色作为品牌标识中最重要的元素,在实际使用时需要仔细考虑。如何正确使用颜色搭配可能很棘手,但使用上面概述的Material Design颜色工具和资源进行了简化。

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP