Home | History | Annotate | Download | only in get-started
      1 page.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.
      6 Untuk pengembang dan desainer Android, mereka terus
      7 meletakkan dasar pedoman desain yang lebih detail untuk beragam tipe
      8 perangkat.</p>
      9 
     10 <p>
     11 Perhatikan prinsip-prinsip ini saat Anda menerapkan
     12 kreativitas 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
     22 dinikmati. Efek yang lembut menimbulkan perasaan serba mudah dan kesadaran bahwa kekuatan yang
     23 bisa 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">&nbsp;</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
     40 yang 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">&nbsp;</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
     57 default yang pantas dan indah, tetapi juga mempertimbangkan penyesuaian opsional yang menyenangkan, yang tidak mengganggu
     58 tugas 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">&nbsp;</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
     75 berulang-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">&nbsp;</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
    108 dibanding 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">&nbsp;</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
    125 tidak 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">&nbsp;</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
    142 kecil 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">&nbsp;</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
    159 gunakan 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">&nbsp;</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,
    176 sentuhan pribadi, dan kreasi lintas ponsel, tablet, dan komputer. Itu membuat pemutakhiran menjadi
    177 hal 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">&nbsp;</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.
    194 Hindari 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">&nbsp;</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
    211 fokus, 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
    228 memanfaatkan pola visual dan memori otot dari aplikasi Android lainnya. Misalnya, gerakan menggeser
    229 dapat 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">&nbsp;</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
    246 aplikasi Anda. Jika terjadi kesalahan, berikan petunjuk perbaikan yang jelas tetapi lepaskan mereka dari detail teknis.
    247 Jika 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">&nbsp;</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,
    264 meskipun 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">&nbsp;</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.
    281 Misalnya, pintasan yang menggabungkan beberapa efek foto dapat membuat foto amatir terlihat mengagumkan hanya
    282 dalam 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">&nbsp;</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
    299 cepat 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