Atau apa yang harus diingat ketika mengembangkan mode gelap untuk aplikasi atau situs
2018 menunjukkan: mode gelap di jalan. Sekarang kita sudah setengah jalan hingga 2019, kita dapat mengatakan dengan percaya diri: mereka ada di sini, dan mereka ada di mana-mana.
Contoh monitor hijau-hitam tuaUntuk memulainya, mode gelap sama sekali bukan konsep baru. Ini telah digunakan selama beberapa waktu. Dan sekali, pada kenyataannya, itu hanya digunakan untuk waktu yang lama: monitor "hijau-hitam", tetapi hanya karena lapisan luminescent di dalamnya memancarkan cahaya kehijauan ketika terkena radiasi.
Tetapi bahkan setelah pengenalan monitor warna, mode gelap terus hidup. Kenapa begitu?
Ada dua motif utama yang menjelaskan mengapa setiap detik orang terburu-buru untuk menambahkan tema gelap ke aplikasinya hari ini. Pertama-tama: komputer ada di mana-mana. Di mana pun kita melihat, ada semacam layar. Kami menggunakan perangkat seluler kami dari pagi hingga larut malam. Kehadiran mode gelap mengurangi beban pada mata ketika Anda berada di tempat tidur sebelum tidur "terakhir kali" membalik-balik soc. jaringan. (Jika Anda terlihat seperti saya, maka "terakhir kali" bisa berarti gulir
R / EngineeringPorn 3 jam. Mode gelap? Ya, tolong!)
Alasan lain adalah teknologi tampilan baru. Model unggulan perusahaan besar - Apple, Google, Samsung, Huawei - semuanya dilengkapi dengan layar OLED, yang, tidak seperti layar LCD, tidak memerlukan lampu latar. Dan ini adalah kabar baik untuk baterai Anda. Bayangkan Anda melihat gambar kotak hitam di ponsel Anda; dengan layar LCD, lampu latar akan menerangi seluruh layar, meskipun sebagian besar berwarna hitam. Tetapi ketika melihat gambar yang sama pada layar OLED, piksel yang kotak hitamnya hanya mati. Dan itu berarti mereka tidak mengkonsumsi energi sama sekali.
Jenis tampilan ini membuat mode gelap berkali-kali lebih menarik. Menggunakan antarmuka gelap, Anda dapat secara signifikan memperpanjang masa pakai baterai perangkat Anda. Lihat fakta dan angka dari Android Dev Summit November lalu untuk melihat sendiri . Mode gelap, tentu saja, berjalan seiring dengan perubahan UI, jadi mari kita menyegarkan kembali pengetahuan kita!
Mode Gelap 101
Pertama-tama: "gelap" tidak sama dengan "hitam". Jangan mencoba mengganti latar belakang putih dengan hitam, karena ini akan membuat tidak mungkin menggunakan bayangan. Desain serupa akan super datar (dengan cara yang buruk).
Penting untuk diingat prinsip dasar naungan / pencahayaan. Objek yang lebih tinggi harus lebih terang dalam bayangan, mensimulasikan pencahayaan nyata dan bayangan. Dengan demikian, lebih mudah untuk membedakan antara berbagai komponen dan hierarki mereka.
Dua kotak sama abu-abu dengan bayangan, satu di latar belakang hitam 100%, yang lain di # 121212. Saat mengangkat, objek memperoleh warna abu-abu yang lebih terang.
Dalam tema gelap, Anda masih dapat bekerja dengan warna primer yang biasa, jika kontrasnya baik-baik saja. Mari kita ilustrasikan dengan sebuah contoh.
Dalam antarmuka ini, tindakan utama adalah tombol biru besar di panel bawah. Tidak ada masalah dalam hal kontras ketika beralih antara mode terang atau gelap, tombol masih menarik perhatian, ikonnya jelas, secara umum, semuanya baik-baik saja.
Ketika warna yang sama digunakan secara berbeda, misalnya dalam teks, akan ada masalah. Coba gunakan rona warna dasar yang kurang jenuh, atau cari cara lain untuk memasukkan warna merek ke dalam antarmuka.
Kiri: merah di atas hitam terlihat buruk. Kanan: kurangi saturasi - dan semuanya menjadi baik. - kira-kira. perev.
Hal yang sama berlaku untuk semua warna jenuh lainnya yang dapat Anda gunakan, seperti warna peringatan atau kesalahan. Google menggunakan overlay putih 40% di atas warna kesalahan standar dalam pedoman Desain Bahan untuk beralih ke mode gelap. Ini adalah titik awal yang cukup baik, karena akan meningkatkan level kontras untuk memenuhi standar AA. Tentu saja, Anda selalu dapat mengubah pengaturan sesuai keinginan, tetapi jangan lupa untuk memeriksa level kontrasnya. Omong-omong, alat yang berguna untuk tujuan ini adalah plugin Sketch - Stark , yang secara akurat menunjukkan seberapa besar perbedaan antara 2 lapisan.
Bagaimana dengan teksnya?
Semuanya sederhana di sini: tidak ada yang 100% hitam, 100% putih dan sebaliknya. Putih memantulkan gelombang cahaya dari semua panjang, hitam - menyerap. Jika Anda menempatkan teks putih 100% pada latar belakang hitam 100%, surat-surat itu akan memantulkan cahaya, noda dan menjadi kurang terbaca, yang akan berdampak negatif terhadap keterbacaan.
Hal yang sama berlaku untuk latar belakang putih 100% yang memantulkan terlalu banyak cahaya untuk sepenuhnya fokus pada kata-kata. Cobalah untuk sedikit melunakkan warna putih, gunakan abu-abu terang untuk latar belakang dan teks pada latar belakang hitam. Ini akan mengurangi ketegangan pada mata, mencegah mereka dari tekanan berlebih.
Mode gelap di sini tidak akan hilang
Jumlah waktu yang kita habiskan di layar terus bertambah, dan setiap hari, layar baru muncul dalam hidup kita, dari saat kita bangun sampai kita tertidur. Ini adalah fenomena yang cukup baru, mata kita belum terbiasa dengan peningkatan waktu di layar di malam hari. Di sinilah mode gelap ikut bermain. Setelah memperkenalkan fungsi ini di macOS dan Material Design (dan, kemungkinan besar, di iOS), kami percaya bahwa cepat atau lambat akan menjadi default di semua aplikasi, baik ponsel dan desktop. Dan lebih baik bersiap untuk ini!
Satu-satunya alasan untuk tidak memperkenalkan mode gelap adalah ketika Anda benar-benar 100% yakin bahwa aplikasi Anda digunakan secara eksklusif di siang hari yang cerah. Namun, ini jarang terjadi.
Perlu disebutkan beberapa hal yang memerlukan perhatian khusus ketika menerapkan rezim gelap, di samping prinsip-prinsip dasar yang dirangkum sebelumnya.
Dari sudut pandang aksesibilitas, mode gelap bukanlah yang paling nyaman, karena kontras umumnya lebih rendah, yang pada gilirannya tidak meningkatkan keterbacaan sama sekali.
Sumber
Tapi, bayangkan Anda sedang bersiap-siap untuk tidur, benar-benar ingin tidur, tetapi tepat sebelum Anda tertidur, Anda ingat bahwa Anda perlu mengirim seseorang pesan yang sangat penting yang tidak bisa menunggu bahkan satu malam pun. Anda mengambil telepon Anda, menyalakannya dan AAAAAA ... latar belakang cahaya iMessage Anda tidak akan membuat Anda tertidur selama 3 jam lagi. Sementara teks terang dengan latar belakang gelap tidak dapat diakses semaksimal mungkin, memiliki mode gelap di kanan yang kedua ini akan meningkatkan kenyamanan Anda hingga sejuta. Itu semua tergantung pada situasi di mana pengguna saat ini.
Itu sebabnya kami menganggap mode gelap otomatis ide yang keren. Menyala di malam hari dan mati di pagi hari. Pengguna bahkan tidak perlu memikirkannya, yang mana sangat nyaman. Twitter melakukan pekerjaan yang baik dengan pengaturan mode gelap. Selain itu, keduanya hanya memiliki mode gelap dan mode lebih gelap untuk semua layar OLED ini, menghemat baterai dan segala sesuatu yang berkaitan dengannya. Penting untuk dicatat di sini: biarkan pengguna beralih secara manual ketika dia ingin: tidak ada yang lebih buruk daripada secara otomatis mengubah antarmuka tanpa kemampuan untuk beralih kembali.
Twitter memiliki mode gelap otomatis yang menyala di malam hari dan mati di pagi hari.
Juga, ketika mengembangkan suatu tema, harus diingat bahwa beberapa hal tidak dapat dibuat gelap.
Ambil editor teks, seperti Halaman. Anda dapat membuat antarmuka menjadi gelap, tetapi lembar itu sendiri akan selalu putih, mensimulasikan selembar kertas nyata.
Halaman dengan mode gelap diaktifkanHal yang sama berlaku untuk semua jenis editor konten, seperti Sketch atau Illustrator. Meskipun antarmuka dapat menjadi gelap, pelat pemasangan yang Anda gunakan akan selalu berwarna putih secara default.
Sketsa dalam mode gelap dan masih memiliki artboard putih cerah.
Oleh karena itu, terlepas dari aplikasinya, kami percaya bahwa mode gelap akan menjadi asli sistem operasi yang Anda gunakan, yang berarti bahwa lebih baik untuk mempersiapkan masa depan terlebih dahulu, itu akan menjadi gelap.
Jika Anda ingin mempelajari lebih lanjut tentang mengembangkan antarmuka gelap, pastikan untuk memeriksa pedoman Desain Bahan , ini adalah sumber informasi utama kami untuk artikel ini.