Baca dalam bahasa Inggris

Bagikan melalui


Panduan desain interaksi widget

Catatan

Beberapa informasi berkaitan dengan produk yang telah dirilis sebelumnya, yang mungkin dimodifikasi secara substansial sebelum dirilis secara komersial. Microsoft tidak memberikan jaminan, tersirat maupun tersurat, sehubungan dengan informasi yang diberikan di sini.

Penting

Fitur yang dijelaskan dalam topik ini tersedia di build pratinjau Dev Channel Windows yang dimulai dengan build 25217. Untuk informasi tentang build pratinjau Windows, lihat Pratinjau Orang Dalam Windows 10.

Artikel ini menyediakan panduan terperinci untuk merancang interaksi untuk widget Windows.

Widget harus sekilas dan terfokus, dan harus mewakili satu aspek dari tujuan utama aplikasi. Widget dapat menyediakan satu atau beberapa panggilan untuk bertindak. Ketika pengguna mengklik ajakan bertindak, widget harus meluncurkan aplikasi atau situs web terkait alih-alih menerapkan tindakan di widget itu sendiri. Widget hanya memiliki satu halaman utama yang dapat menampung beberapa interaksi. Mengklik item di widget seharusnya tidak pernah membawa Anda ke tampilan widget yang sama sekali berbeda. Misalnya, dalam widget cuaca Anda mungkin menunjukkan cuaca selama beberapa hari tetapi mengklik salah satu hari tidak akan memperluas detail sebaris, tetapi sebaliknya akan meluncurkan aplikasi atau web.

Berikut ini adalah jumlah maksimum titik sentuh yang direkomendasikan untuk setiap ukuran widget yang didukung.

Ukuran widget Titik sentuh maksimum
kecil 1
 Sedang 3
besar 4

Elemen navigasi berikut ini tidak didukung di Widget Windows:

  • Pivot tidak akan didukung dalam widget
  • Halaman L2 tidak akan didukung dalam widget
  • Pengguliran vertikal atau horizontal tidak akan didukung dalam Widget

Kontainer

Gambar berikut menunjukkan contoh penggunaan elemen kontainer dalam templat widget. Kontainer mengelompokkan elemen visual ke dalam kolom dan baris untuk membuat struktur kisi hierarkis.

Empat gambar widget yang mengilustrasikan kontainer. Widget dalam gambar memiliki elemen yang dibagi menjadi baris dan kolom untuk menyediakan struktur kisi hierarkis.

Gambar berikut menunjukkan contoh penggunaan elemen tautan gambar dalam templat widget.

Dua gambar widget yang mengilustrasikan tautan gambar. Gambar disusun dalam kolom dan baris yang membuat kisi.

Penentuan halaman

Gambar berikut menunjukkan contoh penomoran halaman dalam templat widget. Kontrol penomoran halaman dapat diratakan secara horizontal atau vertikal. Panah navigasi muncul sebagai respons terhadap kursor mengarahkan kursor.

Sekumpulan dua gambar ini menunjukkan penomoran halaman horizontal. Pada gambar pertama, kolom titik diratakan di sepanjang sisi kanan. Satu titik lebih besar untuk menunjukkan halaman yang saat ini aktif. Pada gambar kedua, kursor mengarahkan mouse ke panah yang menunjuk ke bawah di bagian bawah widget yang memungkinkan pengguna berpindah ke halaman berikutnya. Ada panah penunjuk ke atas yang cocok di bagian atas widget untuk menavigasi ke halaman sebelumnya.

Sekumpulan dua gambar ini menunjukkan penomoran halaman vertikal. Pada gambar pertama, baris titik diratakan di sepanjang bagian bawah. Satu titik lebih besar untuk menunjukkan halaman yang saat ini aktif. Pada gambar kedua, kursor mengarahkan mouse ke panah kanan di sisi kanan widget yang memungkinkan pengguna berpindah ke halaman berikutnya. Ada panah penunjuk kiri yang cocok di sisi kiri widget untuk menavigasi ke halaman sebelumnya.

Kedua gambar ini menunjukkan bagaimana kontrol penomoran halaman terlihat ketika widget memiliki latar belakang gambar.

Gambar berikut menunjukkan contoh hyperlink dalam templat widget.

Dua gambar widget yang mengilustrasikan hyperlink. Gambar pertama memperlihatkan string teks yang ditautkan. Teksnya biasa. Pada gambar kedua, kursor mouse mengarah ke hyperlink, yang menyebabkan teks digarisbawahi.

Gambar memperlihatkan hyperlink yang berpusat di bagian bawah widget, tepat di atas baris horizontal titik penomoran halaman. X merah menunjukkan bahwa titik penomoran halaman dan hyperlink tidak boleh berada di ruang yang sama. Di sebelah kanan gambar lain memperlihatkan hyperlink di bagian bawah, tetapi titik penomoran halaman diratakan secara vertikal dalam kolom di sisi kanan. Pemeriksaan hijau menunjukkan bahwa penempatan kedua elemen ini benar.

Dua gambar widget yang mengilustrasikan menu dropdown. Di gambar kiri menu dropdown diciutkan. Di gambar kanan dropdown diperluas dan diperluas di atas batas widget

Widget dapat meluas sedikit melebihi ukuran widget mereka untuk sementara jika pengguna berinteraksi dengan menu atau dropdown. Perilaku menu harus mematikan lampu dan menutup menu jika pengguna mengklik di luar menu / area dropdown.