Дизайнеры, занимающиеся разработкой интерфейсов

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

 

Термин «пользовательский опыт» был придуман ученым-когнитивистом Доном Норманом (Don Norman) в начале 1990-х, когда он был вице-президентом группы разработки новейших технологий в компании Apple.

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

Объясняя происхождение термина, Норман писал:

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

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

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

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

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

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

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

2. Последовательность действий, выполняемых ими при взаимодействии с интерфейсом.

3. Мысли и чувства, возникающие у них при выполнении своей задачи.

4. Впечатления, получаемые ими от взаимодействия в целом.

 

UX-дизайн означает не визуальную эстетику. Многие ошибаются, полагая, что UX и пользовательский интерфейс (user interface, UI) — это одно и то же или что UX — это исключительно дизайн пользовательского интерфейса.

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

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

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

Информационная архитектура

Что вы чувствуете, когда не можете найти на сайте искомую информацию?

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

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

Как это влияет на пользовательский опыт?

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

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

 

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

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

Натаниэль Дэвис (Nathaniel Davis), специалист по оптимизации пользовательского опыта (UX) и проектированию пользовательских интерфейсов, еще в далеком 2011 году выложил в блоге UXmatters концептуальную статью «Основы практического использования информационной архитектуры» (Framing the Practice of Information Architecture), в которой предложил относиться к веб-навигации как видимой надводной части условного айсберга, имя которому — Information Architecture.

Что такое информационная архитектура сайта?

Information Architecture любого веб-ресурса включает в себя 2 основных компонента:

· идентификацию и определение (дефиницию) контента и функциональности;

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

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

Information Architecture состоит из электронных документов, таблиц, диаграмм, отнюдь не из макетов или прототипов веб-страниц.

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

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

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

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

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

· Инвентаризация контента (Content inventory): экспертное исследование сайта, которое проводят, чтобы найти и идентифицировать существующий контент.

· Аудит контента (Content audit): оценка полезности, точности, тональности подачи и общей эффективности контента.

· Группировка информации (Information grouping): определение степени клиентоориентированности соотношения «пользователь — контент».

· Разработка и усовершенствование таксономии контента (Taxonomy development): определение стандартизированной терминологии для классификации и систематизации содержимого веб-ресурса (например, товарные категории для офферов интернет-магазина).

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

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

Типы навигации сайта и ее компоненты:

· глобальная навигацая (global navigation),

· локальная навигацая (local navigation),

· вспомогательная навигацая (utility navigation),

· фильтры категорий, ценовых границ и т. п. (filters),

· ссылки по теме (related links),

· «толстый» футер (fat footer), дублирующий элементы глобальной, локальной и вспомогательной навигации в собственно «подвале» страницы,

· и т. д.

Примеры навигационных компонентов: 1 — вспомогательная навигация; 2 — глобальная навигация; 3 — указатель местоположения («хлебные крошки», breadcrumb trail; буквально — «путь, помеченный рассыпанными хлебными крошками»); 4 — локальная навигация; 5 — ссылки по теме (в данном случае на статьи и сообщения в блоге); 6 — «толстый» футер.

Перед имплементацией элемента навигации на веб-страницу следует решить несколько вопросов.

Статистические приоритеты: сколько пользователей будут пользоваться этим навигационным элементом. Например, пользователи будут ориентироваться на ресурсе при помощи локальной навигации или предпочтут «привязанные» тематически ссылки?

Размещение: на каких страницах этот элемент должен располагаться? А где именно на макетной сетке: вверху, внизу, слева, справа?

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

UI дизайн (UI design)

User Interface Design или пользовательский интерфейс – это более узкое понятие, включающее в себя определенный набор графически оформленных технических элементов (кнопки, чекбоксы, селекторы и другие поля). Его задача – помочь пользователю организовать взаимодействие с программой/сайтом. На сегодняшний момент существуют некоторые правила UI дизайна:

1. Организованность элементов интерфейса. Это означает, что они должны быть логически структурированы и взаимосвязаны.

