1page.title=Prinsip Desain Android 2@jd:body 3 4<p>Prinsip desain ini dikembangkan oleh dan untuk Tim Pengalaman Pengguna 5 Android agar selalu mempertimbangkan kepentingan pengguna. 6Untuk pengembang dan desainer Android, mereka terus 7meletakkan dasar pedoman desain yang lebih detail untuk beragam tipe 8perangkat.</p> 9 10<p> 11Perhatikan prinsip-prinsip ini saat Anda menerapkan 12kreativitas dan pemikiran desain sendiri. Menyimpang dengan sengaja. 13</p> 14 15<h2 id="enchant-me">Pikat Saya</h2> 16 17<div class="cols"> 18 <div class="col-7"> 19 20<h4 id="delight-me">Senangkan saya dengan cara yang mengejutkan</h4> 21<p>Permukaan yang cantik, animasi yang ditempatkan dengan hati-hati, atau efek suara di saat yang tepat sungguh menyenangkan untuk 22dinikmati. Efek yang lembut menimbulkan perasaan serba mudah dan kesadaran bahwa kekuatan yang 23bisa diandalkan ada dalam genggaman.</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"> </div> 34 35<div class="cols"> 36 <div class="col-7"> 37 38<h4 id="real-objects-more-fun">Objek sungguhan lebih menyenangkan daripada tombol dan menu</h4> 39<p>Biarkan orang langsung menyentuh dan memanipulasi objek dalam aplikasi Anda. Ini mengurangi upaya kognitif 40yang diperlukan untuk menjalankan tugas sekaligus membuatnya lebih memuaskan secara emosional.</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"> </div> 51 52<div class="cols"> 53 <div class="col-7"> 54 55<h4 id="make-it-mine">Biarkan saya memilikinya</h4> 56<p>Orang suka menambahkan sentuhan pribadi karena membantu mereka merasa betah dan memegang kendali. Memberikan 57default yang pantas dan indah, tetapi juga mempertimbangkan penyesuaian opsional yang menyenangkan, yang tidak mengganggu 58tugas utama.</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"> </div> 69 70<div class="cols"> 71 <div class="col-7"> 72 73<h4 id="get-to-know-me">Kenali saya</h4> 74<p>Pelajari preferensi orang dari waktu ke waktu. Daripada meminta mereka untuk membuat pilihan yang sama 75berulang-ulang, tempatkan pilihan sebelumnya agar mudah dijangkau.</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">Sederhanakan Hidup Saya</h2> 86 87<div class="cols"> 88 <div class="col-7"> 89 90<h4 id="keep-it-brief">Persingkat</h4> 91<p>Gunakan frasa pendek dengan kata-kata sederhana. Orang cenderung melewatkan kalimat-kalimat panjang.</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"> </div> 102 103<div class="cols"> 104 <div class="col-7"> 105 106<h4 id="pictures-faster-than-words">Gambar lebih cepat dibanding kata-kata</h4> 107<p>Pertimbangkan menggunakan gambar untuk menjelaskan gagasan. Gambar menarik perhatian orang dan bisa jauh lebih efisien 108dibanding kata-kata.</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"> </div> 119 120<div class="cols"> 121 <div class="col-7"> 122 123<h4 id="decide-for-me">Putuskan untuk saya tetapi biarkan saya yang menentukan</h4> 124<p>Gunakan tebakan terbaik Anda dan bertindaklah daripada meminta terlebih dahulu. Terlalu banyak pilihan dan keputusan membuat orang 125tidak suka. Untuk berjaga-jaga jika Anda salah, izinkan 'pembatalan'.</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"> </div> 136 137<div class="cols"> 138 <div class="col-7"> 139 140<h4 id="only-show-when-i-need-it">Cukup tunjukkan yang saya perlukan ketika saya memerlukannya</h4> 141<p>Orang merasa kewalahan ketika melihat terlalu banyak hal sekaligus. Uraikan tugas dan informasi menjadi potongan-potongan 142kecil yang mudah dicerna. Sembunyikan opsi yang tidak perlu pada saat ini, dan ajari orang sambil jalan.</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"> </div> 153 154<div class="cols"> 155 <div class="col-7"> 156 157<h4 id="always-know-where-i-am">Saya harus selalu tahu di mana saya berada</h4> 158<p>Beri orang kepercayaan diri bahwa mereka tahu di mana berada. Buat agar tempat-tempat dalam aplikasi Anda terlihat berbeda dan 159gunakan transisi untuk menunjukkan hubungan antar layar. Berikan umpan balik tentang tugas yang sedang berlangsung.</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"> </div> 170 171<div class="cols"> 172 <div class="col-7"> 173 174<h4 id="never-lose-my-stuff">Jangan sekali-kali menghilangkan milik saya</h4> 175<p>Simpan apa yang telah susah-payah dibuat orang dan biarkan mereka mengaksesnya dari mana saja. Ingat pengaturan, 176sentuhan pribadi, dan kreasi lintas ponsel, tablet, dan komputer. Itu membuat pemutakhiran menjadi 177hal termudah di dunia.</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"> </div> 188 189<div class="cols"> 190 <div class="col-7"> 191 192<h4 id="looks-same-should-act-same">Jika terlihat sama, seharusnya fungsinya sama</h4> 193<p>Bantu orang merasakan perbedaan fungsional dengan membuat mereka terlihat berbeda daripada mirip. 194Hindari mode, yaitu tempat yang terlihat mirip tetapi berbeda fungsinya pada input yang sama.</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"> </div> 205 206<div class="cols"> 207 <div class="col-7"> 208 209<h4 id="interrupt-only-if-important">Sela saya jika penting saja</h4> 210<p>Layaknya asisten pribadi yang baik, lindungi orang dari detail yang tidak penting. Orang ingin tetap 211fokus, dan kecuali jika memang penting dan sensitif waktu, interupsi bisa melelahkan dan menjengkelkan.</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">Buat Saya Terpesona</h2> 222 223<div class="cols"> 224 <div class="col-7"> 225 226<h4 id="give-me-tricks">Beri saya trik yang efektif di mana saja</h4> 227<p>Orang merasa senang ketika mereka memahami sendiri sesuatu. Jadikan aplikasi Anda lebih mudah dipelajari dengan 228memanfaatkan pola visual dan memori otot dari aplikasi Android lainnya. Misalnya, gerakan menggeser 229dapat menjadi pintasan navigasi yang bagus.</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"> </div> 240 241<div class="cols"> 242 <div class="col-7"> 243 244<h4 id="its-not-my-fault">Bukan salah saya</h4> 245<p>Bersikap ramahlah dalam meminta orang untuk melakukan koreksi. Mereka ingin merasa pintar ketika menggunakan 246aplikasi Anda. Jika terjadi kesalahan, berikan petunjuk perbaikan yang jelas tetapi lepaskan mereka dari detail teknis. 247Jika Anda dapat memperbaikinya secara diam-diam, tentu lebih baik.</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"> </div> 258 259<div class="cols"> 260 <div class="col-7"> 261 262<h4 id="sprinkle-encouragement">Berikan dorongan</h4> 263<p>Uraikan tugas-tugas rumit menjadi langkah-langkah kecil yang dapat dilakukan dengan mudah. Beri umpan balik tentang tindakan, 264meskipun hanya sesuatu yang sederhana.</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"> </div> 275 276<div class="cols"> 277 <div class="col-7"> 278 279<h4 id="do-heavy-lifting-for-me">Lakukan pekerjaan yang sulit untuk saya</h4> 280<p>Buatlah pemula merasa seperti ahli dengan memungkinkan mereka untuk melakukan hal-hal yang mereka pikir tidak akan bisa. 281Misalnya, pintasan yang menggabungkan beberapa efek foto dapat membuat foto amatir terlihat mengagumkan hanya 282dalam beberapa langkah.</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"> </div> 293 294<div class="cols"> 295 <div class="col-7"> 296 297<h4 id="make-important-things-fast">Percepat hal penting</h4> 298<p>Tidak semua tindakan itu sama. Putuskan apa yang terpenting dalam aplikasi Anda dan permudah untuk menemukannya serta 299cepat untuk digunakan, seperti tombol rana pada kamera, atau tombol jeda pada pemutar musik.</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
