Material Design - 概述

优质
小牛编辑
115浏览
2023-12-01

概述 - 图1

我们挑战自我,为用户创造了崭新的视觉设计语言。与此同时,新的设计语言除了遵循经典设计定则,还汲取了最新的科技,秉承了创新的设计理念。这就是原质化设计(Material Design)。这份文档是动态更新的,将会随着我们对 Material Design 的探索而不断迭代、升级。

目标

我们希冀创造一种新的视觉设计语言,能够遵循优秀设计的经典定则,同时还伴有创新理念和新的科技。

materialdesign-goals

我们希望创造一种独一无二的底层系统,在这个系统的基础之上,构建跨平台和超越设备尺寸的统一体验。遵循基本的移动设计定则,同时支持触摸、语音、鼠标、键盘等输入方式。

materialdesign-goals-cutrectangles

设计原则

materialdesign-principles-layersquares

实体感就是(通过设计方式来表达)隐喻

通过构建系统化的动效和空间合理化利用,并将两个理念合二为一,构成了实体隐喻。与众不同的触感是实体的基础,这一灵感来自我们对纸墨的研究,但是我们相信,随着科技的进步,应用前景将不可估量。

实体的表面和边缘提供基于真实效果的视觉体验,熟悉的触感让用户可以快速地理解和认知。实体的多样性可以让我们呈现出更多反映真实世界的设计效果,但同时又绝不会脱离客观的物理规律。

光效、表面质感、运动感这三点是解释物体运动规律、交互方式、空间关系的关键。真实的光效可以解释物体之间的交合关系、空间关系,以及单个物体的运动。

materialdesign-principles-circleplus_large_mdpi.png

鲜明、形象、深思熟虑

新的视觉语言,在基本元素的处理上,借鉴了传统的印刷设计——排版、网格、空间、比例、配色、图像使用——这些基础的平面设计规范。在这些设计基础上下功夫,不但可以愉悦用户,而且能够构建出视觉层级、视觉意义以及视觉聚焦。精心选择色彩、图像、选择合乎比例的字体、留白,力求构建出鲜明、形象的用户界面,让用户沉浸其中。

Material Design 设计语言强调根据用户行为凸显核心功能,进而为用户提供操作指引。

materialdesign-principles-flyingsquare

有意义的动画效果

动画效果(简称动效)可以有效地暗示、指引用户。动效的设计要根据用户行为而定,能够改变整体设计的触感。

动效应当在独立的场景呈现。通过动效,让物体的变化以更连续、更平滑的方式呈现给用户,让用户能够充分知晓所发生的变化。

动效应该是有意义的、合理的,动效的目的是为了吸引用户的注意力,以及维持整个系统的连续性体验。动效反馈需细腻、清爽。转场动效需高效、明晰。

最后更新:

类似资料

  • 概述 国际化和本地化的目的就是让一个网站应用能做到根据用户语种和指定格式的不同而提供不同的内容。 Django 对文本翻译, 日期、时间和数字的格式化,以及时区提供了完善的支持。 实际上,Django做了两件事: 由开发者和模板作者指定应用的哪些部分应该翻译,或是根据本地语种和文化进行相应的格式化。 根据用户的偏好设置,使用钩子将web应用本地化。 很显然,翻译取决于用户所选语言,而格式化通常取决

  • 虽然Django 满满的便捷性让Web 开发人员活得轻松一些,但是如果不能轻松地部署你的网站,这些工具还是没有什么用处。Django 起初,易于部署就是一个主要的目标。有许多优秀的方法可以轻松地来部署Django: 如何使用WSGI 部署 部署的检查清单 FastCGI 的支持已经废弃并将在Django 1.9 中删除。 如何使用FastCGI、SCGI 和AJP 部署Django 如果你是部署D

  • 本书概述 进程的概念大家都很熟悉,但你是否能准确说出僵尸进程的含义呢?还有 COW(Copy On Write)、Flock(File Lock)、Epoll 和 Namespace 的概念又是否了解过呢? 本书汇集了进程方方面面的基础知识,加上编程实例,保证阅读后能自如地回答以上问题,在项目开发中对进程的优化也有更深的理解。 本书架构 本书按循序渐进的方式介绍进程的基础概念和拓展知识,主要涵盖以

  • Docker在1.12.0和以上版本中增加了swarm模式。通过swarm模式管理的Docker Engines集群称之为“Swarm”。并可以通过Docker CLI来创建Swarm,在Swarm中部署应用服务,以及管理Swarm。 功能特点 在Docker Engines中集成了集群管理功能:通过Docker CLI可以创建一个用来发布应用services的swarm,而不需要安装其他任何额外

  • 这是 Elasticsearch 官方的 PHP 客户端。我们把 Elasticsearch-PHP 设计成低级客户端(低级设计模式),使用时不会偏离 REST API 的用法。 客户端所有方法几乎都与 REST API 对应,而且也与其他编程语言的客户端(如 ruby, python 等)方法结构相似。我们希望这种对应方式可以方便开发者更加容易上手客户端,且以最小的代价快速从一种编程语言转换到另

  • 特点 为什么用 Groovy?