2. Группировка элементов интерфейса. Подразумевает объединение в группы логически связанных элементов (меню, формы).

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

4. Единый стиль элементов интерфейса. Стилевое оформление играет не последнюю роль, ведь именно оно сохраняется в памяти пользователя.

5. Наличие свободного пространства. Это позволяет разграничивать информационные блоки, сосредотачивая внимание на чем-то одном.

Разработанный по все правилам пользовательский интерфейс значительно повышает эффективность ресурса и дает ему конкурентные преимущества.

 

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

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

 

Продуктовый дизайнер

Продуктовый дизайнер — это всеобъемлющий термин, описывающий дизайнера, который в целом задействован в создании продукта: как на визуальном уровне, так и на уровне ощущений.

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

Некоторые компании используют термин “UX-дизайнер” или просто “дизайнер” как универсальный. Лучший способ понять, как компания распределяет обязанности между дизайнерами — это прочитать описание должностей.

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

Тренды

Скевоморфизм Это физический орнамент, который скопирован с формы другого объекта, но изготовлен другими методами или с помощью других материалов. Не так уже и легко понять, да? Проще говоря скеворфизм это одно из направлений дизайна, которое преподносит цифровой материал таким же, как и его физический аналог. Еще один синоним скевоморфизма, это реализм. На заре развития дизайна и цифровых технологий, у гигантов как Apple, IBM, Microsoft была большая проблема – им нужно познакомить и сблизить устройство, интерфейс и человека. И ведь согласитесь, как объяснить человеку что значит эта кнопка, как не придать ей вид кнопки в реальной жизни.

Скевоморфизм … Это не очень звучное слово означает, что основные принципы дизайна ОС берутся из физического мира. Помните, как до iOS 7 выглядело приложение «Заметки» или iBooks? В последнем случае это был деревянный книжный шкаф с полками со стоявшими на нём (если, конечно, было что «ставить») книжками и прочими файлами в формате PDF. Вот это — и есть то, что называется «скевоморфизм».

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

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

После увольнения Джобса из Apple в 1985 году скевоморфизм практически исчез из продуктов Apple. Его проявления встречались разве что в CD-плеере компании (да-да, был и такой) и в нескольких опциональных темах для Mac OS 8 в 1997 году.

Вернувшись в компанию, в 1999 году Джобс снова вспомнил о своем любимом стиле. Поводом стал разрабатывавшийся тогда видеоплеер QuickTime. Работавший тогда над проектом инженер рассказывал BusinessInsider, что Джобс хотел сделать его по-настоящему классным. Все из предложенных вариантов дизайна Стив беспощадно отбраковывал:

«Нет, нет, нет, вы просто не понимаете!».

Однажды Стив пришел на встречу с дизайнерами, держа в руках вырванный из какого-то журнала лист бумаги. Это была реклама часов Breitling. От их дизайна Джобс пришел в восторг:

«Просто сделайте так, чтобы это выглядело так же, как тут».

Дизайнеры наконец-то поняли, чего от них хотел Джобс. Чуть позже они вернулись с новыми набросками, и на этот раз Стив всё одобрил. Вот как выглядел плеер QuickTime 4:

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

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

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

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

Правда, на практике ни разработчики, ни сама Apple особо не придерживались рекомендаций. В 2003 году блог «512 Pixels» опубликовал скриншот актуальной тогда версии Mac OS. Многовато «металла», не правда ли?

Скевоморфизм в продуктах Apple просуществовал очень долго — в iOS от него отказались только в 2013 году, в OS X — в 2014 году.

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

 

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

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

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

 

Прообразом для плоского дизайна стали три направления в искусстве: минимализм, баухаус^[3][4][5] и Международный типографический стиль (также известный, как швейцарский стиль). Последнее оказало наибольшее влияние на формирование плоского дизайна^[6].

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

