Как стать дизайнером интерфейсов. Необходимые навыки и сильные инструменты, о которых нам не говорят

Несмотря на обилие учебных материалов, начинающих специалистов год за годом заботит один и тот же вопрос: как сделать первые шаги в дизайне.

Получив множество вопросов от молодых дизайнеров, я решил написать материал, который бы мечтал прочитать на старте своей карьеры. Он основан на личном опыте и уроках, полученных в общении с успешными дизайнерами из больших студий и продуктовых команд.

В первой части, я расскажу о базовых навыках хорошего дизайнера, а во второй, о том, как их использовать для построения карьеры.

Фундамент дизайнера

В любой сфере есть ряд базовых навыков, без которых в профессии делать нечего. Лишь обретя эти навыки можно расчитывать на повышение в должности и доходе.

Фокус, цели и задачи

Каждый дизайнер должен знать, для каких целей создается интерфейс и какие задачи он должен решать.

Сайт авиакомпании существует для людей, цель которых переместиться из одного города в другой, а его задача — помочь найти рейс, соотвествующий их потребностям.

Цели и задачи — это не одно и тоже. У вас может быть цель хорошо провести вечер, а задача — выбрать между кино, рестораном и футболом.

Дизайнер должен всегда в голове держать цели пользователей, а на практике решать их задачи. Наверняка, вы сейчас работаете или начинаете работать над каким-либо проектом. Подумайте, какие у него цели и какие задачи он должен решать.

Задач у сервиса может быть много и некоторые будут друг с другом конфликтовать, поэтому вам нужно выбрать одну основную и сделать ее выполнение максимально удобным, при этом не пожертвовав остальными.

Как бы это работало, если бы это было просто?

Я регулярно задаю себе этот вопрос, встречая новую задачу. Он помогает мне отвлечься от существующих шаблонов и придумать решение, соответсвующее текущей задаче.

На старте карьеры я, как и многие, первым делом бежал на дизайнерские ресурсы в поисках “вдохновения” и пытался найти решение, которое можно применить к моей задаче. Хотя на самом деле, я не искал вдохновение, а лишь пытался поменьше напрягать свой мозг.

Скопировать чужое решение заманчиво, но не нужно забывать, что любой паттерн может хорошо работать в одном случае и абсолютно не работать в другом. Да и кем вы станете, лишь подражая чужим работам? Ведь хорошего дизайнера всегда отличает умение мыслить.

Полезно перенимать чужой опыт, просматривая концепты и работающие сервисы, но при столкновении с новой задачей не нужно забывать включать голову.

Эстетика интерфейса

Я люблю Medium за хорошую типографику и удобство написания статей, хотя на других ресурсах мои статьи порой набирают в два-три раза больше просмотров. Но дело ведь не только в красоте.

Хороший визуал облегчает чтение и избавляет от необходимости менять масштаб страницы. Хороший визуал делает акценты на важных элементах, что приятно в социальных сетях и критически важно в сервисах для бизнеса.

Instagram не просто так изменил свой интерфейс с черно-синего на белый. Его целью было сделать акцент на контенте, который генерируют пользователи.

Переодически мы слышим об ошибках, которые совершают люди из-за сложного интерфейса. Конечно, поставить случайно лайк — не проблема, а вот ошибка при управлении самолетом или атомной станцией может привести к трагедии.

Самый простой способ улучшить визуальные навыки — перенимать чужой опыт, копируя интерфейсы и читая толковые материалы. Мне в свое время очень помогли дизайн-гайдлайны Google.

На русском языке можете прочитать емкий материал студии Олега Чулакова: design.chulakov.ru. Уверен, что на старте карьеры он бы мне очень помог.

Еще одна очень важная вещь — взгляд со стороны. Я всегда работал в стартапах, где был одним дизайнером, что давало мне большую свободу действий, но лишало обратной связи опытных коллег.

Большинство дизайнеров начинают свою карьеру дома, поэтому единственным способом получить обратную связь для них является завязать отношения с опытным дизайнером и периодически просить у него комментарий по поводу своих работ.

Что ему нужно?

Хороший дизайнер думает сценариями, а не экранами.

Сценарий — это последовательность действий, которые нужно совершить пользователю чтобы выполнить определенную задачу. Например, выбрать оптимальный рейс. Сценарий может решаться в рамках одного экрана, а может содержать их сколько угодно. Задача дизайнера — не сократить количество экранов, а сделать выполнение задачи пользователя более удобным, интуитивным.

Иногда задача требует пошаговой логики, где каждый шаг — это отдельная страница, как при сложной регистрации. Некоторые задачи удобнее решать в рамках одного экрана (пример: создание публикации в соцсетях).

Сценарии лежат в основе проектирования любого интерфейса, поэтому любой дизайн должен начинаться с них.

Системность в дизайне

Все компании, которых хоть немного заботит дизайн, приходят к идее, что перерисовывать одни и те же компоненты и расставлять их новым способом — довольно глупая затея. Поэтому все начали создавать единую систему компонентов, а чуть позже и логику их размещения.

Спустя еще какое-то время, дизайнеры объединились с разработчиками, связав свои элементы в макетах со сверстанными компонентами на фронте. Благодаря этому, дизайнеру все меньше приходится рисовать и все больше использовать свои два главных инструмента: мозг и фронтенд-разработчика.

Разработчиков нужно уважать и хотя бы логически понимать суть их работы. Без этого сложно будет найти общий язык и создать отличный продукт.

Имея готовый набор необходимых элементов и стилей, вы сможете больше думать о решении проблем пользователей и меньше о рисовании.

Даже хорошую идею легко убить

Помню, как в начале карьеры, презентуя дизайн-решение, меня было легко смутить, задав простой вопрос, например, почему какой-то элемент именно такой. Тогда я пытался аргументированно ответить на вопрос из-за чего возникал бессмысленный диалог, который влиял на восприятие всей работы.

Лишь с опытом я понял, что вопросы, не касающиеся основной темы нужно игнорировать. Например, сказав: “Это лишь детали, поэтому давайте обсудим основные вещи, которые влияют на бизнес, а в конце вернемся к вашему вопросу”. Как ни странно, этот ответ избавляет вас от бесполезной беседы и представляет в виде профессионала, который заботится о бизнесе клиента, а не своем эго.

Для того чтобы ваши дизайн-решения принимались, необходимо связывать их с аналитикой, которую вы провели прежде чем придти к этому решению. Показав, что ваше решение стало итогом серьезной аналитической работы, в рамках которой вы изучили конкурентов и протестировали несколько решений, с вами сложно будет не согласиться.

Книги для дизайнеров

Меня периодически спрашивают, какие книги помогли мне стать в дизайне лучше.

Никакие.

Лишь регулярная практика и понимание бизнеса помогли мне приносить компании большую пользу и повысить свою ценность на рынке.

Идем дальше.

Куда устроиться

Есть три популярных варианта: студия, продукт или стартап.

Студия хорошо подходит для новичков, так как вокруг тебя полно дизайнеров у которых можно чему-либо научиться. Здесь выше темп, так как есть четкие сроки начала и окончания проекта. Из-за того, что стоимость проекта привязана к человеко-часам, в студиях зарабатывают, в основном, меньше, чем в продукте.

В продукте более спокойный ритм, так как прибыль компании напрямую не зависит от работы дизайнера. Зачастую, дизайн-команда занимается функционалом, который появится в будущем, поэтому для них качество чаще всего важнее скорости. Особенно для проектов, которыми пользуются миллионы.

В стартапах вклад каждого сотрудника чрезвычайно важен, так как команды небольшие и зачастую отдел дизайна состоит лишь из одного человека, поэтому идти туда лучше полностью уверенным в своих силах.

Всю свою карьеру, не считая фриланса, я работал в стартапах, где был единственным дизайнером. Минус этой работы в том, что рядом нет наставника, поэтому я много занимался самообразованием и анализом своей работы. Плюс в том, что ты можешь максимально влиять на итоговый продукт, работая вместе основателями.

Генерация удачи

[очень важная часть]

Многие ограничивают свое представление о мире профессиональными навыками, хотя они являются лишь необходимым минимумом. Вы можете быть отличным дизайнером, но какой в этом толк, если о вас никто не знает (ни клиенты, не сообщество)?

Некоторым везет и их карьера выстраивается благоприятным образом, но не потому что они с рождения счастливцы, а лишь потому, что они неосознанно выполняли действия, которые повышают шансы на успех.

Среди этих действий есть активные и пассивные.

Среди пассивных — это наличие резюме, портфолио и аккуратных профилей в соцсетях. Эти вещи повышают вероятность того, что вас могут случайно заметить и предложить интересный проект.

Активные действия — отклики на чужие вакансии, публикации статей и кейсов, общение с профессионалами из разных сфер, прямые письма работодателям и создание своего сообщества. Благодаря этому, вы не ждете пока вас найдут, а своими силами повышаете вероятность перспективного предложения.

Я знаю одного дизайнера из региона, который вел таблицу с ведущими профессионалами из нашей отрасли и по приезду в Москву встречался с ними. Благодаря этому, ему удалось получить хорошее предложение о работе и спустя полтора года сменить одну топовую студию на другую, заняв место партнера.

Популярный ныне вариант — пройти курс от известной компании или поучаствовать в конкурсе.

Павел Шумаков, выиграв Russian Design Cup получил предложение от ВКонтакте, а чуть позже перебрался в лондонский офис Badoo. Некоторые ребята, пройдя курс от Skillbox получили предложение о работе в AIC.

Давно известный вариант — сделать фейковый проект, вложив в него все силы и качественно опубликовать его в портфолио. Самый известный пример — редизайн Google News Георгия Квасникова, который принес ему ряд предложений от крупных компаний.

Ну и последнее.

Важно понимать, что за ширмой любого бренда находятся адекватные люди, которые готовы в любое время рассмотреть амбициозного кандидата. Ваша задача — лишь правильно себя преподнести. Грамотное письмо на общий ящик и аккуратное портфолио — это порой все, что нужно.

Как зарекомендовать себя на новом месте

Одна из самых главных вещей, которую я понял за свою карьеру — это умение идти вперед, несмотря на неудачи. Ошибок не избежать, поэтому нужно нормально к ним относится.

Это элементарная логика:

Успеха добиваются не те, кто не совершает ошибок, а те, кто несмотря на них идет вперед.

Мой путь, который я описал в большой истории “Становление дизайнера”, содержал ряд неудач, которые могли стоить мне работы, но даже на старте карьеры интуиция подсказывала, что переживания никому не помогут и единственный способ чего-то добиться — просто идти вперед.

Поэтому не переживайте, столкнувшись с проблемами на новой работе. Все через это проходили, включая Стив Джобса, который за первые 15 лет своей карьеры совершил ряд дорогостоящих ошибок, из-за которых в конце 90-х многие его считали неудачником. И лишь высокомерная уверенность в своем предназначении, позволила ему идти вперед и спустя десятилетие стать иконой отрасли.

Будьте открытыми, налаживайте отношения с коллегами, интересуйтесь опытом других и когда вам выпадает шанс, берите на себя инициативу.

Неизбежный исход

Возможно, начинающим специалистам еще рано читать про исход, но один дизайнер написала мне, что не хочет просто “двигать пиксели”, а стремиться учавствовать в создании продукта. Обычно дизайнеры приходят к этим мыслям спустя несколько лет, устав делать однотипные сервисы для заказчиков.

Самым логичным вариантом роста является позиция арт-директора, которая заключается в том, что вы навсегда закрываете графический редактор и выполняете лишь интеллектуальную работу, корректируя направление других дизайнеров.

Другой вариант — перейти в продуктовую компанию, где вместе с коллегами у вас будет возможность работать над улучшением одного продукта.

Неплохой вариант — присоединиться к стартапу и отвечать за дизайн всего проекта. В случае успеха, вы начнете набирать и обучать других дизайнеров, формируя отдел.

Возможно, кто-то из вас захочет перейти на позицию продукт-менеджера и отвечать за коммуникацию между командами и стратегию развития проекта.

Ну и самый амбициозный вариант — основать свой проект. Хороший дизайнер понимает, как работает маркетинг и разработка, что нужно людям и умеет это использовать.

Совершить переход с позиции дизайнера не так сложно. Вместо того, чтобы ждать когда вас повысят, начните брать на себя новые обязанности самостоятельно.

Я применяю этот принцип довольно давно и как показывает опыт, при наличии адекватных коллег ваша инициатива будет отмечена.

Ключ ко всему

Молодой дизайнер задал мне вопрос:

Лучше продолжить самообразование или поскорее устроиться на работу?

Всегда и во всем, практика – лучший способ изучить какую-либо дисциплину, а если она совмещается с адекватной обратной связью, то ничего лучше вы найти не сможете.

Поэтому, если вы хотите чего-то добиться в дизайне, то как можно раньше приступайте к работе и очень хорошо, если рядом с вами будет опытные коллеги. Если таковых нет, то делайте проекты самостоятельно и ищите обратную связь среди дизайнеров в социальных сетях.

На старте карьеры делайте фокус на качество, а не количество проектов. Не нужно искать новую работу в поисках лучшей жизни. Сначала научитесь делать ее хорошо.

И не забывайте, что дизайн-навыки – лишь половина успеха. Помимо них, вам нужно уметь общаться с людьми, понимать принципы работы бизнеса и проявлять активность в поиске интересных предложений.

Работайте упорно каждый день и не забывайте, что любой успех требует времени.

Терпение и упорство – ключ ко всему.

Сделайте эту неделю прорывной.

Дизайнер интерфейсов-что это такое — Удаленная работа в интернете

Доброго здоровья, уважаемый читатель журнала «Web4job.ru”! В  этой статье мы поговорим  на тему Дизайнер интерфейсов-что это такое, преимущества и недостатки профессии, необходимые для работы навыки и личные качества.

Дизайнер интерфейсов-что это такое

Содержание статьи:

Большинство создателей интерфейсов обладает аналитическими способностями, развитой логикой, благодаря чему могут безошибочно просчитывать действия других людей.

Разработчик пользовательских интерфейсов — это специалист узкой направленности, его основная задача — обеспечить на сайте простую и удобную навигацию, чтобы пользователь не запутался в лабиринте ссылок и страниц.

Качество работы специалиста определяется тем, насколько пользователям удобно пользоваться ресурсом.

Услугами специалиста пользуются:

• Дизайнерские агентства;
• Студии по созданию сайтов;
• Разные компании и частные лица, имеющие свои ресурсы.

Необходимые для работы навыки

Для работы потребуются следующие навыки:

