Atau apa yang perlu diingat saat mengembangkan mode gelap untuk aplikasi atau situs web
Tahun 2018 menunjukkan bahwa mode gelap sedang dalam proses. Kini, setelah kita memasuki pertengahan tahun 2019, kita dapat mengatakan dengan yakin: mereka ada di sini, dan mereka ada di mana-mana.
Mari kita mulai dengan fakta bahwa mode gelap bukanlah konsep baru sama sekali. Sudah cukup lama digunakan. Dan pada suatu waktu, pada kenyataannya, untuk waktu yang lama, hanya ini yang mereka gunakan: monitor adalah tipe “hijau-hitam”, tetapi hanya karena lapisan luminescent di dalamnya memancarkan cahaya kehijauan saat terkena radiasi. .
Namun bahkan setelah diperkenalkannya monitor berwarna, mode gelap tetap ada. Mengapa demikian?
Ada dua motif utama yang menjelaskan mengapa saat ini setiap orang terburu-buru menambahkan tema gelap ke aplikasinya. Pertama-tama: komputer ada dimana-mana. Ke mana pun kita melihat, ada semacam layar. Kami menggunakan perangkat seluler kami dari pagi hingga larut malam. Kehadiran mode gelap mengurangi ketegangan mata saat Anda berada di tempat tidur sebelum tidur untuk “terakhir kali” menelusuri feed sosial Anda. jaringan. (Jika Anda seperti saya, "terakhir kali" mungkin berarti guliran 3 jam . Mode gelap? Ya silahkan! )
Alasan lainnya adalah teknologi produksi layar baru. Model andalan perusahaan besar - Apple, Google, Samsung, Huawei - semuanya dilengkapi dengan layar OLED, yang, tidak seperti layar LCD, tidak memerlukan lampu latar. Dan itu kabar baik untuk baterai Anda. Bayangkan Anda melihat gambar kotak hitam di ponsel Anda; dengan LCD, lampu latar akan menerangi seluruh layar meskipun sebagian besar berwarna hitam. Namun saat melihat gambar yang sama pada layar OLED, piksel yang membentuk kotak hitam dimatikan begitu saja. Artinya mereka tidak mengkonsumsi energi sama sekali.
Jenis tampilan ini membuat mode gelap menjadi lebih menarik. Dengan menggunakan antarmuka gelap, Anda dapat memperpanjang masa pakai baterai perangkat Anda secara signifikan. . Mode gelap tentu saja berjalan seiring dengan perubahan UI, jadi mari tingkatkan pengetahuan kita!
Mode Gelap 101
Pertama-tama: “gelap” tidak sama dengan “hitam”. Jangan mencoba mengganti latar belakang putih dengan latar belakang hitam, karena ini akan membuat penggunaan bayangan tidak mungkin dilakukan. Desain seperti ini akan menjadi sangat datar (dalam arti yang buruk).
Penting untuk mengingat prinsip dasar bayangan/pencahayaan. Objek yang lebih tinggi harus lebih terang dalam bayangan, yang menyimulasikan pencahayaan dan bayangan di kehidupan nyata. Hal ini memudahkan untuk membedakan berbagai komponen dan hierarkinya.
Dua kotak abu-abu identik dengan bayangan, satu dengan latar belakang 100% hitam, yang lainnya di #121212. Saat objek naik, warnanya menjadi abu-abu lebih terang.
Dalam tema gelap, Anda tetap dapat menggunakan warna dasar biasa selama kontrasnya oke. Mari kita jelaskan dengan sebuah contoh.
Di antarmuka ini, tindakan utamanya adalah tombol biru besar di bilah bawah. Dari segi kontras tidak ada masalah saat beralih antara mode terang atau gelap, tombolnya masih eye-catching, ikonnya jelas, dan secara keseluruhan semuanya baik-baik saja.
Jika warna yang sama digunakan dalam cara yang berbeda, misalnya dalam teks, maka akan timbul masalah. Coba gunakan warna yang (jauh) kurang jenuh dari warna utama, atau cari cara lain untuk memasukkan warna merek ke dalam antarmuka.
Kiri: Merah di atas hitam terlihat buruk. Benar: kurangi saturasinya dan semuanya terlihat bagus. — kira-kira. terjemahan
Hal yang sama berlaku untuk warna kuat lainnya yang mungkin pernah Anda gunakan, seperti warna peringatan atau warna kesalahan. Google menggunakan hamparan lapisan putih 40% di atas warna kesalahan default di dalamnya saat beralih ke mode gelap. Ini adalah titik awal yang cukup bagus karena akan meningkatkan tingkat kontras agar sesuai dengan standar AA. Anda tentu saja dapat selalu mengubah pengaturan sesuai keinginan Anda, namun pastikan untuk memeriksa tingkat kontrasnya. Omong-omong, alat yang berguna untuk tujuan ini adalah plugin Sketch - , yang menunjukkan dengan tepat berapa banyak kontras yang ada di antara 2 lapisan.
Bagaimana dengan teksnya?
Semuanya sederhana di sini: tidak ada yang 100% hitam dan 100% putih dan sebaliknya. Putih memantulkan gelombang cahaya dari semua panjang gelombang, hitam menyerap. Jika Anda menempatkan 100% teks putih dengan latar belakang 100% hitam, huruf-huruf tersebut akan memantulkan cahaya, tercoreng, dan menjadi kurang terbaca, sehingga berdampak negatif terhadap keterbacaan.
Hal yang sama berlaku untuk latar belakang 100% putih, yang memantulkan terlalu banyak cahaya untuk fokus penuh pada kata-kata. Coba pelembut sedikit warna putihnya, gunakan warna abu-abu muda untuk background dan teks pada background hitam. Ini akan mengurangi ketegangan mata, mencegahnya
Mode gelap telah hadir dan tidak akan hilang
Jumlah waktu yang kita habiskan di depan layar terus bertambah, dan setiap hari, layar baru muncul dalam hidup kita, mulai dari saat kita bangun hingga kita tertidur. Ini adalah fenomena yang cukup baru; mata kita belum terbiasa dengan peningkatan waktu menatap layar di malam hari. Di sinilah mode gelap berperan. Dengan diperkenalkannya fitur ini di macOS dan Desain Material (dan kemungkinan besar di iOS), kami yakin bahwa cepat atau lambat fitur ini akan menjadi default di semua aplikasi, baik seluler maupun desktop. Dan lebih baik bersiap untuk ini!
Satu-satunya alasan untuk tidak menerapkan mode gelap adalah ketika Anda benar-benar 100% yakin bahwa aplikasi Anda digunakan secara eksklusif di siang hari yang cerah. Namun hal ini tidak sering terjadi.
Perlu disebutkan beberapa hal yang memerlukan perhatian khusus saat menerapkan mode gelap, di luar prinsip dasar yang dirangkum sebelumnya.
Dalam hal aksesibilitas, mode gelap bukanlah yang paling nyaman karena kontrasnya umumnya lebih rendah, sehingga tidak meningkatkan keterbacaan sama sekali.
Tapi bayangkan Anda sedang bersiap-siap untuk tidur, Anda sangat ingin tidur, tetapi tepat sebelum Anda tertidur, Anda ingat bahwa Anda perlu mengirim pesan super penting kepada seseorang yang tidak bisa menunggu bahkan satu malam pun. Ambil ponsel Anda, hidupkan dan AAAAAAH... latar belakang iMessage yang terang akan membuat Anda tetap terjaga selama 3 jam lagi. Meskipun teks terang dengan latar belakang gelap tidak dianggap sebagai yang paling mudah diakses, memiliki mode gelap pada detik ini juga akan membuat Anda tetap terjaga. meningkatkan kenyamanan sebanyak satu juta. Itu semua tergantung pada situasi pengguna saat ini.
Itu sebabnya kami berpikir mode gelap otomatis ide yang keren. Menyala di malam hari dan mati di pagi hari. Pengguna bahkan tidak perlu memikirkannya, dan ini sangat nyaman. Twitter telah melakukan pekerjaan luar biasa dengan pengaturan mode gelapnya. Selain itu, keduanya hanya memiliki mode gelap dan mode lebih gelap untuk semua layar OLED ini, sehingga menghemat baterai dan segala sesuatu yang terkait dengannya. Penting untuk diperhatikan di sini: berikan pengguna kesempatan untuk beralih secara manual kapan pun dia mau: tidak ada yang lebih buruk daripada mengubah antarmuka secara otomatis tanpa kemampuan untuk beralih kembali.
Twitter memiliki mode gelap otomatis yang menyala di malam hari dan mati di pagi hari.
Selain itu, ketika mengembangkan sebuah tema, perlu diingat bahwa beberapa hal tidak dapat dibuat gelap.
Ambil editor teks seperti Pages. Anda dapat membuat antarmuka menjadi gelap, tetapi lembaran itu sendiri akan selalu berwarna putih, menirukan selembar kertas asli.
Halaman dengan mode gelap diaktifkan
Hal yang sama berlaku untuk semua jenis editor pembuatan konten, seperti Sketch atau Illustrator. Meskipun antarmukanya bisa dibuat gelap, artboard yang Anda gunakan akan selalu berwarna putih secara default.
Buat sketsa dalam mode gelap dan tetap memiliki artboard putih terang.
Jadi, apa pun aplikasinya, kami yakin mode gelap akan hadir di sistem operasi yang Anda gunakan, artinya sebaiknya bersiap untuk masa depan. hari akan gelap.
Jika Anda ingin mempelajari lebih lanjut tentang mengembangkan UI gelap, pastikan untuk membaca pedomannya , ini adalah sumber informasi utama kami untuk artikel ini.
Sumber: www.habr.com