К какой группе элементов ui относится ссылка
Перейти к содержимому

К какой группе элементов ui относится ссылка

  • автор:

Построение интерфейса: описание паттерна «Активные ссылки» (Action links)

image image imageimage
Ссылки — это просто или совсем не просто?

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

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

— При нажатии на ссылку произойдет создание резервной копии? – это Активная ссылка
— Поля форм, заполнятся автоматически-определяемыми значениями? – это Активная сылка
— А может еще что-то…

У вас есть несколько команд, которые нужно отобразить совместно, или визуально выделить одну из них.

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

В каких случаях использовать?

Если в вашем HTML документе есть боковая панель, где удобно и логично собрать основные команды, или вы хотите расположить команды рядом с навигационными ссылками, то Активные ссылки отличный выбор, который подойдет так же и для прикладного ПО. Ссылки также помогут в случае, если вы ограниченны в пространстве.
При этом для множества команд сгруппированных по некому логическому или иерархическому признаку, лучше использовать паттерн Ленточного дизайна.
Если же вы хотите создать панель управления, то рекомендуется паттерн Группы кнопок.
Ссылки – это отличный способ обеспечить доступ к второстепенным командам.

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

Как же это сделать?
Все довольно просто — вы всего-навсего используете ссылку вместо кнопки. Некоторые разработчики баз снабжают их специальными кнопками ссылок или кнопками гиперссылок, которые обеспечивают привычное кликовое событие и выбор параметров команды.
Для выделения и визуализации команды, особенно когда она находится в ряду других ссылок, вы можете соотнести ее с иконкой (не рекомендуется использовать это, если вы вынесли команду в ряд ссылок, чтобы минимизировать ее важность).
Попытайтесь вникнуть в то, что именно выражает текст, определите какое действие стоит за данным текстом и убедитесь в том, что это действие не возможно будет перепутать с навигационной ссылкой. Формулируйте сжато, но информативно. Использование глагола обычно подразумевает действие. Также можно использовать заглавные буквы, чтобы выделить ключевое слово из остального текста.
Отдельные команды, которые относятся к некоторой части пользовательского интерфейса (the UI), вам следует размещать визуально рядом с объектами воздействия.

image

Яндекс.Директ

Яндекс.Директ использует ссылки на действия при создании нового объявления. Ссылка «упорядочить» рассортирует ключевые слова по строкам. Обратите внимание на оформление ссылок. В данном примере, на наш взгляд, очень корректно и ненавязчиво Ссылки на команды, которые не ведут к перезагрузке страницы, выделили в виде псевдоссылок, оформив их прерывистым подчеркиванием, а не сплошным, как делается для навигационных элементов.
Ссылка на онлайн пример: direct.yandex.ru

image

Google. Добавить файл к письму

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

image

Google.Добавить напоминание

Еще один пример мы берем из Календаря. Ссылка «Добавить напоминание» открывает дополнительное поля для уведомлений и является типичным примером паттерна.
Ссылка на онлайн пример: google.com/calendar

image

Google.Кнопки — только для подчеркивания важности

В данном примере хотим обратить Ваше внимание сразу на несколько элементов. Google очень активно использует ссылки, и лишь только для создания акцента на весомости функций — делает их кнопками. Так команда «Написать письмо» письмо оформлена в виде ссылки, клик на нее не нанесет никакого вреда и не приведет к значительным изменениям, которые трудно будет отменить. При этом команды «Удалить», «В спам» и др. выделены кнопками — так как могут привести к потери информации.
Ссылка на онлайн пример: gmail.com

Элементы интерфейса сайта

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

Кнопка — элемент, при нажатии на который происходит какое-то действие на сайте.

Radiobutton — позволяет пользователю выбрать одну опцию.

Checkbox — позволяет выбрать несколько опций.

Select — позволяет пользователю выбрать одну опцию из выпадающего списка.

Элементы интерфейса

Accordeon — элемент интерфейса состоящий из заголовков и скрываемого и открываемого контента.

Элементы интерфейса

Слайдер — переключатель изображений (или другого контента) работающий автоматически или вручную.

Элементы интерфейса

Контент — текст, изображения, видео, то есть наполнение сайта.

Элементы интерфейса

Popup — небольшое всплывающее окно в углу экрана.

Элементы интерфейса

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

Элементы интерфейса

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

Элементы интерфейса

Раздел — страница сайта. Тут все просто.

