1page.title=材料設計
2page.tags=Material, design
3page.type=設計
4page.image=design/material/images/MaterialLight.png
5
6@jd:body
7
8<!-- developer docs box -->
9<a class="notice-developers right" href="{@docRoot}training/material/index.html">
10  <div>
11    <h3>開發人員文件</h3>
12    <p>使用材料設計建立應用程式</p>
13  </div>
14</a>
15
16<!-- video box -->
17<a class="notice-developers-video" href="https://www.youtube.com/watch?v=p4gmvHyuZzw">
18<div>
19    <h3>影片</h3>
20    <p>材料設計簡介</p>
21</div>
22</a>
23
24<!-- video box -->
25<a class="notice-developers-video" href="https://www.youtube.com/watch?v=YaG_ljfzeUw">
26<div>
27    <h3>影片</h3>
28    <p>紙張和墨水：重要的材料</p>
29</div>
30</a>
31
32<!-- video box -->
33<a class="notice-developers-video" href="https://www.youtube.com/watch?v=XOcCOBe8PTc">
34<div>
35    <h3>影片</h3>
36    <p>Google I/O 應用程式中的材料設計</p>
37</div>
38</a>
39
40
41
42<p itemprop="description">材料設計是一份內容廣泛的綜合性指南，引導您跨平台、跨裝置進行視覺、動態和互動的設計。
43Android 現已納入對材料設計應用程式的支援。
44如果要在 Android 應用程式中使用材料設計，請依照<a href="http://www.google.com/design/spec">材料設計規格</a>中定義的指示，並使用
45Android
465.0 (API 層級 21) 或後續版本中的新元件和新功能。</p>
47
48<p>Android 提供下列元素，供您打造材料設計應用程式：</p>
49
50<ul>
51  <li>一個新的設計風格</li>
52  <li>用於複雜檢視的小工具</li>
53  <li>自訂陰影和動畫的新 API</li>
54</ul>
55
56<p>如需取得如何在 Android 上實作材料設計的詳細資訊，請詳見<a href="{@docRoot}training/material/index.html">使用材料設計建立應用程式</a>。
57</p>
58
59
60<h3>材料設計風格</h3>
61
62<p>材料設計風格提供您應用程式使用的新樣式、可以讓您設定色板的系統小工具，並針對輕觸回饋與操作行為轉換提供預設動畫。
63</p>
64
65<!-- two columns -->
66<div style="width:700px;margin-top:25px;margin-bottom:20px">
67<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
68  <img src="{@docRoot}design/material/images/MaterialDark.png" width="500" height="238" />
69  <div style="width:140px;margin:0 auto">
70  <p style="margin-top:8px">深色材料設計風格</p>
71  </div>
72</div>
73<div style="float:left;width:250px;margin-right:0px;">
74  <img src="{@docRoot}design/material/images/MaterialLight.png" width="500" height="238" />
75  <div style="width:140px;margin:0 auto">
76  <p style="margin-top:8px">淺色材料設計風格</p>
77  </div>
78</div>
79<br style="clear:left"/>
80</div>
81
82<p>如需詳細資訊，請參閱<a href="{@docRoot}training/material/theme.html">使用材料設計風格</a>。
83</p>
84
85
86<h3>清單和卡片</h3>
87
88<p>Android 提供兩個新的小工具，搭配材料設計樣式與動畫，可用來顯示清單和卡片：
89</p>
90
91<!-- two columns -->
92<div style="width:700px;margin-top:25px;margin-bottom:20px">
93<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
94  <img src="{@docRoot}design/material/images/list_mail.png" width="500" height="426" />
95  <p>新的 <code>RecyclerView</code> 小工具是 <code>ListView</code>
96更容易插入的版本，支援不同的版面配置類型，並提供效能改善。</p>
97</div>
98<div style="float:left;width:250px;margin-right:0px;">
99  <img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426" />
100  <p>新的 <code>CardView</code> 小工具讓您可以顯示卡片內的重要資訊，並且該資訊都能擁有一致的外觀與風格。
101</p>
102</div>
103<br style="clear:left"/>
104</div>
105
106<p>如需詳細資訊，請參閱<a href="{@docRoot}training/material/lists-cards.html">建立清單和卡片</a>。
107</p>
108
109
110<h3>檢視陰影</h3>
111
112<p>除了 X 和 Y 屬性外，Android 中的檢視現在也有 Z 屬性。
113這個新屬性代表檢視的高度，這會決定：</p>
114
115<ul>
116<li>陰影大小：帶有較高 Z 值的檢視會投射更大的陰影。</li>
117<li>繪製順序：具有較高 Z 值的檢視會顯示在其他檢視之上。</li>
118</ul>
119
120<div style="width:290px;margin-left:35px;float:right">
121  <div class="framed-nexus5-port-span-5">
122  <video class="play-on-hover" autoplay>
123    <source src="{@docRoot}design/material/videos/ContactsAnim.mp4"/>
124    <source src="{@docRoot}design/videos/ContactsAnim.webm"/>
125    <source src="{@docRoot}design/videos/ContactsAnim.ogv"/>
126  </video>
127  </div>
128  <div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
129    如要重播影片，請按一下裝置螢幕<em></em>
130  </div>
131</div>
132
133<p>如需取得詳細資訊，請參閱<a href="{@docRoot}training/material/shadows-clipping.html">定義陰影和裁剪檢視</a>。
134</p>
135
136
137<h3>動畫</h3>
138
139<p>新的動畫 API 可針對 UI 控制項的輕觸回饋、檢視狀態中的變更，以及行為轉換，讓您建立自訂動畫。
140</p>
141
142<p>這些 API 讓您可以：</p>
143
144<ul>
145<li style="margin-bottom:15px">
146回應您檢視中有<strong>輕觸回饋</strong>動畫的輕觸事件。
147</li>
148<li style="margin-bottom:15px">
149隱藏和顯示有<strong>循環顯示</strong>動畫的檢視。
150</li>
151<li style="margin-bottom:15px">
152在有自訂<strong>行為轉換</strong>動畫的行為間切換。
153</li>
154<li style="margin-bottom:15px">
155使用<strong>曲線動作</strong>建立更自然的動畫。
156</li>
157<li style="margin-bottom:15px">
158在帶有<strong>檢視狀態變更</strong>動畫的一個或多個檢視屬性中變更動畫。
159</li>
160<li style="margin-bottom:15px">
161在檢視狀態變更間，顯示<strong>狀態清單可繪項目</strong>中的動畫。
162</li>
163</ul>
164
165<p>輕觸回饋動畫會內建於數個標準檢視中，例如按鈕等。新 API 可讓您自訂這些動畫，並將其新增至您的自訂檢視中。
166</p>
167
168<p>如需詳細資訊，請參閱<a href="{@docRoot}training/material/animations.html">定義自訂動畫</a>。
169</p>
170
171
172<h3>可繪項目</h3>
173
174<p>可繪項目的這些新功能可以幫助您實作材料設計應用程式：</p>
175
176<ul>
177<li><strong>矢量可繪項目</strong>可以調整大小，但又不會喪失定義，最適合於應用程式中的單色圖示。
178</li>
179<li><strong>可繪項目著色</strong>可讓您在執行階段將點陣圖定義為 Alpha 遮罩，並以一個顏色進行著色。
180</li>
181<li><strong>顏色提取</strong>可讓您自動從點陣圖影像中提取顯著顏色。
182</li>
183</ul>
184
185<p>如需詳細資訊，請參閱<a href="{@docRoot}training/material/drawables.html">使用可繪項目</a>。
186</p>
187