1page.title=Android デザイン指針
2@jd:body
3
4<p>このデザイン指針は、ユーザーがもっとも知りたいと思われることを中心に、Android User Experience Team により、またその活動を統一的なものにするために作成されたものです。Android デベロッパーとデザイナーに対しては各種端末向けのより詳細なデザイン ガイドラインがあります。
5
6
7
8</p>
9
10<p>
11ご自身の創造性やデザインについて考える際、この指針を考慮に入れてください。
12何を当てはめるかは目的に応じて調整してください。
13</p>
14
15<h2 id="enchant-me">ユーザーを引きつける</h2>
16
17<div class="layout-content-row">
18  <div class="layout-content-col span-7">
19
20<h4 id="delight-me">サプライズで楽しませる</h4>
21<p>美しい画面、考え抜かれて配置されたアニメーション、タイミングの良いサウンド エフェクトは、使っていて楽しくなります。
22わずかな効果でも、ユーザーを楽しませ、力を得たように感じてもらえます。
23</p>
24
25  </div>
26  <div class="layout-content-col span-6">
27
28    <img src="{@docRoot}design/media/principles_delight.png">
29
30  </div>
31</div>
32
33<div class="vspace size-2">&nbsp;</div>
34
35<div class="layout-content-row">
36  <div class="layout-content-col span-7">
37
38<h4 id="real-objects-more-fun">ボタンやメニューよりもリアルなオブジェクトでさらに楽しく</h4>
39<p>ユーザーがアプリでオブジェクトを直接タップしたり操作したりできるようになります。タスクを実行するために必要な認知の労力が軽減され、感覚的な満足度も上がります。
40</p>
41
42  </div>
43  <div class="layout-content-col span-6">
44
45    <img src="{@docRoot}design/media/principles_real_objects.png">
46
47  </div>
48</div>
49
50<div class="vspace size-2">&nbsp;</div>
51
52<div class="layout-content-row">
53  <div class="layout-content-col span-7">
54
55<h4 id="make-it-mine">自分らしさを加える</h4>
56<p>ユーザーは自分でカスタマイズすることを好みます。これにより、くつろいだ気分や自分の思いのままできる自由な気分を味わうことができます。デフォルトで実用的で美しいものを取りそろえ、それに加えてメイン タスクの妨げにならない、楽しいカスタマイズも任意で加えられます。
57
58</p>
59
60  </div>
61  <div class="layout-content-col span-6">
62
63    <img src="{@docRoot}design/media/principles_make_it_mine.png">
64
65  </div>
66</div>
67
68<div class="vspace size-2">&nbsp;</div>
69
70<div class="layout-content-row">
71  <div class="layout-content-col span-7">
72
73<h4 id="get-to-know-me">ユーザーについて知る</h4>
74<p>徐々にユーザーの好みを学習していきます。同じ選択を繰り返す手間をかけず、前に選択したものをすぐに選べるようになります。
75</p>
76
77  </div>
78  <div class="layout-content-col span-6">
79
80    <img src="{@docRoot}design/media/principles_get_to_know_me.png">
81
82  </div>
83</div>
84
85<h2 id="simplify-my-life">よりシンプルに</h2>
86
87<div class="layout-content-row">
88  <div class="layout-content-col span-7">
89
90<h4 id="keep-it-brief">常に簡潔に</h4>
91<p>シンプルな言葉を並べた短いフレーズを用います。長い文章は好まれません。</p>
92
93  </div>
94  <div class="layout-content-col span-6">
95
96    <img src="{@docRoot}design/media/principles_keep_it_brief.png">
97
98  </div>
99</div>
100
101<div class="vspace size-2">&nbsp;</div>
102
103<div class="layout-content-row">
104  <div class="layout-content-col span-7">
105
106<h4 id="pictures-faster-than-words">画像は言葉よりもわかりやすい</h4>
107<p>画像を使ってアイデアを説明してみましょう。ユーザーの興味を引くことができ、言葉よりも効率的です。
108</p>
109
110  </div>
111  <div class="layout-content-col span-6">
112
113    <img src="{@docRoot}design/media/principles_pictures.png">
114
115  </div>
116</div>
117
118<div class="vspace size-2">&nbsp;</div>
119
120<div class="layout-content-row">
121  <div class="layout-content-col span-7">
122
123<h4 id="decide-for-me">選択は最小限に、最終決定はユーザーに</h4>
124<p>最初からユーザーにすべて尋ねるのではなく、もっとも適切と思われる項目を提示します。選択肢や決定事項が多すぎると面倒に感じます。
125推測が間違っていた場合に備え、「やり直し」も可能にします。</p>
126
127  </div>
128  <div class="layout-content-col span-6">
129
130    <img src="{@docRoot}design/media/principles_decide_for_me.png">
131
132  </div>
133</div>
134
135<div class="vspace size-2">&nbsp;</div>
136
137<div class="layout-content-row">
138  <div class="layout-content-col span-7">
139
140<h4 id="only-show-when-i-need-it">必要なものを必要なときにだけ表示する</h4>
141<p>一度に表示される内容が多すぎると疲れてしまいます。タスクや情報はいくつかに小さくまとめてわかりやすくします。
142その時点で必要のないオプションは非表示にして、必要なときだけ表示します。</p>
143
144  </div>
145  <div class="layout-content-col span-6">
146
147    <img src="{@docRoot}design/media/principles_information_when_need_it.png">
148
149  </div>
150</div>
151
152<div class="vspace size-2">&nbsp;</div>
153
154<div class="layout-content-row">
155  <div class="layout-content-col span-7">
156
157<h4 id="always-know-where-i-am">全体像から現在の位置を示す</h4>
158<p>ユーザーがはっきりと自分の現在の場所を把握できるようにします。アプリのどの場所にいるかを明示し、遷移して画面の関係を認識できるようにします。
159実行しているタスクに対して応答し続けます。</p>
160
161  </div>
162  <div class="layout-content-col span-6">
163
164    <img src="{@docRoot}design/media/principles_navigation.png">
165
166  </div>
167</div>
168
169<div class="vspace size-2">&nbsp;</div>
170
171<div class="layout-content-row">
172  <div class="layout-content-col span-7">
173
174<h4 id="never-lose-my-stuff">作成したものは失くさない</h4>
175<p>ユーザーが時間をかけて作ったものは保存して、どこからでもアクセスできるようにします。設定、独自のカスタマイズ、電話、タブレット、コンピュータで作成したものを記録します。
176アップグレードも簡単になります。
177</p>
178
179  </div>
180  <div class="layout-content-col span-6">
181
182    <img src="{@docRoot}design/media/principles_never_lose_stuff.png">
183
184  </div>
185</div>
186
187<div class="vspace size-2">&nbsp;</div>
188
189<div class="layout-content-row">
190  <div class="layout-content-col span-7">
191
192<h4 id="looks-same-should-act-same">見た目が同じ場合は機能も同じにする</h4>
193<p>視覚的な違いを際立たせ、ユーザーが機能の違いをはっきり区別できるようにします。同じような外観、同じ入力で機能が異なるようなモードは避けます。
194</p>
195
196  </div>
197  <div class="layout-content-col span-6">
198
199    <img src="{@docRoot}design/media/principles_looks_same.png">
200
201  </div>
202</div>
203
204<div class="vspace size-2">&nbsp;</div>
205
206<div class="layout-content-row">
207  <div class="layout-content-col span-7">
208
209<h4 id="interrupt-only-if-important">割り込みは重要なときにだけ行う</h4>
210<p>優秀な個人秘書のように、重要ではない些細なことでユーザーをわずらわせることのないよう配慮します。集中したいユーザーにとって、重要で一刻を争うようなものでない限り、割り込まれると面倒で不快に感じる可能性があります。
211</p>
212
213  </div>
214  <div class="layout-content-col span-6">
215
216    <img src="{@docRoot}design/media/principles_important_interruption.png">
217
218  </div>
219</div>
220
221<h2 id="make-me-amazing">操作を楽しく</h2>
222
223<div class="layout-content-row">
224  <div class="layout-content-col span-7">
225
226<h4 id="give-me-tricks">あらゆる場所に工夫を仕込む</h4>
227<p>自分で理解すると嬉しく感じられます。Android アプリで広く使われている視覚や操作のパターンを生かし、アプリの操作をわかりやすいものにします。
228たとえばスワイプ操作は便利なナビゲーションのショートカットとして使えます。
229</p>
230
231  </div>
232  <div class="layout-content-col span-6">
233
234    <img src="{@docRoot}design/media/principles_tricks.png">
235
236  </div>
237</div>
238
239<div class="vspace size-2">&nbsp;</div>
240
241<div class="layout-content-row">
242  <div class="layout-content-col span-7">
243
244<h4 id="its-not-my-fault">解決は簡単に</h4>
245<p>ユーザーに修正を促す場合はその方法に注意します。アプリではスマートに問題を解決できるようにします。うまくいかなかったときは解決方法を明確に示し、技術的な詳細を表示する必要はありません。自動的に修正できる問題はユーザーに通知する必要すらありません。
246
247</p>
248
249  </div>
250  <div class="layout-content-col span-6">
251
252    <img src="{@docRoot}design/media/principles_error.png">
253
254  </div>
255</div>
256
257<div class="vspace size-2">&nbsp;</div>
258
259<div class="layout-content-row">
260  <div class="layout-content-col span-7">
261
262<h4 id="sprinkle-encouragement">操作を促すしかけを散りばめる</h4>
263<p>複雑なタスクは分割し、それぞれ簡単に達成できるようにします。1 つ 1 つにフィードバックすることで、ユーザーの満足度は高まります。
264</p>
265
266  </div>
267  <div class="layout-content-col span-6">
268
269    <img src="{@docRoot}design/media/principles_sprinkle_encouragement.png">
270
271  </div>
272</div>
273
274<div class="vspace size-2">&nbsp;</div>
275
276<div class="layout-content-row">
277  <div class="layout-content-col span-7">
278
279<h4 id="do-heavy-lifting-for-me">作業の手間はかけない</h4>
280<p>できると思っていなかったことをできるようにすることで、知識がなくても専門家のような気分を味わってもらえます。たとえば複数の写真効果を組み合わせたショートカットを使うことで、わずかな手順でプロのような写真に仕上げられます。
281
282</p>
283
284  </div>
285  <div class="layout-content-col span-6">
286
287    <img src="{@docRoot}design/media/principles_heavy_lifting.png">
288
289  </div>
290</div>
291
292<div class="vspace size-2">&nbsp;</div>
293
294<div class="layout-content-row">
295  <div class="layout-content-col span-7">
296
297<h4 id="make-important-things-fast">重要なことはすみやかに</h4>
298<p>すべてのアクションが同じ優先度とは限りません。アプリのアクションには優先度を設定し、重要なものはたとえばカメラのシャッター ボタンや音楽プレイヤーの一時停止ボタンのように、簡単に見つけられすぐに使えるようにします。
299</p>
300
301  </div>
302  <div class="layout-content-col span-6">
303
304    <img src="{@docRoot}design/media/principles_make_important_fast.png">
305
306  </div>
307</div>
308