Catatan
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba masuk atau mengubah direktori.
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba mengubah direktori.
Sebagian besar dialog Visual Studio adalah tata letak dialog Utilitas, yang merupakan dialog tak terduga yang mengikuti prinsip tata letak dialog Windows Desktop standar. Saat Visual Studio bergerak untuk me-refresh UI-nya, beberapa dialog yang lebih menonjol memiliki desain baru yang menetapkannya sebagai pengalaman yang menentukan produk. Tata letak dialog Tema ini memiliki tampilan bermasalah.
Tata letak dialog Utilitas
Semua kontrol dalam dialog utilitas harus dimulai di bagian atas/kiri dan mengalir ke bawah.
Jangan pernah pusatkan kontrol pada dialog untuk mengisi area besar.
Gunakan font lingkungan untuk semua teks dialog. Saat menulis spesifikasi visual, tentukan font lingkungan alih-alih memilih font dan ukuran tertentu. Lihat Font lingkungan.
Gunakan penspasian dan penempatan kontrol yang konsisten untuk mendukung tujuan kualitas dalam pengerjaan.
Dialog dapat menjadi lebih kompleks dari sejumlah besar kontrol, juxtaposition kontrol yang unik, atau keduanya. Untuk situasi kompleks tersebut, izinkan ruang yang memadai antara pengelompokan kontrol untuk memberi pengguna alur logis untuk diurai.
Contoh tata letak dialog utilitas
Semua dimensi dinyatakan sebagai piksel.
Gambar 08.01-a: Panduan penspasian untuk dialog utilitas dengan label di atas kontrol
Gambar 08.01-b: Panduan penspasian untuk dialog utilitas dengan label di sebelah kiri kontrol
Detail tata letak
Margin
Semua dialog harus memiliki batas 12 piksel di sekitar semua tepi.
Margin dalam bingkai grup harus 9 piksel dari tepi bingkai.
Margin dalam kontrol tab harus 6 piksel dari tepi kontrol tab.
Tombol perintah
Tombol perintah beroperasi pada bingkai dialog, bukan pada konten. Mereka harus ditempatkan di kanan bawah dan harus memiliki ruang variabel yang cukup di atas untuk mengatur tombol yang berbeda terpisah.
Jika ada tombol horizontal yang beroperasi dalam dialog, konfigurasi tombol perintah alternatif adalah tumpukan vertikal di kanan atas. Lihat tombol perintah interior di bawah ini.
Ruang di sebelah kiri tombol perintah (kiri bawah/tengah dialog) dianggap sebagai bagian dari "pita" kontrol operasi dialog. Satu-satunya hal yang harus mengganggu ruang tersebut adalah tautan Bantuan yang relevan dengan tugas atau dialog keseluruhan.
Tombol perintah harus 75x23 piksel.
Tombol perintah harus terpisah 6 piksel.
Gambar 08.01-c: Perataan tombol Dasar
Label
Rata kiri semua label.
Untuk label yang berada di atas kontrol, label harus rata kiri dengan tepat dengan kontrol di bawahnya dan bagian bawah label harus 5 piksel di atas bagian atas kontrol lain (misalnya, kotak kombo).
Untuk label yang berada di sebelah kiri kontrol, lebar minimum antara label dan kontrol input adalah 10 piksel. Kolom kedua tersirat harus dibuat untuk meratakan kotak teks, kotak kombo, atau kontrol lainnya.
Label adalah kasus kalimat dan diikuti oleh titik dua. Lihat Gaya teks.
Jarak antar kontrol
Stack mengontrol secara wajar. Tidak ada pedoman absolut untuk penspasian antara kontrol bertumpuk. Keketatan antara kontrol mungkin sedikit berbeda di antara dialog. Penspasian yang disarankan adalah 20 piksel untuk pasangan kontrol/label vertikal, dan 9 piksel untuk pasangan kontrol/label horizontal. Penspasian kontrol minimum untuk pasangan horizontal adalah 6 piksel.
Gambar 08.01-d: Rekomendasi jarak antar kontrol
Indentasi kontrol
Saat kontrol ditumpuk, ratakan kontrol dalam secara horizontal dengan tepi kiri kontrol di atas, biasanya label.
Gambar 08.01-e: Perataan kontrol berlapis
Lebar kontrol
Lebar kotak teks atau kontrol serupa lainnya tidak boleh lebih dari input rata-rata untuk bidang . Kata bahasa Inggris rata-rata adalah lima karakter. Misalnya, kotak teks yang memerlukan nama jalur panjang harus selama tata letak horizontal memungkinkan, sementara dropdown untuk nama platform hanya boleh berupa panjang yang memungkinkan entri terpanjang.
Teks pembantu
Dialog dapat menampilkan teks pembantu yang menyediakan informasi selengkapnya tentang tujuan dialog. Ini biasanya duduk di bagian atas dan bisa 1-2 kalimat.
Panjang garis harus lebar yang nyaman bagi pengguna untuk mengurai dan membaca. Dialog sedang harus lebarnya tidak lebih dari 550 piksel.
Tombol perintah interior
Dalam dialog yang lebih kompleks, kontrol internal mungkin memiliki tombol terkaitnya sendiri, yang mungkin memengaruhi tempat tombol penerapan dialog berada.
Gunakan perataan vertikal (kolom) tombol interior saat OK/Batal berorientasi horizontal di sudut kanan bawah.
Gunakan perataan horizontal (baris) tombol interior saat OK/Batal berorientasi vertikal di sudut kanan atas. Situasi ini kurang umum.
Ukuran tombol interior harus menargetkan ukuran tombol standar 75x23 piksel, yang cocok dengan ukuran tombol BATAL OK/jika memungkinkan. Jika label tombol membuat tombol melebihi ukuran tombol standar, tombol lain dalam set tersebut harus selaras dengan ukuran yang lebih lebar.
Gambar 08.01-f: Tombol Interior Vertikal dengan OK/Batal horizontal
Gambar 08.01-g: Tombol interior horizontal dengan OK/Batal vertikal
[Telusuri...] Tombol
[Telusuri...] tombol yang mengikuti kotak teks harus mengeja "Telusuri..." secara penuh, termasuk elipsis. Jika ruang ketat atau ada beberapa tombol [Telusuri...] pada layar, tombol dapat dikurangi menjadi elipsis saja.
Tata letak dialog bermasalah
Dialog bertema di Visual Studio memiliki tampilan yang lebih ringan dan menawarkan lebih banyak ruang kosong. Tipografi memberikan lebih banyak penekanan dan minat, menawarkan penspasian baris yang lebih terbuka dan variasi ukuran dan bobot font. Jika memungkinkan, chrome dan bilah judul telah dikurangi atau dihapus. Tata letak dialog ini harus mengikuti pola dasar ini:
Latar belakang dialog berwarna putih.
Ada batas aturan 1 piksel dalam abu-abu bernilai menengah.
Judul dialog tidak lagi berada di bilah judul, tetapi memberikan minat visual dan penekanan dalam ukuran titik yang lebih besar. (Lihat bagian ukuran font di Gaya teks.)
Label yang digabungkan dengan teks tambahan, seperti deskripsi, harus font Lingkungan + Tebal.
Kolom interior dipisahkan oleh aturan 1 piksel berwarna abu-abu muda.
Tautan default tidak memiliki garis bawah. Arahkan mouse dan status yang ditekan memiliki perubahan warna ditambah garis bawah.
Tombol Terapkan (seperti OK/Batal) berada di sudut kanan bawah.
Contoh tata letak dialog bermasalah
Gambar 08.01-h: Dialog bermasalah
Gambar 08.01-i: Dialog ber tema - Dimensi
Gambar 08.01-j: Dialog bermasalah - Font
Gambar 08.01-k: Dialog ber tema - Warna