• Владение языком HTML;
• Знание принципов юзабилити;
• Знание языков программирования;
• Знание основ маркетинга, программирования и дизайна;
• Понимание требований клиентов. Именно он решает, как оформить меню, какие кнопки пользователь будет нажимать при переходе на другие страницы, как будет выглядеть курсор;
• Пригодится опыт создания сайтов;
• Он должен уметь тестировать уже готовый дизайн сайта, выявлять недочеты и исправлять их;
• Заниматься созданием презентаций и инфографики;
• Знать технологии создания и верстки сайта.

Профессия эта еще новая, поэтому в вузах ее не преподают.

Работать по этой специальности могут программисты, веб-дизайнеры, 3D-аниматоры, люди, получившие образование по IT-специальностям.

Найти работу можно:

• На сайтах по поиску работы;
• Форумах дизайнеров;
• Разделах вакансий на сайтах рекламных агентств.

Данная профессия подходит тем людям, кому нравится рисовать, кому интересна психология и информатика.

Преимущества профессии

Она имеет ряд преимуществ:

• Высокая зарплата;
• Можно работать удаленно;
• Найти вакансии не составит труда;
• Данную профессию можно совмещать с другими, получая при этом дополнительный доход.

Недостатки профессии:

• В связи с тем, что профессия пока еще новая, на специалиста могут взвалить обязанности других специалистов;
• Приходится подстраиваться под требования клиентов;
• На свое обучение и приобретение оргтехники придется тратить свои деньги.

Специалисту необходимы такие личные качества:

• Коммуникабельность;
• Наличие аналитических способностей;
• Усидчивость, терпение, т.к. работа сидячая, малоподвижная и монотонная;
• Хороший художественный вкус.

Разработка интерфейса сайтов, игр, приложений — достаточно сложный процесс, требующий знаний в разных областях — дизайна, психологии, инженерии.

В IT-отрасли множество разных направлений, связанных с дизайном. Самые распространенные из них дизайнеры, которых отмечают аббревиатурой UX/ UI.

Дизайнеры пользовательского интерфейса (UI) сосредоточены на деталях взаимодействия клиента и интерфейса и на способе отображения функциональности сайта (поиск, вкладки, меню).

Их цель — эстетически подходящий современный дизайн продукта. Они занимаются подготовкой макета, подбором шрифтов, разработкой иконок, кнопок.

UX-дизайнер по большей части сосредоточен на удобстве и понимании интерфейса пользователем. Он может проводить опросы и исследования, которые в последующем могут стать основой для идеи дизайна, тестирует их в процессе разработки.

Чаще всего он сосредоточен на навигации, структуре, содержании, проектирует дизайн сайта, приложений, чтобы посетителю было удобно, и он с минимальными усилиями мог получить от сайта то, что ему нужно.

Основная цель специалиста — чтобы пользователь быстро получил то, зачем он заходил на сайт.

Сегодня часто можно встретить написание этих двух специализаций через флеш, что означает, что задачи обоих направлений выполняет один специалист.

UX/ UI-дизайнер отвечает за то, как интерефейс будет в дальнейшем выглядеть.

Специалист должен знать:

• Графические редакторы — самые популярные — Adode Illustrator, Adode Photoshop, Sketch, Figma;
• Инструменты прототипирования — Mockplus, Axsure. Они являются связующим звеном между идеей и ее реализацией;
• Психологию пользователей. Уже на этапе разработки макета надо понимать, будет ли удобно этим интерфейсом пользоваться. Продукт будет востребованным лишь тогда, когда на него имеется спрос;
• Теорию цвета;
• Иметь представление о типографике, композиции и юзабилити сайта;
• В зависимости от специфики работы может понадобиться понимание языка разметки HTML , CSS (верстки), некоторых языков программирования.

Кто такой гейм-дизайнер и как им стать вы узнаете, перейдя по ссылке https://web4job.ru/kak-stat-gejm-dizajnerom/.

Посмотрим видео на тему Дизайнер интерфейсов-что это такое

Дизайн интерфейса пользователя  UI UX DESIGN

Дизайнер интерфейсов: с чего начать погружение в  UI-дизайн?

UX/ UI-дизайнер, проектировщик интерфейсов-что это такое

Заключение

В этой статье мы рассмотрели тему Дизайнер интерфейсов-что это такое, какие навыки и личные качества необходимы специалисту для работы, преимущества и недостатки профессии.

Надеюсь, статья оказалась полезной. Если возникли вопросы, можете задать их через форму комментариев под этой статьей.

Также буду признательна, если поделитесь статьей со своими друзьями в социальных сетях.

Понравилось? Поделитесь с друзьями!

Получите высокооплачиваемую интернет-профессию!

«Чем веб дизайнер отличается от дизайнера интерфейсов?» – Яндекс.Кью

«Веб-дизайнер» — это термин, который широко употребляли в нулевые и по инерции продолжает быть в ходу сейчас, в основном в среде новичков. В отличие от «дизайнера интерфейсов» он стал всем известен, потому что не всем понятно, что такое интерфейсы. Веб-дизайнер мог получать ТЗ, проектировать, рисовать макеты в Фотошопе, мог верстать и даже интегрировать их в CMS, таким образом покрывая собой все стадии производства сайта. Проекты стали усложняться, но один человек не может в сжатые сроки сделать сложный проект и поэтому появились специализации дизайнеров, которые покрывают каждое звено: исследователь, проектировщик, график, иллюстратор, UI-аниматор. Все эти роли относятся к дизайну интерфейсов. Когда дизайн спроектирован, отрисован и заанимирован, его передают фронтендам и разработчикам.

С развитием IT-рынка и появлением мобильных приложений многие веб-дизайнеры начали делать и дизайн мобильных приложений. Веб и мобилки стали восприниматься как разные области, однако у них общие корни и компетентному веб-дизайнеру не составит труда перестроиться под специфику мобилок. Приставка «веб-» перестала отражать суть роли таких веб-дизайнеров и постепенно возник более точный термин «дизайнер интерфейсов», который покрывает и то и другое.

В зависимости от места работы и компетенций, обычно сферический дизайнер интерфейсов в вакууме умеет строить гипотезы, проектируя логику взаимодействия (=UX), рисовать макеты, иконографию и иллюстрации (=UI) и проверять гипотезы исследованиями. Изредка он увлекается фронтендом и разработкой, погружаясь на более технический уровень работы с интерфейсами. Если дизайнер пишет в своём портфолио, что он UX/UI, это значит, что он умеет и проектировать и рисовать. С одной стороны, использовать такие аббревиатуры модно, с другой это запутывает непосвящённых. Я предпочитаю называться дизайнером интерфейсов.

Если веб-дизайнер не хочет расширять свою область компетенций за границы веба, это показывает его маленький кругозор, поскольку современный веб-дизайнер обязан уметь работать с адаптивными сайтами, а там и до приложений недалеко.

По теме:

7 ответов на все вопросы

Главы статьи разбиты как раз на уровни погружения в профессию. Сначала вы разбираетесь, что это за дизайн интерфейсов такой, потом пробуете что-то сделать сами, а затем пытаетесь принести пользу с помощью дизайна. На последнем этапе нужно пытаться попасть в компанию: в студию, агенство или продукт и продолжить свой путь уже там. Потому что опыт — это наше всё.

Моя история

Трогать фотошоп я начал в 2010. Делал не интерфейсы, не веб-дизайн, а всякую мелкую графику для форумов: сиги, гигабары — старички вспомнят. Источником знаний были текстовые и видеоуроки, в основном, по Фотошопу и Иллюстратору. Тогда еще мое информационное поле не было набито интерфейсами, а только наполнялось разными инструментальными навыками, например, эффектами в Фотошопе.

Через какое-то время я начал пробовать перерисовывать сайты в Фотошопе. Получалось изучить простую сетку. Параллельно мне стала нравиться веб-разработка: круто, когда ты можешь сделать сайт от начала до конца без помощи других людей. Так я начал пилить разные сайтики в Фотошопе, а потом верстать их в Дримвивере и натягивать на пхп.

В те времена я не знал про курсы по дизайну интерфейсов: возможно их не было, возможно они были, но далеко. Поэтому в статье не будет ссылок на платные курсы, потому что я никакие не проходил и не могу за что-то ручаться.

Иногда брал заказы на фрилансе: бывало, нужно сделать логотип, а пару раз даже рисовал сайты.

А в 2014 меня взяли на стажировку в Ракетную фирму. Написал ребятам, выполнил тестовое задание и мне предложили работу внештатным дизайнером. В компании занимался внутренними интерфейсами для интранета, CRM-систем и отдела СММ. В команде был арт-директор и ведущий дизайнер, которые помогали мне доводить интерфейс до качества. У них я научился проектированию интерфейсов, простому дизайн-процессу и передаче макетов в разработку.

Навыки: пока никаких.

Дизайн интерфейсов — это процесс создания средств взаимодействия людей и объектов. Объектом может быть программа, компьютер, устройство, даже дверь. Например, компьютер «говорит» на языке единиц и нолей, а человек это все не понимает и хочет просто найти рецепт печенек. Дизайнер должен создать такой интерфейс, чтобы человек смог в нем легко разобраться и выполнить свою задачу (найти рецепт), а компьютер его понял и выдал результат без ошибок.

Первое, что понимают новички в дизайне, это то, что дизайн — решение задач. Если искусство пытается что-то донести, вызвать чувства в контексте, то в дизайне это уходит на второй план (в интерфейсном сильнее, в графическом меньше). В первую очередь дизайнер рассматривает задачу, которая стоит перед пользователем, контекст вокруг (среда, привычки) и ограничения, которые накладывает платформа, текущее развитие технологий, а также ресурсы остальной команды. Я верю, что смысл определяет форму.

Литература

Также, посмотрите как создают интерфейсы известные компании и люди: Студия Right, Агенство SFCD, Ony, BuroBuro, Студия Артемия Лебедева, Бюро Артема Горбунова, Илья Бирман, Данила Ковчий. Делать на уровне сразу не получится, но взять как ориентир и стремиться — хороший план.

Посещайте локальные митапы и конференции в вашем городе. Это вообще лучший способ погрузиться в профессию. Если у вас город более-менее большой, то наверняка дизайн-студии или компании периодически проводят встречи дизайнеров, которые делятся мыслями в виде простых докладов. Сможете посмотреть как на студии, так и на людей.

Подпишитесь на каких-нибудь дизайнеров, которые вам нравятся. Телеграм-каналы, сайты, блоги, фб — там обычно пишут про рабочие моменты, делятся новостями. Работает как неплохой способ быть в контексте индустрии.

Если через пару недель вам не стало скучно и вы все еще хотите научиться в дизайн, то следующий шаг — попробовать что-то нарисовать.

Навыки: 📜 типографика и верстка, 🔨 графический редактор.

Когда вы познакомились с дизайном и решили, что все-таки будете в нем разбираться, нужно начать что-то делать. Для этого вам понадобятся базовые инструменты: типографика, потому что интерфейсы состоят из текстов; верстка для расположения и компоновки элементов; графический редактор, чтобы быть способным собирать макеты.

Мейнстримными графическими редакторами являются Sketch и Figma. Скетч все еще стандарт для индустрии, но многие команды постепенно переходят на Фигму.

Литература

• Типографика и верстка. Артем Горбунов. Основа дизайна интерфейсов — правила типографики и верстки, потому что мобилки перекочевали из веба, а веб из печатной продукции.
• Подборка советов «Типографика и верстка». Бесплатная версия упомянутой книги в виде нескольких советов-статей на сайте Бюро.
• Дизайн-альманах Readymag. Подробные статьи про типографику, сетку, цвета и анимацию. Если последнее на этом уровне не так важно, то первые три темы будут очень полезны.
• Графический интерфейс. Данила Ковчий. Достаточно абстрактная, но не менее интересная статья про системный подход к разработке интерфейсов.
• Sketch App — Вводный курс. Первый попавшийся под руку видеокурс по Скетчу. Не смог найти никаких уроков за 2019 год, хотя Скетч сильно изменился в последних версиях. Но для понимания что происходит и как сделать базовые вещи — пойдет.
• Figma Guide. Саша Окунев. Саша написал подробную книгу про Фигму, которой хватит, чтобы погрузиться в инструмент и начать в нем что-то рисовать.

Сейчас нужно научиться делать что-то руками. Не важно, получится ли что-то полезно, главное — процесс.

Уроки по инструментам. Берем литературу по Скетчу или Фигме и пробуем все инструменты. Советовать какой-то редактор нет смысла — если есть возможность, попробуйте оба и решите, какой вам нравится больше.

Копирование чужого дизайна. Возьмите какой-нибудь сайт или приложение, вставьте скриншот в графический редактор и попробуйте нарисовать такой же интерфейс поверх. То есть, повторите полностью картинку. Через пару таких упражнений сможете видеть систему, по которой построены интерфейсы и научитесь работать в выбранном графическом редакторе.

Поиск вдохновения. Для поиска вдохновения и прокачки вкуса отлично подходит дрибл и биханс. Больше в визуальном плане, потому что интерфейсы там обычно как концепт-кары — выглядят красиво, но не для повседневной езды.

Чем больше рисуете — тем быстрее рисуете. На этом этапе нужно поиграться с инструментами, выбрать подходящий для своих задач, наработать руку и быть в состоянии что-то сделать. Короче, отвечаете на вопрос «Как?».

Навыки: 📮 решение задач, 🏭 дизайн-процесс.

Литература

• § 149. Решение задач. Про суть дизайна.
• § 167. Метод прогрессивного джипега. Метод применяются на всех этапах дизайна, и не только дизайна. Сильно помогает выдавать результат и управлять качеством работы на всех этапах дизайн-процесса.
• Что значит «сделать». Отличие «деланья» от «сделанья». Как планировать дела так, чтобы действительно их сделать.
• Константин Горский. Как делать дела. Лекция на аналогичную тему.
• Максим Ильяхов. Как важно быть полезным. О продвижении продуктов через пользу для людей.
• Не провалить задачу. Как задавать правильные вопросы, понять задачу, наметить план и решить задачу.
• Илья Бирман. Понимание задачи. Илья рассказывает про Бюрошный документ «Понимание задачи», который ребята составляют для каждого проекта.
• Дизайн+1. Людвиг Быстроновский. Как прокачивать себя и постепенно становиться лучше.
• Работа над ошибками | Сергей Кулинкович | Prosmotr. Как ловить и избегать типовые ловушке в работе дизайнера.
• Серёжа и большая красная кнопка. Даша Почекуева. Про осознанность в дизайне интерфейсов и уровни погружения в задачу. Возможно, на начальном этапе будет чересчур сложно, но это осознанность — естественный путь к развитию себя.
• The biggest WTF in design right now. Про интерфейсные сценарии.
• User flow is the new wireframe. Простая статья про разные степени детализации прототипов. Помогает постепенно улучшать дизайн и применять прогрессивный джипег.
• Пиши, сокращай. Максим Ильяхов, Людмила Сарычева.Книга про текст, но подойдет и дизайнерам, так как в интерфейсах большая часть коммуникации происходит за счет слов.

