Qaranlıq rejimli veb dizayn, tünd rəngli fonda açıq rəngli mətn, nişanlar və qrafik istifadəçi interfeysi elementlərindən istifadə edən bir vizual interfeys parametrdir. Bu dizayn yanaşması göz yorğunluğunu azaltmaq, OLED ekranlı cihazlarda batareya ömrünə qənaət etmək və istifadəçilər üçün fərqli bir estetik seçim təmin etmək məqsədi daşıyır. Bu funksiyanın tətbiqi, seçilmiş mövzudan asılı olmayaraq istifadəçi təcrübəsinin yüksək keyfiyyətli qalmasını təmin etmək üçün kontrast nisbətlərinə, rəng seçiminə və tipoqrafiyaya diqqətli yanaşma tələb edir.
Niyə qaranlıq rejim seçimi təklif etməlisiniz?
İstifadəçilər tez-tez qaranlıq rejimi üstün tuturlar, çünki bu, ekranlarından yayılan parlaq ağ işığın miqdarını azaldır ki, bu da az işıqlı mühitlərdə faydalı ola bilər. İstifadəçi bir veb saytda uzun müddət keçirdikdə, tünd mövzu görmə qabiliyyəti üçün daha az narahatedici ola bilər. Rahatlıqdan əlavə, bir çox müasir əməliyyat sistemləri istifadəçilərə işıqlı və ya qaranlıq interfeyslər üçün qlobal seçimlər təyin etməyə imkan verir. Bu sistem parametrlərinə hörmət etməklə, veb saytınız ziyarətçilərinizin cihazlarında artıq etdikləri aparat və proqram təminatı seçimləri ilə daha uyğun olur.
Ümumi bir model, istifadəçilərə üstünlük verdikləri təqdirdə sistem parametrlərini ləğv etməyə imkan verən bir keçid düyməsi təmin etməkdir. Bu, ziyarətçiyə baxış təcrübəsinə nəzarət imkanı verir. Bəzi veb saytlar istifadəçinin sistem seçiminə əsaslansa da, başlıq və ya altlıq menyusuna əl ilə ləğv etmə düyməsi əlavə etmək əlçatanlıq üçün faydalıdır. Bu, istifadəçinin müəyyən bir tapşırıq üçün xüsusi bir rejimi üstün tutduğu təqdirdə, həmin sessiya zamanı oxunması və ya naviqasiyası çətin olan bir düzənə məcbur edilməməsini təmin edir.
Qaranlıq rejimdə düzgün kontrastı necə qoruyursunuz?
Ənənəvi ağ fondan uzaqlaşdıqda kontrast ən kritik elementdir. Rənglərinizi sadəcə tərs çevirə bilməzsiniz, çünki bu, çox vaxt oxunması çətin olan mətnə və ya bir-birinə uyğun gəlməyən rənglərə səbəb olur. Bunun əvəzinə, qaranlıq mühit üçün qəsdən hazırlanmış bir palitradan istifadə edin. Qaranlıq rejim, fonunuz üçün mütləq qara (#000000) rəngdən istifadə etməli olduğunuz mənasına gəlmir. Əslində, tünd boz və ya tünd göy rəngdən istifadə etmək çox vaxt daha təbii bir görünüş təmin edir və mütləq qara rənglə müqayisədə gözlərə daha az sərt gəlir.
Mətn rənglərinizi seçərkən, əsas mətn üçün təmiz ağ (#FFFFFF) rəngdən çəkinin. Tünd fonda təmiz ağ rəng bəzi istifadəçilər üçün yüngül bir titrəmə effekti yarada bilər, bu da mətnin yayılmasına və ya bulanıq görünməsinə səbəb olur. Açıq boz və ya ağa çalan rəng uzun mətnlər üçün daha yaxşı işləyir. Düymələri və ya keçidləri vurğulamaq üçün brendinizin əsas rənglərindən qənaətlə istifadə edin və onların tünd fonunuza qarşı kontrast üçün əlçatanlıq standartlarına cavab verdiyindən əmin olun. Rəng birləşmələrinin müəyyən edilmiş görünürlük qaydalarına cavab verdiyini yoxlamaq üçün həmişə standart kontrast yoxlayıcısından istifadə edin.
Etibarlı qaranlıq rejim tətbiqi üçün vacib addımlar
- Təmiz qara fondan istifadə etməyin; göz yorğunluğunu azaltmaq üçün tünd boz rənglərdən istifadə edin.
- Harmoniyanı qorumaq üçün ikinci dərəcəli elementlər üçün doymamış rəng palitrasından istifadə edin.
- İyerarxiyanı göstərmək üçün daha açıq fon qatları kimi incə yüksəklik texnikalarından istifadə edin.
- Düymələr və formalar kimi bütün interaktiv elementləri aydın şəkildə müəyyən edildiyindən əmin olmaq üçün sınaqdan keçirin.
- Bütün mətnin oxunaqlı tipoqrafiya üçün minimum kontrast nisbətlərinə cavab verdiyindən əmin olun.
- Şəkil şəffaflığını nəzərə alın; ağ qutulardan qaçmaq üçün loqoların və nişanların şəffaf fonlara malik olduğundan əmin olun.
Qaranlıq rejim əlçatanlıq üçün dizayn tərzinizi dəyişirmi?
Hansı mövzunu seçməyinizdən asılı olmayaraq əlçatanlıq prioritet olaraq qalır. Qaranlıq rejimdə, məlumatı çatdırmaq üçün rəngə çox güvənirsinizsə, rəng korluğu və görmə qüsurları daha çox nəzərə çarpıla bilər. Məsələn, işıqlı rejimdə xəta vəziyyətini göstərmək üçün müəyyən bir rəngdən istifadə edirsinizsə, həmin rəngin qaranlıq rejimdə də oxunaqlı və fərqli olduğundan əmin olmalısınız. Rəng bulanıqlaşarsa və ya fonla qarışarsa, xəta vəziyyəti görünməz olur ki, bu da əsas istifadə qabiliyyəti problemidir.
Rəng seçimlərinizi tamamlamaq üçün nişanlar, haşiyələr və ya mətn etiketləri kimi ikinci dərəcəli göstəricilərdən istifadəyə diqqət yetirin. Bu dizayn təcrübəsi məlumatın hər kəs üçün, o cümlədən müəyyən çalarları ayırd etməkdə çətinlik çəkənlər üçün əlçatan olmasını təmin edir. Formaları dizayn edərkən, giriş sahələrinin aktiv olduqda görünən bir haşiyəyə və ya fərqli bir fon dəyişikliyinə malik olduğunu yoxlayın. Bu vizual işarələr işıqlı rejimdə çox vaxt incə olur, lakin istifadəçi tərəfindən nəzərə çarpması üçün qaranlıq rejimdə daha çox tərif tələb edir.
Alien Road qaranlıq rejim dizaynını necə tətbiq edir
Alien Road-da biz qaranlıq rejimə rəng məntiqini struktur düzəndən ayıran modul dizayn sistemi qurmaqla yanaşırıq. Tipik bir iş prosesi zamanı komandamız dizayn tokenlərini – rəng dəyərlərini saxlayan dəyişənləri – müəyyən edir ki, bunlar qaranlıq rejim mövzusu işə salındıqda avtomatik olaraq dəyişir. Bu, hər bir səhifədə əl ilə ləğv etmə ehtiyacının qarşısını alır və istifadəçi sayta işıqlı və ya qaranlıq rejimdə baxmasından asılı olmayaraq brend kimliyinin ardıcıl qalmasını təmin edir.
Məsələn, biz əvvəlcə ilkin işıqlı rejim palitrası yaratmaqla başlayırıq və sonra nəzərdə tutulan parlaqlıq və doyma səviyyələrini əks etdirən müvafiq qaranlıq rejim dəsti qururuq. Daha sonra istifadəçinin brauzer seçimini aşkar edən qlobal keçid skriptini tətbiq edirik. Biz həmçinin məhsul fotoları və ya qəhrəman qrafikləri kimi bütün şəkillərin tünd fonlarla necə qarşılıqlı əlaqədə olduğunun yoxlanılmasını təmin edirik. Əgər bir layihə yüksək kontrastlı qrafika tələb edirsə, biz tünd interfeys üçün xüsusi olaraq optimallaşdırılmış alternativ aktiv versiyalarını təqdim edirik və vizual təsirin qorunmasını təmin edirik.
Qaçınılması lazım olan ümumi səhvlər hansılardır?
- Saytı müxtəlif işıqlandırma şəraitində sınaqdan keçirməmək.
- Tünd fonlarda neon və ya sərt görünən həddindən artıq doymuş rənglərdən istifadə etmək.
- Açılan menyular və ya modal pəncərələr kimi UI komponentlərini yeniləməyi unutmaq.
- Qaranlıq rejimin üçüncü tərəf vidjetlərinə və ya inteqrasiya olunmuş xidmətlərə təsirini nəzərdən qaçırmaq.
- İstifadəçilərin işıqlı rejimə qayıtması üçün aydın bir yol təqdim etməmək.
- Dərinliyi müəyyən etmək üçün kölgələrdən istifadə etmək; kölgələr tünd fonda görünməzdir, bunun əvəzinə açıq rəng çalarlarından istifadə edin.
Qaranlıq rejimi effektiv şəkildə sınaqdan keçirə bilərsinizmi?
Sınaq bizim keyfiyyət təminatı prosesimizin standart hissəsidir. Kompüterinizin sistem parametrlərini dəyişmədən işıqlı və qaranlıq sxemləri emulyasiya etməyə imkan verən brauzer tərtibatçı alətlərindən istifadə etməklə başlayın. İnspektorunuzu açın, render parametrlərinə baxın və ‘prefers-color-scheme’ xüsusiyyətini dəyişin. Bu, saytı müxtəlif seçimləri olan istifadəçilər üçün göründüyü kimi görməyə imkan verir və qaranlıq mövzu üçün düzgün üslublanmamış elementləri müəyyən etməyi asanlaşdırır.
Tərtibatçı alətlərindən kənarda, hər iki rejimdə bütün istifadəçi səyahətinizi nəzərdən keçirməlisiniz. Ödəniş səhifələrinizi, əlaqə formalarınızı və naviqasiya menyularınızı yoxlayın. Açılan menyu və ya alət ipucu kimi bir elementin qaranlıq rejim üslublarınıza məhəl qoymayan sabit kodlaşdırılmış fon rənginə sahib olduğunu tapmaq adi haldır. Qurma prosesinin əvvəlində bu xüsusi halları düzəltmək son baxış mərhələsində sizə xeyli vaxt qazandıracaq. İnkişaf mərhələsində heç bir şeyin gözdən qaçmadığından əmin olmaq üçün bu komponentlərin siyahısını saxlayın.
Bu həftə haradan başlamaq lazımdır
Bu həftə cari veb saytınızın brend rənglərini tünd fonda necə performans göstərdiklərini görmək üçün audit etməklə başlayın. Əsas və ikinci dərəcəli rənglərinizi sadalayan sadə bir cədvəl yaradın və onların kontrast nisbətlərini tünd boz fonla müqayisə edin. Tövsiyə olunan kontrast standartlarından aşağı düşən rənglər müəyyən etsəniz, meyarlara cavab verənə qədər onların parlaqlıq və ya doyma səviyyələrini tənzimləyin. Təsdiqlənmiş rənglər dəstiniz olduqdan sonra, rəsmi qaranlıq rejim inteqrasiyasına hazırlaşmaq üçün CSS dəyişənlərinizi yeniləyin.
Rəng palitranız hazır olduqdan sonra, prototip tətbiq etmək üçün saytınızda bir səhifə seçin. Əsas səhifə və ya sadə məzmun səhifəsi başlamaq üçün yaxşı yerdir. Qaranlıq rejim üslublarınızı ‘@media (prefers-color-scheme: dark)’ kimi media sorğusundan istifadə edərək tətbiq edin. Bu, sistem səviyyəsində qaranlıq rejimə üstünlük verən istifadəçiləri hədəfləyir. Tək bir səhifə ilə başlamaqla, yanaşmanızı təkmilləşdirə və funksiyanı bütün veb saytınıza yaymazdan əvvəl dizayn tokenlərinizin gözlənildiyi kimi işlədiyinə əmin ola bilərsiniz.
Oxumağa davam edin: Veb Dizayn və İnkişaf · Veb Dizayn