Что называют пользовательским интерфейсом
Интерфейс пользователя
Интерфе́йс по́льзователя, он же по́льзовательский интерфейс (UI — англ. user interface ) — разновидность интерфейсов, в котором одна сторона представлена человеком (пользователем), другая — машиной/устройством. Представляет собой совокупность средств и методов, при помощи которых пользователь взаимодействует с различными, чаще всего сложными, машинами, устройствами и аппаратурой.
Весьма часто термин применяется по отношению к компьютерным программам, однако под ним может подразумеваться набор средств, методов и правил взаимодействия любой системы, управляемой человеком.
Несколько широко распространённых примеров:
Интерфейс двунаправленный (интерактивный) — когда устройство, получив команды от пользователя и исполнив их, выдаёт информацию пользователю наличествующими у неё средствами — визуальными, звуковыми, тактильными и т. п. (приняв которую, пользователь выдаёт устройству последующие команды предоставленными в его распоряжение средствами: кнопки, переключатели, регуляторы, сенсоры, голосом, и т. д.).
Поскольку интерфейс есть совокупность, то он состоит из элементов, которые, сами по себе, также могут состоять из элементов (так, экран дисплея может содержать в себе другие окна, которые, в свою очередь, могут содержать панели, кнопки и прочие интерфейсные элементы).
Особое и отдельное внимание в интерфейсе пользователя традиционно уделяется его эффективности и удобству пользования (юзабельности). Понятный, удобный, дружественный — его основные характеристики.
Содержание
Составляющие
Под совокупностью средств и методов интерфейса пользователя подразумеваются:
По наличию тех или иных средств ввода, интерфейсы разделяются на типы — жестовый, голосовой, брэйн, и тд., возможны смешанные варианты. Средства эти должны быть необходимыми и достаточными, быть удобными и практичными, расположенными и скомпонованными разумно и понятно, соответствовать физиологии человека, не должны приводить к негативным последствиям для организма пользователя (всё это входит в понятие эргономики).
Увеличение в устройстве (при равной функциональности) средств ввода-вывода даёт упрощение построения методов управления и упрощение правил пользования, но зато приводит к сложности восприятия информации пользователем — интерфейс становится перегруженным. И наоборот — уменьшение средств отображения и контроля приводит к усложнению правил управления — каждый элемент несёт на себе слишком много функций. Потому проектировщики интерфейсов стараются принять компромиссное решение между этими двумя крайностями в каждом отдельном случае.
Разновидности
ПИ компьютерной программы
Интерфейс пользователя компьютерного приложения включает:
Пользовательский интерфейс часто понимают только как внешний вид программы. Однако, на деле пользователь воспринимает через него всю программу в целом, а значит, такое понимание является слишком узким.
В действительности ПИ объединяет в себе все элементы и компоненты программы, которые способны оказывать влияние на взаимодействие пользователя с программным обеспечением (ПО), это не только экран, который видит пользователь.
К этим элементам относятся:
Для упрощения восприятия функции программы пользователем при разработке пользовательского интерфейса желательно использовать метафоры.
Что такое пользовательский интерфейс системы
Что такое пользовательский интерфейс
Итак, давайте выясним для начала, что же такое пользовательский интерфейс. Принято понимать, что это набор уникальных средств, с помощью которых пользователь осуществлять общение со многими электронными устройствами. Это может быть и компьютер, и планшет, и телефон. Все они устроены так, что без знания того, как с ними общаться, невозможно работать.
В пользовательский интерфейс входит не только экран монитора, что ошибочно полагают, хотя он является посредником между пользователем и системой. Интерфейс включает в себя различные алгоритмы, форматы, коды, командные режимы и многое другое. Они помогают человеку реализовать ту цель, которую он поставил при работе с компьютером. В особенности это помогаетвеб-мастеру, который задействует всё это в своей работе над сайтом.
Пользовательский интерфейс остановлен: что делать
Для нас актуально то, что делать в такой ситуации. Есть распространённый вариант перезагрузки системы, но это не всегда помогает, если проблема лежит глубоко. Другие решения могут состоять в том, чтобы сбросить саму систему и переустановить её. Зачастую этот вариант является самым действенным. Здесь есть плюс, что это действие не затронет работу других систем, они продолжат и дальше нормально функционировать.
Например, это может касаться сопряжённых устройств, как ноутбука и телефона. Сбрасывание данных на телефоне никак не сможет отразиться на работе компьютера. У них есть индивидуальные защиты на такие случаи.
Приложение пользовательский интерфейс остановлено: что делать
А если получилось так, что происходит такая же ошибка и пишут, что приложение пользовательского интерфейса остановлено, что делать в таких ситуациях? Зачастую тут работает тот же самый алгоритм. Можно перезагрузить всю систему полностью. Но редко, когда это помогает, так как все приложения остаются в рабочем режиме. Помимо, этого можно сделать оптимизацию сайта, как приложения, так и сайта, с которым оно непосредственно связано.
Есть ещё пара вариантов, которые помогут выйти из такой ситуации. Можно попробовать отключить все приложения, вывести их из рабочего режима, затем снова включить и посмотреть есть ли изменения. А можно попытаться сбросить приложение, выдающее ошибку и переустановить его заново. По опыту многих интернет пользователей этот метод самый надёжный. Но если не сработал и этот способ, следует обратиться к профессионалу, который найдёт суть проблемы и её исправит.
Что значит пользовательский интерфейс
Теперь давайте вернёмся и проанализируем, что значит пользовательский интерфейс. Как мы уже упомянули, им является средство общения между пользователем и компьютером. А это значит, что у человека и электронной машины есть свой язык, на котором и происходит то самое взаимодействие. То есть, пользователь может с помощью определённой последовательности команд достичь поставленных целей.
Помимо этого, возникновение пользовательского интерфейса является гениальным достижением человечества. Так как никогда в истории не было такого, чтобы человек, не применяя титанических условий, смог подчинить себе сложную машину.
Таким образом, мы сегодня с Вами узнали, что такое пользовательский интерфейс, из чего он состоит и какие ошибки способен выдавать. Кроме этого, мы объяснили, что делать в подобных ситуациях, чтобы дело не дошло до крайних мер и обеспечило Вашему устройству безопасное и продуктивное функционирование. А это самый важный, на наш взгляд, критерий в успешной работе пользователя.
Пользовательский интерфейс
2020-10-30 • 8 мин читать
Интерфейсы окружают людей повсюду. Покупка билета в метро, снятие денег в банкомате, даже простой звонок или сообщение в смартфоне – за всем этим скрывается UI. Термин означает внешнюю часть программного обеспечения, которая помогает пользователям взаимодействовать с продуктом или платформой.
Если рассматривать техническое значение, то интерфейс включает в себя:
Например, когда пользователь открывает программу Microsoft Word, он видит лист, разметку, фон и другие элементы. Это внешнее оформление. Возможность ввести текст, изменить шрифт, откорректировать содержимое – это функционал. А за кнопками скрывается внутренняя часть ПО, работа которой не видна пользователям.
Зачем нужен интерфейс?
Главная цель UI – упростить взаимодействие со сложными техническими объектами. Любая программа выглядит как бесконечное количество 0 и 1: набирать их вручную, чтобы написать простое сообщение – долгий бесполезный процесс. Интерфейсы помогли ускорить эти действия, сделав их доступными для всех. Они транслируют информацию, отправляют команды, помогают обмениваться данными и выполняют другие полезные функции.
С развитием приложений UI стали также выполнять задачу помощника. Графические элементы выступают индикаторами, направляя пользователей. Если убрать их, то перед вами окажется набор символов.
Оказавшись на этой странице, вы:
Создание интуитивно понятного дизайна для пользователей – это одна из задач юзабилити. Процесс проработки UX – стадия создания идеального UI, в котором будет легко ориентироваться и находить нужную информацию.
Виды интерфейсов
В зависимости от назначения, функционала и способов работы интерфейсы бывают нескольких видов. С большинством из них люди сталкиваются ежедневно.
Командная строка
Это один из первых методов взаимодействия с операционной системой, который давно устарел. Большинство функций можно выполнить с помощью упрощенных программ. Взаимодействие происходит через ввод конкретных команд на языке, на котором работает компьютер.
Пользователь такого интерфейса должен знать точные сочетания символов для запуска нужных процессов.
Графический, текстовый
Вторая классификация основывается на содержательных элементах UI. Текстовый интерфейс – это последователь командной строки. Он используется только для ввода и обработки символов. Рядовые пользователи чаще взаимодействуют с экранами, которые содержат графические элементы для управления.
Классический пример – ОС Windows. Его внутренние процессы работают точно так же, как у командной строки, но внешне он принципиально отличается от предыдущего примера. Меню, кнопки, значки, картинки – одно нажатие на них заменяет сотни символов программного кода, который нужно было бы вводить вручную для выполнения тех же действий.
Большинство иконок стандартизированы и используются в разных интерфейсах. Например, разворачивающиеся меню и списки чаще всего отражаются тремя полосками или точками, музыка – в виде ноты, настройки – как шестеренка и т.д.
Современные UI включают текстовые и графические элементы.
Жестовый, голосовой, тактильный, нейронный
Управлять программами и оборудованием можно не только с помощью мышки или клавиатуры. Производители техники расширяют возможности своей продукции, поэтому запускать функции можно с помощью голоса, жестов, касаний и даже активности мозга.
Технология voice user interface известна благодаря голосовым помощникам – Siri от Apple, Alexa от Amazon или Алиса от Яндекса. Помимо этого, на клавиатурах многих смартфонов есть опция записи звука, которая переводит его в текст. Тактильный UI – один из вариантов для управления, который был создан для незрячих людей, но его возможности применяются и при разработке смартфонов. Пример – разная степень вибрации при наборе клавиш на сенсорном экране.
NUI (жестовые, натуральные) чаще всего используются в играх с имитациями для приставок Xbox, Nintendo Wii или PlayStation. Эту же технологию вы можете встретить в оборудовании для «умного дома», например, при включении света или регулировании громкости Яндекс.Станции с помощью изменения положения руки.
Программный, аппаратный, аппаратно-программный
Интерфейсы обеспечивают взаимодействие не только между человеком и устройством, но и между программами, оборудованием или компьютерами:
Пользовательский интерфейс
Всё, с чем взаимодействует пользователь можно отнести к этому типу. Он включает большинство перечисленных видов, потому что именно люди управляют устройствами и программами с помощью голоса, нажатий, жестов и даже через командную строку. Чаще всего этим термином обозначаются UI приложений.
В рамках этого понятия можно выделить подвиды. У каждого из них – свои особенности.
Сайты давно перестали нести в себе только информационную функцию. На доменах размещаются целые приложения, которые пользователи видят через призму web interface. Их преимущество в том, что не нужно устанавливать ПО – все функции доступны в браузере. Сейчас для их написания используются элементы JavaScript, HTML и CSS, а главная задача при разработке – продумать юзабилити так, чтобы посетителям было удобно.
Игровой
Разные игры сочетают все элементы перечисленных UI. Они не ограничиваются задачами геймдизайна. В них прорабатывается не только графика, но и элементы геймплея: кнопки, жесты, движения мыши или взаимодействие с сенсором на экране.
Материальный
Подразумевает контакт пользователей с физическим объектом: мышью, клавиатурой, тачпадом, кнопками на оргтехнике и т.д. Пример такого взаимодействия – набор текста в Microsoft Word или заметках: вы нажимаете на клавиатуру, а на экране появляется текст.
Мобильный
Выделяется в отдельную группу SIMP (Screen, Icon, Menu, Pointer), поскольку его функционал отличается от разработки для десктопов. Элементы здесь заполняют экран полностью, а блоки и системы зависят от требований операционной системы. Поведение пользователей при взаимодействии со смартфонами отличается от работы на компьютере из-за размера экрана и отсутствия отдельной клавиатуры с мышью/тачпадом. Юзабилити приложений должно строиться на поведенческих паттернах пользователей, например, как они держат телефон в руке, каким пальцем набирают текст и листают страницы, какие действия удобно совершать на ходу и т.д.
Как проработать UI?
Современный user interface должен быть удобным, функциональным и динамичным. При его разработке важно учитывать все этапы взаимодействия с продуктом: от первого касания до регулярного использования. Каждый экран приложения, кнопка, текстовое описание имеют значение.
Чтобы установить долгосрочные отношения с клиентами, важно изучать их поведение. Тестирование юзабилити в AskUsers поможет перед масштабным запуском оценить, насколько пользователям удобно на вашей платформе. Для пользователей интерфейс – это и есть продукт, поэтому дизайн должен помогать им разобраться в продукте.
Закажите проверку, чтобы создать удобный ресурс для своей аудитории.
Что такое интерфейс пользователя?
Пользовательский интерфейс ( user interface или сокращенно UI ) – это интерфейс, с помощью которого человек может управлять программным обеспечением или аппаратным оснащением. UI должны быть удобными в использовании, чтобы взаимодействие с ними происходило на максимально интуитивном уровне. Интерфейсы программного обеспечения также называют графическими пользовательскими интерфейсами ( graphical user interface или GUI ).
Какие бывают интерфейсы — этапы развития и типы пользовательских интерфейсов
В отличие от современных реалий, первые компьютеры были слишком слабыми для графических пользовательских интерфейсов. Поэтому, в самом начале люди могли пользоваться только командной строкой ( CLI или command line interface ), в которой команды задавались с помощью запросов. Позже это переросло в TUI – интерфейсы, которые сегодня используются в процессе инсталляции операционных систем. Доступность компьютеров привела к необходимости разработки удобного пользовательского интерфейса.
Графический интерфейс пользователя – тип интерфейсов, который прочно закрепился наряду с постоянно увеличивающейся производительностью ПК. В ближайшем будущем могут появиться пользовательские аудио-интерфейсы ( VUI или voice user interface ), которые позволят людям взаимодействовать с компьютером с помощью речи.
В различных компьютерных играх применяется натуральный пользовательский интерфейс ( NUI или natural user interface ). Его система анализирует движения человека, и преобразует их в движения в игре. На данный момент в стадии разработки находится перцептивный пользовательский интерфейс ( PUI ), а также интерфейс мозг-компьютер ( BCI или brain-computer interface ). Последняя разработка направлена на то, чтобы обеспечить людям возможность управлять компьютерами силой мысли.
Интерфейс командной строки (Command Line Interface или CLI)
Текстовый интерфейс пользователя (Text User Interface или TUI)
Графический пользовательский интерфейс (Graphical User Interface или GUI)
Также есть возможность использовать кнопки и разделы меню, расположенные внутри самого приложения. Это окно представляет собой нечто вроде шлюза между пользователем и программным обеспечением. В графическом интерфейсе пользователя распространены типичные элементы управления. Они позволяют стандартизировать процесс взаимодействия с различными программами в разных операционных системах.
Графический пользовательский интерфейс — реальный мир как модель
Когда разрабатывался первый графический пользовательский интерфейс за основу были взяты элементы реального мира: мусорная корзина, папка, изображение дискеты в качестве кнопки сохранения. Сегодня многие иконки считаются устаревшими, но все равно используются.
Даже при использовании современных изображений и иконок дизайнеры стараются хотя бы минимально отразить их предназначение. Это позволяет облегчить интуитивное взаимодействие с интерфейсом. Цель GUI заключается в том, что люди могли легко определить предназначение каждой кнопки. Благодаря этому нам не приходится запоминать все команды, как это было в случае с командной строкой.
Графический пользовательский интерфейс — инструкции и правила
Пользовательский аудио-интерфейс (VUI или voice user interface)
В этом типе интерфейсов пользователя взаимодействие между пользователем и компьютером происходит с помощью голоса. Например, пользователь может вербально выбрать человека из ранее составленного списка контактов и совершить звонок. Программы для интерпретации речи в текст и для распознавания речи также используют аудио-интерфейсы.
Преимущество данной формы взаимодействия заключается в том, что пользователям не нужно ничего, кроме голоса. Текстовый ввод на устройствах обычно усложняется маленькой клавиатурой ( на смартфонах с маленьким экраном ), и многим зачастую проще продиктовать текст сообщения.
Тактильные интерфейсы пользователя (TUI или tangible user interface)
Физическое взаимодействие запоминается лучше любого другого. Кроме этого тактильные интерфейсы дают простор реализации объектов: форма, фактура, цвет. От песочницы с деревянными кубиками до увеличительного стекла для изображений – возможно практически все.
Натуральный пользовательский интерфейс (NUI или natural user interface)
Натуральный пользовательский интерфейс призван предоставить пользователю естественный и интуитивный опыт взаимодействия с устройством или программным обеспечением. В то же время, сам интерфейс будет видимым, например, на сенсорном экране. При помощи NUI команды пользователя вносятся с помощью жестов и прикосновений.
Перцептивный пользовательский интерфейс (PUI или perceptual user interface)
Интерфейс мозг-компьютер (BCI и brain-computer interface)
Этот интерфейс пользователя в качестве источника команды использует человеческий мозг. На сегодняшний день эта технология достигла высокого уровня развития. Для измерения мозговых волн используются электроды, после чего полученная информация расшифровывается различными алгоритмами. Это и позволяет управлять роботизированными конечностями. Такой тип взаимодействия – большое преимущество для людей с ограниченными физическими возможностями.
Ценность оптимизации под поисковые системы
В разработке графического интерфейса пользователя GUI и сайта есть как схожие моменты, так и различия. Например, посетитель пользуется навигацией по сайту. Он выбирает определенный путь сквозь структуру страниц. В графическом интерфейсе разработчик может контролировать, какие пункты будут доступны пользователю в тот или иной момент. Если функция недоступна, разработчик может скрыть эту опцию.
В случае с сайтом у пользователя всегда есть возможность вернуться назад на страницу. Следовательно, навигацию также необходимо учитывать при создании сайта. Иерархия страниц должна быть максимально прозрачной и продуманной. Если ваш сайт состоит из нескольких уровней, то логично использовать навигацию типа “ хлебные крошки ”.
Люди используют программы уже достаточно долгое время. Следовательно, мы уже привыкли к большинству стандартных элементов любого графического интерфейса. Сайты же появились относительно недавно.
Веб-дизайнеры должны стараться продумать опыт взаимодействия с пользователем на максимальном уровне, и руководствоваться при этом проверенными практиками. Например, меню навигации лучше всего располагать в левом верхнем углу. Как вебмастер вы должны убедиться, что все элементы легко доступны любому посетителю. Это сделает ваш сайт удобным для использования.
Пожалуйста, опубликуйте ваши мнения по текущей теме материала. Мы очень благодарим вас за ваши комментарии, дизлайки, подписки, лайки, отклики!
Что такое пользовательский интерфейс
Расскажу о ценности интерфейсов, видах интерфейсов и этапах разработки с примерами и рекомендациями.
Продуктовый дизайнер (UX/UI), веб-дизайнер и бренд-дизайнер. Опыт проектов в международных компаниях Omega-R (агентство), iSpring Solutions (продуктовая) и со стартапами по всему миру. Преподаватель курсов «UI-дизайн и анимация интерфейсов» и «Веб-дизайн» в Институте программных систем и godesign.school.
Янв 18 · 10 мин читать
Кратко: Пользовательский интерфейс — это способ взаимодействия пользователя и программы. Давайте разбираться дальше зачем он нужен 🌿👇
«Хороший пользовательский интерфейс учитывает человеческие слабости, перекладывает работу на машину, минимизирует ошибки и раздражение пользователя». (с) Илья Бирман
Содержание:
Что такое пользовательский интерфейс
Пользовательский интерфейс — это все, что помогает людям управлять устройствами и программами с помощью голоса, нажатий, жестов, через командную строку и даже силой мысли (такое теперь тоже есть). Самый популярный вид интерфейсов сейчас — UI приложений.
UI (англ. user interface) переводится как «пользовательский интерфейс». UI охватывает не только графический интерфейс, а еще и тактильный, голосовой или звуковой.
Зачем нужен интерфейс
Интерфейс помогает двум объектам понимать друг друга и обмениваться информацией.
Интерфейс — это «язык общения», который понимают оба объекта, которые взаимодействуют друг с другом с целью решить определенный вопрос. 👌
Если каждое приложение или программа, установленная на компьютере, планшете или смартфоне, — это помощник, то интерфейс — это способ общаться (взаимодействовать) с ней, чтобы она помогала в вашем деле на работе и в жизни.
К примеру, у цифровых систем пользовательские интерфейсы бывают графические, голосовые, командной строки, жестовые — все это интерфейсы. Через пользовательский интерфейс мы получаем доступ к новым возможностям, которые дает приложение для обучения, работы, творчества, развлечений.
Также распространены программный, аппаратный, аппаратно-программный интерфейсы. Такие интерфейсы обеспечивают взаимодействие не только между человеком и машиной (устройством), но и между программами, оборудованием или компьютерами:
Виды пользовательского интерфейса
Пользовательские интерфейсы бывают жестовые, тактильные, голосовые, графические, командной строки и даже нейронные.
Интерфейс командной строки и текстовый интерфейс (Command Line Interface или CLI)
Командная строка все еще очень популярна среди системных администраторов и программистов. Это один из первых методов взаимодействия с компьютером. Она обладает особым шармом — создает ощущение общения тет-а-тет с машиной без посредников. Командная строка — как бесконечный лист A4, на котором пользователь вводит текст команд и получает результаты работы в виде текста.
Графический пользовательский интерфейс (Graphical User Interface или GUI)
Самый популярный тип UI. Представляет собой окошко с различными элементами управления. Пользователи взаимодействуют с ними с помощью клавиатуры, мыши и голосовых команд: жмут на кнопки, тыкают мышкой, смахивают пальцем.
Жестовый, голосовой, тактильный, нейронный
«Любая достаточно развитая технология неотличима от магии», — как-то сказал английский писатель-фантаст и футуролог Артур Кларк.
Например, через Voice User Interface вы можете отдавать команды своему смартфону через голосовых помощников: Siri от Apple, Alexa от Amazon или Алиса от Яндекса.
NUI (жестовые, естественные) применяют в играх для приставок Xbox, Nintendo Wii или PlayStation. Эту же технологию вы найдете в оборудовании «умного дома», например, при включении света или регулировании громкости Яндекс.Станции с помощью изменения положения руки.
Производители качают технологии и расширяют возможности машин, и наслаждаться новыми фишками гаджетов можно даже посылая мысли напрямую в компьютер.
Графический пользовательский интерфейс
Этим термином чаще обозначаются UI мобильных и веб-приложений, а также игр и сервисов для развлечений.
Мобильные интерфейсы
Выделяется в отдельную группу SIMP (Screen, Icon, Menu, Pointer). Подход к дизайну мобильных интерфейсов отличается от подхода к дизайну настольных приложений. Поведение пользователей при взаимодействии со смартфонами отличается от работы на компьютере из-за размера экрана и отсутствия отдельной клавиатуры с мышью/тачпадом. Элементы здесь заполняют экран полностью, а блоки и системы зависят от требований операционной системы.
Дизайн мобильных приложений также зависит от поведенческих паттернов пользователей, например того, как они держат смартфон в руке, какие действия удобно совершать на ходу и т.д.
Веб-интерфейсы
Технологии позволяет создавать полноценные веб-приложения, по функциональности не уступающие настольному ПО: Trello, Google Docs, Twitch, Яндекс.Дзен.
Преимущество таких приложений в том, что их не нужно устанавливать на компьютер — все функции доступны в браузере. Создают такие приложения с помощью JavaScript, HTML и CSS.
Игровой и материальный
Связан с механикой геймплея. Именно в нем лучше всего раскрывается сопровождающая роль интерфейса, так как игрок лучше ощущает, что движется к какой-то цели (например, победить босса и пройти уровень). Интерфейс зависит от игры: кнопки, жесты, движения мыши или взаимодействие с сенсором на экране или 3D интерфейс в VR, нажатие клавиш на джойстике.
Модель пользовательского интерфейса: реальный мир и ментальная модель пользователя
Программные продукты призваны увеличивать наши возможности в реальном мире. Каждый продукт — как супергерой, его задача — помочь нам в чем-либо: суперпамять, общение сквозь любые расстояния, максимум развлечений и так далее. Ко всем этим свойствам мы получаем доступ через интерфейсы.
Каждое приложение мы распахиваем в определенном контексте. Контекст подразумевает определенные ожидания от того, как все должно работать. Ожидания основаны на прошлом опыте. При знакомстве с новым продуктом мы бессознательно переносим на него сформировавшиеся ожидания и привычки, которые выстроились в прошлом вокруг другого схожего продукта (или способа решения схожей задачи).
Ментальная модель — это схема в нашей памяти с логикой «объект → принцип взаимодействия → результат». При этом от всех похожих объектов мы ожидаем похожего поведения и результата.
«В основе ментальной модели лежат убеждения, а не факты. Это значит, что нужно принять то, что пользователи уже знают (или думают что знают) о том, как работает ваш продукт. И взять это в работу».
Nielsen Norman Group
У каждого интерфейса под капотом находится определенная модель системы, которая призвана помогать пользователю достигать определенных целей.
Например, модель покупки дорогих автомобилей для постоянных клиентов автосалона в мобильном приложении может включать 4 шага: наполнить корзину, оформить заказ, подтвердить заказ, внести оплату.
Модель и Интерфейс тесно взаимосвязаны. Чтобы понять разницу между Моделью и Интерфейсом, задайте вопрос: откуда вообще взялась корзина? Разве клиенты добавляют автомобили в тележку пачками, как в супермаркете? Или все-таки нужна модель не корзины/тележки из супермаркета, а тест-драйва в автосалоне?
Т.е. мы в приложении можем вместо корзины сразу при выборе автомобиля предлагать записаться на тест-драйв или начать оформление покупки (в том числе в кредит). А теперь задайте вопрос: как часто покупатели дорогого автомобиля готовы менять авто и вписывается ли мобильное приложение в их жизненный контекст?
Выходит, что за любым объектом в реальном мире стоит модель, которая находится в нашем сознании — это наши представления о том, как эта штуковина перед нами должна работать. И эти представления возникают еще до того, как мы дотронулись до нее.
Элементы пользовательского интерфейса, синтаксис и другие особенности
Элементы интерфейса в GUI реализованы на основе метафор. Метафоры должны быть уже знакомы пользователям или вписываться в их культурный контекст (тогда их можно им обучить).
Метафоры в интерфейсах на базе ментальных моделей
Все элементы интерфейса вместе складываются в единую дизайн-концепцию (метафору). Например, Trello (система для управления задачами) визуально выглядит как доска для управления проектами по SCRUM (метафорично), на ней также можно таскать стикеры из одной колонки в другую. Trello изначально и придумали программисты, которым очень близка концепция SCRUM.
Пример элементов пользовательского интерфейса, синтаксис и другие особенности.
Популярные элементы интерфейса:
Кнопка, Ссылка, Иконка, Вкладка, Чекбокс, Радиокнопка, Переключатель, Выпадающий список, Ползунок, Поле ввода, Таблицы, Меню.
Интерфейсы конструируют по принципам атомарного дизайна
Атомарный дизайн — это подход к разделению системы любой сложности на части, маленькие элементы — атомы. Атомы можно использовать повторно и комбинировать друг с другом.
Атомы. Мельчайшие частицы, из которых состоит интерфейс: кнопки, поля ввода, чекбоксы, радиокнопки, стили для типографики.
Уровень атомов.
Молекулы (группы атомов). Если взять два атома и соединить друг с другом — получится молекула. Например, кнопка и поле ввода.
Уровень молекул.
Организмы. Если объединить несколько молекул, получится организм — крупная часть интерфейса. Например, сквозная навигация в шапке или боковой панели сайта.
Уровень организмов.
Шаблоны. Если объединить организмы друг с другом и создать шаблон — получится интерфейс, предназначенный для решения типовых задач.
Уровень шаблонов.
Этапы разработки пользовательского интерфейса — как проработать UI
В международной практике подход к дизайну интерфейсов уже стал стандартом. Процесс по дизайну интерфейсов включает следующие ключевые этапы. В этом блоке я опираюсь на материалы UX Mastery — партнера Interaction Design Foundation, крупнейшего в мире сообщества обучения UX-дизайну.
Правила и принципы разработки хорошего интерфейса
Базовые принципы можно проследить сквозь 24 года исследований в сфере интерфейсов: c 1987 до 2009 года. Эти принципы работают и сейчас.
Рекомендации по проектированию интерфейсов. Шнайдерман (1987 год) и Плейзент (2009 год):
Вывод и рекомендация
Попробовать себя в роли дизайнера интерфейсов на практике под руководством наставника вы можете на платформе Breezzly. Здесь вас встретят дизайн-проекты во всех популярных инструментах (Figma, InVision Studio, Principle) и на всех видах популярных у клиентов проектов. А полную траекторию обучения UI-дизайну вы можете найти, если загляните в обзор 5 лучших UI курсов →