Придумать себе задачу всегда сложно, потому что обычно нам помогают внешние ограничения: сделать сайт, нарисовать плакат А3 и так далее. Когда есть только полная свобода — мозг взрывается.

Можно упростить себе жизнь: перерисуйте вывеску в магазине в вашем дворе, переделайте логотип вашей кафедры, сделайте оформление любимого паблика ВКонтакте. В общем, возьмите какой-то цифровой объект рядом с собой и попробуйте сделать его лучше.

Результат может вам не нравиться в первое время. На самом деле так будет всегда и это нормально.

— Костя Горский

/

В какой-то момент ваша работа начнет нравиться другим людям. Тогда, скорее всего, вы сможете зарабатывать с помощью дизайна и начнете все быстрее погружаться.

Пробуйте свои силы на таких задачах. Постепенно у вас начнет что-то получаться.

Навыки: 🔮 проектирование интерфейса, 👩‍💻 исследование пользователей.

Можно нарисовать миллион возможных вариантов дизайна. Некоторые из этих вариантов будут хорошо работать, другие хуже. Чтобы перейти от хаоса возможных вариантов решения задачи, можно воспользоваться:

• Самой задачей,
• Эвристиками интерфейсов,
• Сложившимися паттернами,
• Ограничениями среды и платформы,
• Чувством вкуса,
• Эмпатией,
• Данными с исследований.

Чем опытнее вы будете становиться, тем больше будете понимать, от чего зависит хороший интерфейс. Пока заострите внимание на целях и задачах пользователя, которые должен решать интерфейс.

Литература

Для практики возьмите какое-нибудь небольшое приложение типа Бургер Кинга и проанализируйте его целевую аудиторию. Затем выделите цели, которые преследуют пользователи, и основной сценарий, который реализован в приложении. После этого попробуйте изменить или упростить сценарий, чтобы цель достигалась быстрее.

Запрототипируйте решение и покажите друзьям. Пусть потыкают в интерфейс и скажут, что они думают. Совпали ответы с вашими ожиданиями? Если нет, то у вас появятся мысли как улучшить прототип.

Навыки: 💼 понимание бизнеса, 🤖 код.

Скоро должно прийти осознание, что картинки никому не нужны. По умолчанию результат работы дизайнера — пара картинок, которые кто-то другой должен заставить работать. Пользователям не важно, насколько красивые вы сделали макеты, потому что они видят только результат работы всей команды — запрограммированный и выпущенный продукт.

Хорошо дизайнит тот, кто дизайнит последним.

— Артем Поликарпов

/

Разработчикам тоже важно понимать дизайн, но сегодня мы не про это. В среднем они реже обращают внимание на детали, которые могут плохо сработать для людей. Хорошие дизайнеры плотно работают с разработчиками: общаются, выясняют детали, предлагают варианты.

Литература

Попробуйте создать маленький продукт сами: придумайте идею, спросите друзей, посмотрите на аналоги, нарисуйте макеты, сверстайте на HTML/CSS/JS и попробуйте запустить в интернете, чтобы была ссылка. Для вас откроется много нового: много идей никому не нужны, ваши картинки сложно верстать, запускать продукты не очень просто и другие, кажущиеся очевидными сейчас, мысли.

Навыки: 👋 коммуникация.

В индустрии существует какое-то среднее понимание, чем человек с определенной ролью будет заниматься. С дизайнерами интерфейсов это обычно:

• Знание нужного стека инструментов,
• Анализ задачи и проблемы,
• Проектирование сценариев,
• Разработка визуальной концепции,
• Тестирование на пользователях (хотя бы коридорное),
• Презентация решений команде и клиенту,
• Рефакторинг и передача макетов в разработку,
• Авторский надзор.

При работе в команде важно рассказывать, что ты делаешь, выполнять обещания, сообщать, если что-то не успеваешь или есть проблемы и доверять другим. В совместной работе помогают инструменты (типовой стек):

• Sketch или Figma для дизайна интерфейсов,
• Miro для совместного обсуждения картинок,
• Zeplin для передачи макетов разработчикам,
• Invision для создания интерактивных прототипов,
• Slack для общения.

Зарегистрируйтесь, потыкайте — на работе наверняка пригодится.

Литература

• Новые правила деловой переписки. Максим Ильяхов, Людмила Сарычева. Книга про то, как писать письма так, чтобы на них отвечали. Но не только: в работе приходится много писать, ставить задачи, описывать сценарии, общаться с разработчиками, отправлять письма клиентам, а книга как раз помогает делать это правильно.
• 019. Школа дизайна — Взаимное доверие и уважение в команде. Лола Кристаллинская. Лола рассказывает про эффективную работу в команде.
• 021. Школа дизайна — Как решать вопросы. Анастасия Ларкина. Анастасия рассказывает, как эффективно принимать решения в команде, где каждый отстаивает свои интересы.
• 011. Школа мобильного дизайна — Работа в команде. Юрий Подорожный. Почему важно общаться внутри команды и «синхронизироваться».

Материалы выше помогут понять, как лучше общаться, выстраивать рабочие процессы, держать других участников в курсе и не приносить проблем.

Составьте план

Саша Бизиков был разработчиком, а потом за год стал младшим дизайнером интерфейсов в Фанбоксе. Он подошел к делу осознанно: нашел материалы, составил план изучения, сходил в школу Яндекса и выполнял тестовые. В своем блоге он рассказал, как составлял план и шел к цели: Цель, Инструмент и План.

Кстати, в блоге Саши много заметок о том, как он пробовал в себя в дизайне и какие ошибки совершал.

Выберите направление

Рядом с дизайном интерфейсов живут разные специализации.

• Дизайн интерфейсов. Есть классические дизайнеры интерфейсов (UI/UX), которые занимаются и проектированием сценариев, и визуальным дизайном.
• Продуктовый дизайн. Тот же дизайн интерфейсов, но больше ответственности, так как дизайнер отвечает за весь дизайн продукта и те чувства, которые продукт вызывает. В продуктовом дизайне по-другому формулируются задачи и вообще процесс работы.
• UX-дизайн. Некоторые компании ищут узких спецов. «UX-проектировщики» — проектируют интерфейсы без оглядки на эстетику и трансляцию бренда
• UI-дизайн. Те, кто по вайрфреймам первых готовит финальный дизайн.
• Коммуникационный дизайн. Если у вас получается больше рисовать, чем проектировать — вам может быть ближе графический или коммуникационный дизайн. Продуктам часто требуются дизайнеры, которые будут заниматься брендом, иллюстрациями, презентациями, промосайтами и всей графикой.
• Исследования. Посмотрите в сторону пользовательских исследований. Если в компаниях хорошо развит дизайн-процесс, часто они прибегают к помощи исследователей, которые готовят юзабилити-тестирования, проводят воркшопы, выявляют нужные фичи и находят боли пользователей. Посмотрите видео Натальи Стурза про команду UX-исследователей.

Соберите портфолио

Есть три способа оценить дизайнера при приеме на работу: портфолио, собеседование и тестовое задание. На собеседовании обычно спрашивают общие вопросы: «Какими инструментами пользуетесь?», «Как вы работаете над задачей от начала до конца?», «Как проверяете, что достигли успеха?», «Разработчики говорят, что запрограммировать интерфейс слишком дорого. Ваши действия?». Собеседование показывает, знает ли кандидат область и его ли это работы (хотя бы приблизительно).

Но быстрее всего уровень дизайнера демонстрирует его портфолио: несколько релевантных проектов, запакованных в виде «презентаций» или кейсов. Самое удобное портфолио — аккаунт на бихансе или личный сайт. У такого подхода главный плюс — удобство просмотра и передачи портфолио туда-сюда, потому что можно просто кинуть ссылку. Не нужно держать портфолио в архиве, на дропбоксе или флешке. С такими ресурсами неудобно работать и вам скорее всего откажут до просмотра работ.

Главная задача страницы проекта такая же, как у презентации интерфейса кому-нибудь: доказать, что вы справились с задачей. Вот что нужно показать на странице проекта:

• Название продукта, сайта или приложения,
• Задача,
• Ваша роль,
• Картинки с интерфейсом,
• Небольшой пояснительный рассказ, что было сделано и почему,
• Ссылка на результат (сайт, приложение или продукт).

А где взять первые проекты? Можно придумать задачи самому: перерисовать какой-то сайт, заредизайнить стремное приложение или закреативить новый продукт. Это сложно, но интересно.

А самый простой путь — найти понравившуюся вакансию с тестовым и сделать его. Там и задача будет более-менее реальная, и в любом случае компания даст какую-то обратную связь, которая подскажет вам, куда развиваться.

Придумали крутую идею, сделали пару тестовых, оформили это всё в виде сайта и можно в бой.

Устройтесь на стажировку

Если вы прочитаете всю теорию из этой статьи, все равно не получится сделать крутой интерфейс без практики (ваш К. О.). Именно на настоящей работе статьи впитываются, навыки оттачиваются и появляется ощущение контроля процесса.

Ваша цель — попасть на стажировку или устроиться младшим дизайнером интерфейсов. Обычно, от новичков ожидают понимания дизайн-процесса, навыков работы в графическом редакторе, знания соседних инструментов (инвижн, миро, зеплин и т. д.) и желание развиваться. К стажерам прикрепляют старших товарищей, которые выдают задачи и проводят дизайн-ревью макетов. А у этих ребят можно спросить, в какой цвет кнопку красить, зачем нужна кнопка и какие они бывают.

Компании относятся к стажерам как к будущим профессионалам. Сначала они инвестируют в вас силы и ресурсы, а вы вырастаете в контексте компании и уже умеете решать специфичные задачи, а взамен получаете опыт и проекты в портфолио.

Стажировки можно найти на сайтах с поиском работы (HH, SuperJob), на сайтах больших компаний (Яндекс, JetBrains), в сообществах дизайнеров (Криэйтив Раша). Тут все просто: гуглите везде «стажировка ui ux» и проверяете информацию на адекватность.

На стажировках часто просят сделать тестовое задание. Но вы уже с этим знакомы, поэтому тестовое задание — еще один проект в портфолио!

1. Поглощайте всю информацию по теме. Фильтры появятся сами и чуть позже.
2. Делайте много картинок. Когда-нибудь они начнут нравиться другим людям.
3. Устройтесь на работу, потому что там практика и знания.

Советы программисту-дизайнеру интерфейсов / Хабр

Проблема

Программист часто выполняет роль дизайнера пользовательских интерфейсов. Можно поспорить, хорошо ли это. Однако, особенно в небольших компаниях, это реальность, которую не изменить.

Я верю, что программист может сделать очень приличный интерфейс. В этом посте я бы хотел собрать несколько советов, которые помогут программисту более или менее успешно погрузиться в иррациональный мир пользователей и проектировать неплохие интерфейсы.

Оговорюсь, что эти советы скорее подходят программистам, которые вынуждены заниматься разработкой пользовательского интерфейса. То есть по каким-либо причинам в компании нет дизайнера, регулярных юзабилити тестирований, процесса проектирования интерфейсов и т. п.

Простота

Задачи пользователя. Любой интерфейс – это зло. Пользователь использует продукт не ради продукта, а ради того, чтобы решить какую-то свою задачу. Например, мы используем интерфейс набора телефонного номера не для того, чтобы набрать номер, а для того, чтобы поговорить с другим человеком. Сам факт набора является необходимой операцией, которую навязывает технология.
Таким образом, создавая каждую форму, диалог или панель я постоянно задаю себе вопрос: «какую задачу пользователя я сейчас решаю?». Если выходит, что я пытаюсь решить несколько задач одной формой (или панелью), то скорее всего что-то не так. В таких случаях надо подумать, что является основной функцией, а что – фичей «не для всех».

Правило 20/80. Как известно, 20% усилий дают 80% результата. Зачастую для задач 80% пользователей достаточно 20% форм/диалогов/панелей. Стало быть, при создании интерфейса надо быть очень аккуратным, когда выбираешь те двадцать ключевых процентов.

Перед тем как добавлять ещё одну кнопку, чекбокс, поле, ссылку, я пытаюсь ответить на вопрос: «будут ли этой функцией пользоваться 80% пользователей?». Если нет, то на помощь приходит техника progressive disclosure.

Например, вот панель настроек из Firefox:

Понятно, что большинство пользователей блокируют поп-апы и разрешают загрузку изображений отовсюду. Лишь небольшое количество вручную указывают сайты-исключения.

Разъяснения. Интерфейс можно назвать простым, если он не требует дополнительных разъяснений. То есть, если для дальнейших действий надо прочитать небольшой текст, объясняющий что к чему, то очень вероятно, что интерфейс чересчур сложен. В таких случаях я думаю о том, можно ли сделать более интерактивное управление, стоит ли разбить процесс на несколько шагов, добавить поясняющую картинку, и т. п.

Например, для настройка тачпада на макбуках выглядит вот так:

То есть, поясняющий текст вроде «поступательные движения тремя пальцами по тачпаду вперёд перемещает некоторые приложения на следующую страницу» заменили небольшим видео, из которого всё ясно.

Лишние вопросы. Часто интерфейс спрашивает пользователя о чём-либо. Обычно это поп-ап с кнопками «ОК» и «Отмена». Порой вопрос вполне уместен. Однако, в большинстве случаев вопрос только мешает. Войну поп-апам объявили давно. Тем не менее, я бы хотел привести наиболее популярные типы лишних вопросов:

1. Вопрос, который может понять лишь 20% пользователей.
   
   Например:
   Те, кто знаком с тем, что такое keychain, поймут вопрос и ответят на него верно. Однако, большинство пользователей, скорее всего, пожмёт плечами и нажмёт «Allow».
2. Вопрос, не имеющий отношения к текущей задаче. Это случается очень часто: вы работаете с какой-то программой, и тут возникает поп-ап:
   Это заставляет забыть о текущей задаче и срочно принимать совершенно неожиданное решение.
3. Вопрос, на который система вполне может ответить сама. Например, при удалении файла из какой-то временной папки необходимо ответить на вопрос:
   Система знает, что этот файл временный и не очень-то и нужен. Более того, пользователь всегда может его восстановить.

