Оптимизација на типографијата за различни големини на екран
Типографијата е основниот јазик преку кој интерфејсот ги пренесува информациите, насловите и повиците за дејствие. Не е доволно што текстот е читлив на еден телефон; истата страница мора да остане разбирлива кога корисникот ќе отвори на поголем екран. Затоа оптимизацијата на типографијата за различни големини на екран треба да ги опфати скалата, просторот, контрастот и начинот на читање.
Промената на ширината на екранот влијае врз должината на редовите, нивната густина и начинот на прегледување. На тесен приказ, текстот побрзо се прилагодува ако насловите имаат јасна хиерархија, а декорациите се изоставени. На широк екран, празниот простор станува активен елемент што групира содржина, го насочува окото и го одвојува главното од споредното. Дизајнот затоа не смее да претпоставува една фиксна ширина.
Темната визуелна тема ја менува условите за читање: светлите букви врз темна подлога може да делуваат остро, а сите тонови на сиво не се еднакво видливи. Типографскиот систем затоа мора да предвиди доволно контраст, контролирана тежина на фонтот и простор околу текстот. Истото важи и за светлата тема, каде што лесните фонтови или прешироките зборови ја намалуваат читливоста. Доброто решение ја зачувува истата визуелна структура, но прилагодува деталите за конкретната комбинација од бои.
Пристапот треба да биде заснован на визуелна скала, а не на рачно менување на секој екран. Размерот на основниот текст, интерлинеата, ширината на колоните и просторот меѓу блоковите можат да се зададат преку зависни вредности и преломни точки. Потоа се проверуваат граничните случаи: најмалата ширина, зумирање, тастатурна навигација и долг текст. Овој ред ја намалува несигурноста и ја одржува кохерентноста на дизајнот при нови уреди.
Потребата од прилагодување на типографијата
Корисниците не читаат страница како фиксиран печатен документ. Тие скролуваат, менуваат ориентација, отвораат менија и скокнуваат до деловите што ги интересираат. Затоа секој типографски елемент мора да има јасна задача: да привлече внимание, да означи агенда или да овозможи брзо наоѓање. Кога големината е преголема, важните информации се бавно препознаваат; кога е премногу мала, долгите пасуси стануваат заморни и бараат непотребно напрегледување.
Прилагодувањето не значи секој елемент да изгледа различно на секој екран. Наместо тоа, се зачувуваат редоследот, контрастот и идентитетот на интерфејсот, додека големината и просторот се менуваат според просторот. На пример, второстепените натписи можат да останат помали, но нивната читливост не смее да зависи од слаб контраст. Општата скала дава сигурност дека системот ќе функционира и на уреди што не биле предвидени.
Флуидна скала за големината на текстот
Флудната скала ги поврзува минималната и максималната големина со ширината на приказот. Во CSS, функцијата clamp(), на пример со вредностите clamp(1rem, calc(0.9rem + 0.4vw), 1.25rem), создава плавна промена без потреба од голем број посебни правила. Бројот на вредностите треба да се избере според реалната содржина, бидејќи премногу широка формула може да ги зголеми и насловите и потписот под насловот.
Единицата rem е погодна основа за типографската скала, бидејќи се приспособува на големината на текстот поставена од корисникот. Размерот на корен елементот може да се промени преку медиумски услов, а компонентите да користат релативни единици. Така, основниот текст, растојанието на копчињата и големината на иконите остануваат во иден однос. Фиксните вредности во пиксели се прифаќаат само кога елементот навистина не смее да се менува, како што е случајот кај некои граници.
Преломните точки треба да означуваат промена во распоредот, а не само во ширината. Кога колоната станува претесна, приоритет е влесното читање, поголемите допирни цели и кратките наслови. Кога има доволно место, можат да се додадат споредна навигација, описни колони или широки наслови. Некои промени, како продолжувањето на редовите кај податоците во решетка, бараат посебна грижа за да не се изгубат ниту групите ниту поединечните вредности.
Хиерархија и простор меѓу елементите
Големината на фонтот создава само еден дел од хиерархијата. Растојанието меѓу насловот и текстот, ширината на редот и малата или големата тежина на фонтот помагаат корисникот да препознае каде започнува новата тема. Затоа секој визуелен сигнал треба да има согласна цел. Ако сите делови се издвојуваат со задебелени букви, ниту еден не се издвојува; ако секој блок има исто растојание, читањето губи структура.
Дополнителна инспирација за просторна хиерархија и изборот на интерлинеа може да се најде во примерите за уредување, но секој визуелен модел треба да се прилагоди на содржината и начинот на употреба. На интерфејсот е важно растојанието да е доволно за групирање, без да создава празнина што го забавува прелистувањето. Пасусите можат да бидат пократки на телефон, а секциите да добијат повеќе воздух на екран со повеќе колони.
Големина на текстот според уредот
Разликите меѓу телефон, таблет и десктоп не се сведуваат само на бројот на пиксели. Физичката големина, оддалеченоста, начинот на држење и вклучената мобилност го менуваат оптималното читање. Затоа ориентацијата треба да се процени како дел од приказот, а не како случајно зголемување. На мала површина, поголемиот текст ја намалува потребата од притискање, додека на голем монитор прекумерно големите букви го разводнуваат впечатокот.
| Уред | Основен текст | Интерлинеа | Распоред |
|---|---|---|---|
| Телефон | 16–18 пиксели | 1,4–1,55 | Една колона и кратки пасуси |
| Мал таблет | 17–19 пиксели | 1,5–1,6 | Една колона или две тесни колони |
| Лаптоп | 18–20 пиксели | 1,55–1,7 | Главна колона со ограничена ширина |
| Голем десктоп | 19–22 пиксели | 1,6–1,75 | Поголем простор, без неоправдано широки текст |
Бројчаните вредности се ориентир, а не универзално правило. Типот на содржина, јасноста на фотографијата и индивидуалните потреби за читање имаат поголемо влијание од ознаката на уредот. Особено важно е да се провери дали зумирањето од 200 или 400 проценти го сохранува целосниот распоред и дали сите интерактивни елементи остануваат достапни без двојно тапање.
Ширина на редот и интерлинеа
Долг ред на широк екран го забавува окото, бидејќи при враќање на следниот ред лесно се пропуѓа почетокот. Околу 60–75 знаци по ред е добра полазна точка за текстниот блок, изразена преку единицата ch. На телефон, ширината на екранот често го прави ова ограничување непотребно, па треба да се дозволи природно прелистување. На повеќеколонски приказ, секоја колона добива своја ограничена ширина, додека просторот меѓу колоните ја зачувува ритмичноста на читањето.
Интерлинеата се менуваат заедно со големината, а не се копираат механички од еден екран на друг. За основен текст, вредност околу 1,5 обично дава удобно читање; за поголеми наслови, кај кои редовите се пократки, може да се употреби 1,15–1,3. Преголемото растојание создава раздвоеност, а премногу мало згускува буквите. Вредностите треба да се тестираат и со затемнена тема, бидејќи истата непозната вредност создава различен визуелен замор.
Темна тема и пристапност за сите
Во темната тема, светлиот текст не смее да се ослоне само на разликата во осветленост. Контрастот на основниот текст според пристапните барања е најмалку 4,5:1, а за големи текстуални делови 3:1. Ова не значи дека секој дел треба да има иста боја: секундарните елементи можат да бидат придушени, но мора да останат читливи. Тежината на фонтот и големината помагаат да се надгради разликата меѓу нивоата.
Пристапноста бара типот да остане читлив и кога корисникот ќе ја зголеми основата на фонтот или ќе го отвори прозорецот на мал дел од екранот. Затоа се избегнуваат фиксни височини за текстуални кутии, а линиите и копчињата добиваат доволно простор за допир. Празниот простор и фокусот се важни за читањето на интерфејсот, бидејќи јасното групирање го насочува окото кон активниот дел без визуелна букумност.
Фокусот при навигацијата мора да остане видлив, а активните елементи мора да имаат јасно означување. Ознаката за видлив фокус дава јасен контур околу копчето или полето, додека текстуалните врски треба да имаат видливо потцртување. Именувањето на елементите, јасните етикети и логичен ред на читање се толку важни како и самата големина на буквите.
Тестирање и одржување на типографскиот систем
Тестирањето треба да опфати реални уреди, различни ориентации, системски зум и читање со помошна технологија. Бројот на екрани не ја одредува целосната проверка: секој дел што содржи текст мора да биде јасен при голем зум, при крајна ширина и при долго име или број. Унијатните тестови за дизајн и компонентите овозможуваат истите одлуки да се применуваат рамномерно во навигацијата, картите и формуларите.
Вчитувањето на фонтот влијае на моментот кога содржината ќе се појави. Променливите фонтови го намалуваат пренесувањето непотребни знаци, а режимот за приказ спречува непрозрачен текст додека се вчитуваат датотеките. Привремената недостапност на содржината не смее да се решава со трајно блокирање; резервниот фонт тогаш покажува приближна метрика и се менува кога ќе биде достапен вистинскиот.
Почетната страница на мелбет порталот може да послужи како референтна точка при проверката на навигацијата, боите и читливоста на содржината. Поедноставувањето на правилата го олеснува одржувањето, бидејќи новите екрани не бараат нови единични прилагодувања. Така, типографската скала останува читлива, предвидива и лесна за одржување како интерфејсот расте.