Пропали тени, подсветка, градиенты и текстуры iOS-приложений. Вместо этого Metro предлагает плоские цветные квадраты с крупным шрифтом.

METRO ПРОТИВ METRO

В 2012 ГОДУ КОМПАНИЯ MICROSOFT НАРВАЛАСЬ НА КОНФЛИКТ С НЕМЕЦКОЙ СЕТЬЮ СУПЕРМАРКЕТОВ METRO ЗА НАРУШЕНИЕ ТОРГОВОЙ МАРКИ, ЧТО ПРИВЕЛО К ТОМУ, ЧТО ЕЙ ПРИШЛОСЬ ОТКАЗАТЬСЯ ОТ НАЗВАНИЯ «METRO UI».

НО, ТАК КАК ОНИ НЕ ПРИДУМАЛИ НИЧЕГО ЛУЧШЕ, ЧЕМ НАЗВАТЬ ЭТО «ЯЗЫК ДИЗАЙНА MICROSOFT», Я БУДУ И ДАЛЬШЕ ИСПОЛЬЗОВАТЬ НАЗВАНИЕ «METRO». Я НАДЕЮСЬ, ЧТО ВЫ ПОЙМЕТЕ, ЧТО Я ГОВОРЮ О ПОЛЬЗОВАТЕЛЬСКОМ ИНТЕРФЕЙСЕ, А НЕ О СЕТИ СУПЕРМАРКЕТОВ.

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

Несмотря на то, обращает ли основная аудитория внимание на крупные блоки с плоским цветом или нет, новая философия дизайна Microsoft определенно взяла за душу техносферу, восхваляя особое внимание Metro-стиля к шрифтам и цветам.

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

 

Несмотря на то, что интерфейсы и сайты с элементами плоскости и минимализма создавались ещё в 2000-е годы, массовую популярность они приобрели после того, как с 2010 года, Microsoft стала выпускать продукцию, выдержанную в плоском стиле, тем самым, противопоставляя свою дизайн-политику продукции Apple, выдержанной в стиле скевоморфизма. Однако ещё в 2006 году компанией Microsoft был выпущен MP3 Плеер Zune, который содержал в себе элементы плоского дизайна^[6]. В 2010 году Microsoft выпустила мобильную операционную систему Windows Phone 7 с использованием интерфейса, выдержанного в стиле плоского дизайна, где также доминируют яркие цвета. После коммерческого успеха, Microsoft выпускает новую операционную систему Windows 8 в стиле. Фактически с началом выпуска Windows Phone и Windows 8 начинается эра плоского дизайна.^[2]

В 2013 году компания Apple выпустила операционную систему iOS 7, дизайн которой также отказывается от скевоморфизма в пользу плоскости^[6], это приводит к ещё большей популяризации плоского дизайна и делает его новым преобладающим направлением в компьютерном дизайне^[2]. Вскоре после этого на плоский дизайн также перешли поисковик и приложения от Google, вместе с их операционной системой Android, вышедшей в интерфейсе Material Design.^[7]

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

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

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

Критики плоского дизайна утверждают, что он зашел слишком далеко. Отделение слоя тенями, анимированные элементы — вот что позволяет нам более интуитивно понимать элементы страницы. Для тех кто не знал, материал дизайн зародился в Google, и они сделали небольшую страницу в которой изложены правила материал дизайна. У этого стиля есть бесчисленные и уникальные особенности, но, возможно, одна из самых лучших особенностей — это использование оси Z. По сути, это добавляет немного скевоморфизма, что позволяет двум плоскостям будто «плавать» друг по другу. Он также является стандартом для приложений на Android. Должен ли он использоваться на iOS? Этот вопрос до сих пор является актуальной темой для обсуждений, хотя одни говорят, что данный стиль лучше оставить в тех рамках в которые он заключен сейчас. Ну, у каждого, как обычно, свое мнение относительно этого вопроса.

 

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

Основные принципы Material Design

В разных источниках можно встретить разную «разбивку» на принципы, но вернее будет выделить 9 основных аспектов, способных четко охарактеризовать разработку:

