Veb mətbəəinizi inkişaf etdirməyin 5 yolu

Tip hər bir veb layihənin əsas hissəsidir. Aydınlıq və aydınlıq ümumiyyətlə istifadəçi təcrübəsinin ayrılmaz hissəsidir. Mətnlə necə işləməyi bilmək dönüşüm artıra bilər, hər seansın müddəti və veb saytınız insanlar üçün daha dəyərlidir.

Mətn nədir?

Məktublar, sözlər, cümlələr, paraqraflar. Mətn danışarkən insanlara fikir çatdırmaq üçün bir yoldur. Bu oxuya biləcəyiniz məlumatlandırıcı və xüsusi mesajlardan ibarətdir. İnternetdəki insanlar üçün yazdığınız zaman insanlar danışdıqlarınızı başa düşməlidirlər.

Ellen Luptonun Tiplə düşünməsinin böyük bir fanatı olaraq müəllifdən sitat gətirməli və deməliyəm: "Tipoqrafiyada" mətn "qısa başlıqlardan və ya alt yazılardan fərqlənən sözlərin ardıcıllığıdır."

Yaxşı mətbəə istifadəçilərə nə axtardıqlarını bilmək üçün asan bir yol verməlidir. Mətnlərinizi oxuyarkən rahat və məhsuldar hiss etməlisiniz. Bu şəkildə fikirlərinizi mümkün qədər təsirli bir şəkildə çatdırmalısınız. Pis mətbəə sizi əsəbiləşdirəcək və yayındıracaq, məyus olacaqsınız və oxumursunuz.

Bu yazıda veb mətbəəinizi yaxşılaşdırmaq və mətn məzmununuzu daha oxunaqlı və oxunaqlı etmək üçün bir neçə ipucu verəcəyəm. Beləliklə, başlayaq.

Şrift ölçüsü

Bir neçə il əvvəl mətnin gövdəsi üçün 10 və ya 12 piksel istifadə etmək adi hal idi. Hal hazırda FHD və ya UHD displeylərdən istifadə edirik, buna görə də şrift ölçülərini böyütməliyik. Böyük bir standart şrift ölçüsündən istifadə, mətn məzmununun aydınlığını artırır. Bədəniniz üçün (və ya.) 16-22 piksel ölçüsündə bir şriftin olması optimaldır məzmununuzun oxunuşunu artırmaq üçün. Kiçik ekran ölçüləri üçün cavab verən sayt tərtib edərkən, standart mətni 14 ilə 18 pikselə endirə bilərsiniz.

Görmə qüsuru olan insanlar üçün (eynək taxan və ya yalnız yaşlılar) dizayn üçün bu ölçülər də minimaldır.

Mətn məzmununuzun oxunuşunu artırmaq üçün optimal bədən mətni ölçüsü 16 ilə 22 piksel arasındadır.

Ancaq unutma ki, optimal şrift ölçüsünüz həmişə veb layihəniz üçün seçdiyiniz şriftdən asılıdır. Aşağıdakı şəkildəki Helvetica Neue və Futura x-hündürlüyü (bir mətn xəttinin təməl xətti ilə kiçik hərflərin əsas hissəsinin zirvələri arasındakı məsafə) arasındakı fərqi görə bilərsiniz.

Eyni ölçülərdə Helvetica Neue və Futura arasındakı fərqi görə bilərsiniz.

Xətt boyu olaraq da bilinən xətt aralıqları

Həm də çap sahəsində lider kimi tanınır. Fərdi xətləri ayırmaq üçün metal zolaqlardan istifadə etdilər.

İnternet üçün dizayn edərkən, xətt boyu üçün ən azı 1,5 dəfə bədən mətn ölçüsündən istifadə etməlisiniz. Bu optimaldır və başlıqlarınız üçün xətt boşluğundan 1,1 və ya 1,2 dəfə istifadə etmək tövsiyə olunur.

Vücudunuzun mətn ölçüsündən ən az 1,5 qat olan bir xətt boyu istifadə etməlisiniz.

Bu nə deməkdir? Təcrübədə bədən tərkibi üçün 16px şrift ölçüsü ilə xətt boyu 24px ətrafında olmalıdır (aşağıdakı misalda gördüyünüz kimi).

Ancaq bəzən, mətnlərinizi daha zərif etmək və yalnız qısa paraqraflarla işləmək istəyirsinizsə, xətt boyunu bir az artıra bilərsiniz.

Vücud mətninin 1,5 vuruşu olan bir xətt hündürlüyü ilə Aktiv Grotesk'u görəcəksiniz.

Xətt uzunluğu

İnsanlar internetdəki böyük mətn bloklarını oxumurlar. Uzun xətləri taramaq onlar üçün həqiqətən narahat və çətindir. İnsanların oxuduğu zaman mətn xətti boyunca davamlı hərəkət etməmələri vacibdir, lakin qısa, sürətli hərəkətləri (çantalar kimi tanınan) qısa dayanacaqlar (fiksasiya) ilə qarışdırın - bunu fransız oftalmoloqu Louis Émile Caval izah etdi.

İnsanlar oxuyarkən bir mətn xətti boyunca davamlı hərəkət etmirlər, qısa dayanacaqlarla qarışdırılmış qısa, sürətli hərəkətlər edirlər.

Buna görə oxucular üçün müsbət bir istifadə təcrübəsi əldə etmək üçün satırın uzunluğu məhdud olmalıdır və hər xətt üçün optimal simvol sayı 60 ilə 80 arasında olmalıdır. Cavab verici veb saytları tərtib edərkən, xətt uzunluğunu daha kiçik ekran ölçülərinə təyin etməlisiniz. Mobil qurğular üçün hər xətt üçün 30-40 simvoldan istifadə etməlisiniz.