Undo. Люди ошибаются. Приложение должно быть готово к этому. В идеале, должна быть возможность отменить любое действие пользователя. Каждый раз, когда пользователь принимает решение (например, выбирает юзернейм, удаляет файл или меняет конфигурацию), он может ошибиться. Очень грустно, если система не позволит исправить эту ошибку.
Тут же хочется отметить, что нельзя полагаться на вопросы, вроде «Вы уверены, что…?» или предупреждения, «Внимание! Это действие приведёт к …!». Во-первых, не все их читают, а, во-вторых, из тех, кто читает, далеко не все действительно понимают, что именно имеет в виду система.

Единообразие

Зачастую скромный, аккуратный интерфейс гораздо приятнее для глаза, чем богато украшенный и сильно анимированный. Самый простой способ сделать привлекательный интерфейс – это стараться делать всё одинаково.

Компоненты. Кнопки, чекбоксы, текстовые поля и т. п. должны выглядеть одинаково по всему приложению. Очень неаккуратно выглядят компоненты очень похожие друг на друга. Например, плохо, если иногда прогресс бар в чёрной рамочке, а иногда – в серой. Хорошо, если прогресс-бар всегда реализован одним и тем же компонентом и всегда выглядит одинаково.

Поведение. В разных ситуациях одинаковые компоненты должны вести себя похоже. Например, кнопка «назад» всегда должна возвращать на предыдущую страницу. Или, если зелёная кнопка всегда открывает дополнительное диалоговое окно, то она дожна открывать его действительно во всех контекстах.

Расположение компонентов. Интерфейс выглядит очень неаккуратно, если компоненты разбросаны невпопад. Если нарисовать несколько линий и располагать компоненты по ним, то интерфейс будет выглядеть намного аккуратнее. Например:

Видно, как компоненты сочетаются друг с другом по горизонтальным и вертикальным линиям.

Оформление текста. Обращайте внимание на лейблы! Стоит выработать и придерживаться правил, где и что пишется с большой буквы, где ставится многоточие (…), где ставятся точки. Очень важно одинаково именовать объекты системы: если где-то есть меню «параметры», то в другом месте это же меню никак не может называться «опции».

Стиль. Шрифты, цвета, иконки – всё это должно быть по возможности одинаково для всего приложения. Не стоит вводить в систему новые гарнитуры или новые начертания шрифтов. Стоит придерживаться основных цветов (зачастую, эти цвета являются «цветами компании»). Иконки дожлны обладать одинаковым стилем (например, если везде используются иконки в виде чёрно-белых силуэтов, не стоит добавлять новую цветную трёхмерную иконку).

Общение

Классическое замечание о том, что программисты часто не представляют, как пользователи используют продукт, увы, очень не далеко от правды. В идеале можно устроить запись взаимодействия пользователя с программой, проанализировать её, сделать выводы о недостатках интерфейса. Однако, когда такой возможности нет, полезно побеседовать с различными командами, чтобы получить представление о том, что ожидают от системы. Я предпочитаю беседы в неформальной обстановке, например, за обедом.

Продукт менеджмент. Мне кажется, что продукт менеджер должен быть верным другом программиста. Техническое задание (aka PRD) – это один из основных документов, помогающих понять «чо надо-то». Именно с продукт менеджером можно обсудить спорные моменты, попросить собрать необходимые данные, указать на возможные сложности, связанные с реализацией. Очень здорово, если техническое задание содержит наброски интерфейсов. Это в разы облегчает понимание того, что требуется создать.

Группа поддержки. Мне кажется, группа поддержки (aka support) ближе всего к самим пользователям системы. Именно к ним обращаются пользователи когда что-то не понятно, что-то работает не так, как ожидает пользователь, именно они объясняют, как надо использовать систему. Очень часто они подают идеи новых функций, которые могут в разы облегчить работу с продуктом.

Чтение саппорт тикетов, да и просто беседа с кем-либо очень открывает глаза на реальное положение дел.

Группа продаж. Я нашел очень полезным задавать коллегам из группы продаж (aka sales) вопросы о том, что можно изменить в интерфейсе, чтобы продукт было проще продать. Ответы могут быть очень интересными. Может, укажут на продукты конкурентов, может, попросят сделать «повебдванольее». Иногда можно услышать много интересного.

Заключение

Конечно, эти рекомендации не полны. Про удобство пользователя написаны книги. Есть специалисты в этой области, есть много консалтинговых компаний. Однако, я надеюсь, что этот пост сделает несколько интерфейсов чуть проще, аккуратнее, продуманнее.

А какие советы программисту-дизайнеру дали бы вы?

«Это как элитные бойцы»: чем UX и дизайнеры интерфейсов помогают бизнесу

Новые технологии и изменения в поведении покупателей — все это в итоге влияет на сайты, приложения и другие ИТ-продукты, которые помогают бизнесу успешно работать. Адаптацией же этих продуктов под запросы рынка занимаются в том числе UX-дизайнеры — именно они разрабатывают интерфейс ПО, сайтов, приложений или техники, который помогает пользователю не запутаться и быстро найти нужное.

В чем особенности этой профессии? На что обратить внимание компаниям и предпринимателям, которые создают собственные сайты и приложения? В рамках  спецпроекта мы поговорили об этом с одними из самых крутых специалистов в сфере дизайна интерфейсов: Юрием Ветровым (директором по дизайну Mail.Ru Group), Дмитрием Осадчуком (креативным директором Mail.Ru Group) и Андреем Малеваником (арт-директором компании Contented), которые приехали в Минск на премьерный показ «Дизайнера интерфейсов» — первого фильма из цикла «Профессиональный взгляд в будущее», который покажут в Беларуси в рамках проекта Film Talks от Silver Screen.

Дизайнеры интерфейсов — кто эти специалисты и откуда приходят в профессию

Андрей Малеваник:

— В эту индустрию приходят и «классические» дизайнеры, и специалисты по компьютерной графике, и люди из совершенно неожиданных сфер. Например, из искусства: художники, фотографы. На курсах по подготовке дизайнеров интерфейсов, которые проводит наша компания, есть даже винодел. Настоящий, со своей винокурней! То есть человек делал вино, а потом решил стать дизайнером интерфейса. Реальный кейс.

Уровень востребованности специалистов вообще сумасшедший. Раньше услуги дизайнеров интерфейсов заказывали на стороне. Последние год-полтора очень массово, по крайней мере, в России, компании забирают эту экспертизу «внутрь» и формируют собственные продуктовые команды. Причем нужны как джуниоры, так и специалисты среднего уровня.

Я помню, как маялись предприниматели десять лет назад: «Это достижение, мы в течение пяти лет взяли на работу второго дизайнера». А сейчас за год по десять специалистов нанимают!

Но не стоит, конечно, лукавить и думать, что ты неделю или месяц поучился — и сразу трудоустроился. Нужны в первую очередь качественные кадры. Все-таки дизайнер интерфейсов — элитный боец. Он должен быть и очень сильным визуалом, и очень хорошим логиком, и психологом, и инженером… К сожалению, не все соответствуют таким критериям: эта профессия развивается на стыке нескольких. Но если ты соответствуешь запросам — востребованность на рынке труда, повторюсь, очень высокая.

Что должен знать дизайнер интерфейсов

Юрий Ветров:

— Есть ключевые навыки:

1. Умение понять, для кого ты делаешь продукт: какие у пользователей ожидания и проблемы, в чем особенность сценариев их работы с сайтом или приложением.

2. Умение «переложить» вот это поведение на интерфейс. То есть спроектировать его.

3. Надо знать, как создается эстетически хороший, визуально приятный дизайн. Который еще и усиливает бренд компании.

Рынок сейчас очень стремительный: нужно запускать продукты и вносить в них изменения с высокой скоростью. Для этого важны небольшие команды, в которых люди владеют не только основной профессией, но еще и смежными навыками. Это так называемые Т-образные специалисты. Они стали доминирующими в нашей сфере.

Дмитрий Осадчук:

— В плане развития команды и продукта — например, интерфейса приложения — крутость истории в том, что Т-образных специалистов можно подбирать и ставить работать рядом так, чтобы они не мешали и не соревновались друг с другом. Тогда команда состоит из людей, каждый из которых владеет определенными смежными знаниями. Один дизайнер крут еще и в создании видео, другой — в компьютерной графике. В моем окружении, например, многие люди пришли в индустрию из инженеров. Их смежный навык — умение решать логические, нестандартные задачи. Образно говоря, соединяя буквы «Т», можно получить ровный прямоугольник. Т-образные специалисты, объединяясь в команду, такой прямоугольник и образуют.

То есть могут «закрыть» любые, максимально широкие задачи, как простые, так и сложные. В этом плане Т-образность сейчас актуальна и важна.

Каким сферам бизнеса особенно нужно задуматься над дизайном интерфейса своих сайтов и приложений

Дмитрий Осадчук:

— Уже давно дизайн интерфейсов развивается в банковской сфере, в телекоммуникациях. Эти бизнесы активно привлекают таких специалистов. Вот взять любое приложение банка. То, что мы видим снаружи — например, экран для заказа платежной карты, — это оболочка. Визуально хорошо выполненный интерфейс, который позволяет оформить эту карту в режиме онлайн. Но под таким «капотом» скрывается работа десятков внутренних ИТ-систем и продуктов: CRM, электронного документооборота и прочего. Каждая из этих систем также имеет свой собственный интерфейс, которых должен быть удобен для сотрудников.

И сейчас мы видим, что именитые дизайнеры стали переходить на работу в традиционный бизнес. Например, в промышленность. Это пока не массовый тренд, но первые звоночки есть. Заметно, что у классического бизнеса появилась потребности во внутренних В2В-инструментах, которые помогут оптимизировать работу. И удобный интерфейс помогает сделать такие ИТ-инструменты эффективными.

Юрий Ветров:

— С чего вообще в процессе общения человека и машины возник вопрос об удобных интерфейсах? Один пример: в боевых самолетах во времена Второй мировой были не всегда удобные приборные панели. Из-за этого возникал риск аварийности. Это поняли и начали плотно работать с интерфейсами приборной доски, чтобы понизить риск гибели пилота. Могу сказать, что сегодня крупные компании из традиционного бизнеса (уровня «Сибура», «Газпрома») тоже на старте этих процессов. Госсектор сейчас активно вкладывается в создание эффективных ИТ-продуктов для граждан.

В малом и среднем бизнесе очень актуальна история про создание «продающего» интерфейса. Взять, к примеру, небольшой интернет-магазин.

Для него одни из главных условий успешности — это высокий процент конверсии и повторных покупок (возвращаемости).

Чтобы человек купил товар, он должен положить его в корзину, потом в этой корзине найти и сделать заказ. Если знать поведение пользователя и формировать под эти запросы дизайн — т.е. интерфейс интернет-магазина, воронка формируется эффективнее.

О каких трендах в дизайне интерфейсов надо знать

Юрий Ветров:

— Есть несколько групп трендов:

1. Начнем с технологических. 10−12 лет назад смартфоны превратились из дорогих и сложных устройств во всем привычные сенсорные телефоны, с помощью которых можно сидеть в интернете. Сразу выросло количество приложений — благодаря новой модели магазинов. Этот технологический рывок дал работу дизайнерам.

В этом году самая горячая тема — гибкие экраны. Очевидно, что пока стоимость таких смартфонов под 2 тысячи евро, мало кто может себе их позволить. Кроме того, они пока «сырые». Но интерфейсы в них отличаются от обычных смартфонов. Наверное, мы все под них будем адаптироваться в будущем.

2. Есть также тренды в визуале, связанные с изменениями во внешнем виде сайтов и приложений.

3. Третья группа трендов — связанные с изменениями в поведении пользователя.

Самое интересное — наблюдать, как эти тренды друг на друга влияют. Допустим, сейчас экраны у смартфонов сильно увеличиваются в размерах. Соответственно, дотянуться до верха экрана сложно, не разбив телефон об асфальт. И поэтому сейчас все сводится к тому, что интерфейс — значки, иконки, кнопки — опускают в нижнюю часть экрана. Тут видна связка разных трендов: технологический тренд увеличения экранов телефонов привел к тому, что изменился интерфейсный.

Дмитрий Осадчук:

— Хороший пример тренда, связанного с изменением поведения пользователя, — так называемый onboarding (онбординг). Раньше, если человек только зарегистрировался на сайте или в приложении, ему надо было рассказать о функциях. Понятно, что разработчики не могли давать инструкцию на 200 страниц, потому что ее никто бы не читал. Поэтому зачастую все сводилось к каким-то 3−4 экранам с объяснениями: здесь у нас кнопка «включи уведомление» или «настрой тему», а наверху кнопка «скачать». Это было… банальное понимание интерфейса.

А потом все пришли к тому, что онбординг — это не про то, как человеку показать основные функции. Это про то, как благодаря интерфейсу сделать пользователя активным. Чтобы он не просто зарегистрировался в приложении — но и остался им доволен. Активно пользовался и сам стремился изучать функции.

Еще один тренд: разрабатывать интерфейсы по удобству в работе, а не «по-красивости». Например, как только пользователь зарегистрировался у тебя в приложении, и ты знаешь о нем хоть какую-то информацию (имя, пол, возраст), дизайн сайта или приложения может подстраиваться под этого человека. Раньше мало у кого это получалось. Сейчас компании учатся это делать. Например, те же банки — у них все кастомизировано.

Андрей Малеваник:

— Приведу пример по теме трендов. Наш партнер из Питера — компания «Куберто» — вообще разрабатывает некоторые интерфейсы для работы с мобильными устройствами для пользования одной рукой. Потому что сейчас во многих сценариях смартфоны так и используются: на бегу, с пакетом во второй руке, открывая дверь и т.д. О многих таких примерах мы рассказываем в фильмах Contented о профессиях будущего, которые будем показывать в рамках проекта Film Talks в кинотеатрах Silver Screen. Очевидно, что в ближайшем будущем мир профессий продолжит меняться и специальности, которые актуальны сегодня, завтра могут оказаться невостребованными, и мы хотим рассказать людям, чем они могут заниматься дальше. После показов будем устраивать обсуждения увиденного вместе с экспертами.

Как понять поведение пользователя и создать под него интерфейс

Юрий Ветров:

— Люди, как известно, живут «вшитыми» в них привычками. Привычки формируют некие ожидания. Я вот ожидаю, что интерфейс одного сайта сделает какую-то вещь точно так же, как это происходит на остальных сайтах. Например, всегда хорошим правилом было то, что на экране отмечались кликабельные элементы. Раньше это были ссылки, подчеркнутые синим цветом. Потом стало чуть проще: можно было кликабельные элементы так же либо другими способами выделять.

Дмитрий Осадчук:

— В дизайне интерфейсов, как и в любой другой предметной области, проводятся:

1. Конкурентный анализ. Когда ты смотришь, что сейчас делается либо в индустрии, либо в продуктах. Изучаешь конкурентов от мала до велика и потом понимаешь среднюю температуру по больнице: что сделано плохо, а что — удачно.

