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

Аутор: Randy Alexander
Датум Стварања: 25 Април 2021
Ажурирати Датум: 16 Може 2024
Anonim
Veb dizajn proces i najbolje Ui / UX prakse - Elementor Srbija Meetup
Видео: Veb dizajn proces i najbolje Ui / UX prakse - Elementor Srbija Meetup

Садржај

Када сам започео каријеру, био сам веб дизајнер. Радио сам четири године у веб дизајну, почевши од малих предузећа и на крају прелазећи на веће клијенте. Открио сам да ме није занимао графички дизајн, нити да радим за већа имена. Више су ме занимали обрасци пагинације, начин на који су људи комуницирали са обрасцима и ствари попут перципираних перформанси, него визуелни дизајн веб странице.

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

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


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

Шта ради дизајнер корисничког интерфејса?

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

Комуникација са клијентом

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


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

Током пројекта, комуникација не престаје. Као дизајнер, стално ћете представљати свој рад. У нашој компанији смо удаљени тим, па немамо много личних састанака. Уместо тога, ми често користимо дељење екрана путем видео конференција. Алати за комуникацију попут Скипе-а и Слацк-а користе се свакодневно.

Корисно је комбиновати синхроне и асинхроне методе комуникације. Позив је сјајан ако вам треба брзо много информација, али истовремено морате бити у близини. Слацк сматрамо нашим виртуелним хладњаком воде и користимо Басецамп за управљање сложеним дизајнерским пројектима. Када дизајнирамо прототипове користећи ХТМЛ и ЦСС, користимо ГитХуб Иссуес за директну расправу о коду.


Истраживање

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

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

Истраживање може бити врло широко. Често тестирам нове уређаје у истраживачке сврхе или се пријављујем на нову веб-апликацију како бих проучио њен кориснички интерфејс.

Дизајн и израда прототипа

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

Метода коју користите у великој мери зависи од врсте пројекта. Шта дизајнирате? Да ли је то веб локација или бисте је радије назвали апликацијом? Да ли користи матичну технологију? Да ли је то редизајн или крећете од нуле?

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

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

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

Алати су врло личан избор. Све док можемо лако да радимо заједно, свако може слободно да бира свој. Да бисмо поједноставили разговор са клијентима о нашем дизајну, израђујемо прототипове са ИнВисионом. Међутим, за напредније израде прототипова користимо ХТМЛ и ЦСС. Алат који вам треба све зависи од посла који желите да радите с њим.

Комуникација програмера

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

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

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

У нашој компанији заговарамо испоруку више од тога. Користимо водиче за стил компонената да бисмо помогли у одржавању доследности у нашем дизајну. Када имамо посла са веб пројектом, испоручујемо детаљне скупове ХТМЛ-а и ЦСС-а, документоване део по део, спремне за примену. Верујем да је јединствени поглед на дизајн у свакој фази развоја софтвера једини начин да постигнем свој циљ стварања софтвера светске класе.

Веб у односу на изворне апликације

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

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

Постоји неколико смерница за кориснички интерфејс за веб. Могли бисте да тврдите да је веб тачка различитих стилова. Ако правите било шта што више личи на апликацију него на веб локацију, морате знати о широко коришћеним оквирима попут Боотстрапа и ЗУРБ Фоундатион. Оквир почиње да одређује како ствари треба да изгледају, јер не желите да поново откријете точак. И то је вероватно добра ствар.

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

У веб дизајну сте више ограничени техничким капацитетима веба. Некад је било тешко да се на веб локацији примени једноставан визуелни процват попут заобљених углова. Ови дани су прошли - сада можете слободно цртати корисничке интерфејсе с пуно сенки, прелаза, анимација, па чак и 3Д-а.

Као дизајнер, много је реалније да преузмете контролу над процесом и дизајном у прегледачу. Нисам видео да многи дизајнери корисничког интерфејса преузимају програмирање корисничког интерфејса нативне апликације, али дизајнер који ради ХТМЛ и ЦСС веб апликације је честа појава. Ако можете кодирати сопствени дизајн, имат ћете предност над својим некодирајућим вршњацима, и по мени је то једини начин да истински разумем како веб функционише.

