-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
136 lines (124 loc) · 8.58 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<base href="./" />
<meta charset="UTF-8" />
<meta name="theme-color" content="#212121" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="质感设计是以印刷工艺为基底的、以Material世界为特征的科学界面设计系统。质感设计通过模仿现实世界，创造真实的虚拟世界调动用户已有的认知经验，并充分利用电子媒介的可能性，释放界面运作、表现的想象力；质感设计还要求设计者清楚自己的设计意图，有意识地把握界面运作的全过程，以帮助使用不同电子设备的、处于不同身心状况的用户高效达成目标。">
<meta property="og:title" content="质感设计 - 概述" />
<meta property="og:type" content="article" />
<meta property="og:image" content="global/resources/thumbnail.png" />
<meta property="og:url" content="https://ax-design.github.io/classic-material-design/index.html" />
<title>质感设计 - 概述</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400..500&family=Roboto+Mono:wght@500&display=swap" rel="stylesheet" />
<link rel="icon" href="global/resources/favicon.svg" />
<link rel="stylesheet" href="material-design/styles/introduction.css" />
<link rel="stylesheet" href="global/styles/global.css" />
<script type="module" src="global/scripts/global.js"></script>
</head>
<body type-scale="body1">
<aside id="drawer" class="drawer" chapter="1-1" popover></aside>
<div class="divider" vertical></div>
<main>
<div class="toolbar" variant="app-bar prominent" theme="light" solid="end">
<button popovertarget="drawer" class="button" variant="icon" type="button" aria-label="打开目录">
<cmd-icon name="menu"></cmd-icon>
</button>
<h1 class="title" type-scale="title">质感设计</h1>
<button id="search-trigger" class="button" variant="icon" type="button" disabled aria-label="搜索">
<cmd-icon name="search"></cmd-icon>
</button>
</div>
<picture aria-hidden="true">
<img src="material-design/resources/introduction.svg" />
</picture>
<header>
<h2 type-scale="display1">概述</h2>
<p type-scale="title">当第一部智能手机诞生时，移动设备的体验处处受限：显示空间更小、通信速度更慢、功能特性更少。但数十年间，你我的日常工具不断变得更加快捷、万能、易用。如今移动设备的硬件配置已不可同日而语，软件设计同样需要更新换代。</p>
<p type-scale="title">因此我们挑战自我，为广大用户创造了崭新的界面设计系统——质感设计。质感设计不仅虚心汲取经典设计定则的丰富滋养，还致力发挥创新科学技术的强大潜力。我们相信设计系统是同源共流、顺理成章的，但绝不意味着静止和死板，随着我们及各界社区对质感设计理论和实践的探索，本文档将会不断更新完善。</p>
<nav>
<h3 type-scale="body1">索引</h3>
<ul type-scale="title">
<li><a href="index.html#goals">目标</a></li>
<li><a href="index.html#principles">原则</a></li>
</ul>
</nav>
</header>
<article id="goals" horizontal>
<h3 type-scale="headline">目标</h3>
<div class="paragraphs">
<p>我们希冀开创一门视觉语言，既能恪守优秀设计的经典定则，又能结合尖端科技的无尽可能。</p>
</div>
<figure id="language">
<picture class="illustration" aria-hidden="true">
<source media="(max-width:920px)" srcset="material-design/resources/language-vertical.svg" />
<img src="material-design/resources/language.svg" />
</picture>
</figure>
<div class="paragraphs">
<p>我们希冀构建一种底层系统，在其基础之上打造跨越平台和设备尺寸的融合体验。虽然面向移动设备设计，但兼顾触摸、语音、鼠标、键盘等多种输入方式。</p>
</div>
<figure id="system">
<div class="diagram" theme="light">
<div class="surface" solid></div>
<div class="surface" solid></div>
<div class="surface" solid></div>
<div class="surface" solid></div>
<div class="surface" solid></div>
</div>
</figure>
</article>
<hr class="divider" horizontal />
<article id="principles" vertical>
<h3 type-scale="headline">原则</h3>
<section>
<figure id="metaphor">
<picture class="illustration" aria-hidden="true">
<img src="material-design/resources/metaphor.svg" />
</picture>
</figure>
<h4 type-scale="title">借助Material反映真实</h4>
<p>质感设计参照现实世界，将Material喻为科学设想空间的基本粒子、系统进行运动的物质载体，统一反映了虚拟世界的存在形式与运作机理。Material虽根植于现实质感、启迪于传统纸墨，却又融汇了前沿科技与奇思妙想。</p>
<p>由Material所构成的层面和边沿提供了与现实相贯通的视觉暗示，熟悉的质地让用户可以快速地认知、理解界面。同时Material的可塑性使其得以超脱现实桎梏表现新性质，但又不反叛现实物理规律的真实。</p>
<p>光照、层面、运动，这三者的基本原理是传达虚拟空间中物件活动情况、交互方式、存在状态、相互关系的关键。逼真的光影效果展示出物件之间的交合关系、划分出空间层次、凸显出运动中的物件。</p>
</section>
<section>
<figure id="bold-graphic-intentional">
<picture class="illustration" aria-hidden="true">
<img src="material-design/resources/bold-graphic-intentional.svg" />
</picture>
</figure>
<h4 type-scale="title">鲜明、形象、考虑周到</h4>
<p>空间布局、网格系统、比例分配、字体排印、色彩搭配、图像使用——这些传统印刷品设计的基本要素指导着质感设计的视觉效果。在这些设计基础上下功夫，不但可以愉悦用户，还能构建出视觉层级、视觉意义以及视觉聚焦。精心挑选色彩、贴边图像，设置对比明显的字号和目量意营的留白，能够缔造出鲜明形象的用户界面，提供沉浸的用户体验。</p>
<p>着重强调用户操作项有利于凸显核心功能，为用户提供使用指引。</p>
</section>
<section>
<figure id="motion">
<picture class="illustration" aria-hidden="true">
<img src="material-design/resources/motion.svg" />
</picture>
</figure>
<h4 type-scale="title">运动传递意义</h4>
<p>质感设计尊重并强化用户作为输入源的主体地位，以用户的操作为界面变化的起点，进而改变设计的整体形态。</p>
<p>所有界面物件的运动都处在同一环境中进行并相互影响。即使物件正在变形或重组，新状态的呈现也不应破坏用户体验的连续性。</p>
<p>界面动画应当意义深厚、合情合理，为吸引用户注意及维持体验连续服务。界面给用户的反馈要清晰且巧妙，转场需连贯且高效。</p>
</section>
</article>
<footer theme="dark">
<a draggable="false" href="material-design/environment.html">
<span type-scale="subheading">下一节</span>
<span type-scale="title">
<cmd-icon name="arrow_forward"></cmd-icon>
环境
</span>
</a>
</footer>
</main>
<script>
document.body.style.setProperty('--window-width', document.body.clientWidth);
</script>
</body>
</html>