Садржај
- Правило # 1: Добар тип односи се на приступачност
- 01. Величина фонта
- 02. Висина линије
- 03. Размак између пасуса
- 04. Заједнички стилови
Дизајн корисничког интерфејса се погрешно разуме. Није ствар само у визуелном дизајну, али ни у потпуности не обухвата УКС. Одличан дизајн корисничког интерфејса заправо је мешавина јасноће и ефикасности. У овом чланку ћемо открити златна правила ефикасног дизајна корисничког интерфејса и како то постићи. Ова правила се односе на типографију, палете боја, ЦТА-ове, компоненте и системе дизајна.
Овде користимо ИнВисион Студио. Међутим, правила примењују било који алат који користите, а поступак је често врло сличан (погледајте наш водич за најбоље алате за дизајн корисничког интерфејса за неке друге опције, или пак наш општи водич за водеће алате за веб дизајн и најбоље градитељи веб страница).
Дизајн корисничког интерфејса односи се на употребљивост. Иако се визуелни дизајн односи само на форму, дизајн корисничког интерфејса говори о томе како форма помаже функцији. Погледајмо нека основна правила која ће водити ваш процес дизајнирања корисничког интерфејса, почевши од типографије.
Правило # 1: Добар тип односи се на приступачност
Сјајна типографија своди се на приступачност. У систему дизајна, величина фонта, висина реда, размак између пасуса и размак између слова треба да буду дизајнирани на начин који побољшава читљивост и читљивост.
Визуелни дизајн - тј. Боје и фонтови - свакако доприносе укупном корисничком доживљају, али на крају дана корисници користе кориснички интерфејс, не гледајући на то као на уметност. Читљива слова резултирају јасноћом, а читљиве речи помажу корисницима да ефикасно сваре садржај. Имајте на уму да ће права услуга веб хостинга битно променити оно што ћете овде постићи.
Међутим, добро дизајнирана типографија и даље може бити естетски задовољавајућа. Постоји страна науке на коју често заборављамо, а то је страна на којој облик и функција постају једно. У ствари, били бисте изузетно изненађени колико црно-бела Хелветица (или сличан фонт) може бити прелепа након само неколико једноставних типографских побољшања. Под побољшањима, подразумевамо подешавање величине фонта, висине реда, размака између слова итд. Слично томе, „лепи“ фонтови могу постати ружни кад су нечитљиви, једноставно зато што фрустрација увек превлада естетику.
Међутим, као и многи аспекти дизајна корисничког интерфејса, фино подешавање ових појединачних стилова заправо није изазов. Изазов је одржавање доследности током читавог дизајна, будући да се као људи крећемо светом (и нашим корисничким интерфејсима) на основу менталних модела, образаца, прошлих догађаја и познавања.
И ту систем дизајна улази у причу. Системи дизајна помажу нам да одржимо доследност и успоставимо јасну визуелну хијерархију између елемената различите важности, што заузврат помаже корисницима да брже разумеју наш кориснички интерфејс и чак ефикасније пробављају наш садржај. Сада, иако системи дизајна могу бити готово толико разрађени као оквир сличан Боотстрапу, они заправо почињу више попут водича за стил, а то је управо оно што ћемо данас створити, почевши од типографије.
01. Величина фонта
Када је реч о читљивости и читљивости, минимална прихватљива величина фонта како је дефинисана смерницама за приступ веб садржају ВЦАГ 2.0 је 18пт (или подебљано 14пт). Не бисмо вам заиста могли рећи коју величину фонта да користите, јер ово у великој мери зависи од самог фонта, али важно је водити рачуна о визуелној хијерархији и о томе како се ова основна величина разликује од сажетог текста као што су наслови (х1>, х2>, х3> итд.).
Уз изабрани алат за дизајн корисничког интерфејса (ИнВисион Студио овде се користи), креирајте низ слојева текста (Т.) и прилагодите величине у корелацији са следећим шаблоном:
- х1> 44пк
- х2> 33пк
- х3> 22пк
- п> 18пк
Са Студиоом (и свим осталим алатима за дизајнирање корисничког интерфејса) то се постиже подешавањем стилова помоћу инспектора на десној страни.
Затим одаберите фонт.Оно што бисте могли приметити код неких фонтова је 18 пиксела п> и 22пк х3> не изгледа толико различито. Овде имамо два избора: подешавање величина фонта или размислите о употреби другог фонта за наслове. Размотрите ово друго ако претпостављате да ће ваш дизајн бити тежак за текст.
Имајте на уму да је дизајн визуелног корисничког интерфејса често приступ осећањима и ништа није поправљено - све се може променити.
02. Висина линије
Оптимална висина линије осигурава да редови текста имају довољно размака између себе како би се постигао пристојан ниво читљивости. Ово постаје све више препознато као стандард, чак и Гоогле-ов ПагеСпеед Инсигхтс предлаже то као ручну проверу или заставицу ако текст садржи везе преблизу један као резултат висине линије.
Још једном нам помаже ВЦАГ, изјављујући да висине линија треба да буду 1,5 пута веће од величине фонта. Дакле, у вашем алату за дизајн корисничког интерфејса у одељку „Линија“ (или слично) једноставно помножите величину фонта са - најмање - 1,5. Као пример, ако је основни текст 18 пиксела, тада би висина линије требала бити 27 пиксела (18 * 1,5). Ипак, имајте на уму свој инстинкт у цревима - ако вам се 1.6к више свиђа, онда подигните.
Операцију математике можете извршити директно помоћу инспектора. Прерано је да почнемо да размишљамо о коришћењу стварних података у нашем дизајну, али у најмању руку можемо да користимо донекле реалне податке (чак и ако је то само лорем ипсум). ИнВисион Студио има изворну апликацију за стварне податке која нам помаже да видимо како наша типографија заправо може изгледати.
03. Размак између пасуса
Размак између пасуса (или размака између текста) није стил који можемо да пријавимо помоћу инспектора. Уместо тога, за прецизност ћемо морати ручно да поравнамо слојеве помоћу паметних водича. Слично висини линије, магични множитељ је 2к (што значи двострука величина фонта).
Као пример, ако је величина фонта 18 пиксела, требало би да буде 36 пиксела пре него што пређе у следећи блок текста. Што се тиче размака између слова, ово би требало да буде најмање 0,12. Међутим, не треба да бринемо о овоме док не почнемо да користимо ове елементе за креирање компонената, слично као УИ комплет.
04. Заједнички стилови
Ако ваш алат за дизајн корисничког интерфејса то подржава (ИнВисион Студио још увек не), размислите о томе да ове типографске стилове претворите у „Заједничке стилове“ како бисте их брзо поново употребили, истовремено осигуравајући визуелну доследност. То се обично постиже путем инспектора.
Следећа страница: Избор палете боја