Шапка (хеддер / header) — самая верхняя часть сайта. Обычно в ней расположены логотип, меню и контактная информация. Шапка чаще всего бывает закрепленной, т.е. она перемещается вместе с перемещением пользователя по странице.

Элементы интерфейса

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

Элементы интерфейса

Галерея — набор из нескольких изображений.

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

Бордер — обводка элемента. Бывает solid (цельной), dashed (линиями) и dotted (точками).

Тултип (tooltip) — подсказка, всплывающая при наведении на элемент.

Элементы интерфейса

Курсор Поинтер (Pointer) — тип курсора в виде руки с вытянутым указательным пальцем. Обычно появляется при наведении на ссылку.

Курсор Текст (Text) — тип курсора, стандартный для редактирования текста.

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

П агинация — нумерация страниц, обычно отображенная как навигация в конце страницы.

Списки — в веб интерфейсах присутствуют нумерованные списки (цифрами), маркированные списки (точки, квадратики, кружки, черточки) и списки определений.

Стрелочки — вид навигации.

Поисковая строка — строка для ввода поискового запроса.

Элементы интерфейса

Плеер — элемент воспроизводящий аудио и видеофайлы.

Элементы интерфейса

Ползунок — предназначен для ввода чисел в указанном диапазоне.

Элементы интерфейса

Текстовое поле — поле для ввода текстовых значений.

Элементы интерфейса

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

Элементы интерфейса

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

Элементы интерфейса

Ссылка — элемент интерфейса перенаправляющий вас по адресу, указанному в нем.

Элементы интерфейса

Состояние ссылок и кнопок: Hover (Ховер) — состояние выбранного элемента при наведении на него курсора мыши (важно знать — в мобильных устройствах нет этого состояния)

Состояние ссылок и кнопок: Focus (Фокус) — состояние выбранного элемента при переключении между элементами клавишей tab (чаще всего это синяя обводка вокруг элемента)

Состояние ссылок и кнопок: Active (Эктив) — состояние выбранного элемента в момент нажатия на него.

Состояние клавиш

Якорь — элемент интерфейса перенаправляющий вас по адресу и к конкретному элементу, указанному в нем.

Элементы интерфейса

Вкладки (табы) — элемент интерфейса, так же как и аккордеон, состоит из заголовка и скрытого контента, на который можно попасть при обращении к заголовку.

Элементы интерфейса

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

Элементы интерфейса

Переключател ь (switch) — элемент интерфейса, который позволяет выбрать одно из состояний, чаще всего вкл/выкл.

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

П релоадер (Preloader) — анимированный элемент, воспроизводящийся в процессе загрузки сайта, видео, изображений и другого контента.

Рейтинг (Rating bar) — элемент интерфейса показывающий среднюю оценку.

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

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

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

Анастасия Свеженцева Продуктовый дизайнер (UX/UI), веб-дизайнер и бренд-дизайнер. Опыт проектов в международных компаниях Omega-R (агентство), iSpring Solutions (продуктовая) и со стартапами по всему миру. Делюсь опытом в дизайне на офлайн- и онлайн-платформах с 2017 года: Институт программных систем, godesign.school, онлайн-платформа breezzly.ru и пишу микролекции о дизайне на Яндекс.Кью (226 ответов). Янв 18, 2023 · 10 мин читать

Кратко: Пользовательский интерфейс — это способ взаимодействия пользователя и программы. Давайте разбираться дальше зачем он нужен ���� «Хороший пользовательский интерфейс учитывает человеческие слабости, перекладывает работу на машину, минимизирует ошибки и раздражение пользователя». (с) Илья Бирман

  1. Что такое пользовательский интерфейс
  2. Зачем нужен интерфейс
  3. Виды пользовательского интерфейса
  4. Графический пользовательский интерфейс
  5. Элементы пользовательского интерфейса
  6. Модель пользовательского интерфейса
  7. Этапы разработки пользовательского интерфейса
  8. Требования к качественному интерфейсу
  9. Что еще почитать на тему интерфейсов
  10. Вывод и рекомендация

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

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

Интересуетесь свежими статьями по продуктовому дизайну (UX/UI)? ��

UI (англ. user interface) переводится как «пользовательский интерфейс». UI охватывает не только графический интерфейс, а еще и тактильный, голосовой или звуковой.

Зачем нужен интерфейс