Принцип №1: material — это, в первую очередь, метафора, объединяющая корректную организацию пространства, а также движения объекта в нем. Данный дизайн неизменно строится на так называемой тактильной реальности, так как пользователи могут почувствовать грань между плоскостями, которой нет.

Принцип №2: всегда интуитивно понятные поверхности. Это значит, что грани с плоскостями всегда обязаны точно передавать смыслы визуального характера. То есть ощущения появляются на подсознательном уровне, благодаря теням, границам.

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

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

Принцип №5: он акцентирует внимание на графике, цвете и шрифтах. Дизайн должен быть максимально естественным и логичным, все элементы – сбалансированы и гармоничны по отношению друг к другу, чтобы у «юзеру» было комфортно и он понимал, что ему необходимо делать здесь и сейчас!

Принцип №6: первоначальность действия. По факту, это самая суть Материал Дизайна, так как посредством действий пользователя меняется дизайн, чтобы облегчить все задачи относительно эксплуатации web-ресурса или приложения.

Принцип №7: пользователь неизменно инициатор всех происходящих изменений, совершая определенные действия. Все начинается с «общения» с интерфейсом.

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

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

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

 

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

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

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

Дизайнеры, занимающиеся разработкой интерфейсов

ž UX- дизайнер

ž UI- дизайнер (дизайнер интерфейсов)

ž Визуальный дизайнер (графический дизайнер)

ž Дизайнер взаимодействия (моушн-дизайнер)

ž UX- исследователь (Исследователь пользователей)

ž Фронтенд-разработчик (UI- разработчик)

ž Продуктовый дизайнер

 

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

UX — это User Experience (дословно: «опыт пользователя»). То есть это то, какой опыт/впечатление получает пользователь от работы с вашим интерфейсом. Удается ли ему достичь цели и на сколько просто или сложно это сделать.

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

UX/UI дизайн — это проектирование любых пользовательских интерфейсов в которых удобство использования так же важно как и внешний вид.

Что такое UX и UI дизайн, другими словами

Прямая обязанность UX/UI дизайнера — это, например, «продать» товар или услугу через интерфейс. Именно на основе работы UX/UI дизайнера пользователь принимает решение: «Быть или не быть?» Нравится или не нравится. Купить или не купить.

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

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

Вот первый пример: когда Вильгельм Шиккард в 1623 году изобретал арифмометр, он уже был UX/UI дизайнером.

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

Ещё один более древний и примитивный пример — точильный камень (колесо). Уже даже в раннем средневековье было много разновидностей и механизмов такого колеса:

· его можно было крутить рукояткой вручную

· колесо мог крутить другой человек

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

· и другие...

Всё это были разные типы интерфейсов.

Так вот, когда изобретатель очередного точильного камня думал:

· будет ли он сидеть и сам нажимать педаль

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

то в тот момент он был UX дизайнером.

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

И тот способ, каким бы вы затачивали меч — назывался бы интерфейс.

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

В последнее время популяризация профессии UX/UI дизайнера связана скорее с развитием цифровых технологий. А вот именно тот «бум» (когда мы стали видеть термин «UX/UI» в каждом втором объявлении о работе) связан с самим названием, которое кто-то придумал совсем недавно.

UI/UX дизайн — это сейчас одна из самых востребованных профессий в цифровой индустрии. Сколько времени она будет востребована зависит от развития этой отрасли. И, судя по всему, она только набирает обороты.

UX и UI — это не тренды. Технологи развиваются. Спрос на сайты растёт. Цифровые приложения появляются как грибы. А инструменты дизайна и разработки упрощаются настолько, что уже практически любой человек без знания программирования может «на коленке» сделать сайт-визитку. Вот только этот сайт должен как-то выглядеть. И не просто как абстрактный каркас из текста и кнопок. Тут программистам и нужна помощь UX/UI дизайнера.

 

Начнем с UX.

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

 

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

 

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

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