绿色排版工具|热门专题|网站地图|移动官网
您的当前位置:网站首页 > 产品经理 > 正文

MaterialDesign配色难?11条设计资源给你灵感!

来源:[db:来源] 编辑:admin 时间:2018-05-14 21:32:45 阅读:

自Material Design的设计理念推出以来,Google的内部设计语言实现了从古老的用户界面向现代网络的现代外观的转变。最大的改变之一是使用大胆鲜明的颜色。Material Design的色彩指南将其颜色风格描述为“受到柔和环境,深色阴影和明亮亮点并置的大胆色调的启发。”

越来越多的网站和App在设计中运用到材料设计,并趋向于使用谷歌官方的材料设计色彩搭配。Material design的颜色概念大多借用了扁平设计的趋势。它配色大胆明亮。字体排版也跟simple sans serifs字体一样遵循扁平主题。

根据Material design的官方文件:

“色彩从当代建筑、路标、人行横道以及运动场馆中获取灵感,由此引发出大胆的颜色表达激活了色彩,与单调乏味的周边环境形成鲜明的对比。强调大胆的阴影和高光。引出意想不到且充满活力的颜色。”

颜色是品牌标识中最重要的元素之一。例如Facebook中的蓝色或UBER中的黑白主题。而在我们自己的设计中,使用哪种工具,选择哪种颜色能最好的突出品牌感,也是一件头疼的事情。以下是我整理的材料设计的颜色工具,希望能助你一臂之力。

材料设计颜色工具

1. Material.io

MaterialDesign配色难?11条设计资源给你灵感!

网站特点:完整的配色方案

地址:http: www.material.io

Material.io是谷歌官方的材料设计配色工具。用户只需要在右侧调色盘中选中喜欢的颜色,左侧界面区域会立即显示该种颜色在App界面中所呈现的效果。右下方的配色方案区域会显示当前的主色彩、次要色彩和文本颜色的色号。而你需要的就是将它提供的配色方案运用到你的App设计中。

Tips:

(1)在Material Design中,主要颜色是指在您的应用中最常出现的颜色。一个辅助色是指用来强调自己的UI的关键部分的颜色。

(2)次要颜色最适合用于:

  • 按钮,浮动操作按钮和按钮文本
  • 文本字段,光标和文本选择
  • 进度条
  • 选择控件,按钮和滑块
  • 链接
  • 标题

2. Material Colors

MaterialDesign配色难?11条设计资源给你灵感!

网站特点:

  • 配色即时预览
  • 支持下载
  • 在线分享

地址:https://www.materialui.co/colors

Material Colors不仅是个调色板,也是图标工具和色彩工具。Material Palette主要特色是可以让用户一边选择颜色同时还能实时预览效果图,并且用户只需要选择1个或2个颜色后系统会自己匹配出一组APP UI 配色方案。值得一提的是,这个网站提供了在线分享和多种格式的下载。

3. Material UI

图文精选:

栏目分类

Copyright©2012-2019 小蚂蚁信息网版权所有 粤ICP备14061018号-1


郑重声明:本网站资源、信息来源于网络,完全免费共享,仅供学习和研究使用,版权和著作权归原作者所有,如有不愿意被转载的情况,请通知我们删除已转载的信息。

Top