Bilah judul

Bilah judul berada di bagian atas aplikasi pada lapisan dasar. Tujuan utamanya adalah agar pengguna dapat mengidentifikasi aplikasi melalui judulnya, memindahkan jendela aplikasi, dan meminimalkan, memaksimalkan, atau menutup aplikasi.

Desain standar

Bagian ini menjelaskan rekomendasi desain dan perilaku bagian dari bilah judul standar.

Bilah

Desain

• Bilah judul standar memiliki tinggi 32px.
• Latar belakang default bilah judul adalah Mica, namun kami sarankan bilah judul menyatu dengan sisa jendela jika memungkinkan.
• Bilah judul membantu pengguna membedakan saat jendela aktif dan tidak aktif. Semua elemen bilah judul harus semi transparan ketika jendela tidak aktif.
• Warna bilah judul harus disesuaikan ketika pengguna beralih ke tema kontras tinggi, atau antara mode terang dan gelap.
  • Untuk tema kontras tinggi, aplikasi harus menggunakan SystemColors kelas untuk menentukan pewarnaan elemen UI yang tepat untuk memfasilitasi pengalaman kontras tinggi yang unggul.

Perilaku

• Bilah judul memainkan peran penting dalam memposisikan ulang dan mengubah ukuran jendela. Semua ruang kosong di bilah judul atau spasi yang diambil oleh elemen non-interaktif seperti judul jendela harus dapat diseret.
• Klik kanan/tekan-dan-tahan di bagian mana pun dari bilah judul yang tidak memiliki elemen interaktif harus menampilkan menu jendela sistem.
• Klik dua kali/ketuk harus beralih antara memaksimalkan jendela dan memulihkan jendela.

Ikon

Desain

• Ukuran ikon jendela adalah 16px kali 16px.
• Tempatkan ikon 16px dari batas paling kiri di LTR, atau batas paling kanan di RTL.
  • Jika tombol kembali ada, letakkan ikon jendela 16px di sebelah kanan tombol kembali.
• Ikon jendela harus dipusatkan secara vertikal di bilah judul. Misalnya, Ketika tinggi bilah judul adalah 32px, margin atas dan bawah adalah 8px.

Perilaku

• Satu klik/ketuk pada ikon akan menampilkan menu jendela sistem.
• Klik dua kali/ketuk harus menutup jendela.

Judul

Desain

• Tempatkan judul jendela 16px dari ikon jendela atau tombol kembali.
  • Jika tidak ada ikon atau tombol belakang, letakkan judul jendela 16px dari batas paling kiri di LTR, atau batas paling kanan di RTL.
• Judul jendela harus menggunakan Variabel UI Segoe (jika tersedia) atau font UI Segoe.
• Judul jendela harus menggunakan teks gaya keterangan (lihat ramp jenis XAML).
• Judul jendela dapat dipotong, dan elipsis ditambahkan jika lebar jendela lebih kecil dari panjang elemen bilah judul. Tombol ikon dan keterangan (min, maks, dan tutup) harus selalu terlihat sepenuhnya.

Perilaku

• Klik kanan/tekan-dan-tahan pada ikon akan menampilkan menu jendela sistem.
• Klik dua kali/ketuk harus beralih antara memaksimalkan jendela dan memulihkan jendela.
• Judul jendela dan elemen tekstual lainnya di bilah judul harus merespons penskalan teks. Ini mungkin mengharuskan bilah judul tumbuh tinggi.

Kontrol keterangan (minimalkan, maksimalkan, pulihkan, tutup)

Jika Anda membuat tombol keterangan sendiri untuk aplikasi, ikuti panduan ini untuk mencocokkan tombol keterangan sistem.

Desain

• Gunakan ikon ini untuk tombol:
  • Minimalkan ikon: E921 ChromeMinimize
  • Ikon Maksimalkan: E922 ChromeMaximize
  • Ikon pemulihan: E923 ChromeRestore
  • Ikon tutup: E8BB ChromeClose
• Ikon untuk tombol maksimalkan dan pulihkan memiliki sudut bulat.
• Tombol keterangan memiliki backplate berdarah penuh.
• Tombol keterangan merespons istirahat, di hover, pada status ditekan, aktif, dan tidak aktif.

Pola desain tambahan

Tombol Kembali

Desain

Ikon tombol kembali yang direkomendasikan adalah: E830 ChromeBack

• Jika ada tombol kembali, tombol tersebut harus ditempatkan di sebelah kiri judul aplikasi atau kombinasi ikon/judul (dalam LTR).
• Tombol kembali merespons untuk beristirahat, di hover, pada status ditekan, aktif, dan tidak aktif.
• Tombol kembali harus 16px oleh 16px dan berpusat secara vertikal di bilah judul. Tombol harus memiliki backplate berdarah penuh.
• Tombol kembali harus 16px dari batas paling kiri di LTR, atau batas paling kanan di RTL, dan 16px dari elemen berikutnya ke kiri atau kanannya.

Cari

Desain

Jika fungsionalitas pencarian global ada, kotak pencarian harus ditambahkan ke bilah judul, dipusatkan ke jendela. Tingkatkan ukuran bilah judul menjadi 48px saat Anda menyertakan kotak pencarian.

Kotak pencarian harus responsif untuk bereaksi terhadap perubahan ukuran jendela.

Sosial

Jika representasi akun ada, kontrol gambar orang harus ditempatkan di sebelah kiri kontrol keterangan. Tingkatkan ukuran bilah judul menjadi 48px saat Anda menyertakan gambar orang.

Tab

Jika Anda menggunakan tab sebagai elemen utama aplikasi, gunakan ruang bilah judul dan pertahankan kontrol keterangan yang berlabuh di sebelah kanan.

Langkah berikutnya

Lihat panduan pengembang untuk bilah judul