Bagikan melalui

Dasar-dasar desain konten untuk aplikasi Windows

  • Artikel

Artikel ini menyediakan beberapa tips dan contoh praktis untuk membantu Anda merancang konten aplikasi Anda: Alasan penspasian Windows, menggunakan ramp jenis untuk menunjukkan hierarki, daftar dan kisi, dan cara mengelompokkan kontrol.

Penspasian dan selokan

Penggunaan penspasian berukuran konsisten dan selokan secara semantik mengelompokkan pengalaman menjadi komponen terpisah. Nilai-nilai ini dipetakan ke logika sudut bulat kami dan bersama-sama membantu menciptakan tata letak yang kohesif dan dapat digunakan.

Dua tombol dipisahkan oleh 8 piksel.

8epx antar tombol

Tombol dan flyout dipisahkan oleh 8 piksel.

8epx antara tombol dan flyout

Kontrol dan header dipisahkan oleh 8 piksel.

8epx antara kontrol dan header

Kontrol dan label yang dipisahkan oleh 12 piksel

12epx antara kontrol dan label

Dua area konten dipisahkan oleh 12 piksel.

12epx antara area konten

Permukaan yang berisi teks dengan selokan 12 piksel di kedua sisi.

16epx antara permukaan dan teks tepi

Teks + hierarki

Ramp jenis (tautan) kami dirancang untuk menyediakan array ukuran yang dapat membantu mengomunikasikan hierarki dalam aplikasi.

Contoh teks menggunakan judul, subtitel, dan gaya isi saat ada ruang yang memadai.

Menggunakan Judul, Subtitel, dan Isi dengan penspasian 12epx.

Contoh penggunaan Body Strong alih-alih Judul dalam ruang terbatas.

Saat membedakan judul dalam ruang UI terbatas, gunakan Body Strong untuk judul tanpa spasi tambahan di antara blok teks.

Contoh penggunaan gaya Keterangan dalam spasi terbatas.

Gunakan ukuran keterangan untuk spasi yang sangat terbatas di mana teks diperlukan, seperti tombol perintah.

Daftar dan kisi

Ada berbagai gaya daftar dan kisi yang dapat dibuat. Di bawah ini adalah berbagai komposisi yang digunakan di Windows.

Contoh daftar dengan item daftar multi-elemen.

Untuk daftar multibaris, gunakan Isi dan Keterangan dari ramp jenis, dan ikon 32epx.

Gunakan Body Strong untuk header bagian.

Contoh daftar horizontal.

Saat menggunakan ikon atau elemen gambar orang untuk item kisi, gunakan Teks keterangan yang rata tengah.

Contoh daftar yang berisi item daftar besar.

Gunakan gaya Isi untuk teks utama dan rata kiri ke gambar jika daftar Anda berisi elemen grafis besar dengan teks.

Menggunakan kontrol

Beberapa contoh bagaimana kontrol dapat berhubungan satu sama lain dalam konfigurasi umum.

Contoh expander dengan kontrol turunan.

Contoh memperlihatkan cara menggunakan kontrol expander (tautan) dengan gaya daftar dan kontrol umum. Kontrol harus selaras kanan dengan 16epx antara tombol kontrol dan perluas.

Contoh bagaimana kontrol di dalam expander diratakan.

Contoh ini menunjukkan perataan kontrol saat ditempatkan di dalam expander. Inden kontrol 48epx.