Home-theater-designers
Antara muka pengguna gelap telah mendapat populariti, dan banyak aplikasi kini menawarkan pilihan untuk bertukar antara mod terang dan gelap. Walau bagaimanapun, melaksanakan UI gelap boleh menjadi tugas yang mencabar yang memerlukan perhatian yang teliti terhadap warna, fon, imej dan jarak yang digunakan.
Sebarang kesilapan dalam elemen ini boleh mengakibatkan pengalaman pengguna yang buruk. Petua berikut akan membantu anda semasa mereka bentuk UI gelap pertama anda.
apa yang perlu dilakukan dengan komputer riba baruMAKEUSEOF VIDEO OF THE DAY SCROLL UNTUK MENERUSKAN KANDUNGAN
1. Jangan Gunakan Hitam Tulen
Apabila mereka bentuk UI gelap, elakkan menggunakan latar belakang hitam tulen. Lebih baik menggunakan warna kelabu gelap. Sebagai contoh, Tema reka bentuk bahan Google mengesyorkan warna #121212.
Latar belakang hitam digabungkan dengan teks putih boleh mempunyai terlalu banyak kontras dan menyebabkan keletihan mata. Warna kelabu yang lebih gelap sebaliknya boleh menunjukkan bayang-bayang, kedalaman dan ketinggian dengan mudah.
2. Pastikan Kontras Teks Memenuhi Garis Panduan WCAG 2.0
Pilih kombinasi warna yang menawarkan tahap kontras yang betul, supaya teks boleh dibaca. Garis panduan WCAG 2.0 menyatakan bahawa teks atau imej teks mesti mempunyai nisbah kontras sekurang-kurangnya 4.5:1 dengan teks besar (sekurang-kurangnya 18 mata atau 14 mata tebal) mesti mempunyai nisbah kontras sekurang-kurangnya 3:1.
Terdapat beberapa alat untuk menyemak kontras warna, termasuk GELOMBANG Sambungan Chrome yang juga menyemak kebolehaksesan warna.
3. Pilih Gaya Fon yang Tepat
Anda juga mesti mengambil kira gaya fon teks anda termasuk saiz, berat dan ketinggian baris. Jika anda sedang mencari pilihan fon, jangan lupa ada banyak tapak yang menawarkan fon percuma . Bagi saiz fon, gunakan nilai yang mencukupi untuk memastikan teks jelas dan kelihatan pada latar belakang gelap.
Pertimbangkan gaya berikut untuk halaman web:
body {
font-family: "Courier New", monospace;
font-size: 12px;
font-weight: 200;
line-height: 1;
color: #333333;
}
Keluarga fon sukar dibaca, saiz fon terlalu kecil, dan berat fon terlalu ringan. Gaya ini menjadikan halaman sukar dibaca seperti yang anda boleh lihat daripada tangkapan skrin di bawah.
Di bawah ialah beberapa gaya yang sesuai yang boleh anda gunakan.
body {
font-family: "Arial", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #FFFFFF;
background-color: #121212;
}
Dan inilah halaman yang terhasil:
4. Elakkan Warna Aksen Tepu
Warna tepu boleh menjadi terlalu terang dan kabur pada latar belakang gelap. Sebaliknya, gunakan warna yang kurang pekat dan diredam. Dengan cara ini anda mencipta antara muka pengguna yang mempunyai teks yang boleh dilihat.
Untuk menunjukkan, pertimbangkan dua gaya butang ini:
bagaimana anda tahu jika akaun facebook anda telah diretas
/* Saturated blue */
.btn-saturated-blue {
background-color: #121212;
color: #0e0bf6;
}
/* Muted blue */
.btn-muted-blue {
background-color: #121212;
color: #4c5ab3;
}
Warna biru tepu mungkin terlalu terang dan sukar dibaca pada latar belakang gelap, manakala warna biru yang diredam memberikan kontras yang baik dan lebih mudah dibaca.
Alat seperti berwarna berguna untuk menjana kombinasi warna yang mengikut garis panduan kebolehaksesan.
5. Gunakan Ruang Negatif untuk Mencegah Mencipta UI Berat
Palet warna gelap boleh menjadikan UI kelihatan berat kepada pengguna. Apabila digunakan dengan betul, ruang negatif boleh membantu anda menyerlahkan elemen UI yang penting dan menjadikan teks mudah diimbas. Jarak yang mencukupi juga boleh menjadikan reka bentuk lebih bersih dan lebih moden.
Ambil, sebagai contoh, halaman pendaratan Apple . Ruang antara elemen menjadikan halaman kelihatan sangat moden dan menarik secara visual, membolehkan elemen penting menonjol.
6. Gunakan Warna Warna Berbeza untuk Menambah Kedalaman pada UI
Apabila mereka bentuk UI ringan, anda boleh menggunakan bayang-bayang untuk menambah kedalaman dan ketinggian pada elemen. Walau bagaimanapun, disebabkan latar belakang yang gelap, bayang-bayang kadangkala sukar dilihat dalam UI yang gelap.
Anda boleh mencapai kedalaman dalam UI gelap dengan menggunakan berbilang warna warna gelap. Sebagai contoh, bukannya hanya satu latar belakang gelap, anda boleh menambah rona lebih terang daripada warna yang sama pada elemen yang berbeza seperti butang dan modal.
bagaimana memulakan pemacu keras
7. Pastikan Padan dengan UI Gelap
Anda tidak perlu menggunakan imej yang sama untuk mod terang dan mod gelap. Anda boleh menggunakan mod gelap Pertanyaan media CSS untuk menukar imej yang sepadan dengan UI gelap apabila pengguna bertukar kepada mod gelap.
Contohnya, untuk menggunakan corak latar belakang tertentu pada bahagian halaman anda dalam mod gelap, anda boleh menggunakan nama kelas .bgpattern dan menambah kod berikut pada lembaran gaya anda.
@media (prefers-color-scheme: dark) {
/* Apply this style in dark mode only */
.bgpattern {
background-image: url("/dark.jpg");
}
}
Pertanyaan media ini memastikan bahawa imej latar belakang yang dirujuk hanya dipaparkan apabila skema warna pilihan pengguna gelap.
Bila Menggunakan UI Gelap
Reka bentuk UI gelap ialah cara terbaik untuk memberikan estetika moden pada tapak web atau aplikasi anda. Mereka juga boleh meminimumkan ketegangan mata dan menjimatkan hayat bateri. Walau bagaimanapun, UI gelap tidak sesuai untuk setiap aplikasi, dan anda harus sentiasa mempertimbangkan jenama dan pangkalan pengguna.
Umumnya, UI gelap paling sesuai untuk jenama yang mengutamakan kemewahan, prestij, minimalism atau misteri. Ia juga boleh menjadi pilihan yang bagus untuk papan pemuka dan alat visualisasi.