Bendera negara untuk antarmuka web
Unduh bendera negara SVG untuk situs web global yang dapat diakses
Unduh paket siap produksi berisi 256 bendera negara dalam format SVG untuk situs web, aplikasi, dasbor, pemilih wilayah, daftar server, dan UI lokalisasi. File-file ini kecil, dapat diskalakan, ramah cache, dan dirancang untuk dipasangkan dengan label teks yang jelas.
Ikhtisar
Gunakan bendera negara sebagai sinyal regional, bukan sebagai jalan pintas untuk bahasa
Bendera negara paling efektif digunakan saat pilihan berkaitan dengan negara, wilayah, pasar, zona pengiriman, mata uang, lokasi kantor, atau lokasi server. Bendera dapat mendukung lokalisasi, tetapi tidak boleh menggantikan nama bahasa karena satu bahasa bisa digunakan di banyak negara dan satu negara bisa memiliki banyak bahasa.
Pemeriksaan kecocokan
Bendera negara dan pemilih bahasa menyelesaikan masalah UX yang berbeda
Bendera adalah petunjuk visual yang kuat untuk geografi. Pemilih bahasa adalah keputusan terkait pembacaan dan aksesibilitas. Antarmuka yang paling bersih sering menggabungkan bendera dengan label bahasa asli, nama wilayah, atau nama negara daripada hanya mengandalkan gambar saja.
Gunakan bendera untuk konteks regional
- Pemilih negara atau wilayah di mana label yang terlihat menyebutkan nama negara atau pasar.
- Daftar lokasi server, zona pengiriman, lokasi kantor, pemilih mata uang, dan tabel harga regional.
- Halaman arahan yang dilokalkan di mana URL, salinan, metadata, dan bendera semuanya menunjuk ke wilayah yang sama.
- Dasbor kompak di mana petunjuk visual kecil membantu pengguna memindai baris khusus negara dengan cepat.
Hindari menggunakan bendera sebagai satu-satunya label bahasa
- Pengalih bahasa yang hanya menampilkan bendera tanpa nama bahasa seperti Deutsch, English, atau Espanol.
- Pasar di mana satu negara memiliki beberapa bahasa resmi atau satu bahasa digunakan di banyak negara.
- Awan bendera dekoratif yang menambah permintaan jaringan tanpa membantu pengguna membuat keputusan.
- Teks alt yang hanya mengatakan DE, bendera, atau ikon alih-alih mendeskripsikan negara saat gambar bermakna.
Daftar Isi
Paket bendera
Koleksi ini memberi Anda beberapa bentuk tanpa mengubah alur kerja kode negara
Setiap paket berisi 256 bendera SVG. Gunakan bendera berbentuk persegi panjang untuk tata letak padat, lingkaran atau persegi untuk pemilih kompak, bendera bergelombang untuk penekanan visual lebih, dan oval untuk lencana atau penanda premium. Implementasi dapat tetap sederhana karena kode negara tetap menjadi input yang stabil.
Bendera persegi panjang
Gunakan rasio aspek klasik untuk daftar negara, tabel harga, lokasi server, dan UI apa pun di mana bendera harus sejajar rapi dalam baris.
Bendera lingkaran dan persegi
Gunakan bentuk kompak untuk pemilih profil, laci bahasa, navigasi seluler, chip tabel, dan kontrol status kecil.
Bendera bergelombang
Gunakan bendera bergelombang saat halaman ingin terasa lebih editorial, misalnya di bagian hero, sorotan negara, atau panel wilayah unggulan.
Bendera oval
Gunakan bendera oval untuk lencana lembut, label pasar, penanda produk, dan tata letak di mana sudut tajam terasa terlalu berat.
Aksesibilitas
UI bendera yang dapat diakses membutuhkan teks, label, dan makna yang jujur
Bendera dapat menghias pilihan, tetapi nama yang dapat diakses harus menjelaskan pilihan tersebut. Gunakan teks alt seperti Bendera Jerman saat gambar bersifat informatif, gunakan teks alt kosong untuk bendera dekoratif, dan letakkan nama bahasa atau negara yang terlihat di samping kontrol penting.
Deskripsikan bendera yang informatif
Gunakan teks alt yang jelas saat bendera menyampaikan informasi negara. Jika nama negara yang sama sudah terlihat di sebelahnya, bendera bisa bersifat dekoratif.
Jangan pernah hanya mengandalkan bendera
Kontrol harus menampilkan nama negara, wilayah, atau bahasa dalam teks. Ini membantu pembaca layar, alat terjemahan, dan pengguna yang tidak mengenali bendera.
Ukuran kontrol, bukan hanya gambar
File SVG kecil tidak masalah, tetapi area yang dapat diklik harus tetap nyaman di perangkat seluler dan dapat difokuskan dengan keyboard pada formulir dan menu.
Performa
Bendera SVG tetap tajam dan murah untuk disajikan ketika jalur pengiriman sederhana
SVG adalah pilihan default yang tepat untuk bendera negara karena tepi tetap tajam pada ukuran apa pun dan file biasanya sangat kecil. Jaga markup tetap optimal, cache file dengan agresif, hindari menyematkan ratusan SVG inline dalam satu halaman, dan muat hanya bendera yang dapat dilihat atau dibutuhkan pengguna segera.
Gunakan SVG untuk tepi yang tajam
Bendera memiliki geometri tajam dan warna datar, jadi SVG biasanya tetap lebih kecil dan bersih dibandingkan beberapa ukuran raster.
Cache berdasarkan jalur file
Jaga URL bendera tetap stabil dan biarkan caching file statis melakukan pekerjaan rutin saat kunjungan berulang.
Hindari penyematan inline besar-besaran
SVG inline berguna untuk beberapa ikon, tetapi halaman dengan ratusan bendera inline menjadi berat untuk diproses.
Sediakan ruang tata letak
Tetapkan lebar dan tinggi dalam markup atau CSS agar antarmuka tidak bergeser saat bendera dimuat.
Implementasi
Pertahankan markup yang semantik sebelum Anda mempercantik bendera
Mulailah dengan tautan atau tombol nyata, sertakan label teks, atur ukuran bendera dengan CSS, dan biarkan file SVG dimuat dari jalur yang dapat di-cache. Ini memberikan konteks berguna bagi mesin pencari dan teknologi bantu sementara desainer tetap mendapatkan petunjuk visual yang cepat.
Markup opsi negara yang dapat diakses
Pola ini bekerja untuk pemilih wilayah, filter negara, dan tautan toko yang dilokalkan karena teks yang terlihat membawa makna sebenarnya.
<a class="country-option" href="/de-de/" hreflang="de-DE">
<img class="country-option__flag"
src="/svg/flages/4x3/de.svg"
width="24"
height="18"
alt="Flag of Germany" />
<span>Deutsch - Germany</span>
</a>Ukuran bendera yang stabil
Dimensi tetap mencegah pergeseran tata letak dan membuat bentuk bendera campuran lebih mudah dipindai.
.country-option {
display: inline-flex;
min-height: 44px;
align-items: center;
gap: 10px;
padding: 8px 12px;
}
.country-option__flag {
width: 24px;
height: 18px;
flex: 0 0 auto;
object-fit: cover;
border-radius: 4px;
}SEO dan UX
Bendera membantu SEO hanya ketika halaman sekitarnya menjelaskan wilayahnya
Mesin pencari tidak memberi peringkat halaman hanya karena mengandung bendera. Bendera membantu ketika URL, judul, tag hreflang, metadata, teks tautan, dan salinan yang terlihat semuanya menjelaskan maksud regional atau lokalisasi yang sama.
Padankan bendera dengan tautan yang sadar budaya
URL yang dilokalkan dan tag hreflang membawa makna SEO yang lebih kuat daripada gambar. Bendera harus mendukung sinyal tersebut, bukan menggantikannya.
Jaga judul, H1, dan deskripsi tetap berbeda
Gunakan judul yang fokus, H1 yang alami, dan deskripsi meta yang mengundang pengguna untuk meninjau atau mengunduh paket bendera.
Gunakan nama file dan teks alt yang bermakna
File seperti de.svg baik untuk kode, tetapi konten yang terlihat dan label yang dapat diakses harus menyebutkan Jerman atau nama negara yang relevan.
Gunakan bendera di tempat yang mengurangi usaha
Jika bendera membuat pengguna menebak, hapus atau tambahkan teks yang lebih jelas. UI lokalisasi yang baik terasa jelas tanpa legenda.
Mulai sekarang
Mulailah dengan contoh gratis, lalu pilih bentuk yang dibutuhkan antarmuka Anda
Uji sampel di pemilih, tabel, menu, atau dasbor Anda terlebih dahulu. Setelah jarak dan label terasa tepat, beli paket lengkap dan pertahankan implementasi berbasis kode negara yang sama untuk koleksi penuh.
Pertanyaan umum
Haruskah saya menggunakan bendera negara untuk pemilihan bahasa?
Gunakan bendera negara hanya sebagai petunjuk visual pendukung. Pemilih bahasa juga harus menampilkan nama bahasa karena satu bahasa dapat digunakan di banyak negara dan satu negara dapat memiliki beberapa bahasa.
Mengapa bendera SVG lebih baik daripada bendera PNG?
Bendera SVG tetap tajam pada setiap ukuran, biasanya memerlukan file yang sangat kecil, dan bekerja baik dengan tata letak responsif. PNG masih berguna untuk sistem lama, tetapi membutuhkan ukuran gambar yang tetap.
Bagaimana saya harus menulis teks alt untuk bendera?
Saat bendera bermakna, gunakan teks seperti Bendera Jerman. Saat nama negara sudah terlihat dan gambar bersifat dekoratif, gunakan teks alt kosong agar pembaca layar tidak mengulangi ide yang sama.
Apakah bendera meningkatkan SEO dengan sendirinya?
Tidak. Bendera mendukung SEO hanya jika halaman juga memiliki salinan regional yang jelas, URL yang sadar budaya, tag hreflang, metadata yang berguna, dan label yang dapat diakses.
Berapa banyak bendera yang termasuk dalam paket?
Setiap paket berisi 256 bendera negara SVG. Anda dapat menggunakan bentuk persegi panjang, persegi, lingkaran, gelombang, dan oval tergantung pada tata letak yang Anda buat.
Bagaimana saya menjaga halaman dengan banyak bendera tetap cepat?
Sajikan bendera sebagai file SVG yang dioptimalkan dari jalur yang dapat di-cache, sediakan ukuran tampilan mereka, dan hindari merender ratusan dokumen SVG inline saat file gambar biasa sudah cukup.