Веб ограничења

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

Недавно је популарно ’сечење сенфа’. Под покровитељством ББЦ-овог веб тима, ово укључује разликовање између „добрих“ и „лоших“ прегледача и пружање ограниченог искуства „лошим“ прегледачима. Међутим, то заиста функционише само за садржајне веб локације.

Што се тиче искустава сличних апликацијама, многи људи ограничавају подршку само на неколико водећих прегледача како би олакшали развој. Нажалост, ово нас враћа у ситуацију из 1996. године када вам је потребан одређени прегледач за преглед садржаја.

Побољшање вашег вештина

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

Знање о платформи

Главни део арсенала дизајнера је знање о платформи. Требали бисте знати о разним оперативним системима и о томе како их људи користе. Као дизајнери, обично користимо Мац рачунаре, али тада је лако заборавити да већина људи тамо користи Виндовс боксеве да заврше свој посао.

Осећам да нешто заиста можете разумети само ако то сами употребите. Више волим да користим свој Мац за дизајн, али проводим пуно времена надокнађујући развој разних других платформи. Имам неколико копија оперативног система Виндовс инсталираних на Мац-у као виртуелне машине. Био сам заузет тестирањем нових верзија Виндовс-а 10 помоћу Мицрософтовог програма „Инсидер“ да бих проверио разне промене у корисничком интерфејсу.

Такође редовно купујем нови хардвер да бих тестирао како функционише. Купио сам Аппле Ватцх само да бих тестирао платформу. Тада сам га продао, јер сам осећао да то не додаје толико мом животу.

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

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

Вратите се основама

Оно са чиме се данас боримо није толико различито од онога са чиме смо се борили пре 20 година. У књигама има гомила добрих савета. Испробајте одбрамбени дизајн за веб Јасона Фриеда и Маттхева Линдерман-а и Дон’т Маке Ме Тхинк Стевеа Круга за почетак.

Ако не знате појмове попут модалитета и приуштености, треба да прочитате. Требали бисте бити у могућности да објасните шта је Фиттсов закон. Гесталт закон близине? Ово је хлеб и маслац дизајна корисничког интерфејса.

Инспиришите се играма и филмовима

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

Игре такође могу означавати трендове. Минимализам пронађен у менијима релија Цолин МцРае подсећа ме на правац иОС7. На неки начин, УИ анимацијски дизајн који је сада у тренду појављивао се у играма годинама и годинама. Прелазак са скеуоморфизма на голи, функционални интерфејс и 'равни дизајн' очигледан је и у играма. Упоредите Обливион из 2006. са Скиримом из 2011. године. Обе игре су РПГ игре у истој серији, али разлика је упечатљива.

Футуристички интерфејси у Марвеловим филмовима попут Ирон Ман-а такође су ми били инспирација. Нису баш употребљиви примери, али ме натерају да више размишљам о рачунарству у целини. Да ли желимо будућност екрана или желимо да екрани нестану? Ово је вероватно добро питање за постављање у пабу пуном дизајнера.

Као дизајнер растете марљивим радом, упорношћу, разговором са вршњацима и ужасно читањем. Пре отприлике годину дана прочитао сам у Нев Иорк Тимесу чланак о људима који су прешли 80-те и који настављају да усавршавају свој занат. Осећам да тек почињем. Ста је са тобом?

Гледати
10 прелепих фонтова којима је тешко одољети
Даље

10 прелепих фонтова којима је тешко одољети

Код фонтова, као и код људи, лепота је често у оку посматрача. На крају крајева, Футура једног дизајнера може бити други Јокерман.Имајући то на уму, саставили смо 10 фонтова за које смо сигурни да ће ...
20 најбољих музичких спотова 2016
Даље

20 најбољих музичких спотова 2016

Иако можда више не привлаче исту пажњу као најбоље насловнице албума или украшавају екране МТВ-а, музички спотови су и даље инспиративни и креативни као и увек. Мешајући 3Д и 2Д анимације, коментаришу...
Погодите радну површину дизајнера!
Даље

Погодите радну површину дизајнера!

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