Material design 简单培训

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

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

Material design定义

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

配色

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

Material design 简单培训_第1张图片
调色板部分示例

选取主题颜色

Material design 简单培训_第2张图片
主题颜色示例

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

主题颜色使用

Material design 简单培训_第3张图片
使用示例

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

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

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

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

文本颜色和背景颜色

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

白纸黑字

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

黑纸白字

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

彩色背景下

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

选取主题

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

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

深色主题示例

Material design 简单培训_第6张图片
深色主题示例
暗色调主题示例

浅色主题示例

Material design 简单培训_第7张图片
浅色主题示例
浅色调主题示例

#图标

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

图标状态和不透明度参数

Material design 简单培训_第8张图片
Paste_Image.png

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

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

Material design 简单培训_第9张图片
单元格比例

标准线说明

Material design 简单培训_第10张图片
标准线示例 1
Material design 简单培训_第11张图片
标准线示例 2

几何图形

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

图标解剖

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

Material design 简单培训_第12张图片
组成示例(左)、结构示例(右)

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

设计原则

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

Material design 简单培训_第13张图片
系统图标示例

标准线说明:

Material design 简单培训_第14张图片
标准线说明示例
Material design 简单培训_第15张图片
Paste_Image.png
Material design 简单培训_第16张图片
Paste_Image.png

照相机示例:

Material design 简单培训_第17张图片
照相机示例

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

Material design 简单培训_第18张图片
应用快捷图标

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

Material design 简单培训_第19张图片
应用快捷图标示例 1

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

Material design 简单培训_第20张图片
应用快捷图标示例 2

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

Material design 简单培训_第21张图片
群组图标示例 1
Material design 简单培训_第22张图片
群组图标示例 2

#形象化的描述


#排版

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

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

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

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

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


#布局


你可能感兴趣的:(Material design 简单培训)