Material Design 非官方中文指导手册

简介: 今年 6 月 26 日 I/O 2014 开发者大会,Google 发布了他们的全新设计语言「Material Design」,将会成为统一 Android Mobile、Android Table、Desktop 等平台的设计语言规范,对从业人员意义重大。由于原文为英文,对于广大的国内设计师阅读起来比较困难,于是有热心的童鞋整合了国内的翻译。

今年 6 月 26 日 I/O 2014 开发者大会,Google 发布了他们的全新设计语言「Material Design」,将会成为统一 Android Mobile、Android Table、Desktop 等平台的设计语言规范,对从业人员意义重大。由于原文为英文,对于广大的国内设计师阅读起来比较困难,于是有热心的童鞋整合了国内的翻译。

本文是 Material Design 的第一章 —— 概述。完整文档可到文章末尾查看下载链接。

概述

image.png

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


目标

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

image.png

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

image.png

设计原则

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

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

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

image.png

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


鲜明、形象、深思熟虑

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

image.png

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


有意义的动画效果

image.png

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

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

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

相关文章
|
前端开发 JavaScript
【Ant Design Pro】使用ant design pro做为你的开发模板(一)拉取项目
【Ant Design Pro】使用ant design pro做为你的开发模板(一)拉取项目
1597 0
【Ant Design Pro】使用ant design pro做为你的开发模板(一)拉取项目
|
3月前
|
关系型数据库 MySQL Java
字节面试: MySQL 百万级 导入发生的 “死锁” 难题如何解决?“2序4拆”,彻底攻克
字节面试: MySQL 百万级 导入发生的 “死锁” 难题如何解决?“2序4拆”,彻底攻克
字节面试: MySQL 百万级 导入发生的 “死锁” 难题如何解决?“2序4拆”,彻底攻克
|
6月前
|
关系型数据库 Linux 数据库
2025 年 Odoo 安装与部署全攻略
本文介绍了 Odoo 的手工安装与自动化部署方案。手工安装需完成 Docker 安装、镜像拉取及容器运行,但存在安装复杂、配置困难、管理繁琐等问题。Websoft9 提供了自动化部署方案,通过控制台实现快速创建数据库、初始化环境和后台配置,大幅降低技术门槛,将部署时间从 2 小时缩短至 10 分钟。对比显示,Websoft9 在时间成本、技术要求和稳定性上更具优势,适合中小团队使用,助力企业聚焦业务流程优化。
1188 1
|
7月前
|
存储 关系型数据库 MySQL
携程面试:100 亿分库分表 如何设计? 核弹级 16字真经, 让面试官彻底 “沦陷”,当场发offer!
携程面试:100 亿分库分表 如何设计? 核弹级 16字真经, 让面试官彻底 “沦陷”,当场发offer!
携程面试:100 亿分库分表 如何设计?  核弹级 16字真经, 让面试官彻底 “沦陷”,当场发offer!
|
JSON Rust 前端开发
【sheetjs】纯前端如何实现Excel导出下载和上传解析?
本文介绍了如何使用`sheetjs`的`xlsx`库在前端实现Excel的导出和上传。项目依赖包括Vite、React、SheetJS和Arco-Design。对于导出,从后端获取JSON数据,通过`json_to_sheet`、`book_new`和`writeFile`函数生成并下载Excel文件。对于上传,使用`read`函数将上传的Excel文件解析为JSON并发送至后端。完整代码示例可在GitHub仓库[fullee/sheetjs-demo](https://github.com/fullee/sheetjs-demo)中查看。
910 10
|
设计模式 算法 网络协议
社招offer-腾讯T9-70W年薪(面试经验分享)(上)
社招offer-腾讯T9-70W年薪(面试经验分享)
|
资源调度 JavaScript 索引
vue3怎么使用vant的IndexBar 索引栏
vue3怎么使用vant的IndexBar 索引栏
323 6
|
Prometheus Kubernetes API
k8s教程(pod篇)-扩缩容
k8s教程(pod篇)-扩缩容
583 1
|
Web App开发 Rust JavaScript
Rust 笔记:WebAssembly 的 JavaScript API
Rust 笔记:WebAssembly 的 JavaScript API
260 0