Tim Wu

Tim Wu

Icons
Design | 设计

Icons

Material icons use geometric shapes to visually represent core ideas, capabilities, or topics. Material 图标使用几何图形来表现核心思想、功能、题目。 Product icons are the visual expression of a brand’s products, services, and tools. 产品图标 :是品牌用来表达服务和功能的视觉表现。 System icons represent a command, file, device, directory, or common actions. 系统图标 :表示命令、文件、设备、目录或者某些常规的动作 Sizing
32 min read
Icons
Design | 设计

Icons

Material icons use geometric shapes to visually represent core ideas, capabilities, or topics. Material 图标使用几何图形来表现核心思想、功能、题目。 Product icons are the visual expression of a brand’s products, services, and tools. 产品图标 :是品牌用来表达服务和功能的视觉表现。 System icons represent a command, file, device, directory, or common actions. 系统图标 :表示命令、文件、设备、目录或者某些常规的动作 Sizing
32 min read
Color
Design | 设计

Color

Color in material design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights. Material takes cues from contemporary architecture, road signs, pavement marking tape, and athletic courts. Color should be unexpected and vibrant. 在 Material Design 中色彩的灵感来自于在静止的环境中使用大胆的色彩对比,深沉的阴影、明亮的高光。材料需要从当代的建筑,路牌,路标,运动场上的规则线等进行隐射(功能与设计统一、简单、
11 min read
Color
Design | 设计

Color

Color in material design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights. Material takes cues from contemporary architecture, road signs, pavement marking tape, and athletic courts. Color should be unexpected and vibrant. 在 Material Design 中色彩的灵感来自于在静止的环境中使用大胆的色彩对比,深沉的阴影、明亮的高光。材料需要从当代的建筑,路牌,路标,运动场上的规则线等进行隐射(功能与设计统一、简单、
11 min read
Elevation and shadows
Design | 设计

Elevation and shadows

Material Design 中的物体和现实中的物体具有相同的性质。在现实世界中,物体可以堆叠,或两个物体之间可以进行粘贴,但同时,物体之间是无法相互穿透。物体的阴影是光线投射到它身上所产生的。 这些特质行程的空间模型来自于现实,所以用户对此会非常熟悉熟悉,所以我们可以直接将这些特性运用到整个应用中。而高度和阴影的概念就是为了支撑这种空间模型。 高度(安卓) 高度指的是两个物体之间在z轴的相对高度或距离。 规范 * 高度的测量单位与x轴y轴的测量单位是相通的,主要是使用dp这个单位。因为所有的材料元素都有着1dp的厚度,所以高度的测量,是从一个材料到另一个材料的顶部之间的距离。 * 一个子对象的高度与他的父对象的高度息息相关。 以下是一些Android应用相关的事例图像。 两个物体之间的多个高度测量 静止高度 Material 中所有的对象,不论是多大的尺寸,都有静止高度,有的是默认高度,这高度是不能改变的。如果有物体改变了它的高度(因为操作),等操作完成后它也会尽快返回到这个静止高度。 桌面的静止高度应该小于2dp,用来适应鼠标和
10 min read
Elevation and shadows
Design | 设计

Elevation and shadows

Material Design 中的物体和现实中的物体具有相同的性质。在现实世界中,物体可以堆叠,或两个物体之间可以进行粘贴,但同时,物体之间是无法相互穿透。物体的阴影是光线投射到它身上所产生的。 这些特质行程的空间模型来自于现实,所以用户对此会非常熟悉熟悉,所以我们可以直接将这些特性运用到整个应用中。而高度和阴影的概念就是为了支撑这种空间模型。 高度(安卓) 高度指的是两个物体之间在z轴的相对高度或距离。 规范 * 高度的测量单位与x轴y轴的测量单位是相通的,主要是使用dp这个单位。因为所有的材料元素都有着1dp的厚度,所以高度的测量,是从一个材料到另一个材料的顶部之间的距离。 * 一个子对象的高度与他的父对象的高度息息相关。 以下是一些Android应用相关的事例图像。 两个物体之间的多个高度测量 静止高度 Material 中所有的对象,不论是多大的尺寸,都有静止高度,有的是默认高度,这高度是不能改变的。如果有物体改变了它的高度(因为操作),等操作完成后它也会尽快返回到这个静止高度。 桌面的静止高度应该小于2dp,用来适应鼠标和
10 min read
Material properties
Design | 设计

Material properties

Material 有着一些确定的特征和固有的行为。了解这些属性可以更好的将 Material Design 原本设计的初衷融入到你的设计中去。 物理属性 Material Design 中材料有着可定制的长度和宽度(单位:dp),但厚度都是统一的1dp。 正确:长度和宽度是可以定制的,并且所有的材料厚度都为1dp 错误: 材料投射的阴影 材料的阴影是从各个材料之间的相对高度(z轴方向)产生的自然结果。 正确:阴影是通过材料的相对高度产生的。 错误: 主题内容是呈现在材料上的,材料的颜色和形状是可以根据需求而改变的。而且内容的增加不会改变材料的厚度。 正确:材料可以显示各种形状和颜色 内容的行为可以独立于材料,但是范围会受到材料的范围受到限制。 正确:内容的行为可以独立于材料,但是范围会受到材料的范围受到限制。 材料是坚固的。 输入事件没有办法穿透材料,只能作用在预定的材料主体上。 正确:输入事件只影响到最上方的材料上。 错误:输入事件穿透了材料。 多个材料元素无法同时占用
3 min read
Material properties
Design | 设计

Material properties

Material 有着一些确定的特征和固有的行为。了解这些属性可以更好的将 Material Design 原本设计的初衷融入到你的设计中去。 物理属性 Material Design 中材料有着可定制的长度和宽度(单位:dp),但厚度都是统一的1dp。 正确:长度和宽度是可以定制的,并且所有的材料厚度都为1dp 错误: 材料投射的阴影 材料的阴影是从各个材料之间的相对高度(z轴方向)产生的自然结果。 正确:阴影是通过材料的相对高度产生的。 错误: 主题内容是呈现在材料上的,材料的颜色和形状是可以根据需求而改变的。而且内容的增加不会改变材料的厚度。 正确:材料可以显示各种形状和颜色 内容的行为可以独立于材料,但是范围会受到材料的范围受到限制。 正确:内容的行为可以独立于材料,但是范围会受到材料的范围受到限制。 材料是坚固的。 输入事件没有办法穿透材料,只能作用在预定的材料主体上。 正确:输入事件只影响到最上方的材料上。 错误:输入事件穿透了材料。 多个材料元素无法同时占用
3 min read
Environment
Design | 设计

Environment

3D 空间 Material 的设计环境是3D 立体的,也就意味着所有的物体都是含有x,y,z三个维度。z轴是垂直于显示器,是面朝向用户方向的延伸。每一块材料都在垂直方向有着自己的位置,并且具有统一的标准厚度,厚度为1dp。注:dp是一基于density的抽象单位,如果一个160dpi的屏幕,1dp=1px。density值表示每英寸有多少个显示点,与分辨率是两个概念。具体不懂得可以稍微查下资料了解一下。 通常在网页的设计中,z轴是用于区分层次,而不是为了3D效果。3D空间是通过y轴进行操控体现的。 光效 和 阴影 在 Material 的设计环境中,所有的场景都是有光来照射的。其中主体光效的照射创造出指向性的阴影,还有环境光效从各个角度创造出柔和的阴影。 Material 的设计环境中的阴影,都是通过这两种光效产生的。在安卓开发中,阴影的产生都是由光源照射到在z轴不同位置的材料所产生的。而在网页中国年,阴影是通过控制y轴产生的。下面是关于阴影的举例,z轴的高度为6dp。 由主体光效照射产生的阴影: 由环境光效产生的阴影: 两种光效共同
2 min read
Material Design Introduction
Design | 设计

Material Design Introduction

高度和阴影 Material Design 中的物体和现实中的物体具有相同的性质。在现实世界中,物体可以堆叠,或两个物体之间可以进行粘贴,但同时,物体之间是无法相互穿透。物体的阴影是光线投射到它身上所产生的。 这些特质行程的空间模型来自于现实,所以用户对此会非常熟悉熟悉,所以我们可以直接将这些特性运用到整个应用中。而高度和阴影的概念就是为了支撑这种空间模型。 高度(安卓) 高度指的是两个物体之间在z轴的相对高度或距离。 规范 * 高度的测量单位与x轴y轴的测量单位是相通的,主要是使用dp这个单位。因为所有的材料元素都有着1dp的厚度,所以高度的测量,是从一个材料到另一个材料的顶部之间的距离。 * 一个子对象的高度与他的父对象的高度息息相关。 以下是一些Android应用相关的事例图像。 两个物体之间的多个高度测量 静止高度 Material 中所有的对象,不论是多大的尺寸,都有静止高度,有的是默认高度,这高度是不能改变的。如果有物体改变了它的高度(因为操作),等操作完成后它也会尽快返回到这个静止高度。 桌面的静止高度应该小于2dp
10 min read