Material design 简单培训

此文章主要内容包括配色、图标、文本、布局,比较实用的部分。

参考:Material design 官网Android developer design 官网

Material design定义

Material design主要由光线、阴影、鲜艳的色彩组成,加之以动画特效、声音等相辅,形成鲜明的视觉语言,将经典的良好设计原则与技术和科学的创新相结合,这是材料设计。

配色

选择调色板
每一个调色板的组成是将每一个颜色按照饱和度划分为10个等级,并提供4个不同饱和度的强调色。其中饱和度500的为主色,强调色饱和度以A开头。

调色板部分示例

选取主题颜色

主题颜色示例

在主调色板选取三种颜色,以饱和度500为主色,其他两种为备用色;在强调调色板中选取一个强调色,强调色以A开头。

主题颜色使用

使用示例

主色调:应该被整个app广泛使用。

  • 工具栏颜色
  • 状态栏颜色
  • 导航栏颜色
  • 文字颜色

强调色:应该被用于操作或提示。

  • 文本字段和游标
  • 文本选择
  • 进度条
  • 选择控件,按钮和滑块
  • 链接

文本颜色和背景颜色

文本可以以不同的不透明度显示,以表达某些信息相对于其他信息的重要性。用于文本的不透明度级别取决于您的背景是更暗还是更浅。

白纸黑字

  • 最重要的文本的不透明度为87%。
  • 次要文本(在视觉层次结构中较低)具有54%的不透明度。
  • 文本提示(如文本字段和标签中的文本提示)和禁用文本的视觉突出性甚至更低,透明度为38%。
  • 分割线使用12%不透明度的颜色
白纸黑字示例

黑纸白字

  • 最重要的文本的不透明度为100%。
  • 次要文本(在视觉层次结构中较低)具有70%的不透明度。
  • 文本提示(如文本字段和标签中的文本提示)和禁用文本的视觉突出性甚至更低,透明度为50%。
  • 分割线使用12%不透明度的颜色
黑纸白字示例

彩色背景下

  • 使用100%不透明度的白色字体

选取主题

主题分为深色和浅色主题,可以将主题样例中的工具栏和导航栏状态栏替换为主题颜色。形成自己的风格。

1.状态栏
2.应用栏
3.背景
4.卡片、对话框

深色主题示例

深色主题示例
暗色调主题示例

浅色主题示例

浅色主题示例
浅色调主题示例

#图标

图标应该使用简单的几何形状来直观地表示核心思想,能力或主题。图标主要分为三类:应用图标、系统图标、应用更快捷图标

图标状态和不透明度参数

Paste_Image.png

应用图标
应用图标大小为:48dp*48dp,边缘4dp,图标区域40dp

图纸大小说明:为了便于设计人员设计和着色,可以将背景放大4倍后操作。如下图

单元格比例

标准线说明

标准线示例 1
标准线示例 2

几何图形

建议选取圆,正方形,长方形,直角方法,和对角线等作为基础元素进行设计。

图标解剖

1.抛光
2.背景色
3.前景色
4.图标颜色
5.阴影

组成示例(左)、结构示例(右)

系统图标
系统图标大小为:24dp*24dp,边缘2dp,图标区域20dp
系统图标的设计简单化,现代化,感觉友好,有时也很奇特。

设计原则

形状上是使用粗体的几何图案,图标尽量保持对称和一致。要求:简单、直观、可用、一致。为了视觉上更清晰,采用1比1大小设计。

系统图标示例

标准线说明:

标准线说明示例
Paste_Image.png
Paste_Image.png

照相机示例:

照相机示例

应用快捷图标
应用快捷图标大小为:48dp*48dp,边缘2dp,图标可用区域44dp,背景色Material Grey 100 (#F5F5F5),没有阴影。

应用快捷图标

操作图标示例
大小:48dp
边缘:2dp
图标区域:24dp
图标可用区域:44dp

应用快捷图标示例 1

头像图标示例
大小:48dp
边缘:2dp
头像区域:44dp

应用快捷图标示例 2

群组图标示例
大小:48dp
边缘:2dp
图标区域:30dp
图标可用区域:44dp

群组图标示例 1
群组图标示例 2

#形象化的描述


#排版

字体 Roboto 和 Noto 是 Android 和Chrome 上的标准字体。

  1. 语言类型:
  • 英语和类英语文字(拉丁文、德文和斯拉夫文)
  • 密集型文字(中文、日文和韩文)
  • 高型文字(南亚、东南亚和中东语言)
  1. 应用中不同场景中的文字大小:
  • 应用栏
    标题样式,中等20sp

  • 按钮
    英文:中等14sp,全部大写
    中文:中等15sp,全部大写
    阿拉伯文:粗体15sp

  • 副标题
    英文:常规16sp(移动设备),15sp(电脑)
    中文:常规17sp(移动设备),16sp(电脑)
    阿拉伯文: 常规17sp(移动设备),16sp(电脑)

  • 主体文本
    英文:常规14sp(移动设备),13sp(电脑)
    中文:常规15sp(移动设备),14sp(电脑)
    阿拉伯文:常规15sp(移动设备),14sp(电脑)


#布局


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,312评论 5 473
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,578评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,337评论 0 333
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,134评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,161评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,303评论 1 280
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,761评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,421评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,609评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,450评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,504评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,194评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,760评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,836评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,066评论 1 257
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,612评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,178评论 2 341

推荐阅读更多精彩内容