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

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

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

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

相关文章
|
3月前
|
XML Java 语音技术
Android App开发在线语音识别处理中实现中文转拼音(Pinyin4j库)功能(超详细 附源码和演示)
Android App开发在线语音识别处理中实现中文转拼音(Pinyin4j库)功能(超详细 附源码和演示)
155 0
|
8月前
|
Linux API 开发工具
推荐一个刚开源很火的Github项目:system-design-101(系统设计图库)
推荐一个刚开源很火的Github项目:system-design-101(系统设计图库)
297 0
Qt中文翻译(官方文档,界面,工具等)集锦
Qt中文翻译(官方文档,界面,工具等)集锦
671 0
|
小程序 IDE 开发工具
好工具推荐系列:Qt多国语言翻译国产软件digital translate
好工具推荐系列:Qt多国语言翻译国产软件digital translate
276 0
|
Java 机器人 测试技术
Robot Framework 中文用户指南 | 第一章第四节
1.4 演示 这里有几个Demo演示工程样例,用来介绍Robot Framework以及帮助大家更好的入门。 Quick Start Guide 介绍Robot Framework最重要的特性以及提供了一个可执行的demo。
1030 0
|
Java 机器人 测试技术
Robot Framework 中文用户指南 | 第一章第三节
1.3 安装说明 本章的说明涵盖了所有Robot Framework安装和卸载的方法,以及在不同操作系统上安装的前提条件。如果你本地安装有pip,那么就很容易安装Robot Framework。
1501 0
|
Android开发 UED
Android官方开发文档Training系列课程中文版:管理系统UI之变暗系统条
原文地址:http://android.xsoftlab.net/training/system-ui/index.html 引言 系统条(System Bars)是屏幕上的一块显示区域,专门用来显示通知,设备的通讯状态以及设备的导向。
796 0
|
Android开发 编解码
Android官方开发文档Training系列课程中文版:多样屏幕之支持不同的屏幕密度
原文地址:http://android.xsoftlab.net/training/multiscreen/screendensities.html 这节课将会学习如何通过不同的资源以及独立的测量单位来支持不同的屏幕密度。
874 0
|
Android开发
我的《Android官方开发文档Training系列课程中文版》的中期翻译计划
从2016年的3月份开始到现在,对于Android文档的翻译已经进行了两个月的时间。虽然数量还不及总篇数的一半,但是经过一番整理,发现翻译的文章还不少,目前为止已经有56篇了。这个过程也陆陆续续的坚持了下来。
787 0