80 simvoldan uzun olan xətlər disleksiyası olan insanlar üçün də böyük problemdir.

Şəkildə optimal və çox geniş xətlər arasındakı fərqi görə bilərsiniz.

Kontrast

Kontrast istifadəçi dostu baxımından vacibdir, eyni zamanda məqsədəuyğunluq və aydınlıq təsir göstərir.

Əksinə kifayət qədər yüksək olmayan mətni oxumaq daha çətindir və veb saytın silinməsi yalnız görmə qüsuru olan insanlar üçün cəhənnəm deyil. Bu, dönüşümləri və orta sessiya vaxtlarını azaldacaq və ya sıçrayış nisbətlərinə səbəb ola bilər.

İndiki məqamda ağ fonda boz mətndən istifadə etməkdir. Ancaq istifadəçilərinizin məzmununuzu rahat oxuya bilməmələrinin əhəmiyyəti yoxdur. Kontrast optimal olmadıqda insanlar daha yavaş oxuyurlar. Bir söz deşifrə etməyinizə ehtiyac yoxdur, mətndə vacib məlumatları atlaya bilərsiniz, bağlantılar kəşf etmək məcburiyyətində deyilsiniz və ya sadəcə məzmunu taramaqda çətinlik çəkə bilərsiniz - günəşdə olanda mobil cihazlarda oxuyursanız belə.

Məzmun və fon kontrastı 4.5: 1 qaydasına uyğunlaşdırılmalıdır.

Giriş nöqteyi-nəzərindən məzmun və fon kontrastı 4.5: 1 qaydasına uyğun olaraq idarə edilməlidir ki, bu da görmə qüsuru və ya rəng korluğu kimi istifadəçilərə ekrandakı məzmunu düzgün oxumağa kömək edir. Ancaq optimal bir kontrast yaratmaq çox vaxt daha çətindir və yalnız rənglərlə əlaqəli deyil. Məsələn, rəng korluğu olan insanlar üçün hiper mətn bağlantılarını görmək bir problemdir və onları vurğulamalısınız (bu da kor insanlar üçün əla bir həlldir).

Kontrast yalnız rənglərə aid deyil. Görmə qabiliyyəti zəif olan insanlar, vurğulanmadıqları təqdirdə, hiper mətn bağlantılarını tapmaqda çətinlik çəkə bilərlər.

Şaquli ritm

İnternetdəki insanlar bütün mətn bloklarını oxumurlar. Yalnız məzmunu tarayırsınız və vacib məlumatları axtarırsınız. Şaquli bir ritm ilə daha asandır. İstifadəçilər üçün tarama vebdə oxumaqdan daha rahatdır. Elementlər (başlıqlar, bəndlər, başlıqlar və ya şəkillər) arasındakı bütün şaquli məsafələri ardıcıl saxlamaq üçün şaquli ritmdən istifadə edirik. Şaquli ritmdən istifadəçinin vacib şəkilləri tapmasını asanlaşdırırıq. Bu veb saytında daha rahat və müsbət bir təcrübəyə sahib ola bilərsiniz.

Bəs şaquli ritm necə işləyir?

Yəqin ki, Bazel haqqında eşitmisiniz - Çap dizaynında Bazelin bütün simvolların görünməyən xətti olması çox vacibdir. Bu termini veb dizaynda da istifadə edirik, ancaq bir az fərqlidir. Veb dizayn sahəsindəki təməl gövdə mətninin sətir boyu (xətt hündürlüyü də CSS mülkiyyəti) ilə müəyyən edilir.

Əsas məlumatlarınızı müəyyənləşdirdiyinizdə və öz təməl şəbəkənizi yaratdığınızda, mətn ölçüsündən başlamaq lazımdır ( ) və xətt boyu üçün çoxluğunu (CSS-də xətt hündürlüyü üçün xüsusiyyət) müəyyənləşdirin və sonra hər şeyi miqyaslaşdırın

Aşağıdakı şəkildəki kimi, bədən ölçüsü üçün 16px şrift ölçüsü və 24px xətt boyu istifadə edirəm. Bu 24px mənim üçün təməldir (mən daha yaxşı rəhbərlik etmək və əvvəlcədən yazdığım baza ilə əlaqəli bütün şriftləri qurmaq üçün 2, 3 və ya daha çox 4 ilə ekranda daha çox bələdçinin olması üçün əsas mənasını verir) deməkdir. Bu tərifə əsasən bütün boşluqlar (çərçivələr, boşluqlar və ya hüdudlar daxil olmaqla) 6px ilə çoxalmalı və ya bölünməlidir. Paraqraflar və başlıqlar arasında vizual bir ardıcıllıq yaratmaq üçün 6 nömrəsinin çoxalması kimi boşluq yaratmağa qərar verdim - və nəhayət 24 və ya 36 piksel istifadə etdim. Şrift ölçülərim və xətt boylarım da 6px çoxdur.

Burada şaquli ritmin dizaynınızda necə işləməsini görə bilərsiniz.

Nəticə olaraq bir neçə kəlmə

Tipoqrafiya veb dizaynının ayrılmaz hissəsidir və düzgün qərar qəbul edirsinizsə, mətniniz oxunur, aydın və başa düşüləndir. İstifadəçi, mətn məzmununuzu oxuyan və veb saytınızı araşdıran müsbət bir istifadəçi təcrübəsinə malikdir. Daha çox dönüşüm daha çox qazanc deməkdir. Veb saytınızı daha dəyərli hesab edirlər. Sadəcə bu neçə məsləhətdən istifadə edin və əlçatanlığınızı və orta seans vaxtınızı artırın.