Tagged

Design | 设计

A collection of 42 posts

Creative customization
Design | 设计

Creative customization

创意定制 动画可以在很宽的范围内使用,它能够将功能和外观非常和谐的联系起来。 Animation may be used in a wide range of and contexts to unite beauty and function. 图标类型 Icon types 系统图标可以拥有双重功能。 System icons may perform dual functions. 产品表现的应该非常优雅。 Product icons should demonstrate polish. 图标 Icons 系统图标 System icons 一个图标可以具有双重功能。例如,一个菜单图标可以平滑的转换成返回控制,并再次恢复成菜单图标。这个效果既告诉了用户这个按钮的功能同时为交互增加了神奇的元素。 An icon may serve dual

Creative customization
Design | 设计

Creative customization

创意定制 动画可以在很宽的范围内使用,它能够将功能和外观非常和谐的联系起来。 Animation may be used in a wide range of and contexts to unite beauty and function. 图标类型 Icon types 系统图标可以拥有双重功能。 System icons may perform dual functions. 产品表现的应该非常优雅。 Product icons should demonstrate polish. 图标 Icons 系统图标 System icons 一个图标可以具有双重功能。例如,一个菜单图标可以平滑的转换成返回控制,并再次恢复成菜单图标。这个效果既告诉了用户这个按钮的功能同时为交互增加了神奇的元素。 An icon may serve dual

Choreography
Design | 设计

Choreography

编排 Choreography 运动的材料通过在过度中利用共享元素的交互来引导用户注意力。 Material in motion guides the user’s focus through interactions by sharing elements across transitions. 创建表面 Surface creation 新表面的创建过程中使用交错的编排效果。 Stagger the choreography of new surfaces being created. 径向反馈 Radial reaction 用户输入和表面反应通过波纹进行连接。 Connect user input to surface reactions with touch ripples. 连续性 Continuity 在变化中通过仔细的选择共享元素的数量和类型来保持清晰的焦点。 Maintain a clear focal

Choreography
Design | 设计

Choreography

编排 Choreography 运动的材料通过在过度中利用共享元素的交互来引导用户注意力。 Material in motion guides the user’s focus through interactions by sharing elements across transitions. 创建表面 Surface creation 新表面的创建过程中使用交错的编排效果。 Stagger the choreography of new surfaces being created. 径向反馈 Radial reaction 用户输入和表面反应通过波纹进行连接。 Connect user input to surface reactions with touch ripples. 连续性 Continuity 在变化中通过仔细的选择共享元素的数量和类型来保持清晰的焦点。 Maintain a clear focal

Transforming material
Design | 设计

Transforming material

材料变形 材料可以通过将表面分割,组合,改变形状,和改变大小让人们觉得他是活的。 Material can make surfaces feel alive by multiplying and dividing them, and changing their shape and size. 矩形变形 Rectangular transformation 不对称 Asymmetric 对称 Symmetric 波纹转变 Radial transformation 对称 和 圆形 Symmetrical and circular 当材料的形状和大小进行变化时,高度和宽度是沿着运动曲线异步变化的。其附近表面内部或它周围的元素的变形的动画是需要经过 编排。 When material changes shape and size, its width

Transforming material
Design | 设计

Transforming material

材料变形 材料可以通过将表面分割,组合,改变形状,和改变大小让人们觉得他是活的。 Material can make surfaces feel alive by multiplying and dividing them, and changing their shape and size. 矩形变形 Rectangular transformation 不对称 Asymmetric 对称 Symmetric 波纹转变 Radial transformation 对称 和 圆形 Symmetrical and circular 当材料的形状和大小进行变化时,高度和宽度是沿着运动曲线异步变化的。其附近表面内部或它周围的元素的变形的动画是需要经过 编排。 When material changes shape and size, its width

Movement
Design | 设计

Movement

运动 Movement 运动中的材料也会受到类似真实世界中相似的力,比如重力。 Material in motion abides by forces similar to those of the real world, like gravity. 屏幕内运动 On-screen movement 上弧线 Arc upward 下弧线 Arc downward 移入和移出屏幕运动 In-and-out screen movement 独立运动 Independent movement 相对运动 Relative movement 在屏幕边界内运动 Movement within screen bounds 屏幕边界内的元素在两点之间的运动要保持自然的弧度,所有屏幕内的运动要使用 标准曲线运动。 The movement of an

Movement
Design | 设计

Movement

运动 Movement 运动中的材料也会受到类似真实世界中相似的力,比如重力。 Material in motion abides by forces similar to those of the real world, like gravity. 屏幕内运动 On-screen movement 上弧线 Arc upward 下弧线 Arc downward 移入和移出屏幕运动 In-and-out screen movement 独立运动 Independent movement 相对运动 Relative movement 在屏幕边界内运动 Movement within screen bounds 屏幕边界内的元素在两点之间的运动要保持自然的弧度,所有屏幕内的运动要使用 标准曲线运动。 The movement of an

Duration & easing
Design | 设计

Duration & easing

运动中的 Material(材料)是响应式和自然的。使用一些缓动曲线和持续时间模式来创造一些顺滑和连贯的运动。 Material in motion is responsive and natural. Use these easing curves and duration patterns to create smooth and consistent motion. 缓速曲线 Easing curves 标准曲线 减速曲线 加速曲线 急弯曲线 Standard curve Deceleration curve Acceleration curve Sharp curve 速度 Speed 当元素从起始位置移动到目标位置时的状态,为了不让用户等待过长的时间,运动的速度应该足够快。但同时也要保证速度不能过快而导致用户无法了解你的目的。当用户能频繁看到时,则应该将变化时间变的缩短。 When elements

Duration & easing
Design | 设计

Duration & easing

