Atau perkara yang perlu diingat semasa membangunkan mod gelap untuk aplikasi atau tapak web
2018 menunjukkan bahawa mod gelap sedang dalam perjalanan. Memandangkan kita sudah memasuki separuh tahun 2019, kita boleh katakan dengan yakin: mereka ada di sini, dan mereka ada di mana-mana.
Mari kita mulakan dengan fakta bahawa mod gelap bukanlah konsep baru sama sekali. Ia telah digunakan untuk masa yang agak lama. Dan pada suatu masa dahulu, sebenarnya, untuk masa yang lama, ini adalah satu-satunya perkara yang mereka gunakan: monitor adalah daripada pelbagai "hijau-hitam", tetapi hanya kerana salutan bercahaya di dalamnya memancarkan cahaya kehijauan apabila terdedah kepada radiasi .
Tetapi walaupun selepas pengenalan monitor warna, mod gelap terus wujud. Kenapa jadi begini?
Terdapat dua motif utama yang menjelaskan mengapa hari ini setiap orang kedua tergesa-gesa untuk menambah tema gelap pada aplikasi mereka. Pertama sekali: komputer ada di mana-mana. Di mana-mana sahaja kita melihat terdapat beberapa jenis skrin. Kami menggunakan peranti mudah alih kami dari pagi hingga lewat malam. Kehadiran mod gelap mengurangkan ketegangan mata apabila anda berada di atas katil sebelum tidur untuk "kali terakhir" menatal melalui suapan sosial anda. rangkaian. (Jika anda seperti saya, "kali terakhir" mungkin bermaksud tatal 3 jam . Mod gelap? Ya sila! )
Sebab lain ialah teknologi pengeluaran paparan baharu. Model perdana syarikat besar - Apple, Google, Samsung, Huawei - semuanya dilengkapi dengan skrin OLED, yang, tidak seperti paparan LCD, tidak memerlukan lampu latar. Dan itu berita baik untuk bateri anda. Bayangkan anda sedang melihat imej segi empat sama hitam pada telefon anda; dengan LCD, lampu latar akan menerangi keseluruhan skrin walaupun kebanyakannya berwarna hitam. Tetapi apabila melihat imej yang sama pada paparan OLED, piksel yang membentuk segi empat sama hitam hanya dimatikan. Ini bermakna mereka tidak menggunakan tenaga sama sekali.
Jenis paparan ini menjadikan mod gelap lebih menarik. Dengan menggunakan antara muka gelap, anda boleh memanjangkan hayat bateri peranti anda dengan ketara. . Mod gelap sudah tentu seiring dengan perubahan UI jadi mari kita tingkatkan pengetahuan kita!
Mod Gelap 101
Pertama sekali: "gelap" tidak sama dengan "hitam". Jangan cuba menggantikan latar belakang putih dengan latar belakang hitam, kerana ini akan menjadikannya mustahil untuk menggunakan bayang-bayang. Reka bentuk seperti ini akan menjadi sangat rata (dengan cara yang tidak baik).
Adalah penting untuk mengingati prinsip asas teduhan/pencahayaan. Objek yang lebih tinggi hendaklah lebih terang dalam bayang-bayang, mensimulasikan pencahayaan dan teduhan kehidupan sebenar. Ini menjadikannya lebih mudah untuk membezakan antara komponen yang berbeza dan hierarkinya.
Dua petak sama kelabu dengan bayang, satu pada latar belakang hitam 100%, satu lagi pada #121212. Apabila objek meningkat, ia menjadi warna kelabu yang lebih terang.
Dalam tema gelap, anda masih boleh menggunakan warna asas biasa anda selagi kontrasnya ok. Mari kita jelaskan dengan contoh.
Dalam antara muka ini, tindakan utama ialah butang biru besar di bar bawah. Tiada masalah dari segi kontras apabila bertukar antara mod terang atau gelap, butang masih menarik perhatian, ikon jelas, dan secara keseluruhan semuanya baik-baik saja.
Apabila warna yang sama digunakan dengan cara yang berbeza, contohnya dalam teks, akan ada masalah. Cuba gunakan warna utama (yang jauh) kurang tepu, atau cari cara lain untuk memasukkan warna jenama ke dalam antara muka.
Kiri: Merah pada hitam kelihatan buruk. Kanan: kurangkan ketepuan dan semuanya kelihatan baik. - lebih kurang terjemahan
Perkara yang sama berlaku untuk mana-mana warna kuat lain yang mungkin anda gunakan, seperti warna amaran atau ralat. Google menggunakan tindanan lapisan putih 40% di atas warna ralat lalai dalam mereka apabila beralih ke mod gelap. Ini adalah titik permulaan yang cukup baik kerana ia akan meningkatkan tahap kontras agar sepadan dengan piawaian AA. Anda boleh, sudah tentu, sentiasa menukar tetapan seperti yang anda lihat patut, tetapi pastikan anda menyemak tahap kontras. Dengan cara ini, alat yang berguna untuk tujuan ini ialah pemalam Sketch - , yang menunjukkan dengan tepat berapa banyak kontras antara 2 lapisan.
Bagaimana dengan teks?
Segala-galanya mudah di sini: tiada apa yang harus 100% hitam dan 100% putih dan sebaliknya. Putih memantulkan gelombang cahaya dari semua panjang gelombang, hitam menyerap. Jika anda meletakkan teks putih 100% pada latar belakang hitam 100%, huruf tersebut akan memantulkan cahaya, calit dan menjadi kurang mudah dibaca, yang akan memberi kesan negatif kepada kebolehbacaan.
Perkara yang sama berlaku untuk latar belakang putih 100%, yang memantulkan terlalu banyak cahaya untuk memberi tumpuan sepenuhnya pada perkataan. Cuba lembutkan sedikit warna putih, gunakan kelabu muda untuk latar belakang dan teks pada latar belakang hitam. Ini akan mengurangkan ketegangan mata, mencegah
Mod gelap sudah ada dan tidak akan hilang
Jumlah masa yang kita luangkan di hadapan skrin sentiasa berkembang, dan setiap hari baharu, skrin baharu muncul dalam hidup kita, dari saat kita bangun sehingga kita tertidur. Ini adalah fenomena yang agak baharu; mata kita masih belum terbiasa dengan peningkatan masa skrin ini pada lewat petang. Di sinilah mod gelap dimainkan. Dengan pengenalan ciri ini dalam macOS dan Reka Bentuk Bahan (dan kemungkinan besar dalam iOS), kami percaya bahawa lambat laun ia akan menjadi lalai dalam semua aplikasi, kedua-dua mudah alih dan desktop. Dan lebih baik bersedia untuk ini!
Satu-satunya sebab untuk tidak melaksanakan mod gelap adalah apabila anda benar-benar 100% pasti bahawa aplikasi anda digunakan secara eksklusif pada siang hari yang terang. Ini, bagaimanapun, tidak sering berlaku.
Perlu disebutkan beberapa perkara yang memerlukan perhatian khusus apabila melaksanakan mod gelap, di luar prinsip asas yang diringkaskan sebelum ini.
Dari segi kebolehaksesan, mod gelap bukanlah yang paling mudah, kerana kontrasnya secara amnya lebih rendah, yang seterusnya tidak meningkatkan kebolehbacaan sama sekali.
Tetapi bayangkan bahawa anda sedang bersiap untuk tidur, anda benar-benar mahu tidur, tetapi sebelum anda tertidur, anda ingat bahawa anda perlu menghantar seseorang mesej yang sangat penting yang tidak boleh menunggu walaupun satu malam. Anda ambil telefon anda, hidupkan dan AAAAAH... latar belakang terang iMessage anda akan membuatkan anda terjaga selama 3 jam lagi. Walaupun teks terang pada latar belakang gelap tidak dianggap paling mudah diakses, mempunyai mod gelap pada saat ini akan meningkatkan kemudahan sebanyak sejuta. Semuanya bergantung pada situasi di mana pengguna berada pada masa ini.
Itulah sebabnya kita berfikir mod gelap automatik idea yang begitu hebat. Ia dihidupkan pada waktu petang dan dimatikan pada waktu pagi. Pengguna tidak perlu memikirkannya, yang sangat mudah. Twitter telah melakukan kerja yang hebat dengan tetapan mod gelapnya. Di samping itu, kedua-duanya hanya mempunyai mod gelap dan mod yang lebih gelap untuk semua skrin OLED ini, menjimatkan bateri dan semua yang berkaitan dengannya. Penting untuk diperhatikan di sini: berikan pengguna peluang untuk menukar secara manual pada bila-bila masa yang dia mahu: tidak ada yang lebih buruk daripada menukar antara muka secara automatik tanpa keupayaan untuk menukar kembali.
Twitter mempunyai mod gelap automatik yang dihidupkan pada waktu petang dan dimatikan pada waktu pagi.
Selain itu, apabila membangunkan tema, perlu diingat bahawa sesetengah perkara tidak boleh dijadikan gelap.
Ambil editor teks seperti Pages. Anda boleh menjadikan antara muka gelap, tetapi helaian itu sendiri akan sentiasa putih, mensimulasikan helaian kertas sebenar.
Halaman dengan mod gelap didayakan
Perkara yang sama berlaku untuk semua jenis penyunting penciptaan kandungan, seperti Sketch atau Illustrator. Walaupun antara muka boleh dijadikan gelap, papan seni yang anda gunakan akan sentiasa putih secara lalai.
Lakar dalam mod gelap dan masih mempunyai papan seni putih terang.
Oleh itu, tanpa mengira apl, kami percaya mod gelap akan datang kepada sistem pengendalian yang anda gunakan, bermakna adalah yang terbaik untuk membuat persediaan untuk masa hadapan. ia akan menjadi gelap.
Jika anda ingin mengetahui lebih lanjut tentang membangunkan UI gelap, pastikan anda menyemak garis panduan , ini adalah sumber maklumat utama kami untuk artikel ini.
Sumber: www.habr.com