2. UX Research. Это юзабилити-исследования, которые как раз дают обратную связь на все то, что ты делаешь. В том числе это эксперименты с какими-то конкретными продуктами.

Например, на mail.ru есть отдельное бета-сообщество, где тестируются новые «фичи» сервиса. Недавно мы тестировали пины: это функция, которая позволяет закрепить определенное письмо в самом верху экрана. Мне самому она очень нравилась — но оказалось, что в реальности нужна очень маленькому проценту людей.

Типичные ошибки при разработке интерфейса

Дмитрий Осадчук:

— Есть две ошибки, которые я часто наблюдаю:

1. Не тестировать свои решения. Когда бизнес полагается только на свою экспертизу: «Мы знаем, что это надо сделать именно так».

2. «Выкатывать рубильником». Когда говорят: «Разработали интерфейс и с завтрашнего дня переходим на его использование. Без вариантов». Лучше «выкатывать» разработку постепенно, каждый этап сопровождая тестированием.

Юрий Ветров:

— Я назвал бы следующие:

1. Уверенность, что мы знаем что-то лучше других.

2. Слепое копирование: «Вот эти ребята на рынке сделали что-то интересное, значит, надо так же поступать». Не факт, что чужая идея работает для вашей задачи. Иметь работающие паттерны и сценарии — это нормально, но только если ты их переосмыслил и понял, что они тебе тоже подходят.

3. Нежелание следовать лучшим практикам. Давно создано много методичек формата «10 ошибок, которых нужно избежать». Если учесть эти ошибки, ты сильно снизишь риски и сделаешь продукт лучше. Но, к сожалению, многие ленятся это делать.

Зачастую наша проблема не в отсутствии новых методов, а в том, мы не используем нормально старые.

Например, я всем рекомендовал бы познакомиться с тезисами мастодонта юзабилити Якоба Нильсена. Он стоял у истоков современного понимания профессии дизайнера. У него есть месседжи, которые называются «10 эвристик Якоба Нильсена». Там прописаны 10 правил хорошего интерфейса. Они применимы к любым интерфейсам: и к мобильным, и к web. К каким угодно. Рекомендую прочесть.

Партнер проекта:

Сеть кинотеатров Silver Screen решила выйти за рамки классических кинопоказов и запускает новый формат встреч — Film Talks. Каждое мероприятие будет включать в себя просмотр фильма, короткие выступления спикеров и дискуссионную панель с участием зрителей.

Создание интерфейса для игры / Хабр

Всем привет.

Я Михаил Кравченко, дизайнер игровых интерфейсов. В этой статье опишу процесс создания интерфейса для игры. Статья будет полезна начинающим дизайнерам, художникам, которых просят рисовать интерфейсы, геймдизайнерам и менеджерам игровых проектов.

Ниже вы видите результат, который у меня получился.

Описание проблемы

Работа над интерфейсом игры начинается с описания проблемы. Обычно такое описание готовит геймдизайнер, он придумывает новую механику для игры и просит поддержать её интерфейсом, или видит какие-то проблемы в игре и просит помочь разобраться с ними.

Когда мы получили описание проблемы, нельзя сразу бросаться решать её. Сперва нужно удостовериться в том, что она описана достаточно полно и точно, а также в том, что мы с геймдизайнером понимаем задачу одинаково. В противном случае мы скорее всего сделаем не то, что нужно и потратим время впустую.

Поэтому перед тем как бросаться в бой, коротко опишем суть проблемы, причины, по которым эту проблему нужно решать и результат, который нужен в итоге, после чего согласуем описание с геймдизайнером.

Если мы не будем понимать, зачем нужно решать проблему, то с большим шансом сделаем неподходящий дизайн, а без описания нужного нам результата не получится оценить качество проделанной работы.

Пример описания проблемы

Суть проблемы:

У нас в игре есть 200 костюмов, в которые игроки могут одевать своих героев. Мы продаем эти костюмы только в составе наборов с другими игровыми предметами. У игрока нет возможности купить только костюм, не покупая предметы.

Зачем нужно решать эту проблему:

У нас есть игроки, которые хотят получить костюмы для своих героев, но не готовы покупать наборы предметов только ради костюмов. Если мы дадим им возможность купить костюм, они обрадуются и занесут денег.

Какой результат нужен:

Магазин, в котором люди смогут легко и непринужденно покупать костюмы для своих героев.

Когда мы покажем описание проблемы геймдизайнеру, он скорее всего попросит внести какие-то коррективы. После согласования можно будет перейти к работе с референсами.

Работа с референсами

Допустим что раньше мы ни разу не делали дизайн магазина костюмов и не знаем как сделать его хорошо. В этом случае нам нужно посмотреть магазины, которые делали другие люди и изучить их опыт.

Выберем несколько игр, в которых есть магазины, сделаем скриншоты интерфейсов и изучим их. Найдем удачные решения, которые можно использовать в нашем проекте и неудачные решения, которых лучше избегать. Лучше взять магазины из популярных и успешных проектов, так как у них много возможностей для работы над своими интерфейсами, и у нас больше шансов найти хорошие решения у них.

Если раньше мы уже сделали несколько магазинов костюмов и чувствуем себя довольно уверенно, нам все равно не помешает изучить решения. которые используются в популярных проектах. Возможно, мы почерпнем что-то новое для себя.

Референсы игровых магазинов. Таскать холст можно с зажатым пробелом, зумить колесиком мышки с зажатым Ctrl.

После изучения референсов можно переходить к пользовательскому сценарию.

Пользовательский сценарий

Сценарий поможет понять, какую информацию нужно показать человеку и какие возможности стоит ему дать. Чтобы получить сценарий, нужно кратко описать поведение, которого мы хотим добиться от человека, а также ситуации, в которых он может оказаться, работая с нашим интерфейсом.

Пример сценария

Человек открывает магазин костюмов. Просматривает разные предложения, кликает на них и видит костюмы на своем герое, выбирает один из костюмов, жмет на кнопку “Купить”. Если у игрока достаточно валюты, костюм покупается и появляется в интерфейсе выбора костюмов. Игрок видит соответствующую нотификацию. Если валюты не хватает, появляется предложение купить еще валюты.

Имея перед глазами сценарий, можно подробно расписать вещи, которые нужно показать игроку и возможности, которые стоит ему дать. Получится своего рода чек-лист, по которому можно будет проверять, не забыли ли мы чего.

Хотим показать:

• название раздела;
• количество валюты у игрока;
• персонажа, которым играет человек;
• слоты с костюмами, на каждом слоте есть картинка костюма, цена костюма;
• нотификацию после покупки — костюм куплен и экипирован;
• нотификацию о том, что игроку не хватает валюты для покупки костюма.

Дадим возможность:

• кликнуть на слот с костюмом и увидеть костюм на своем персонаже;
• покрутить модель персонажа и рассмотреть костюм со всех сторон;
• приблизить / отдалить модель персонажа;
• купить костюм;
• докупить внутриигровой валюты в любой момент, особенно если не хватает денег на костюм.

Пожелания разработчиков:

• скорее всего мы захотим стимулировать продажи тех или иных костюмов, для этого стоит добавить возможность показывать маркеры со скидками в их слотах;
• у нас уже есть 200 иконок для костюмов, они квадратные и имеют размеры 400х400 пикселей;
• надо учесть это при создании дизайна, чтобы не пришлось переделывать 200 картинок.

Когда сценарий и чек-лист готовы, можно переходить к согласованию с командой.

Согласование с командой

Согласуем описание с командой. Для этого можно сделать чат с названием фичи и закинуть описание в него, или встретиться в переговорной. Коллеги подскажут нам что какие-то вещи невозможно сделать по техническим причинам, какие-то вещи делать очень дорого, а какие-то вещи мы не учли когда описывали проблему.

Если мы начнем работу, не зная подобных нюансов, то скорее всего спроектируем и нарисуем не то, что нужно. Потом к нам прибежит взволнованный коллега, который только сейчас посмотрел дизайн и понял, что мы не можем его реализовать по каким-то причинам. Возможно, он расскажет что в дизайн нужно добавить вещи, которые мы не учли на стадии описания проблемы. Может попросит что-то убрать.

А в этот момент у нас уже будет готова часть работы, которую совсем не хочется переделывать. Мы будем вынуждены искать какие-то варианты, спорить с коллегой или доказывать что текущий вариант подходит, а в самом неудачном случае таки придется все переделать с нуля. Чтобы избежать подобных проблем, соберем обратную связь с коллег и добавим ее к нашему описанию.

Пример обратной связи от коллег

Программист:

Мы не можем приближать и отдалять модельку героя, сейчас нет такого функционала. Его можно запилить, но на это уйдет месяц.

Гейм-дизайнер:

В некоторых играх купленные предметы не исчезают из магазина, а остаются в нем с пометкой “Куплено”. Люди начинают как бы собирать коллекцию и получают позитивные эмоции, глядя на собранные ими предметы. Давайте добавим такой маркер для купленных вещей и не будем убирать их из магазина после покупки.

Руководитель проекта:

У нас 200 костюмов, проскроллить их все будет довольно сложно, а еще сложнее будет найти какой-то конкретный костюм. Давайте добавим категории костюмов, чтобы облегчить подобный поиск.

Когда описание согласовано с командой, можно переходить к наброскам.

Набросок структуры интерфейса

Набросок нужен чтобы показать структуру интерфейса со всеми его элементами и их состояниями. Наброски на бумаге позволяют быстро попробовать несколько вариантов решения проблемы и выбрать самый подходящий. При создании наброска лучше держать перед глазами описание проблемы, так у нас будет меньше шансов о чем-то забыть. Ниже вы видите пример бумажного наброска.

Для презентации команде бумажный набросок не годится, так как его можно интерпретировать по-разному, и разные люди могут увидеть в нём разные вещи. Поэтому откроем графический редактор и превратим бумажный набросок в понятную схему. На этом этапе не нужно заниматься оформлением — подбором цветов, шрифтов и прочих атрибутов визуального стиля. Здесь нужно только показать из каких элементов состоит интерфейс и как он будет работать.

Ниже вы видите пример наброска интерфейса, сделанного в графическом редакторе.

К сожалению, вся схема не влезает в одну картинку, но зато здесь есть полная схема со всеми состояниями и переходами.. Таскать холст можно с зажатым пробелом, зумить колесиком мышки с зажатым Ctrl.

Получившуюся схему нужно согласовать с командой, после этого можно делать прототип.

Прототип

Прототип нужен для того чтобы «пощупать» набросок интерфейса и понять насколько удобно им пользоваться. Для создания прототипов можно использовать фигму или другой подобный редактор. Сперва нужно “пощупать” прототип самостоятельно, потом дать “пощупать” другим членам команды и собрать с них обратную связь.

Если есть возможность, прототип стоит протестировать на коллеге, ничего не знающем о проблеме, которую мы решаем. Товарищи, читавшие описание проблемы, годятся для тестирования куда меньше потому, что слишком много знают.

Посадим коллегу за устройство с прототипом и попросим выполнить несколько задач, параллельно озвучивая свои мысли и действия. Это поможет найти места, в которых человек будет ошибаться, или понимать происходящее не так как нам нужно.

К сожалению, на создание и тестирование прототипа часто нет времени, но если оно у вас есть, лучше создайте и протестируйте. Когда прототип и набросок структуры готов и согласован с командой, можно переходить к оформлению интерфейса.

Оформление интерфейса

Если проект уже запущен, у дизайнера есть UI KIT — набор элементов, из которых собраны все интерфейсы игры. Обычно к нему прилагается руководство по сборке, в котором есть требования к размеру элементов интерфейса, отступам между ними, модульной сетке, по которой эти элементы выравниваются и так далее.

В этом случае не нужно ничего рисовать, достаточно найти подходящие элементы и собрать из них новый макет. В данной статье я хочу показать весь процесс создания интерфейса, поэтому представим что UI KIT’а у нас нет и нужно разработать визуальный стиль интерфейса с нуля.

Визуальный стиль интерфейса и сеттинг игры

Визуальный стиль интерфейса должен соответствовать сеттингу игры. К примеру, если у нас игра про волшебное средневековье, то при оформлении интерфейса стоит использовать материалы из этой вселенной: грубо обработанный металл и дерево, свитки пергамента, сургучные печати, каменные декоративные элементы и так далее.

В интерфейсе игры с таким сеттингом не должно быть плазменных панелей, электрических проводов и светящихся экранов. Ниже вы видите пример интерфейса игры в средневековом фентезийном сеттинге — Warhammer Vermentide 2.

Больше скриншотов из Warhammer Vermentide 2 .

Хороший пример соответствия оформления интерфейса сеттингу игры можно увидеть в StarCraft 2. Когда играем за людей, интерфейс состоит из металлических панелей, пластин, проводов и заклепок. Когда играем за зергов, интерфейс представляет собой аморфную биомассу с прожилками из когтей, хитиновых пластин и других подобных элементов. Ниже вы видите пример.

Больше скриншотов из Starcraft 2.

Допустим что у нас игра в стиле Sci-fi, значит нам нужно найти примеры оформления интерфейсов в этом стиле, переходим к работе с референсами.

Работа с референсами визуального стиля

Работа над визуальным стилем начинается с поиска референсов, в нашем случае это будут примеры игровых интерфейсов, оформленных в стиле sci-fi.

Референсы помогают нам расширить свой кругозор, изучить приемы и решения, которые можно использовать в нашем проекте, а также решения, которые не подходят нам по каким-то причинам.

Оформить интерфейс игры с sci-fi сеттингом можно очень по-разному. Например, мы можем сделать оформление в минималистичном стиле, как в Destiny 2, или нарисовать интерфейс c большим количеством декоративных элементов, как в Starcraft 2. Можно сделать темный интерфейс, как в Doom 4, или светлый, как Apex.

Рефборды со скриншотами интерфейсов из перечисленных выше игр.
Таскать холст можно с зажатым пробелом, зумить колесиком мышки с зажатым Ctrl.

Как вы понимаете, слыша словосочетание “интерфейс в стиле sci-fi ”, разные люди представляют себе разные вещи. Поэтому перед тем как переходить к наброску, нужно согласовать с командой направление, в котором мы будем двигаться при поиске визуального стиля интерфейса. Соберём несколько наборов референсов и покажем их команде, а затем выберем из них тот, что подходит нам больше всего.

Допустим, мы с командой договорились сделать темный интерфейс в минималистичном стиле. Только после этого можно переходить к наброскам.

Наброски визуального стиля интерфейса

Наброски нужны для того, чтобы быстро и дешево попробовать несколько вариантов оформления интерфейса и выбрать самый подходящий. Во время рисования нужно держать перед глазами набросок структуры интерфейса, чтобы показать все элементы и ничего не забыть.

