blob: c5d40d4bdf86df084adf140574b926dea1e40872 (
plain)
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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
|
page.title=Android 設計原則
@jd:body
<p>這些設計原則是由 Android 使用者體驗團隊開發,並針對 Android 使用者體驗團隊的需求所開發,以使用者的最大利益為出發點。對於 Android 開發者和設計者而言,針對不同類型的裝置,這些原則仍持續是更詳細設計方針的基礎。
</p>
<p>
當您套用您本身的創意與設計思維時,請考慮這些原則。
除非有特定目的,否則請遵循這些原則。
</p>
<h2 id="enchant-me">使人著迷</h2>
<div class="cols">
<div class="col-7">
<h4 id="delight-me">以出乎意外的方式取悅人</h4>
<p>漂亮的外觀、精心設置的動畫,或時機恰到好處的音效,都是令人感到喜悅的體驗。
微妙的效果有助於產生毫不費力及強大力量就在手邊的感覺。
</p>
</div>
<div class="col-6">
<img src="{@docRoot}design/media/principles_delight.png">
</div>
</div>
<div class="vspace size-2"> </div>
<div class="cols">
<div class="col-7">
<h4 id="real-objects-more-fun">真實的物件比生硬的按鈕和選單,更能夠引人入勝。</h4>
<p>您所設計的應用程式應該要能讓使用者可直接輕觸並操縱物件。這將可減少執行工作所需的認知準備,同時也能讓使用者在情緒上更為滿足。
</p>
</div>
<div class="col-6">
<img src="{@docRoot}design/media/principles_real_objects.png">
</div>
</div>
<div class="vspace size-2"> </div>
<div class="cols">
<div class="col-7">
<h4 id="make-it-mine">提供個人設定</h4>
<p>很多人喜歡加上個人風格,因為這有助於他們感到自在並握有主控權。提供實用且美觀的預設設定,但也可以考慮使用不會阻礙主要工作而且有趣的選用自訂項目。
</p>
</div>
<div class="col-6">
<img src="{@docRoot}design/media/principles_make_it_mine.png">
</div>
</div>
<div class="vspace size-2"> </div>
<div class="cols">
<div class="col-7">
<h4 id="get-to-know-me">設法了解使用者</h4>
<p>隨著時間而學習使用者的偏好。讓使用者容易取得之前的選擇,而不是一再請他們做出相同的選擇。
</p>
</div>
<div class="col-6">
<img src="{@docRoot}design/media/principles_get_to_know_me.png">
</div>
</div>
<h2 id="simplify-my-life">簡化生活</h2>
<div class="cols">
<div class="col-7">
<h4 id="keep-it-brief">保持簡潔</h4>
<p>以簡單單字組成簡短語句。多數人傾向於略過冗長的句子。</p>
</div>
<div class="col-6">
<img src="{@docRoot}design/media/principles_keep_it_brief.png">
</div>
</div>
<div class="vspace size-2"> </div>
<div class="cols">
<div class="col-7">
<h4 id="pictures-faster-than-words">圖片的傳達效果更勝於言語</h4>
<p>請考慮使用圖片來解釋想法。圖片能吸引目光,並比言語更有效率。
</p>
</div>
<div class="col-6">
<img src="{@docRoot}design/media/principles_pictures.png">
</div>
</div>
<div class="vspace size-2"> </div>
<div class="cols">
<div class="col-7">
<h4 id="decide-for-me">幫使用者決定,但使用者擁有最終決定權</h4>
<p>做出最好的猜測,先行動,而非先詢問。太多的選擇和決定會讓使用者覺得很痛苦。
為防止錯誤,務必允許復原。</p>
</div>
<div class="col-6">
<img src="{@docRoot}design/media/principles_decide_for_me.png">
</div>
</div>
<div class="vspace size-2"> </div>
<div class="cols">
<div class="col-7">
<h4 id="only-show-when-i-need-it">必要時僅顯示使用者需要的內容</h4>
<p>多數人無法承受一次看到太多東西。將工作和資訊細分成小型、易消化的區塊。
隱藏當下不重要的選項,但在需要選擇時要明確指導。</p>
</div>
<div class="col-6">
<img src="{@docRoot}design/media/principles_information_when_need_it.png">
</div>
</div>
<div class="vspace size-2"> </div>
<div class="cols">
<div class="col-7">
<h4 id="always-know-where-i-am">使用者應該永遠清楚所在位置</h4>
<p>給使用者信心,知道自己沒有迷路。讓您應用程式中的各個地方看起來都有獨特性,並使用轉換來顯示畫面之間的關係。
針對進行中的工作提供回饋。</p>
</div>
<div class="col-6">
<img src="{@docRoot}design/media/principles_navigation.png">
</div>
</div>
<div class="vspace size-2"> </div>
<div class="cols">
<div class="col-7">
<h4 id="never-lose-my-stuff">別弄丟使用者的東西</h4>
<p>儲存使用者花時間所建立的資訊,並且讓使用者可從任何地方存取。跨手機、平板電腦和電腦記住設定、個人風格和建立的資訊。
這會讓升級變得很簡單。
</p>
</div>
<div class="col-6">
<img src="{@docRoot}design/media/principles_never_lose_stuff.png">
</div>
</div>
<div class="vspace size-2"> </div>
<div class="cols">
<div class="col-7">
<h4 id="looks-same-should-act-same">如果看起來一樣,就應該有相同的動作</h4>
<p>讓功能看起來就不一樣,而非變化微妙,這可以協助使用者辨別功能差異。在相同輸入環境下,請盡量避免使用看起來很類似但作用卻不同的模式。
</p>
</div>
<div class="col-6">
<img src="{@docRoot}design/media/principles_looks_same.png">
</div>
</div>
<div class="vspace size-2"> </div>
<div class="cols">
<div class="col-7">
<h4 id="interrupt-only-if-important">重要時才打斷</h4>
<p>就像一位好的私人助理,應該讓使用者免於無關緊要的枝微末節。使用者總想集中注意力,除非很重要且具時效性,否則貿然中斷會令人感到費力且沮喪。
</p>
</div>
<div class="col-6">
<img src="{@docRoot}design/media/principles_important_interruption.png">
</div>
</div>
<h2 id="make-me-amazing">讓使用者驚艷</h2>
<div class="cols">
<div class="col-7">
<h4 id="give-me-tricks">提供使用者各處通用的訣竅</h4>
<p>當使用者能自行弄清楚來龍去脈時是很棒的體驗。運用來自其他 Android 應用程式的視覺模式和肌肉記憶效應,讓使用者更易於學會您的應用程式。
例如,擺動手勢可能是很好的導覽捷徑。
</p>
</div>
<div class="col-6">
<img src="{@docRoot}design/media/principles_tricks.png">
</div>
</div>
<div class="vspace size-2"> </div>
<div class="cols">
<div class="col-7">
<h4 id="its-not-my-fault">不是使用者的錯</h4>
<p>提示使用者進行更正時要溫和。使用者使用您的應用程式時,不會自覺是笨蛋。
若有地方出錯,請提供明確的復原指示,但不需要使用者明瞭技術細節。如果可以,請盡量在幕後修正。
</p>
</div>
<div class="col-6">
<img src="{@docRoot}design/media/principles_error.png">
</div>
</div>
<div class="vspace size-2"> </div>
<div class="cols">
<div class="col-7">
<h4 id="sprinkle-encouragement">分段鼓勵</h4>
<p>將複雜工作細分成更小的步驟,讓使用者可以輕鬆完成。對動作給予回饋,即使只是細微的動作。
</p>
</div>
<div class="col-6">
<img src="{@docRoot}design/media/principles_sprinkle_encouragement.png">
</div>
</div>
<div class="vspace size-2"> </div>
<div class="cols">
<div class="col-7">
<h4 id="do-heavy-lifting-for-me">為使用者處理繁重的工作</h4>
<p>讓新手也能做到以前從未想像過可以完成的事情,讓使用者覺得自己是專家。例如,組合多個相片效果的捷徑,只要幾個步驟,即可讓業餘照片令人驚艷。
</p>
</div>
<div class="col-6">
<img src="{@docRoot}design/media/principles_heavy_lifting.png">
</div>
</div>
<div class="vspace size-2"> </div>
<div class="cols">
<div class="col-7">
<h4 id="make-important-things-fast">快速找到重要的功能</h4>
<p>並非所有的動作都平等。決定應用程式中最重要的部分,並讓使用者易於找到並可迅速使用,例如相機的快門按鈕或音樂播放器的暫停按鈕。
</p>
</div>
<div class="col-6">
<img src="{@docRoot}design/media/principles_make_important_fast.png">
</div>
</div>
|