Интерфейс помогает двум объектам понимать друг друга и обмениваться информацией.

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

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

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

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

  • аппаратный: соединяет друг с другом два объекта, например, помогает подключить смартфон к ноутбуку с помощью WiFi или кабеля;
  • программный (API): создает связь между приложениями/программами, к примеру, подключение API одного приложения к другому. Самый популярный сценарий работы — авторизация через соцсети на сайтах;
  • аппаратно-программный: комбинация технических элементов под управлением программного обеспечения.

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

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

Интерфейс командной строки и текстовый интерфейс (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-дизайну.

  • Стратегия (Бренд-стратегия и UX-стратегия) — определяет полезное действие, ценности бренда и видение будущего. Стратегия естественным образом влияет на цели проекта по дизайну интерфейсов, критерии достижения целей и приоритет проекта в общем ландшафте высот организации.
  • Исследование (UX-исследование) — фаза открытий. Комплексные проекты включают в себя масштабную работу по пользовательским исследованиям (UX-исследованиям) и анализу конкурентов (бенчмаркинг). Небольшие организации или стартапы могут подойти к исследовательской работе в упрощенном формате и обосновать идею, построенную по принципам минимальной жизнеспособности (Minimum Viable) через интервью, опросы и юзабилити тестирования. Именно на фазе исследований, согласно принципам дизайн-мышления, происходит погружение в образ жизни, пристрастия, цели и барьеры пользователей. Понимание контекста пользователей помогает создавать социально значимые продукты, которые с высокой вероятностью приживутся и начнут развитие на рынке: так они будут казаться интуитивными (ментальные модели) и родными (метафоры).
  • Анализ (UX-аналитика) — цель анализа в том, чтобы сделать выводы из данных и дать уверенный старт созданию дизайн-концепций. Выводы призваны помочь понять суть происходящего и приступить к проектированию интерфейса.
  • Проектирование и прототипирование интерфейсов — на этапе проектирования происходит создание прототипов интерфейсов, их тестирование пользователями и корректировка на основе обратной связи. На этой фазе чаще применяются прототипы с низкой детализацией (Low-fi prototyping), так в них пользователи фокусируются только на функциях и не отвлекаются на бренд-дизайн (уникальную графическую идентичность) и другие визуальные детали.
  • Дизайн интерфейсов и Разработка — на этом этапе создается проработанный дизайн, пишется детальный контент, создается вся уникальная графика и начинается совместная работа с программистами.

Правила и принципы разработки хорошего интерфейса

Базовые принципы можно проследить сквозь 24 года исследований в сфере интерфейсов: c 1987 до 2009 года. Эти принципы работают и сейчас.

Рекомендации по проектированию интерфейсов. Шнайдерман (1987 год) и Плейзент (2009 год):

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

Что еще почитать на тему интерфейсов

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

Вывод и рекомендация

Попробовать себя в роли дизайнера интерфейсов на практике под руководством наставника вы можете на платформе Breezzly. Здесь вас встретят дизайн-проекты во всех популярных инструментах (Figma, Principle, ProtoPie) и на всех видах популярных у клиентов проектов. А полную траекторию обучения UI-дизайну вы можете найти, если загляните в обзор 5 лучших UI курсов →

UI-действия

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

Требуемая роль: admin.

Типы действий

  1. На формах:
    • Вверху слева
    • Вверху справа
    • В бургер-меню
    • В контекстном меню заголовка поля
    • Ссылка внизу формы
    • Внизу формы
  2. В списках:
    • Вверху слева
    • Вверху справа
    • В бургер-меню
    • В контекстном меню заголовка поля
    • В контекстом меню строки
    • Ссылка под списком
  3. Другие:
    • В контекстом меню кнопки
    • В контекстом меню схемы зависимостей

Действия на формах

Действия на списках

Настройка действий

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

Для этого выполните следующие шаги:

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

Поля формы UI-действия

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

Узнайте больше о наследовании и переопределении действий пользовательского интерфейса.

На новой записи

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

Переменная Описание
Имя текущей таблицы, в записи которой находится действие пользовательского интерфейса.
ID текущей записи, для которой было вызвано действие пользовательского интерфейса.
Название представления формы, для которого было вызвано действие пользовательского интерфейса.
Название представления связанного списка, для которого было вызвано действие пользовательского интерфейса.
ID таблицы, которая является текущей для действия пользовательского интерфейса.
Название представления списка, для которого было вызвано действие пользовательского интерфейса.
Название таблицы списка, отображаемого на текущей странице. Если текущий путь к странице — /list, то значение этой переменной равно значению переменной . Если текущий путь к странице — /record, то значение этой переменной содержит системное имя активного связанного списка.
ID таблицы списка, отображаемого на текущей странице. Если текущий путь к странице — /list, то значение этой переменной равно значению переменной . Если текущий путь к странице — /record, то значение этой переменной содержит системное имя активного связанного списка.
Эта переменная возвращает системное имя колонки, содержащее идентификатор таблицы, на которую делается ссылка.
Эта переменная возвращает ID активного элемента связанного списка.
Эта переменная возвращает ID текущей связанной записи.
Эта переменная возвращает ID текущего представления формы.

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

  • Списки + связанные списки – это действие пользовательского интерфейса должно отображаться как в списках, так и в связанных списках.
  • Списки – это действие пользовательского интерфейса должно отображаться только в списках.
  • Связанные списки – это действие пользовательского интерфейса должно отображаться только в связанных списках.

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

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

Например: связанный список Критерии пользователя содержит поле Пользователи типа List. Это поле связано с таблицей Пользователи (user), поэтому это связанное поле относится к типу поля List.

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

Связанный список Переводы на форме записи Колонки.

Стиль кнопок на форме. Доступные опции:

  • Без стиля
  • Основной
  • Позитивный
  • Негативный
  • Второстепенный

Стиль кнопок на форме. Доступные опции:

  • Без стиля
  • Основной
  • Позитивный
  • Негативный
  • Второстепенный

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

  1. Нажмите правой кнопкой мыши на действие, которое необходимо изменить, чтобы открыть контекстное меню.
  2. Щелкните Редактировать действие. Появится форма действия пользовательского интерфейса.

Глобальные действия

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

Для этого выполните следующие действия:

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

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

Добавление многоуровневых действий

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

Эта опция доступна только для действий пользовательского интерфейса типа Бургер-меню.

Чтобы внедрить действие пользовательского интерфейса, выполните следующие действия:

  1. Создайте родительское действие пользовательского интерфейса, указав его тип с помощью флажков В бургер-меню в областях Стиль формы или Стиль списка во вкладке Позиция и стиль.
  2. Нажмите Сохранить и выйти, чтобы закрыть форму.
  3. Создайте дочернее действие пользовательского интерфейса того же типа, указав его родительское действие пользовательского интерфейса, созданное ранее.
  4. (опционально) Установите флажок Наследуемое , чтобы добавить эти действия на дочерние таблицы.
  5. Нажмите Сохранить, чтобы применить изменения.

Настройка условий отображения

Условия определяют ситуации, когда отображаются действия пользовательского интерфейса. Поле Условие предполагает использование серверного API. Чтобы включить использование клиентского API, на форме действия пользовательского интерфейса установите флажок Клиентское. В Условие для доступа к действию пользовательского интерфейса используйте объект конкретной записи current, на которой будет находиться действие. Этот объект можно использовать только для действий пользовательского интерфейса, отображаемых на формах.

Вызывайте объект current при обновлении, поскольку в таком случае объект будет определен. При создании нового действия пользовательского интерфейса значение current равно null .

Используйте логические операторы && (И) и || (ИЛИ) для составления сложных условий.

Условие позволяет вызывать созданные на стороне сервера внешние скрипты. В приведенном ниже примере функция wfContextExists() из внешнего скрипта с тем же именем получает current.sys_id и current.getTableName в качестве аргументов recordID и tableName.

Объект ss позволяет вызывать методы SimpleSystem.

Это действие пользовательского интерфейса является ссылкой на запись с ID таблицы getTableName. Если запись существует, функция возвращает true или false, если запись не найдена. В зависимости от возвращаемого значения функция отображает действие пользовательского интерфейса или нет.

Пример

function wfContextExists(recordID, tableName) < const table = new SimpleRecord('sys_db_table'); table.get('name', tableName); const wfContext = new SimpleRecord('wf_context'); wfContext.addQuery('related_record_id', ss.getDocIdByIds(table.sys_id, recordID)); wfContext.selectAttributes('sys_id'); wfContext.query(); return (wfContext.getRowCount() >0) >

Определение поведения действия с помощью скрипта

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

Например, это действие пользовательского интерфейса добавляет информационное сообщение с содержимым поля Описание:

UI-действие

ss.addInfoMessage(current.description);

Когда вызывается объект current, нет необходимости использовать метод initialize(); контекст объекта уже инициирован.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *