Врхунски водич за дизајн корисничког интерфејса

Садржај

• 01. Изаберите вашу типографију
• 02. Изаберите праву палету
• 03. Стилске везе и дугмад
• 04. Креирајте своје компоненте
• 05. Документујте и сарађујте

Шта је дизајн корисничког интерфејса? Боље питање би било, шта заправо иде у дизајн корисничког интерфејса? Естетика? Употребљивост? Приступачност? Сви они? Како се сви ови фактори уједињују како би се омогућило оптимално корисничко искуство и који би требали бити на првом месту?

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

01. Изаберите вашу типографију

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

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

Типографија „Лепа“ је заправо ружна кад је нечитка, јер фрустрација увек превлада естетику. Одличан дизајн је уравнотежен и складан.

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

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

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

• х1>: 44пк
• х2>: 33пк
• х3>: 22пк
• п>: 18пк

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

Следеће одаберите фонт, али припазите јер оно што бисте могли приметити код неких фонтова је 18 пиксела п> и 22пк х3> не изгледа толико различито. Имамо два избора: подешавање величина фонта или разматрање другог фонта за наслове. Идите са овим последњим ако претпостављате да ће ваш дизајн бити тежак за текст.

Имајте на уму да:

• Визуелни дизајн корисничког интерфејса је често приступ осећају
• Ништа се не одлучује; све је подложно променама

Висина линија

Оптимална висина линије осигурава да редови текста имају довољно размака између себе како би се постигао пристојан ниво читљивости. Ово постаје све више препознато као „стандард“; Гоогле-ов алат за ревизију светионика то чак предлаже и као ручну проверу (или чак као заставицу ако текст садржи везе које су можда преблизу једна другој као резултат неоптималне висине линије).

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

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

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

Размак између одломака није стил који можемо да изјавимо помоћу Инспектора програма ИнВисион Студио. Уместо тога, мораћемо ручно да поравнамо слојеве помоћу паметних водича (⌥). Слично висини линије, магични множитељ је 2к (двострука величина фонта). Као пример, ако је величина фонта 18 пиксела, требало би да има најмање 36 пиксела простора пре него што пређе у следећи блок текста. Размак између слова треба да буде најмање 0,12.

Међутим, не треба да бринемо због овога док не почнемо да правимо компоненте.

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

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

02. Изаберите праву палету

Одабир савршених боја за ваш дизајн превазилази естетику: може информисати читаву хијерархију ваше веб локације.

Што се тиче дизајна корисничког интерфејса, боја је уобичајено једна од првих ствари с којима се уживамо бавити, али уче нас да је роњење директно у визуелни дизајн лоша ствар. То је свакако тачно, међутим када је у питању визуелна конзистентност, боја би требала бити главна брига јер игра друге улоге.

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

01. Старк
Додатак Старк компатибилан је са Скетцх и Адобе КСД и помаже вам да проверите контраст боја и симулирате далтонизам директно са платна. Подршка за Фигму и ИнВисион Студио долази врло брзо.
02.Боје
Боје је скуп од 90 комбинација боја које имају одговарајућу количину контраста боја како би се задовољиле смернице ВЦАГ 2.0 - неке од њих чак успевају да задовоље ААА стандард.
03. А11и Пројецт
Пројекат А11и је велико средиште за све ствари повезане са приступачношћу. Садржи ресурсе, алате, савете, упутства, а креирао га је израђивач додатка Старк, а средства добија од ИнВисион.

Три врсте боја

Боје имају значење, па је важно да их нема превише. Превише значења резултира већим бројем ствари које корисник мора да разуме и запамти - а да не помињемо више комбинација боја због којих бисмо требали да бринемо. Уопштено говорећи, ово би био препоручени формат:

• Боја позива на акцију (уједно и главна боја бренда)
• Неутрална тамна боја (боља за УИ елементе или тамни режим)
• Због свега наведеног, мало светлија и тамнија варијација

Ово омогућава следеће:

• Тамни режим ће бити лако остварив
• Наша ЦТА боја никада се неће сукобити са другим бојама
• У било ком сценарију моћи ћемо да нагласимо и не нагласимо

Поставите своју палету

Помоћу изабраног алата за дизајн корисничког интерфејса направите по једну прилично велику уметничку плочу (додирните А) за сваку боју (названу „Бренд“, „Неутрално / светло“ и „Неутрално / тамно“). Затим у свакој уметничкој плочи направите додатне мање правоугаонике који приказују тамније и светлије варијације боје, као и остале боје.

