• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1page.title=Nguyên tắc Thiết kế Android
2@jd:body
3
4<p>Những nguyên tắc thiết kế này được xây dựng bởi và dành cho
5Nhóm Trải nghiệm Người dùng Android để đảm bảo lợi ích tốt nhất cho người dùng.
6Đối với nhà phát triển và nhà thiết kế Android, chúng tiếp tục
7nhấn mạnh những nguyên tắc chỉ đạo thiết kế chi tiết hơn dành cho các loại
8thiết bị khác nhau.</p>
9
10<p>
11Hãy cân nhắc những nguyên tắc này khi áp dụng sự sáng tạo
12và tư duy thiết kế của mình. Thay đổi có mục đích.
13</p>
14
15<h2 id="enchant-me">Thu hút tôi</h2>
16
17<div class="cols">
18  <div class="col-7">
19
20<h4 id="delight-me">Khiến tôi xao xuyến vì ngạc nhiên</h4>
21<p>Cảnh vật đẹp, hoạt hình được bố trí cẩn thận hay hiệu ứng âm thanh đúng lúc khiến
22trải nghiệm càng thêm phần thích thú. Hiệu ứng tinh tế góp phần đem lại cảm giác nhẹ nhàng nhưng
23mạnh mẽ trong tầm tay.</p>
24
25  </div>
26  <div class="col-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="cols">
36  <div class="col-7">
37
38<h4 id="real-objects-more-fun">Các đối tượng đời thật trông thú vị hơn các nút bấm và menu</h4>
39<p>Để người dùng trực tiếp chạm và thao tác các đối tượng trong ứng dụng của bạn. Làm như vậy vừa giảm nỗ lực nhận thức
40cần thiết để thực hiện một tác vụ, vừa đem lại sự thỏa mãn về cảm xúc.</p>
41
42  </div>
43  <div class="col-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="cols">
53  <div class="col-7">
54
55<h4 id="make-it-mine">Hãy để tôi biến nó thành của mình</h4>
56<p>Người dùng thích cảm giác tiếp xúc cá nhân bởi nó giúp họ cảm thấy rất tự nhiên và nắm quyền kiểm soát. Cung cấp
57thiết lập mặc định tuyệt đẹp, dễ cảm nhận, nhưng cũng phải xét đến những tùy chỉnh thú vị, có thể lựa chọn để không cản trở
58nhiệm vụ chính yếu.</p>
59
60  </div>
61  <div class="col-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="cols">
71  <div class="col-7">
72
73<h4 id="get-to-know-me">Hiểu rõ về tôi</h4>
74<p>Tìm hiểu sở thích của người dùng qua thời gian. Thay vì bảo họ chọn
75đi chọn lại cùng một thứ, hãy bố trí để những lựa chọn trước đó dễ dàng trong tầm với.</p>
76
77  </div>
78  <div class="col-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">Đơn giản hóa cuộc sống của tôi</h2>
86
87<div class="cols">
88  <div class="col-7">
89
90<h4 id="keep-it-brief">Hãy ngắn gọn</h4>
91<p>Sử dụng những cụm từ ngắn với từ ngữ đơn giản. Người dùng thường hay bỏ qua những câu dài dòng.</p>
92
93  </div>
94  <div class="col-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="cols">
104  <div class="col-7">
105
106<h4 id="pictures-faster-than-words">Hình ảnh đến nhanh hơn câu chữ</h4>
107<p>Hãy nghĩ đến việc dùng hình ảnh để giải thích ý tưởng. Chúng dễ thu hút sự chú ý của người dùng và có thể hiệu quả hơn nhiều
108so với từ ngữ.</p>
109
110  </div>
111  <div class="col-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="cols">
121  <div class="col-7">
122
123<h4 id="decide-for-me">Quyết định hộ tôi nhưng phải để tôi “chốt hạ”</h4>
124<p>Hãy đưa ra phán đoán tốt nhất và hành động thay vì hỏi trước. Quá nhiều lựa chọn và quyết định khiến người dùng
125không vui. Phòng trường hợp bạn sai, hãy cho 'hoàn tác'.</p>
126
127  </div>
128  <div class="col-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="cols">
138  <div class="col-7">
139
140<h4 id="only-show-when-i-need-it">Chỉ hiện những thứ tôi cần khi tôi cần đến</h4>
141<p>Người dùng sẽ bị quá tải khi họ thấy quá nhiều thứ cùng lúc. Hãy chia các tác vụ và thông tin thành những đoạn nhỏ,
142dễ nắm bắt. Ẩn những tùy chọn không thiết yếu vào thời điểm đó và nhắc người dùng khi đi qua chúng.</p>
143
144  </div>
145  <div class="col-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="cols">
155  <div class="col-7">
156
157<h4 id="always-know-where-i-am">Tôi cần luôn biết mình đang ở đâu</h4>
158<p>Khiến người khác tự tin rằng họ biết mình đang ở đâu. Khiến những địa điểm trong ứng dụng của bạn trông khác biệt
159và sử dụng chuyển tiếp để thể hiện mối quan hệ giữa các màn hình. Cung cấp phản hồi về các tác vụ đang diễn ra.</p>
160
161  </div>
162  <div class="col-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="cols">
172  <div class="col-7">
173
174<h4 id="never-lose-my-stuff">Không bao giờ đánh mất những thứ của tôi</h4>
175<p>Lưu những thứ người dùng mất thời gian để tạo và cho phép họ truy cập chúng từ mọi nơi. Nhớ các cài đặt,
176thao tác chạm cá nhân và nội dung khởi tạo giữa các điện thoại, máy tính bảng và máy tính. Điều đó sẽ khiến việc nâng cấp
177trở nên dễ dàng nhất trên đời.</p>
178
179  </div>
180  <div class="col-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="cols">
190  <div class="col-7">
191
192<h4 id="looks-same-should-act-same">Nếu bề ngoài giống nhau thì hành động cũng phải như nhau</h4>
193<p>Giúp người dùng phân biệt sự khác nhau về chức năng bằng cách khiến bề ngoài trông khác biệt thay vì chỉ khác một chút.
194Tránh những chế độ trông giống nhau nhưng lại phản hồi khác nhau với cùng nội dung đầu vào.</p>
195
196  </div>
197  <div class="col-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="cols">
207  <div class="col-7">
208
209<h4 id="interrupt-only-if-important">Chỉ làm tôi gián đoạn nếu thật sự quan trọng</h4>
210<p>Như một trợ lý cá nhân đúng nghĩa, hãy tránh làm người dùng mất thời gian vào thứ không quan trọng. Người dùng thường muốn
211tập trung và trừ trường hợp rất quan trọng và nhạy cảm về thời gian, nếu không việc gián đoạn có thể khiến họ khó chịu.</p>
212
213  </div>
214  <div class="col-6">
215
216    <img src="{@docRoot}design/media/principles_important_interruption.png">
217
218  </div>
219</div>
220
221<h2 id="make-me-amazing">Làm tôi ấn tượng</h2>
222
223<div class="cols">
224  <div class="col-7">
225
226<h4 id="give-me-tricks">Cho tôi xem những trò có thể áp dụng ở mọi nơi</h4>
227<p>Người dùng thấy thích thú khi họ tự khám phá mọi thứ. Thiết kế ứng dụng của bạn dễ học hỏi hơn nhờ
228tận dụng các kiểu mẫu trực quan và trí nhớ có điều kiện từ các ứng dụng Android khác. Ví dụ, cử chỉ trượt nhanh
229có thể là một lối tắt điều hướng hay.</p>
230
231  </div>
232  <div class="col-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="cols">
242  <div class="col-7">
243
244<h4 id="its-not-my-fault">Không phải lỗi của tôi</h4>
245<p>Nhẹ nhàng trong cách nhắc người dùng sửa lỗi. Họ luôn muốn cảm thấy thông minh khi dùng ứng dụng
246của bạn. Nếu có gì đó không đúng, hãy đưa ra chỉ dẫn khắc phục rõ ràng nhưng bỏ qua những chi tiết kỹ thuật.
247Nếu bạn có thể khắc phục mà không làm phiền họ thì càng tuyệt.</p>
248
249  </div>
250  <div class="col-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="cols">
260  <div class="col-7">
261
262<h4 id="sprinkle-encouragement">Khơi gợi sự khuyến khích</h4>
263<p>Chia các nhiệm vụ phức tạp thành nhiều bước nhỏ hơn và dễ hoàn thành. Phản hồi hành động,
264kể cả khi đó chỉ là một vầng sáng nhỏ.</p>
265
266  </div>
267  <div class="col-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="cols">
277  <div class="col-7">
278
279<h4 id="do-heavy-lifting-for-me">Làm giúp tôi những chuyện nặng nhọc</h4>
280<p>Khiến người mới cảm thấy mình như chuyên gia bằng cách cho phép họ làm những việc mà họ chưa từng nghĩ mình có thể làm được. Ví
281dụ, các lối tắt kết hợp nhiều hiệu ứng ảnh chụp có thể khiến một bức ảnh nghiệp dư trở nên đáng kinh ngạc
282chỉ sau vài bước.</p>
283
284  </div>
285  <div class="col-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="cols">
295  <div class="col-7">
296
297<h4 id="make-important-things-fast">Nhanh chóng đến phần quan trọng</h4>
298<p>Không phải hành động nào cũng như nhau. Quyết định xem điều gì là quan trọng nhất trong ứng dụng của bạn và khiến nó dễ tìm thấy và
299nhanh chóng được sử dụng, ví dụ như nút chụp trong camera hoặc nút tạm dừng trong một trình phát nhạc.</p>
300
301  </div>
302  <div class="col-6">
303
304    <img src="{@docRoot}design/media/principles_make_important_fast.png">
305
306  </div>
307</div>
308