На этом этапе нам важно показать идею оформления в общих чертах, поэтому можно рисовать довольно небрежно, не углубляясь в прорабатывание мелких деталей. Также совсем не обязательно точно выверять размеры всех элементов и отступы между ними. Всем этим мы займемся на этапе чистовой отрисовки интерфейса. Ниже вы видите наброски элементов интерфейса.

Когда набросок будет готов, нужно показать его коллегам и собрать с них обратную связь. С вероятностью 99% нас попросят что-то поменять, или попробовать какой-то другой вариант.

Поэтому ни в коем случае нельзя сразу рисовать начисто. Так мы потратим кучу времени на чистовую отрисовку, а потом нас попросят что-то поменять, и мы еще раз потратим кучу времени на чистовую отрисовку. Лучше сделать несколько быстрых и дешевых набросков, утвердить один из них, и только после этого переходить к чистовой отрисовке макета.

Вот мы утвердили один из набросков и можем переходить к следующему этапу.

Чистовая отрисовка интерфейса

Подготовим модульную сетку. Это полезный инструмент, который помогает расставлять элементы интерфейса, а также выверять их размеры и отступы между ними. Будем использовать сетку с размером ячейки в 4px так как она дает довольно большой простор для маневра. Соответственно, размеры всех элементов и отступов между ними будут кратны четырём пикселям. Обозначим места расположения и размеры всех элементов интерфейса с помощью серых блоков.

Когда структура макета готова, можно переходить к отрисовке всех его элементов. Реалистичные декоративные элементы лучше рисовать в 400% от размера, который понадобится нам в итоге. При рисовании в таком размере можно работать довольно небрежно, так как после уменьшения до 100% картинка будет выглядеть аккуратно. Ниже вы видите отрисованные начисто макеты.

Подробнее про отрисовку элементов интерфейса можете прочитать в моей статье.

Отрисованный начисто макет нужно показать команде и собрать с нее обратную связь. Мы уже утвердили все основные моменты на прошлых этапах, поэтому скорее всего новых пожеланий от команды не будет. Когда команда утвердит макет, мы сможем собрать UI kit, который облегчит нам создание других интерфейсов для игры.

Сборка Ui kit’a

Ui kit это набор элементов, из которых собирается интерфейс, он включает в себя графические элементы с их состояниями и все типы надписей. Ниже вы видите UI KIT, получившийся из чистового макета нашего магазина.

Помимо UI KIT’a стоит сделать инструкцию по сборке интерфейсов. В ней нужно показать примеры собранных интерфейсов со всеми размерами и отступами. Если у нас не будет такой инструкции, придется постоянно вспоминать, как собирать те или иные элементы и блоки. От этого понизится скорость работы и повысится вероятность совершить ошибку при сборке.

Когда Ui kit готов, можно переходить к подготовке материалов для программистов.

Материалы для программистов

В идеальном случае мы сами соберём все интерфейсы в фигме и отдадим их программисту, он внедрит макеты в игру и заставит интерфейс работать как надо. К сожалению, это возможно не на всех проектах, как минимум, Unreal Engine никак нельзя подружить с фигмой. Так что представим что сами мы не можем собрать все макеты и вынуждены обратиться за помощью.

Чтобы программист собрал наш дизайн правильно и заставил его работать как надо, нужно подготовить соответствующие материалы и инструкции. Нам понадобится схема переходов между экранами, макет с габаритными размерами всех элементов и отступами между ними, описание цветов и размеров используемых надписей, а также нарезка всей графики, необходимой для сборки. Если нам хватило времени на создание прототипа, не забудем добавить ссылку на него.

Ниже вы видите пример разметки макета, который поможет программисту собрать интерфейс правильно.

В процессе сборки интерфейса периодически обнаруживаются технические проблемы, не позволяющие собрать интерфейс точно как в макете. В таких случаях приходится придумывать какие-то варианты, и лучше не предлагать решение сразу, а взять паузу и обдумать несколько доступных опций. Так у нас будет меньше шансов внедрить плохое решение.

Контроль качества сборки

Когда интерфейс будет готов, программист попросит нас оценить качество сборки. Здесь нужно проверить сборку интерфейса, сравнив его с нашим макетом. Для этого достаточно сделать скриншот игры в том же разрешении, что и макет, а затем положить его поверх макета в слое с прозрачностью в 50%. Так станет понятно, все ли элементы находятся на своих местах, точны ли размеры и отступы.

Помимо визуальной составляющей нужно проверить логику работы интерфейса, всё ли работает так как было задумано. Вполне вероятно что мы найдём какие-то проблемы в интерфейсе, их нужно будет описать и передать программисту.

Тестирование на игроках

К сожалению, далеко не всегда у разработчиков игр есть время и возможности для тестирования интерфейса на игроках. Но зато почти всегда у нас есть возможность поймать коллегу, не причастного к нашему проекту, посадить его за интерфейс и попросить им попользоваться, параллельно озвучивая свои мысли и действия. Так можно отловить некоторые грубые ошибки. Например, у меня был случай когда коллега не понимал, как забрать лут после боя и скипал его, так как кнопка скипа лута была намного заметнее самого лута.

Если вам интересна тема UX исследований, рекомендую ознакомиться с творчеством Ксении Стерниной, в некоторых своих выступлениях и статьях она довольно подробно рассказывает о тестированиях игровых интерфейсов.

Заключение

Я в общих чертах показал процесс создания игрового интерфейса. Надеюсь что статья оказалась для вас полезной. Желаю всем удачи и творческих успехов. Буду рад вопросам, комментариям и предложениям.

Со мной можно связаться через:

Вконтакт
Фейсбук
Беханс

P.S. Здесь лежит весь процесс в более наглядной форме.

Обзор основ проектирования пользовательского интерфейса (UID)

Часто можно услышать, что UXD и UID используются как взаимозаменяемые, хотя это разные вещи. Также часто можно увидеть вакансии, которые ищут кого-то, кто выполняет и то, и другое одновременно. По правде говоря, небольшой дизайнер веб-сайтов делает и то, и другое (и даже больше). Но когда дело касается крупномасштабных проектов, эти две роли обычно разделяются. Зачем? Потому что это, по сути, совершенно разные профессии.

UXD расшифровывается как User Experience Design.UID означает дизайн пользовательского интерфейса. Разница между ними заключается в том, что UXD — это общее впечатление от цифрового или физического продукта, а UID — это конкретный дизайн визуальных аспектов продукта. Дизайнер пользовательского интерфейса использует всю информацию, предоставленную конструктором пользовательского интерфейса, для создания экранов, которые пользователь видит и с которыми взаимодействует. Это включает в себя все, на что можно щелкнуть, провести или загрузить визуально. По сути, это кнопки меню навигации, наведения, кнопки общего доступа и элементы управления вводом.

Что делает UI-дизайнер

При работе над проектом UX-дизайнер дает UI-дизайнеру каркас того, как продукт будет функционировать и как он должен переходить с экрана на экран. Каркас — это строительный каркас изделия. Он не включает визуальные аспекты, только функциональные. Дизайнер пользовательского интерфейса строится на каркасе.

В зависимости от размера проекта, UI-дизайнер может либо заниматься только визуальным дизайном, либо брать на себя другие роли, такие как дизайн фирменных иконок, анимационный дизайн и даже полный объем руководства по стилю бренда UI.UI-дизайнеры иногда также включают иллюстрации в свою работу, это будет зависеть от стиля бренда.

Вот краткий список того, что делает UI-дизайнер: визуальное оформление экранов, установка типографики, цветовая палитра, дизайн кнопок и наведений, дизайн иконок, визуальный дизайн форм, иллюстрации, градиенты, моушн-дизайн и адаптивный дизайн.

Принципы дизайна для UI-дизайнера

Дизайн пользовательского интерфейса

, как и графический дизайн, должен следовать некоторым основным принципам.Принципы гештальта лучше всего подходят для UI-дизайнера. Они описывают отношения между элементами на визуальном уровне и то, как заставить их хорошо работать вместе. Принципы гештальта применимы к цветам, линиям, формам, форме, фону, наведению курсора и градиентам.

Принципы гештальта — это простота, подобие, близость, замкнутость, фигура и основа, непрерывность, порядок и симметрия, а также синхронность.

Если вы хотите узнать больше о принципах дизайна, вы можете прочитать наши статьи в блоге о принципах дизайна и иерархии.

Помимо принципов гештальта, UI-дизайнеры, которые также работают с моушн-дизайном, должны следовать принципам моушн-дизайна, которые применяются к циклам загрузки, движениям кнопок, переходам, движениям экрана и т. Д. Эти принципы называются Двенадцатью принципами анимации.

Двенадцать принципов анимации — это сжатие и растяжка, ожидание, постановка, действие прямо вперед и поза в позу, завершение и перекрытие действий, легкость, ослабление, дуги, вторичное действие, тайминг, преувеличение, твердое рисование и, Обращение.

Если вы хотите узнать больше о принципах анимации и моушн-дизайна, вы можете прочитать нашу статью в блоге.

Важность визуального руководства по пользовательскому интерфейсу

Когда UI-дизайнер закончил со всеми элементами, составляющими экраны продукта, пора поместить все элементы в индекс. Этот указатель называется визуальным руководством по пользовательскому интерфейсу. У этого документа есть несколько функций. Он вместе с каркасом UX будет передан внутренним и интерфейсным разработчикам для создания всего необходимого кода, который будет составлять конечный продукт.

Затем разработчики добавят соответствующий код в руководство по визуальному интерфейсу, и все это станет частью системы дизайна бренда. Разработчики, которые работают непосредственно с дизайнером пользовательского интерфейса, являются разработчиками интерфейса, которые также кодируют графический дизайн.

Визуальное руководство по пользовательскому интерфейсу — это первый шаг к созданию системы дизайна, которая является лучшим способом сохранить бренд компании с большой командой дизайнеров и разработчиков, работающих вместе. Он держит все под контролем как в визуальных, так и в кодовых параметрах.

Переход от графического дизайна к дизайну пользовательского интерфейса

Графический дизайнер часто проявляет интерес к переходу на UI-дизайн. К счастью, принципы не слишком разные, и на самом деле требуется лишь немного практики и, возможно, присоединение к команде, которая даст вам возможность учиться.

К вам

Начать карьеру с UI-дизайна не так сложно, как может показаться, вы это сделали? Расскажите в комментариях о своем опыте.

,

Что такое дизайнер взаимодействия?

Дизайн Кэрри Казинс • 2 января 2020 г. • 6 минут ПРОЧИТАТЬ

Эти два маленьких слова очень часто используются в сфере дизайна. Но что на самом деле представляет собой интерактивный дизайн ? А что делает вас дизайнером взаимодействия? Здесь мы ответим на оба этих вопроса и продемонстрируем отличную работу по дизайну взаимодействия.

Дизайн взаимодействия 101

Дизайн взаимодействия — это процесс, в котором дизайнеры сосредотачиваются на создании привлекательных веб-интерфейсов с логичным и продуманным поведением и действиями.В успешном интерактивном дизайне используются технологии и принципы хорошего общения для создания желаемого пользовательского опыта.

Дизайн взаимодействия с точки зрения веб-сайтов и приложений — это то, о чем мы говорим уже 10 лет или около того, но эти большие разговоры и много никогда. Одно из лучших и наиболее цитируемых введений в эту концепцию было опубликовано Бобом Баксли в 2002 году в серии из 12 частей, в которых определялся дизайн взаимодействия для веб-приложений.

«Знакомство с интерактивным дизайном» разбивает сферу на пять частей, которые все еще полезны и актуальны сегодня:

• Человеко-машинное общение — это перевод разговоров между устройством и пользователем.
• Действие / реакция смотрит на то, как происходят и разворачиваются взаимодействия.
• State гарантирует, что пользователи знают, что происходит и почему с точки зрения приложения.
• Workflow гарантирует, что пользователи знают, кому использовать инструмент или приложение и что будет дальше.
• Неисправность учитывает ошибки, которые могут произойти.

Кроме того, при создании взаимодействий дизайна следует учитывать определенные моменты. Usability.gov предлагает основные вопросы в шести различных категориях, которые могут помочь сформировать единый дизайн.

• Что пользователь может сделать с помощью мыши, пальца или стилуса, чтобы напрямую взаимодействовать с интерфейсом?
• Какие команды может дать пользователь для взаимодействия с интерфейсом?
• Что насчет внешнего вида дает пользователю представление о его функциях?
• Какую информацию вы предоставляете, чтобы пользователь знал, что произойдет, до того, как он выполнит действие?
• Существуют ли ограничения, помогающие предотвратить ошибки?
• Предоставляют ли сообщения об ошибках пользователю способ исправить проблему?
• Какую обратную связь получает пользователь при выполнении действия?
• Каково время отклика между действием и ответом?
• Имеют ли элементы интерфейса разумный размер для взаимодействия?
• Стратегически используются ли края и углы для размещения интерактивных элементов?
• Соблюдаете ли вы стандарты?
• Разделена ли информация на несколько элементов за раз?
• Является ли пользовательская сторона максимально простой?
• Используются ли знакомые форматы?

Роль дизайнера взаимодействия

Если вы думаете или задаете вопросы в списке выше, вы дизайнер взаимодействия.

Конструктор шаблонов электронной почты в Интернете

С Postcards вы можете создавать и редактировать шаблоны электронной почты онлайн без каких-либо навыков программирования! Включает более 100 компонентов, которые помогут вам создавать собственные шаблоны писем быстрее, чем когда-либо прежде.

Попробуйте бесплатноДругие продукты

Дизайнер взаимодействия — это человек в команде дизайна, разработки, творчества или маркетинга, который помогает сформировать и создать стратегию дизайна, определить ключевые взаимодействия продукта, создать прототипы для проверки концепций и оставаться в курсе технологий и тенденций, которые повлияют на пользователей.

Это может звучать как множество разных концепций, объединенных в одно нечеткое описание должности. Чтобы сделать это просто: компании нанимают дизайнера взаимодействия, чтобы убедиться, что их цифровые приложения работают и функционируют в руках пользователей.

Карьера дизайнеров взаимодействия разнообразна. Некоторые программы формального дизайна обучают этому. Другие приходят к этому на собственном опыте или случайно. Но одна из общих черт дизайнеров взаимодействия — это жажда того, как все работает, не боязнь задавать вопросы и способность по-новому визуализировать элементы и концепции и играть с ними.

Концепции и принципы интерактивного дизайна