Нешто светлије и тамније сматрали бисмо 10% екстра беле, односно 10% екстра црне боје. Када завршите, прикажите копију типографских стилова на свакој уметничкој плочи. Боја ових слојева текста треба да буде неутрално светла, осим на уметничкој плочи неутралног светла где би требало да буду неутрално тамне.

Контраст

Следеће ћемо морати да проверимо у бојама ради оптималног контраста боја. Постоје разни алати који то могу учинити, на пример додатак Старк за Скетцх и Адобе КСД или Цонтраст за мацОС - међутим, мрежно решење попут Контраст контраста или Провера контраста у боји добро ће послужити.

Проверите контраст боја за сваку комбинацију и прилагодите боје у складу с тим. Ако нисте сигурни које боје да користите, покушајте да користите препоруке Цолор Сафе-а.

03. Стилске везе и дугмад

Величина

Дугмад и везе, слично као и типографија, требало би да имају неколико варијација. На крају, нису све радње једнаког нивоа важности и, као што смо раније разговарали, боја је непоуздан начин комуникације, па не може бити главни метод утицаја на визуелну хијерархију. Такође се морамо играти са величином.

Визуелни тест приуштености тест је употребљивости који се користи да би се утврдило да ли се чини да су мете на додир могуће кликнути. Синхронизујте дизајн из Студија у Фрееханд (⌘⇧Ф), пошаљите резултујући УРЛ тестерима и нека заокруже елементе за које сматрају да се могу кликнути.

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

Генерално, препоручујемо да текст дугмета буде декларисан као 18 пиксела (исто као и основни текст), али да сами тастери имају три варијације у величини:

• Нормално: Висине 44 пиксела (заобљени углови: 5 пиксела)
• Велики: Висине 54 пиксела (заобљени углови: 10 пиксела)
• Екстра велики: Висине 64 пиксела (заобљени углови: 15 пиксела)

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

Дубина

Без обзира да ли је циљ додиром дугме или поље обрасца, сенке треба користити за повећање дубине и стога сугерисати интерактивност. Један стил сенке за све варијанте дугмади и поља образаца је у реду.

Интерактивност

Сваком типу дугмета је потребна варијација која показује његово стање лебдења. Ово кориснику појашњава да је оно што је покушао да уради потпуно у реду и осигурава му да то настави без одлагања.

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

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

Не заборавите да поновите овај корак за сваку уметничку плочу. Не уврштавајте брендиране ЦТА дугмад на уметничку плочу бренда - касније ћемо покрити шта се дешава када одређене комбинације не функционишу.

04. Креирајте своје компоненте

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

Коришћење компонената

Жичани оквири су веома корисни, не само за дизајнирање корисничких интерфејса високе употребљивости, већ и за откривање шта ће наш кориснички интерфејс дугорочно захтевати. То је некако као заштита будућности.

То не значи да морамо да дизајнирамо мноштво компонената или да будемо спремни за било који могући сценарио, али то значи да морамо да применимо став „Шта ако?“.

На пример, ако наш жичани оквир захтева компоненту 3к1, али знамо да садржај није у камену, мало размишљања може нас довести до тога да се запитамо: „Шта ако ове компоненте заврше 4к1?“. Основно правило је: дизајнирати само за потребе корисника који већ постоје, али покушати да решења учине релативно флексибилним. У супротном, касније ћемо завршити са врло неуредним „дизајнерским дугом“.

Сада можемо поново користити ову компоненту повлачењем на платно из Библиотеке> Документ на левој страни, мада имајте на уму да се овај ток рада може разликовати у зависности од вашег корисничког интерфејса.

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

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

Користећи наша правила

Раније смо дали примедбу да се не користе маркирани ЦТА тастери поврх боје бренда, јер брендирани ЦТА тастери очигледно морају да се истичу међу свим осталим. Па како да кренемо у стварање брендиране компоненте, а да и даље можемо да користимо брендирано ЦТА дугме? Уосталом, ако користимо неутралне тамне тастере за, рецимо, навигационе тастере или једноставно мање важне тастере, то једноставно не би било опција, зар не?

Јел тако. Дакле, ово би била идеална прилика за стварање компоненте - конкретно, комбинације наслова + текста + дугмета. Приметите како сам креирао позадину неутралне светлосне картице како бих омогућио употребу брендираног дугмета. Слично томе, поље неутралне светлосне форме (поља образаца су обично беле због менталног модела који је историјски синоним за папирне обрасце) не изгледа невероватно на неутралној светлој позадини, па се могу користити само на неутралној тамној позадини - било директно или унутар неутрална тамна компонента. На овај начин свој дизајн чинимо флексибилним поштујући наша правила и одржавајући доследност.

