Panduan desain interaksi widget

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 kontak maksimal
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-gambar tersebut disusun dalam kolom dan baris sehingga membentuk kisi.

Penentuan halaman

Gambar berikut menunjukkan contoh penomoran halaman dalam templat widget. Kontrol penomoran halaman dapat diratakan secara horizontal atau vertikal. Panah navigasi muncul saat kursor diarahkan ke area tersebut.

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 dari widget yang mengilustrasikan menu dropdown. Pada gambar kiri, menu dropdown dalam keadaan diciutkan. Pada gambar kanan, menu dropdown diperluas dan melampaui 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 area menu / dropdown.

  • Last updated on