Овладајте златним правилима невероватног дизајна корисничког интерфејса

(Кредит за слику: Будућност)
Страница 1 од 5: Типографија

Дизајн корисничког интерфејса се погрешно разуме. Није ствар само у визуелном дизајну, али ни у потпуности не обухвата УКС. Одличан дизајн корисничког интерфејса заправо је мешавина јасноће и ефикасности. У овом чланку ћемо открити златна правила ефикасног дизајна корисничког интерфејса и како то постићи. Ова правила се односе на типографију, палете боја, ЦТА-ове, компоненте и системе дизајна.

Овде користимо ИнВисион Студио. Међутим, правила примењују било који алат који користите, а поступак је често врло сличан (погледајте наш водич за најбољи алати за дизајн корисничког интерфејса за неке друге опције или алтернативно наш општи водич за водеће алати за веб дизајн и најбоље градитељи веб страница ).

Дизајн корисничког интерфејса односи се на употребљивост. Иако се визуелни дизајн односи само на форму, дизајн корисничког интерфејса говори о томе како форма помаже функцији. Погледајмо нека основна правила која ће водити ваш процес дизајнирања корисничког интерфејса, почевши од типографије.



Правило # 1: Добар тип односи се на приступачност

Сјајна типографија своди се на доступност. У систему дизајна, величина слова, висина реда, размак између пасуса и размак између слова треба да буду дизајнирани на начин који побољшава читљивост и читљивост.

Визуелни дизајн - тј. Боје и фонтови - свакако доприносе корисниковом укупном искуству, али на крају дана корисници користе УИ, не гледајући на то као на уметност. Читљива слова резултирају јасноћом, а читљиве речи помажу корисницима да ефикасно сваре садржај. Напомена, десно веб хостинг услуга ће битно променити оно што ћете овде постићи.

Међутим, добро дизајнирана типографија и даље може бити естетски задовољавајућа. Постоји страна науке на коју често заборављамо, а то је страна на којој облик и функција постају једно. У ствари, били бисте изузетно изненађени колико црно-бела Хелветица (или сличан фонт) може бити прелепа након само неколико једноставних типографских побољшања. Под побољшањима, подразумевамо подешавање величине фонта, висине реда, размака између слова итд. Слично томе, „лепи“ фонтови могу постати ружни кад су нечитљиви, једноставно зато што фрустрација увек превлада естетику.

Почетник

Једноставни, али јасни системи могу бити лепи(Слика приписана: Даниел Сцхварз)

Међутим, као и многи аспекти дизајна корисничког интерфејса, фино подешавање ових појединачних стилова заправо није изазов. Изазов је одржавање доследности током целог дизајна, будући да се као људи крећемо светом (и нашим корисничким интерфејсима) на основу менталних модела, образаца, прошлих догађаја и познавања.

И ту систем дизајна улази у причу. Системи дизајна помажу нам да одржимо доследност и успоставимо јасну визуелну хијерархију између елемената различите важности, што заузврат помаже корисницима да брже разумеју наш кориснички интерфејс и чак ефикасније пробављају наш садржај. Сада, иако дизајнерски системи могу бити готово толико разрађени као оквир сличан Боотстрапу, они заправо почињу више попут водича за стил, а то је управо оно што ћемо данас створити, почевши од типографије.

01. Величина фонта

Када је реч о читљивости и читљивости, минимална прихватљива величина фонта како је дефинисано смерницама за приступ веб садржају ВЦАГ 2.0 је 18пт (или 14пт подебљано). Нисмо вам могли рећи коју величину фонта да користите, јер ово у великој мери зависи од самог фонта, али важно је водити рачуна о визуелној хијерархији и о томе како се ова основна величина разликује од сажетог текста као што су наслови (

,

,

итд.).

Уз изабрани алат за дизајн корисничког интерфејса ( ИнВисион Студио овде се користи), створите низ слојева текста ( Т. ) и прилагодите величине у корелацији са следећим шаблоном:

  • 44пк

  • 33пк

  • 22пк

  • 18пк

Са Студиоом (и свим осталим алатима за дизајнирање корисничког интерфејса) то се постиже подешавањем стилова помоћу инспектора на десној страни.



Затим одаберите фонт. Оно што бисте могли приметити код неких фонтова је 18 пиксела

и 22пк

не изгледа толико различито. Овде имамо два избора: подешавање величина фонта или размислите о употреби другог фонта за наслове. Размотрите ово друго ако претпостављате да ће ваш дизајн бити тежак за текст.

Имајте на уму да је дизајн визуелног корисничког интерфејса често приступ „цревима“ и ништа није исправљено - све се може променити.

02. Висина линије

Оптимална висина линије осигурава да редови текста имају довољно размака између себе како би се постигао пристојан ниво читљивости. Ово постаје све више препознато као стандард, чак и Гоогле-ов ПагеСпеед Инсигхтс предлаже то као ручну проверу или заставицу ако текст садржи везе преблизу један као резултат висине линије.

Још једном нам помаже ВЦАГ, изјављујући да висине линија треба да буду 1,5к величине фонта. Дакле, у вашем алату за дизајн корисничког интерфејса под „Лине“ (или сличним), једноставно помножите величину фонта са - најмање - 1,5. На пример, ако је основни текст 18 пиксела, тада би висина линије требала бити 27 пиксела (18 * 1,5). Ипак, опет имајте на уму свој цревни инстинкт - ако вам се 1.6к осећа боље, онда подигните.

Операцију математике можете извршити директно помоћу инспектора. Прерано је да почнемо да размишљамо о коришћењу стварних података у нашем дизајну, али у најмању руку можемо да користимо донекле реалне податке (чак и ако је то само лорем ипсум). ИнВисион Студио има изворну апликацију за стварне податке која нам помаже да видимо како наша типографија заправо може изгледати.

03. Размак између пасуса

Размак између одломака (или размака између текста) није стил који можемо изјавити помоћу инспектора. Уместо тога, мораћемо ручно да поравнамо слојеве помоћу паметних водича за тачност. Слично висини линије, магични множитељ је 2к (што значи двострука величина фонта).

Као пример, ако је величина фонта 18 пиксела, тада треба да буде 36 пиксела пре него што пређе у следећи блок текста. Што се тиче размака између слова, ово би требало да буде најмање 0,12. Међутим, не треба да бринемо око овога док не почнемо да користимо ове елементе за креирање компонената, слично као УИ комплет.

04. Заједнички стилови

Ако ваш алат за дизајн корисничког интерфејса то подржава (ИнВисион Студио још увек не), размислите о претварању ових типографских стилова у „Заједничке стилове“ како бисте их брзо поново употребили, истовремено осигуравајући визуелну доследност. То се обично постиже путем инспектора.

Следећа страница: Избор палете боја

  • 1
  • два
  • 3
  • 4
  • 5

Тренутна страна: Типографија

Следећа страна Палете боја