Съдържание
- Какво прави дизайнер на потребителски интерфейс?
- Уеб срещу собствени приложения
- Подобряване на вашия набор от умения
Когато започнах кариерата си, бях уеб дизайнер. Работих в уеб дизайн в продължение на четири години, като започнах с малки бизнес сайтове и в крайна сметка преминах към по-големи клиенти. Разбрах, че не графичният дизайн ме интересува, нито работя за по-големи марки. Бях по-заинтересован от шаблоните за разбиване на страници, начина, по който хората взаимодействаха с формуляри и неща като възприеманата производителност, отколкото визуалният дизайн на уеб страница.
Когато гледах научно-фантастични филми, разглеждах интерфейсите. И когато играех видеоигри, наблюдавах начина, по който бяха изложени менютата. Ако някоя от тези черти ви звучи познато, по душа може да сте и дизайнер на потребителски интерфейс.
Напуснах работата си в агенцията и основах собствена компания. На страницата си в LinkedIn се опитах да обобщя новата си кариерна цел: да направя възможно най-добрия софтуер. Минаха четири години, откакто започнах на свободна практика и пътуването ми не спря. В наши дни помагам на малка компания за дизайн на потребителски интерфейс, наречена Моно. Наскоро посрещнахме нашия четвърти член на отбора.
В тази статия искам да опиша какво е да си дизайнер на потребителски интерфейс, включително какво точно включва работата, къде да намериш най-добрите учебни ресурси и как да се подобриш в своя занаят.
Какво прави дизайнер на потребителски интерфейс?
Намирам, че като цяло можете да разделите работата на дизайнер на потребителски интерфейс на четири категории. Комуникирате с клиента, изследвате, проектирате и създавате прототип и комуникирате с разработчиците. Нека разгледаме по-подробно всяка от тези фази.
Клиентска комуникация
Комуникацията с клиента е свързана с разбирането на проблема на клиента. Целта е да се запознаете с бизнеса на вашия клиент, така че началото на даден проект обикновено представлява много разговори. Добре е да не знаете твърде много за домейна на клиента си, когато започнете - можете да разгледате бизнеса им по нов начин, докато предвиждате възможни дизайнерски решения.
За да бъдете добър дизайнер на потребителски интерфейс, трябва да можете в крайна сметка да мислите заедно с бизнеса на вашия клиент. Например вашият клиент може да е в авиацията. Работата за тях в крайна сметка ще ви направи доста добре запознати с тази индустрия. И така, съвет за вашето собствено щастие тук е да избирате разумно индустриите, в които работите, така че в крайна сметка да не сте експерт в нещо, което не ви интересува или не ви интересува.
По време на проект комуникацията не спира. Като дизайнер ще представяте работата си постоянно. В нашата компания ние сме отдалечен екип, така че нямаме много лични срещи. Вместо това използваме активно споделянето на екрана чрез видеоконференции. Инструменти за комуникация като Skype и Slack се използват всеки ден.
Полезно е да комбинирате синхронни и асинхронни комуникационни методи. Обаждането е чудесно, ако имате нужда от много информация бързо, но трябва да сте в същото време. Мислим за Slack като за наш „виртуален воден охладител“ и използваме Basecamp за управление на сложни дизайнерски проекти. Когато проектираме прототипи, използвайки HTML и CSS, използваме GitHub Issues, за да обсъждаме директно кода.
Изследвания
Освен комуникацията с клиенти, ще направите и много изследвания. Това може да включва теренни проучвания, семинари с клиента, анализ на конкуренцията или дефиниране на стратегия - по същество, почти всичко, което ви помага да разберете проблема.
Изследванията са това, което информира за избора ви на дизайн. Това е статия, която сте прочели веднъж, или онова ново нещо, което Apple току-що пусна. Когато е време да обясните защо сте направили конкретен избор на дизайн, вашите изследвания ви подкрепят.
Изследванията могат да бъдат много широки. Често тествам нови устройства с изследователска цел или се регистрирам в ново уеб приложение, за да проуча потребителския му интерфейс.
Дизайн и прототипиране
Като дизайнер най-вероятно ще прекарвате по-голямата част от времето си в проектиране и прототипиране. Проектът за проектиране на потребителски интерфейс може да се придвижи напред по различни начини - от скициране, детайлно проектиране до кодиране.
Методът, който използвате, до голяма степен зависи от вида на проекта. Какво проектирате? Уебсайт ли е, или по-скоро бихте го нарекли приложение? Използва ли родна технология? Редизайн ли е или започвате от нулата?
В нашата компания няма фиксиран процес, но повечето проекти следват еднакъв груб ред: започват със скици и телени рамки, продължават към детайлен визуален дизайн и дизайн на взаимодействие и завършват с прототип.
Като дизайнери прекарваме много време в мислене за нашите инструменти. Въпреки че страхотните инструменти са важни, те не са най-важното нещо. Умението да използвате Adobe Creative Suite и приложения като Sketch компетентно е еквивалентът на възможността да използвате молив за рисуване или четка за рисуване. Все още трябва да направите картината.
Като се има предвид това, здравословният интерес към инструментите е нещо добро. Обичам да изпробвам нови инструменти, които могат да ми помогнат да бъда по-продуктивна. Любимият ми инструмент за редактиране на вектори е Illustrator, но по-голямата част от работата ми по визуален дизайн се извършва в Sketch в наши дни. Други членове на екипа са преминали към по-нови инструменти като Affinity Designer.
Инструментите са много личен избор. Докато можем лесно да работим заедно, всеки е свободен да избере своя собствена. За да улесним разговорите за нашите проекти с клиенти, ние правим прототипи с InVision. За по-усъвършенствано прототипиране обаче използваме HTML и CSS. Инструментът, от който се нуждаете, зависи от работата, която искате да свършите с него.
Комуникация с разработчици
Често забравена част от работата на дизайнер на потребителски интерфейс е комуникацията с разработчици. В наши дни не можете да се измъкнете, като просто изпратите проектите си към разработчиците и се надявате те да бъдат приложени правилно. Най-добрите дизайнери знаят, че предизвикателството не е в създаването на дизайна, а в съобщаването му - не само на заинтересованите страни, които трябва да дадат своето одобрение, но и на разработчиците, които трябва да го приложат.
Съобщаването на дизайн се предлага в много форми: подробни спецификации, предоставяне на активи, преглед на дизайна заедно. Какво има смисъл да се доставя във всеки случай до голяма степен зависи от това дали проектът е роден или уеб приложение.
Традиционният подход е да се доставят активи до дизайна на екрана. Дизайнът на екрана може да се използва, за да се види как ще изглежда дизайнът като цяло, докато активите са готови за използване PNG и SVG на икони, така че разработчиците не трябва да се занимават с графичен редактор.
В нашата компания ние сме привърженици на доставката на повече от това. Използваме ръководства за стил на компоненти, за да спомогнем за поддържане на последователност в нашия дизайн. Когато си имаме работа с уеб проект, ние доставяме подробни набори от HTML и CSS, документирани парче по парче, готови за внедряване. Вярвам, че да имам дизайнерско око във всяка фаза от разработването на софтуер е единственият начин да постигна целта си да създам софтуер от световна класа.
Уеб срещу собствени приложения
Когато проектирате собствено приложение за платформа (напр. IOS или Android), сте склонни да се придържате към определени насоки. Когато проектирате за мрежата, няма толкова много насоки. Това, което обикновено се случва, е, че вашият клиент има набор от графични насоки за своята марка, които определят как трябва да изглеждат нещата.
Тези насоки обаче са склонни да бъдат съобразени с маркетингови уебсайтове и това, което е там, не винаги води до добри решения за потребителския интерфейс. Шрифтовете обикновено се избират по маркетингови причини, а не поради четливост. Цветовете може да са удебелени и поразителни, което работи в рекламна кампания, но не и в приложение, което използвате ежедневно. Тези ръководства трябва да бъдат тълкувани.
Има няколко насоки за потребителския интерфейс за мрежата. Бихте могли да твърдите, че мрежата е разтопител в различни стилове. Ако правите нещо, което изглежда по-скоро като приложение, отколкото като уебсайт, трябва да знаете за широко използваните рамки като Bootstrap и ZURB Foundation. Рамката започва да определя как трябва да изглеждат нещата, защото не искате да преоткривате колелото. И това вероятно е хубаво нещо.
В нашата компания обичаме да използваме Bootstrap. Той осигурява разумни размери по подразбиране за общи елементи на потребителския интерфейс като бутони, таблици с данни и модали.
В уеб дизайна сте по-ограничени от техническите възможности на мрежата. По-рано беше трудно да се приложат прости визуални процъфтявания като заоблени ъгли на уебсайт. Тези дни отдавна са минали - сега можете да рисувате потребителски интерфейси с много сенки, преходи, анимации и дори 3D.
Като дизайнер е по-реалистично да поемете контрола върху процеса и дизайна в браузъра. Не съм виждал много дизайнери на потребителски интерфейси да поемат програмирането на потребителския интерфейс на собствено приложение, но дизайнерът, който прави HTML и CSS на уеб приложение, е често срещано явление. Ако можете да кодирате собствените си проекти, ще имате предимство пред вашите некодиращи връстници и за мен това е единственият начин да разберете истински как работи мрежата.
Уеб ограничения
Скоро ще откриете, че не всички страхотни трикове, които научавате, се поддържат във всеки браузър и това е реалността при проектирането за мрежата. Добре е да следвате добре познати принципи като прогресивно подобрение, където зареждате подобрено съдържание, когато е възможно, но също така помислете как съдържанието се влошава.
Напоследък стана популярно ‘рязането на горчицата’. Подпомаган от уеб екипа на BBC, това включва разграничаване между „добри“ и „лоши“ браузъри и предоставяне на ограничен опит за „лоши“ браузъри. Наистина обаче работи само за съдържателни сайтове.
Що се отнася до преживявания, подобни на приложения, много хора ограничават поддръжката само до няколко водещи браузъра, за да улеснят разработката. За съжаление, това ни връща към ситуацията от 1996 г., когато ви е необходим определен браузър, за да видите съдържанието.
Подобряване на вашия набор от умения
И така, как да сте в крак с бързо развиващата се уеб индустрия и да подобрите своя набор от умения? Нека разгледаме няколко различни метода за повишаване на вашите умения ...
Знания за платформата
Основна част от арсенала на дизайнера са знанията на платформата. Трябва да знаете за различните операционни системи и как хората ги използват. Като дизайнери сме склонни да използваме Mac, но тогава е лесно да забравим, че повечето хора там използват Windows кутии, за да свършат работата си.
Чувствам, че наистина можете да разберете нещо само ако го използвате сами. Предпочитам да използвам своя Mac за проектиране, но прекарвам много време, за да наваксам развитието на различни други платформи. Имам няколко копия на Windows, инсталирани на моя Mac като виртуални машини. Занимавах се с тестване на нови версии на Windows 10 с помощта на програмата Insider на Microsoft, за да проверя различните промени в потребителския интерфейс.
Също така редовно купувам нов хардуер, за да тествам как работи. Купих Apple Watch само за да тествам платформата. След това го продадох, защото чувствах, че не добавя толкова много към живота ми.
Освен това мрежата може да се разглежда като собствена операционна система. Той непрекъснато се развива, като всяка седмица се добавят нови функции към всеки доставчик на браузър. Изключително си струва да знаете за техническите аспекти на браузърите, особено по отношение на CSS и графичните способности. Трябва да знаете какво са SVG и WebGL и как можете да използвате API за уеб анимации.
Всяка платформа се развива с течение на времето и като дизайнер на потребителски интерфейс вашата задача е да бъдете в течение. В крайна сметка, каквото и да проектирате, не живее изолирано, а е част от по-голяма софтуерна екосистема.
Върнете се към основите
Това, с което се борим днес, не е толкова различно от това, с което се борихме преди 20 години. В книгите има много добри съвети. Опитайте Defensive Design for the Web от Jason Fried и Matthew Linderman и Don’t Make Me Think от Steve Krug за начало.
Ако не знаете за понятия като модалност и достъпност, трябва да прочетете. Трябва да можете да обясните какъв е законът на Fitts. Гещалтският закон за близостта? Това е хлябът и маслото от дизайна на потребителския интерфейс.
Вдъхновете се от игри и филми
Като дизайнер на потребителски интерфейс, черпя от други източници на вдъхновение, за да върша работата си. Намирам много вдъхновение в игрите. Някои игри са много сложни и дизайнерите на потребителския интерфейс трябваше да решават същите сложни интерфейсни проблеми като дизайнера на потребителския интерфейс, работещ по бизнес проекти.
Игрите също могат да означават тенденции. Минимализмът, открит в менютата на рали Колин МакРей ми напомня за посоката на iOS7. В известен смисъл анимационният дизайн на потребителския интерфейс, който сега е модерен, се появяваше в игрите преди години и години. Преминаването от скеуоморфизъм към голи, функционални интерфейси и „плосък дизайн“ е очевидно и в игрите. Сравнете Oblivion от 2006 г. с Skyrim от 2011 г. И двете игри са RPG в една и съща серия, но разликата е поразителна.
Футуристичните интерфейси във филми на Marvel като Iron Man също са ме вдъхновили. Те не са точно използваеми примери, но ме карат да се замисля повече за изчисленията като цяло. Искаме ли бъдеще на екраните или искаме екраните да изчезнат? Това вероятно е добър въпрос за задаване в пъб, пълен с дизайнери.
Израствате като дизайнер чрез упорита работа, упоритост, разговори с връстниците си и четене на страшно много. Преди около година прочетох в Ню Йорк Таймс статия за хора на възраст около 80-те, които продължават да усъвършенстват своя занаят. Чувствам, че едва започвам. Ами ти?