Стрес тестирање

У идеалном случају, најбржи и најефикаснији начин да се осигура робусност нашег дизајна је стресно тестирање. Ставити дизајн на тест значи бити суров. Рецимо да имамо навигацију са Кс количином нав нав ставки јер је то био услов; да бисте заиста осигурали флексибилност, покушајте да промените ове захтеве додавањем више навигационих ставки или, да бисте заиста убацили кључ у радове, покушајте да додате и навигациону ставку са вишом визуелном хијерархијом од осталих. Да ли наша правила о величини, типографији и бојама дозвољавају овако нешто? Или да бисмо понудили оптималну употребљивост, треба ли нам још једно правило?

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

05. Документујте и сарађујте

Како олакшати употребу наших дизајнерских датотека како себи, тако и било којим другим дизајнерима који би могли користити нашу дизајнерску датотеку? Па, сигурно је да ћете их чувати у поузданом заједничком складишту у облаку, као што ћете сазнати.

Боје

Први корак је чување свих боја у узорку „Боје докумената“ ако то већ нисмо учинили - то ће им олакшати приступ када их треба применити у нашем дизајну.Да бисте то урадили, отворите виџет за избор боја из Инспектора, са падајућег менија изаберите „Боје документа“, а затим кликните на икону + да бисте додали боју у узорак. Ово функционише на исти начин у већини алата за УИ.

Заједничке библиотеке

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

У суштини то значи да сваки елемент мора бити компонента, чак и ако се састоји од само једног слоја. Кликните дугме + ‌ на бочној траци Библиотеке са леве стране, а затим увезите овај документ у нови документ. Тачно: наш документ је сада библиотека и спреман је за употребу за дизајнирање корисничких интерфејса са загарантованом доследношћу.

ИнВисион Студио је донекле ограничен у смислу да се још увек не синхронизује са ИнВисион-овим званичним алатом Десигн Систем Манагер, али довољно је једноставно сместити библиотеку у Дропбок да би је други дизајнери могли користити и ажурирати током времена. Када се изврши промена (локално или даљински), свака Студио датотека која користи библиотеку (поново, локално или даљински) питаће вас да ли желите да ажурирате боје и компоненте. Тако се одржавају библиотеке дизајна у свим тимовима.

Што се тиче дизајнирања корисничког интерфејса који је визуелно доследан, поново користите све. Дизајнирајте дугмад, а затим помоћу дугмади направите компоненте дугмади, а затим користите
компоненте тастера за стварање других компонената, као што су упозорења и дијалози.

Само не стварајте компоненте које нису потребне. Запамтите, изградња библиотеке је непрекидан напор у сарадњи. Не мора бити завршено одједном, довршено од вас самих или довршено икад. Мора само да пренесе језик.

Дизајн у размери

Како се дизајн шири, његово управљање постаје све теже. Постоје различита прилагођавања која бисмо можда желели да учинимо како би био ефикасан и одржив, поготово јер ИнВисион-ов ДСМ још увек не ради са Студиом.

На пример, можда бисмо желели да користимо текстуалне слојеве за означавање наше библиотеке као средство објашњавања случајева употребе различитих елемената. Што се типографских стилова тиче, могли бисмо чак и текст уредити да буде описнији (нпр. „Х1> / 1.3 / 44пк“). Ово говори х1>с би требало да буде 44 пиксела и да има висину линије 1,3.

Дизајн Хандофф

Алати за примопредају дизајна приказују различите стилове које користи сваки елемент у дизајну, тако да програмери могу да направе апликацију или веб локацију. Ови алати укључују преглед стилова, а такође и копију узорка „боје документа“. Програмери могу чак и да копирају ове стилове као код, што је изврсно ако сте одлучили да направите било коју писану документацију о дизајну и ако желите да укључите приказе фрагмената кода компонената.

Ако сте забринути за решавање проблема и управљање веб локацијом, провера да ли имате праву услугу веб хостинга ће вам помоћи, али за ваш систем дизајна треба користити алатку за примопредају дизајна ИнВисион, Инспецт. Да бисмо је искористили, кликнемо на дугме / икону „Објави у ИнВисион“ у ИнВисион Студио, отворимо резултујућу УРЛ адресу, а затим додирните да бисте прешли у режим провере. Заиста је згодно.

Овај садржај се првобитно појавио у мрежном часопису.