Так что же действительно продвигает область интерактивного дизайна? Что отличает его от простого дизайна? Эта линия довольно размыта. Мы в основном говорим о интерактивном дизайне, потому что он имеет вес и фокус. Но реальность такова, что интерактивный дизайн — это всего лишь часть хорошего дизайна с точки зрения дизайна и разработки цифровых технологий, веб-приложений и приложений.

«Полное руководство по интерактивному дизайну для новичков», опубликованное UX Booth в 2009 году, по-прежнему является отличным справочником.Хотя некоторые ключевые игроки и инструменты изменили концепции, которые определяют дизайн взаимодействия, остались прежними.

Взгляните на каждую из этих концепций:

• Дизайн, ориентированный на цели: Почему существует ваш сайт или взаимодействие? Разберитесь в этом и убедитесь, что ваше приложение делает это исключительно хорошо.
• Интерфейс как волшебство: Вы даже не видите лучших интерфейсов. «Лучших дизайнов взаимодействия не существует : они не требуют много времени для загрузки / ответа; они не заставляют пользователей думать; и они не вызывают у пользователя повода для горя.”
• Удобство использования: «Предпочтение отдается интерфейсам, которые делают состояние базовой системы легким для понимания и использования».
• Возможности: «Лучшие (промышленные / интерактивные) дизайны — это те, которые говорят сами за себя; в котором, как говорится, форма следует за функцией ».
• Обучаемость: «Многое из того, что составляет полезный интерфейс, состоит из знакомых компонентов. … Лучшие дизайнеры взаимодействия не изобретают велосипед каждый раз, когда возникает аналогичная задача дизайна.Скорее, они используют набор шаблонов ».

Интерактивная витрина дизайна

Итак, мы не можем говорить о дизайне взаимодействия, не демонстрируя отличных примеров работы, происходящей вокруг нас. Каждый из проектов или снимков, представленных ниже, — это то, что раскрывает суть этой концепции. Обязательно посетите ссылки, чтобы узнать больше о том, как каждый из этих проектов (или снимков) объединяется и работает.

Move Product, автор Бартелеми Чалвет (AgenceMe)

Приложение «Погода

» от Сергея Валюха

Фиш Бартелеми Чалвет

Анимация материального дизайна

Мобильная анимация и взаимодействие

Командные сообщения Яна Лозерта

Взаимодействие с формой плавающей этикетки, Мэтт Д.кузнец

iOS Новые жесты от Хави Переса

Контактная форма Qards от Сергея Шмидта

Nike от Owi Sixseven

Android Wear от Ramotion

Apple Watch от Якуба Анталика

Ресурсы по дизайну взаимодействия

Существует множество отличных и стоящих ресурсов по дизайну взаимодействия, платным дорогам и заданиям для дизайнеров взаимодействия и области в целом.Вот несколько мест, где вы можете еще больше узнать о дизайне взаимодействия:

Заключение

Пользователи ожидают интерактивного взаимодействия с современными веб-сайтами. Нет никакого способа обойти это. Такое взаимодействие необходимо для того, чтобы оставаться в курсе событий и возвращать пользователей.

Не менее важно иметь в вашей команде человека, отвечающего за управление, создание и мониторинг этих взаимодействий. Вам понадобится дизайнер взаимодействия.

Подумайте об этом.Этот человек уже в вашей команде? Если нет, что вы планируете с этим делать? Мы хотели бы знать, что вы думаете о дизайне взаимодействия и есть ли в вашей команде дизайнеров и разработчиков специальный дизайнер взаимодействия. Поделитесь с нами своими мыслями в комментариях.

Нравится то, что вы читаете? Подпишитесь на наши главные новости.

,

Профессия Дизайнер пользовательских интерфейсов

Дизайнеры пользовательских интерфейсов отвечают за разработку пользовательских интерфейсов для приложений и систем. Они выполняют действия по дизайну макета, графики и диалогов, а также действия по адаптации.

Хотите знать, какая профессия и профессия вам больше всего подходят? Пройдите наш бесплатный тест на карьерный код Голландии и узнайте.

,

Рекомендации по дизайну iOS — Иво Мынттинен, дизайнер пользовательского интерфейса

Об этом руководстве

В этих рекомендациях описывается, как разрабатывать приложения, соответствующие официальному HIG для iOS от Apple, а не то, что вы можете делать с пользовательскими элементами управления. Иногда имеет смысл нарушить правила. Целью этого документа является руководство, а не решение сложных и уникальных проблем проектирования.

Эта неофициальная документация будет регулярно обновляться и расширяться.

Разрешения и характеристики дисплея

Разница между точками и пикселями

пикселей — это наименьший физический элемент, которым мы можем управлять на цифровом дисплее.Чем больше пикселей можно разместить на экране определенного размера, тем выше PPI (пикселей на дюйм) и тем четче становится отображаемый контент.

точек не зависят от разрешения. В зависимости от плотности пикселей экрана точка может содержать несколько пикселей (например, 1 pt содержит 2 x 2 пикселя на обычном дисплее Retina).

Демистификация плотности пикселей

Как работает плотность пикселей и как она влияет на ваш дизайн. Узнайте больше об этом в блоге Питера Ноуэлла.

Когда вы проектируете для различных типов дисплеев, вы должны думать точками, но проектировать в пикселях. Это означает, что вам все равно нужно будет экспортировать все свои ресурсы в 3 разных разрешениях, независимо от того, в каком разрешении вы разрабатываете свое приложение.

Примечание

Если не указано иное (путем добавления «px» к значению), это руководство всегда относится к точкам, когда речь идет о конкретных размерах. Если вам нужно значение в пикселях, просто умножьте его на 2 для экранов Retina или на 3 для экранов Retina HD.

Понижение частоты дискретизации на iPhone больших размеров

Отображаемых пикселей и физических пикселей одинаковы на всех устройствах iOS, за одним исключением: экран Retina HD на iPhone 6, 7, 8 Plus и iPhone X, XS и XS Max.Поскольку его экран имеет более низкое разрешение пикселей, чем естественное разрешение @ 3x, размер визуализированного содержимого автоматически изменяется примерно до 87% от исходного размера (с 2208 x 1242 пикселей для соответствия разрешению экрана 1920 x 1080 пикселей) для обычные модели Plus.

Разница между дисплеями iPhone 5S, 6 и 6+.

Безопасная зона iPhone X

iPhone X требует особого внимания со стороны дизайнеров. В отличие от всех других устройств iOS, он оснащен дисплеем с закругленными углами, а также имеет вырез в верхней части экрана, где вы можете найти передние камеры, датчики и динамик.Ширина экрана такая же, как на iPhone 6, 7 и 8, но на 145 пунктов выше. При разработке приложений для iPhone X вы должны учитывать безопасную зону и поля макета, чтобы пользовательский интерфейс вашего приложения не ограничивался сенсорами или углами устройства.

Поля макета и безопасная зона на iPhone X. Рисунок Дениса Ройчика.

Значки приложений

Эффекты, применяемые автоматически

Ресурсы значков приложений обычно добавляются в пакет приложения в виде простых прямоугольных файлов PNG различных размеров.При визуализации на устройстве iOS применяет к значкам приложений различные эффекты.

Закругленные углы

Старые простые значения радиуса для закругленных углов больше не используются. Начиная с iOS 7, значки приложений имеют форму суперэллипса. При разработке значков приложений для iOS я рекомендую использовать официальные шаблоны значков приложений, предоставленные Apple.

Закругленные углы не следует включать в окончательные экспортированные ресурсы, но они могут понадобиться вам в процессе проектирования, если вы хотите добавить эффекты, такие как обводка или тени, которые выровнены по углу значка.

Предупреждение

Если вы маскируете свой ресурс значка с помощью формы суперэллипса, потому что хотите применить эффекты, выровненные по углам, убедитесь, что не используете прозрачность для области за пределами маски. Прозрачность вообще не поддерживается для значков приложений и вместо этого отображается как простой черный. Если ваша маска не на 100% точна, пользователи увидят маленькие черные фрагменты на закругленных краях. Рекомендуется установить такой же фон холста, как фон значка приложения.

Граница (в некоторых случаях)

Если значок приложения, который вы используете, имеет белый фон, будет применена серая граница размером 1 пиксель, чтобы упростить распознавание краев значка. Это делается только в приложении настроек (если ваше приложение там указано) и в AppStore.

Устаревшие эффекты (iOS 6 и предыдущие версии)

В более старых версиях iOS эти эффекты применяются автоматически: закругленные углы (не той формы, которую используют значки iOS 7+), тени на главном экране и эффект глянца, который можно отключить.

Сетка

Apple разработала сетку золотого сечения, которую можно использовать для правильного определения размера и выравнивания элементов на вашем значке. Тем не менее, даже дизайнеры Apple не очень строго следуют системе сеток с иконками собственных приложений. Не стесняйтесь нарушать правила, если ваш значок просто работает лучше, не выравнивая все элементы строго по сетке.

Типографика

Системным шрифтом по умолчанию для всех версий iOS, предшествующих iOS 9, является Helvetica Neue.С выпуском iOS 9 Apple представила новый шрифт под названием San Francisco, который заменил Helvetica Neue в качестве шрифта по умолчанию. San Francisco имеет две формы: «SF UI Display» и «SF UI Text», в то время как «Display» в основном используется для компонентов пользовательского интерфейса, «Text» имеет более широкий межбуквенный интервал и должен использоваться для более длинных текстов. Вы можете скачать шрифты San Francisco здесь, если вы являетесь участником программы Apple для разработчиков. Помимо шрифта по умолчанию, доступно множество альтернативных начертаний шрифта.Вы можете найти полный список предустановленных гарнитур здесь.

Размер шрифта

Пользовательские шрифты

Технически любой шрифт True Type (.ttf) можно использовать в приложении iOS, но будьте осторожны с лицензиями. Использование шрифтов, которые полностью бесплатны для коммерческого использования, должно быть безопасным. Лицензии приложений для коммерческих шрифтов редко доступны, и если они есть, их защита может оказаться довольно дорогой. MyFonts в настоящее время предлагает самую большую коллекцию шрифтов, которые можно лицензировать для использования в мобильных приложениях.

Цветовая палитра

Начиная с iOS 7, Apple использует яркую цветовую палитру для интерфейса ОС и предустановленных приложений. Хотя вы можете использовать цветовую палитру iOS по умолчанию, указанную выше, вы также можете (и, вероятно, должны, если хотите выделиться) использовать свои собственные цвета.

Иконография

В приложениях для iOS значки всегда были отличным способом поддержки текстовых меток с визуальной связью с выполняемым действием или для полной замены текста (часто для очень распространенных действий, таких как «Создать», «Удалить» и т. Д.). Обычно мы имеем дело со значками, которые являются частью панели навигации, панели инструментов или панели вкладок.

Значки кнопок панели

Значки, используемые на панелях навигации и панелях инструментов, должны иметь контур с шириной обводки 1 или 1,5 пт. Начиная с iOS 11, Apple рекомендует использовать новый сплошной («глиф») стиль значков для значков панели вкладок.

Глифы значков панели вкладок с неактивным и активным состояниями.

Панель навигации и значки панели инструментов

Вы никогда не должны включать какие-либо дополнительные эффекты, такие как падающая тень или внутренние тени на значки кнопок, потому что они являются реликтами из предыдущих версий iOS (до редизайна iOS 7).Значки кнопок должны быть нарисованы одним сплошным цветом на прозрачном фоне — форма значка используется в качестве маски, а цвет будет применяться программно.

Значки символов SF

С выпуском iOS 13 Apple представила первую версию шрифта значков SF Symbols. Шрифт содержит около 1500 значков, соответствующих стилю, с 9 различными значениями толщины обводки, а также 3 различными масштабами. Полный набор доступен для загрузки на странице ресурсов Apple.

Часто используемые элементы дизайна

iOS предлагает отличную коллекцию готовых к использованию представлений и элементов управления, которые позволяют разработчикам приложений быстро создавать интерфейсы.Некоторые элементы можно настроить до определенного уровня, а другие нельзя и, вероятно, тоже не следует. При разработке приложения для iOS вы должны знать свой набор инструментов и по возможности придерживаться их. Однако в некоторых случаях может оказаться целесообразным создать настраиваемый элемент управления, поскольку вам нужен более настраиваемый вид или вы хотите изменить функциональность уже существующего элемента управления (опасная зона). Возможно практически все, и иногда имеет смысл нарушить правила, но всегда дважды подумайте, прежде чем это делать.

Строка состояния

Строка состояния содержит основную системную информацию, такую ​​как текущий оператор связи, время, состояние батареи и многое другое. Он визуально связан с панелью навигации и использует ту же заливку фона. Чтобы соответствовать стилю вашего приложения и гарантировать удобочитаемость, содержимое строки состояния имеет два разных стиля: темный (черный) и светлый (белый).

На iPhone X строка состояния выше, чем на всех других устройствах iOS. Из-за выемки в области отображения новая строка состояния разделена на две части.На iPad Pro с жидкокристаллическим дисплеем строка состояния немного выше, чем раньше.

Можно скрыть строку состояния, но дважды подумайте перед этим. Например, пользователям может быть интересно узнать, подключены ли они к сети Wi-Fi, когда приложение регулярно загружает веб-контент, или включен ли Bluetooth, когда приложению требуется связь Bluetooth со сторонним оборудованием. Веская причина скрыть строку состояния — это когда вы хотите убрать все отвлекающие факторы с одного элемента, например, при отображении полноэкранного содержимого, такого как галерея изображений.

Панель навигации

Панель навигации содержит элементы управления для навигации по представлениям приложений и, при необходимости, для управления содержимым текущего представления. Он всегда будет отображаться вверху экрана, прямо под строкой состояния. По умолчанию фон слегка полупрозрачен и размывает содержимое под полосой. Для фоновой заливки полосы можно задать сплошной цвет, градиент или собственный растровый узор.

Различные состояния панели навигации на iPhone в портретном режиме.

С выпуском iOS 11 Apple представила новый стиль панели навигации: когда содержимое приложения находится в нулевой позиции прокрутки (вверху), заголовок перемещается в отдельную строку под исходной областью панели навигации и значительно увеличивается. Когда пользователь начинает прокрутку вниз, заголовок постепенно исчезает и возвращается к исходному размеру и положению.

Панель навигации iPhone в альбомном режиме. Высота панели уменьшена на 12 пунктов, кроме iPad.Также распространенной практикой является скрытие строки состояния в альбомном режиме.

Элементы всегда должны следовать определенному шаблону выравнивания.

• Кнопка «Назад» всегда должна быть выровнена по левой стороне.
• Заголовок текущего вида всегда должен располагаться по центру панели.
• Кнопки действий всегда должны быть выровнены по правой стороне. По возможности никогда не должно быть более одного основного действия, чтобы избежать пропущенных кликов и сохранить простоту.

