Tata letak dan penspasian konten

Artikel ini menyediakan beberapa tips dan contoh praktis untuk membantu Anda merancang konten aplikasi Anda: alasan pengaturan spasi Windows, penggunaan skala tipografi untuk menunjukkan hierarki, daftar dan tabel, serta cara mengelompokkan kontrol.

Penspasian dan selokan

Penggunaan penspasian berukuran konsisten dan selokan secara semantik mengelompokkan pengalaman menjadi komponen terpisah. Nilai-nilai ini disesuaikan dengan logika sudut bulat kami dan bersama-sama membantu menciptakan tata letak yang terpadu dan fungsional.

Dua tombol dipisahkan oleh 8 piksel.

8epx di antara 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

Sebuah kontrol dan sebuah 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 beragam 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 grid

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

Contoh daftar dengan item daftar multi-elemen.

Untuk daftar multibaris, gunakan Body dan Caption dari type ramp, dan ikon 32epx.

Gunakan Body Strong untuk judul bagian.

Contoh daftar horizontal.

Saat menggunakan ikon atau elemen gambar orang untuk elemen grid, gunakan teks keterangan yang rata tengah.

Contoh daftar yang berisi item daftar besar.

Gunakan gaya Isi untuk teks utama dan rata kiri dengan gambar apabila 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 anak.

Contoh memperlihatkan cara menggunakan kontrol expander (tautan) dengan gaya daftar dan kontrol umum. Kontrol harus disejajarkan ke kanan dengan jarak 16epx antara elemen kontrol dan tombol ekspander.

Contoh bagaimana kontrol disejajarkan di dalam expander.

Contoh ini menunjukkan penyelarasan kontrol saat ditempatkan di dalam expander. Memasukkan kontrol 48epx.

  • Last updated on