Siluet aplikasi Windows

Siluet menunjukkan pola hubungan umum antara elemen seperti lapisan aplikasi, menu, navigasi, perintah, dan area konten. Artikel ini berfokus pada siluet umum seperti yang digunakan di beberapa aplikasi dalam kotak Windows.

Lihat juga Dasar-Dasar Konten untuk pengaturan umum konten dan kontrol.

Siluet navigasi atas

Contoh aplikasi navigasi atas

NavigationView dapat digunakan di bagian atas lapisan konten aplikasi, membangun koneksi dengan konten di bawah ini. Perhatikan lokasi identitas pengguna/kontrol orang/gambar saat menggunakan navigasi atas.

Menempatkan navigasi pada baris yang sama dengan perintah dapat berguna saat mencoba memaksimalkan jumlah ruang vertikal untuk konten di bawah ini.

Margin konten dapat bervariasi. Contoh ini menggunakan margin 56epx, melengkapi potongan media yang besar. Gunakan margin yang lebih kecil untuk kebutuhan konten yang lebih kecil/ketat.

Dalam Windows 11, Foto adalah contoh yang baik dari aplikasi yang menggunakan siluet navigasi atas.

Contoh aplikasi bilah menu

Bilah Menu dapat digunakan sebagai bagian dari lapisan dasar bersama dengan CommandBar. Ini membawa lebih banyak fokus ke tugas utama area konten, dalam hal ini komposisi dan pengeditan.

Contoh ini menggambarkan editor teks menggunakan margin 12epx untuk melengaskan utilitas aplikasi.

Dalam Windows 11, Notepad adalah contoh yang baik dari aplikasi yang menggunakan siluet bilah menu.

Siluet navigasi kiri

Contoh aplikasi navigasi kiri

Kontrol NavigationView secara otomatis berada di lapisan dasar aplikasi. Ini membawa lebih banyak fokus ke tugas utama area konten. Perhatikan lokasi kontrol identitas/orang/gambar pengguna saat menggunakan navigasi kiri.

Margin konten dapat bervariasi. Contoh ini menggunakan margin 56epx untuk melengkungi kohesi konten dalam expander. Gunakan margin yang lebih kecil ketika kohesi konten kurang menjadi perhatian, karena elemen desain lainnya memperkuat kohesi, konten tidak ditumpuk di perluas, atau konten tidak boleh dikelompokkan secara logis.

Di Windows 11, Pengaturan adalah contoh yang baik dari aplikasi yang menggunakan siluet navigasi kiri.

Siluet Tampilan Tab

Contoh aplikasi tampilan tab

TabView dapat diintegrasikan dengan lapisan dasar aplikasi, dan kontrol bilah judul. Ini membawa lebih banyak fokus ke tugas utama area konten, dalam hal ini komposisi dan pengeditan kode.

Contoh ini menggambarkan editor teks menggunakan margin 12epx untuk melengaskan utilitas aplikasi.

Di Windows 11, Terminal adalah contoh yang baik dari aplikasi yang menggunakan siluet tampilan tab.