Панель навигации на iPad

С выпуском iOS 12 Apple увеличила высоту базовой панели навигации на 6 пунктов только на устройствах iPad.Большие заголовки продолжают добавлять еще 52 пункта к высоте панели навигации.

Более высокая панель навигации на устройствах iPad, начиная с iOS12

Панель инструментов

Панель инструментов содержит набор действий для управления или манипулирования содержимым текущего представления. На iPhone он всегда будет отображаться выровненным по нижнему краю экрана, а на iPad он также может отображаться выровненным по верхнему краю экрана.

Подобно панели навигации, фоновая заливка панелей инструментов может быть изменена, она по умолчанию является полупрозрачной и размывает нижележащее содержимое.

Панели инструментов следует использовать, когда конкретное представление требует более трех основных действий, которые вряд ли поместятся или будут выглядеть беспорядочно на панели навигации.

Помимо панели вкладок, Apple увеличила высоту панелей инструментов на 6 пунктов на всех устройствах iPad, начиная с iOS 12.

Панель поиска

По умолчанию панели поиска бывают двух разных стилей: заметные и минимальные. Обе версии имеют одинаковую функциональность.

• Пока пользователь не ввел текст, внутри панели отображается текст-заполнитель и, при необходимости, значок закладки, который можно использовать для доступа к недавним или сохраненным поискам.
• После ввода поискового запроса заполнитель исчезает, а на правом краю появляется кнопка очистки для удаления введенного значения.

Панели поиска могут использовать подсказку — короткое предложение, чтобы представить функциональные возможности в контексте поиска. Например, «Введите город, почтовый индекс или аэропорт».

Яркий стиль панели поиска, без подсказки и с подсказкой.

Стиль минимальной панели поиска.

Чтобы обеспечить еще больший контроль над поисковым запросом, можно связать панель поиска с полосой области видимости.Панель области видимости будет использовать тот же стиль, что и панель поиска, и может быть полезна, когда есть четко определенные категории для результатов поиска. Например, в музыкальном приложении результаты поиска можно снова фильтровать по переводчикам, альбомам или песням.

Панель вкладок

Панель вкладок используется для того, чтобы позволить пользователю быстро перемещаться по отдельным представлениям приложения, и ее следует использовать только для этой цели. Он всегда отображается в нижней части экрана. По умолчанию он слегка полупрозрачен и использует ту же систему размытия для нижележащего содержимого, что и панель навигации.

Панель вкладок может содержать только фиксированное максимальное количество вкладок. Как только количество вкладок превышает максимальное количество, последняя отображаемая вкладка будет заменена «дополнительной вкладкой», которая приведет к списку скрытых вкладок с возможностью изменить порядок отображаемых вкладок.

Хотя максимальное количество отображаемых вкладок на iPhone — пять, на iPad можно отображать до семи вкладок, избегая при этом дополнительных вкладок.

Чтобы уведомить пользователей о новой информации в представлении, иногда имеет смысл применить счетчик значков к кнопке панели вкладок.Если представление временно отключено, соответствующая кнопка вкладки не должна быть полностью скрыта; вместо этого он должен быть затемнен, чтобы наглядно показать отключенное состояние.

Панель вкладок на iPad

На iPad метки для вкладок отображаются с большим размером шрифта и рядом со значком, а не ниже. Начиная с iOS 12, панель вкладок также немного выше, что соответствует увеличенной высоте панелей инструментов (50 пунктов).

Панель вкладок на iPad Pro. Еще 15 пунктов пустого места добавляются под панелью вкладок для кнопки виртуального дома на iPad с дисплеем Liquid Retina.

Просмотр таблицы

Табличные представления используются для отображения от небольшого до большого количества информации о стиле списка в одном или нескольких столбцах и с возможностью разделить несколько строк на отдельные разделы или сгруппировать их.

В зависимости от типа данных, которые вы представляете, следует использовать два основных типа представления таблиц.

Обычная

Простая таблица содержит ряд строк, которые могут иметь верхний колонтитул и нижний колонтитул после последней строки.Можно отобразить вертикальную навигацию на правом краю экрана для навигации по таблице, что имеет смысл при представлении большого набора данных, который можно каким-либо образом отсортировать (например, в алфавитном порядке по убыванию).

Сгруппированы

Сгруппированная таблица позволяет организовывать строки в группы. Каждая группа может иметь заголовок (лучше всего используется для описания контекста группы), а также нижний колонтитул (подходит для текста справки и т. Д.). Сгруппированная таблица должна содержать как минимум одну группу, а каждая группа должна содержать как минимум одну строку.

Для обоих типов табличных представлений доступно несколько стилей для представления данных таким образом, чтобы пользователи могли их легко сканировать, читать и, возможно, изменять.

По умолчанию

Строка таблицы в стиле по умолчанию имеет дополнительное изображение, выровненное по левому краю, и заголовок.

с субтитрами

Стиль таблицы субтитров позволяет использовать небольшой текст субтитров под заголовком строки. Это полезно для дальнейших объяснений или кратких описаний.

со значением

Стиль таблицы значений позволяет отображать конкретное значение, связанное с заголовком строки.Как и в стиле по умолчанию, каждая строка может иметь изображение и заголовок, выровненные по левому краю. За заголовком следует выровненная по правому краю метка для значения, которая обычно отображается чуть более тонким цветом текста, чем заголовок.

Большие клетки

При отображении субтитров в виде таблицы вам следует рассмотреть возможность использования большего стиля ячеек таблицы. Объем информации и элементов управления, которые вы можете отобразить с их помощью, такой же, как и с другими стилями ячеек таблицы, но из-за увеличенных отступов таблица не выглядит такой загруженной.

Модальные окна, всплывающие окна и уведомления

iOS предоставляет различные стили временных представлений, которые можно использовать для отображения, редактирования и управления данными таким образом, который лучше всего подходит для данной ситуации. Хотя каждое временное представление существует для очень конкретной цели и выглядит по-разному, все временные представления по-прежнему имеют одну общую черту: при отображении это самый высокий индексный слой в текущем представлении (они появляются поверх всего остального) и контент внизу накладывается полупрозрачный черный фон.

Просмотр активности

Представление активности используется для выполнения определенных задач. Эти задачи могут быть системными задачами по умолчанию, такими как обмен контентом с помощью доступных параметров, или они могут быть полностью настраиваемыми действиями. При разработке значков для настраиваемых кнопок задач вы должны следовать тем же рекомендациям, что и для значков активного состояния кнопок панели — сплошная заливка, без эффектов, на прозрачном фоне.

Действия

Таблицы действий

используются для выполнения одного действия из списка доступных действий и для того, чтобы заставить пользователя приложения подтвердить действие или отменить его.

В портретном режиме (и при малых разрешениях экрана в альбомной ориентации) действия всегда отображаются в виде списка кнопок, которые вставляются и остаются в нижнем крае экрана. В этом случае на листе действий всегда должна быть кнопка отмены, чтобы закрыть представление и не выполнять какие-либо из перечисленных действий.

Когда есть достаточно места (например, на экранах iPad), листы действий визуально превращаются в всплывающие окна. Кнопка для закрытия представления больше не требуется, потому что нажатие на цель в любом месте за пределами всплывающего окна закроет его автоматически.

Оповещения

Назначение предупреждений — информировать пользователя о важной информации и, при желании, заставить пользователя принять решение о каком-либо действии.

Представление предупреждения всегда содержит текст заголовка, который не должен быть длиннее одной строки и одной (для чисто информационных предупреждений, например, «ОК») или двух (для предупреждений, требующих принятия решения, например, «Отправить» и « Отменить “).

Кроме того, вы можете добавить текст сообщения, если необходимо, а также до двух полей ввода текста, одно из которых может быть замаскированным полем ввода, которое подходит для конфиденциальной информации, такой как пароли или PIN-коды.

Меню редактирования

Меню «Правка» позволяет пользователям выполнять такие действия, как копирование, вставка, вырезание и т. Д., Когда выбран элемент (текст, изображения и т. Д.). Хотя можно контролировать, какие операции может выбирать пользователь, внешний вид меню редактирования устанавливается и не настраивается, если вы не создаете собственное полностью настраиваемое меню редактирования.

Поповер

Popovers полезны, когда для выполнения определенного действия требуется несколько пользовательских входов.Хорошим примером является добавление элемента, у которого есть несколько атрибутов, которые необходимо установить перед созданием элемента.

В горизонтальной среде всплывающие окна открываются под связанным элементом управления (например, кнопкой) со стрелкой, указывающей на этот элемент управления в открытом состоянии. Фон всплывающего окна использует немного уменьшенную непрозрачность и размывает содержимое под ним, как и многие другие элементы пользовательского интерфейса, начиная с iOS 7.

Всплывающее окно — это мощное временное представление, которое может содержать различные объекты, такие как собственная панель навигации, представления таблиц, карты или веб-представления.Когда всплывающее окно увеличивается в размере из-за количества содержащихся в нем элементов и достигает нижнего края области просмотра, внутри всплывающего окна можно прокручивать.

Модалы

Модальные окна — это полезный вид для задач, требующих от пользователя нескольких команд или вводов. Они появляются поверх всего остального и, будучи открытыми, блокируют взаимодействие с любыми другими интерактивными элементами внизу.

Типичное модальное окно обычно содержит:

• заголовок, описывающий задачу;
• кнопка закрытия модального окна без сохранения или выполнения каких-либо других действий;
• кнопка для сохранения или отправки любой введенной информации; и
• различных элементов для пользовательского ввода в модальном теле.

Доступны три различных модальных стиля:

1. Полный экран: охватывает весь экран.
2. Лист страницы: в портретном режиме модальное окно закрывает нижележащее содержимое только частично, оставляя небольшую часть родительского представления видимой под полупрозрачным черным фоном. В альбомном режиме модальное окно страницы действует так же, как полноэкранное модальное окно.
3. Лист формы: в портретном режиме модальное окно отображается в центре экрана, сохраняя окружающее содержимое родительского представления видимым под полупрозрачным черным фоном.Положение модального окна регулируется автоматически, когда необходимо отобразить клавиатуру. В альбомном режиме модальное окно страницы действует так же, как полноэкранное модальное окно.

Органы управления

iOS предоставляет широкий спектр элементов управления практически для любого требуемого типа ввода, о котором вы только можете подумать. В списке ниже вы найдете наиболее важные (часто используемые), но для получения полного списка доступных элементов управления вам следует обратиться к библиотеке разработчика iOS.

Пуговицы

Вероятно, наиболее часто используемым элементом управления является старая добрая кнопка.Начиная с iOS 7, дизайн кнопки по умолчанию больше не выглядел как кнопка, а скорее как обычная текстовая ссылка. Элемент управления «кнопка» обладает широкими возможностями настройки и позволяет стилизовать все, от стиля текста, теней и цвета до значка, который либо добавляется в начале, либо центрируется, если текстовая метка отсутствует, а также полностью настраиваемый фон.

Имейте в виду, что кнопка может иметь несколько состояний, о которых следует сообщать с помощью визуального языка: по умолчанию, выделено, выбрано и отключено.

Сборщики

Пикеры используются для выбора одного значения из списка доступных значений. Веб-эквивалентом будет поле выбора (для которого также используется элемент управления при нажатии на выбор в Safari). Расширенная версия средства выбора — это средство выбора даты, которое позволяет пользователю прокручивать список дат и времени и выбирать значения для (настраиваемого) дня, месяца и времени.

Слева: средство выбора даты, отображаемое внутри представления таблицы, справа: средство выбора в качестве клавиатуры.

За исключением цвета фона, невозможно изменить визуальный стиль или размер (как клавиатура) элемента управления выбора.Чаще всего они появляются внизу экрана, там же, где и клавиатура, но их можно использовать и в других положениях.

Элементы управления сегмента

Элемент управления сегментом содержит набор сегментов (как минимум два), которые можно использовать для таких вещей, как фильтрация содержимого или создание вкладок для четко категоризированных типов содержимого.

Управление сегментами без значков и с иконками.

Каждый сегмент может содержать текстовую метку или изображение (значок), но не то и другое вместе.Кроме того, не рекомендуется использовать смешанный набор типов сегментов (текст и изображения) в одном элементе управления сегментом. Ширина одного сегмента изменяется автоматически в зависимости от количества сегментов (два сегмента: 50% общей ширины элемента управления, 5 сегментов: 20% общей ширины элемента управления).

Слайдеры

Ползунок позволяет пользователю выбрать одно конкретное значение из диапазона допустимых значений. Поскольку выбор значения происходит довольно плавно и без каких-либо шагов, рекомендуется использовать ползунки для выбора приблизительного, но не точного значения.Например, ползунок будет хорошим средством управления для настройки громкости звука, поскольку пользователь может слышать разницу и видеть разницу между громким и очень громким, но ввод текста для установки точного значения в дБ будет непрактичным.

Ползунок без значков и с описательными значками.

Можно установить значки для минимального и максимального значения, которые отображаются на начальном и конечном крае ползунка, что позволяет вам визуально охватить назначение ползунка.

Шаговый

Steppers следует использовать, когда пользователь должен ввести точное значение из ограниченного диапазона возможных значений (например, 1-10). Шаговый двигатель всегда содержит две сегментированные кнопки, одну для понижения и одну для увеличения текущего значения.

Визуально шаговый регулятор легко настраивается:

• вы можете использовать свои собственные значки для кнопок шагового двигателя;
• при сохранении собственного внешнего вида iOS вы можете настроить цвет границ, фона и значков, используя цвет оттенка, который автоматически устанавливает цвет для каждого из этих элементов; и
• , если вы хотите пойти дальше, вы можете использовать полностью настраиваемые фоновые изображения для пошаговых кнопок, а также для разделителя.

Переключатель

Переключатель позволяет пользователю быстро переключаться между двумя возможными состояниями: включено и выключено. Это флажок для приложений iOS. Можно настроить цвет для состояний включения и выключения, но внешний вид кнопки переключения и размер переключателя установлены и не могут быть изменены.

Клавиатуры

Существуют различные типы клавиатуры, обеспечивающие наилучшую клавиатуру для ввода определенного текста. Хотя можно создать собственную полностью настраиваемую клавиатуру, клавиатуру по умолчанию нельзя настроить по стилю или размеру.

Дополнительная литература и ресурсы

Эти рекомендации предоставляют только базовую информацию, которая поможет вам начать работу с iOS. Как только вы копнете глубже, вас могут заинтересовать более подробные сведения. Эти статьи и ресурсы должны вам помочь.

Общие

Анимации и прототипирование

Значки кнопок панели

Значки приложений

Комплекты пользовательского интерфейса

,