运动中的 Material(材料)是响应式和自然的。使用一些缓动曲线和持续时间模式来创造一些顺滑和连贯的运动。 Material in motion is responsive and natural. Use these easing curves and duration patterns to create smooth and consistent motion. 缓速曲线 Easing curves 标准曲线 减速曲线 加速曲线 急弯曲线 Standard curve Deceleration curve Acceleration curve Sharp curve 速度 Speed 当元素从起始位置移动到目标位置时的状态,为了不让用户等待过长的时间,运动的速度应该足够快。但同时也要保证速度不能过快而导致用户无法了解你的目的。当用户能频繁看到时,则应该将变化时间变的缩短。 When elements

Material motion
Design | 设计

Material motion

Motion(运动)在 Material Design 的世界中是以美丽和流畅的方式来描述空间关系,功能和目的手段。 Motion in the world of material design is used to describe spatial relationships, functionality, and intention with beauty and fluidity. 为什么 motion 很重要? Why does motion matter? Motion 表达了应用的组织方式和它能做什么? Motion shows how an app is organized and what it can do. Motion 作用:

Material motion
Design | 设计

Material motion

Motion(运动)在 Material Design 的世界中是以美丽和流畅的方式来描述空间关系,功能和目的手段。 Motion in the world of material design is used to describe spatial relationships, functionality, and intention with beauty and fluidity. 为什么 motion 很重要? Why does motion matter? Motion 表达了应用的组织方式和它能做什么? Motion shows how an app is organized and what it can do. Motion 作用:

Split screen
Design | 设计

Split screen

仅支持 Android 设备。 Android only Split-screen(分屏模式)允许两个活动在屏幕上同时可见。 Split-screen mode allows two activities to be visible on screen at the same time. 用法 Usage 需要用户交互 User interaction required 应用程序不能自行调用 split-screen(分屏模式); 用户必须主动激活。 Apps are not allowed to invoke split-screen mode by themselves; the user must activate it. 启动新活动 Launching new

Split screen
Design | 设计

Split screen

仅支持 Android 设备。 Android only Split-screen(分屏模式)允许两个活动在屏幕上同时可见。 Split-screen mode allows two activities to be visible on screen at the same time. 用法 Usage 需要用户交互 User interaction required 应用程序不能自行调用 split-screen(分屏模式); 用户必须主动激活。 Apps are not allowed to invoke split-screen mode by themselves; the user must activate it. 启动新活动 Launching new

Responsive UI
Design | 设计

Responsive UI

在 Material Design 中响应式布局可以适应任何尺寸的屏幕。这个 UI 指南包括一个灵活的栅格系统,它可以在跨平台的同时让布局保持一致性,breakpoint(断点) 的细节是在与内容如何在不同屏幕尺寸上来回流动,以及一个应用程序如何从小到大的屏幕进行扩展的描述。 Responsive layouts in material design adapt to any possible screen size. This UI guidance includes a flexible grid that ensures consistency across layouts, breakpoint details about how content reflows on different screens, and a description of how an

Responsive UI
Design | 设计

Responsive UI

在 Material Design 中响应式布局可以适应任何尺寸的屏幕。这个 UI 指南包括一个灵活的栅格系统,它可以在跨平台的同时让布局保持一致性,breakpoint(断点) 的细节是在与内容如何在不同屏幕尺寸上来回流动,以及一个应用程序如何从小到大的屏幕进行扩展的描述。 Responsive layouts in material design adapt to any possible screen size. This UI guidance includes a flexible grid that ensures consistency across layouts, breakpoint details about how content reflows on different screens, and a description of how an

Metrics & keylines
Design | 设计

Metrics & keylines

Baseline grids All components align to an 8dp square baseline grid for mobile, tablet, and desktop. Iconography in toolbars align to a 4dp square baseline grid. 所有的元素在移动端,平板端和桌面端都以边长为 8dp 的正方形作为基线网格。toolbars(工具栏)的图标使用边长为 4dp 的正方形作为基线网格。 Example of baseline grid Example of baseline grid Type aligns to a 4dp baseline grid.

Metrics & keylines
Design | 设计

Metrics & keylines

Baseline grids All components align to an 8dp square baseline grid for mobile, tablet, and desktop. Iconography in toolbars align to a 4dp square baseline grid. 所有的元素在移动端,平板端和桌面端都以边长为 8dp 的正方形作为基线网格。toolbars(工具栏)的图标使用边长为 4dp 的正方形作为基线网格。 Example of baseline grid Example of baseline grid Type aligns to a 4dp baseline grid.

Units and measurements
Design | 设计

Units and measurements

Some units have different meanings in different contexts. This chapter discusses the usage of device-independent pixels, scaleable pixels, as well as concepts like pixel density. 在不情境下,单位有着不同的含义。这章主要是来讨论独立设备像素,可扩展像素的使用方法以及像素密度的概念 Pixel density The number of pixels that fit into an inch is referred to as “pixel density.” High-density screens have more

Units and measurements
Design | 设计

Units and measurements

Some units have different meanings in different contexts. This chapter discusses the usage of device-independent pixels, scaleable pixels, as well as concepts like pixel density. 在不情境下,单位有着不同的含义。这章主要是来讨论独立设备像素,可扩展像素的使用方法以及像素密度的概念 Pixel density The number of pixels that fit into an inch is referred to as “pixel density.” High-density screens have more

Design | 设计

Writing

Text should be understandable by anyone, anywhere, regardless of their culture or language. 文案应该可以让人和人都能理解,不论是这人在哪里,具有什么样的文化背景,说什么样的语言。 Clear, accurate, and concise text makes interfaces more usable and builds trust. 清晰,准确,简洁的文案可以让界面更容易与用户建立信任。 In addition to these guidelines, be sure to consult guidelines for specific UI elements, such as Errors, Dialogs,