Дизайн. Глоссарий_Дизайн. Ui (User Interface пользовательский интерфейс) совокупность средств (кнопки,иконки, меню, рубрики, навигация, дизайн и пр), с помощью которых пользователь общается с сайтом.
 Скачать 113.24 Kb.
|
|
UI - (User Interface — пользовательский интерфейс) — совокупность средств (кнопки, иконки, меню, рубрики, навигация, дизайн и пр), с помощью которых пользователь общается с сайтом. Цель усовершенствований любого UI — максимально эффективно и удобно организовать взаимодействие с пользователем. UX - Пользовательский опыт (User eXperience — опыт взаимодействия) — а) совокупность впечатлений и субъективных ощущений от взаимодействия с интерфейсом программы или сайта. б) желаемый, ожидаемый и практический опыт взаимодействия пользователя с продуктом. Компоненты UX: ● Изучение потребностей пользователя ● Составление логических схем работы интерфейса ● Тестирование прототипов на ЦА ● Составление ТЗ для UI дизайнера Пользовательский сценарий — совокупность шагов представителя целевой аудитории на пути к цели на вашем сайте. Сценарий рассказывает предысторию пользователя, указывает его потребность и описывает его жизненный опыт, а также описание конкретных действий на сайте, которые должны привести к покупке. Паттерны — типичные повторяющиеся элементы чего-либо. Если речь идет о паттернах пользовательского поведения, то подразумеваются некие модели, схемы, по которым действует пользователь. Поп-ап (pop-up) –– это всплывающие окна на сайте, форма рекламы в сети Интернет. Как правило это новые окна браузера, формируемые с помощью JavaScript, или, реже, с помощью Adobe Flash. Подробнее https://sendpulse.com/ru/support/glossary/pop-up Референс (от англ. reference — справка, сноска) — вспомогательное изображение: рисунок или фотография, которые художник или дизайнер изучает перед работой, чтобы точнее передать детали, получить дополнительную информацию, идеи. Прототип – схематическое изображение страниц будущего сайта со всеми его элементами: меню, кнопками, баннерами, формами для ввода данных. Ховеры - это разного рода эффекты (всплывающие подписи, подсказки, трансформация, ротация, увеличение, смещение), появляющиеся при наведении курсора на элемент интерфейса. Несмотря на то, что это далеко не основной элемент веб-дизайна, ховер-эффекты могут освежить любой сайт и сделать его интереснее для посетителя. Подборка различных ховер эффектов можно посмотреть в статье на хабре Растровое изображение — изображение, состоящее из множества пикселей — цветных точек (как правило, прямоугольной формы), которые образуют строки и столбцы этого изображения. Растровые форматы: BMP, TIFF, GIF, JPEG, PNG, PSD, ICO. Редакторы: Adobe Photoshop, Paint. Векторные изображения — изображения, описанные с помощью математических формул и представляющие собой набор примитивов (в основном геометрических форм). В отличие от растровых картинок не теряют качество при масштабировании. Векторные форматы: EPS, SVG, AI. Если у вас нет графического редактора Adobe Illustrator, пользователи MAС OS могут открыть их в программе Preview. Пользователи Windows и Linux могут использовать программу Inkscape. Примитивы — минимальные графические объекты. К графическим примитивам относятся линии и стрелки, прямоугольники, окружности, эллипсы, дуги, кривые, соединительные линии, трёхмерные объекты (куб, шар, цилиндр). Примитивы лежат в основе более сложных графических объектов. Кривые Безье — типы кривых, используются в компьютерной графике для рисования плавных изгибов. Предложены в 60-х годах XX века независимо друг от друга Пьером Безье из автомобилестроительной компании «Рено» и Полем де Кастельжо из компании «Ситроен», где применялись для проектирования кузовов автомобилей. (wikipedia.org) Параллакс — изменение видимого положения объекта относительно удалённого фона в зависимости от положения наблюдателя. Фаска — поверхность, образованная скосом торцевой кромки материала. Используется в технологических, технических, а также в декоративных и эргономических целях. ( пример ) Глитч (glitch) — это эффект помех, который применяется в фото и видео ( пример ). Мокап (или mock-up на английском) — это специальным образом подготовленный файл, в котором можно свой дизайн размещать на реальных предметах. Они нужны, чтобы показать как картинка будет выглядеть в реальной жизни. Обычно это PSD файл со смарт-объектом, на который и вставляется картинка с дизайном( пример работы с мокапом ). Шейп — cлои формы (Shape layers) и инструменты для их редактирования (Shape tools) — это способ создания векторной графики в Photoshop. Подробнее https://creativo.one/lessons/basics_a/7151-figura-i-sloy-figura-v-photoshop.html Параметрический дизайн — направление дизайна, использующее методы параметрического моделирования (wikipedia.org). Параметризм — проектирование с использованием новейших вычислительных технологий и методов цифрового моделирования, заимствованных из автомобильной и авиационной промышленности, которые помогают менять параметры проекта в реальном времени. Оптическая компенсация — уравновешивание разницы между реальными геометрическими размерами, цветом и тем, как их воспринимает мозг человека (источник https://vk.com/@mediaschool-opticheskaya-kompensaciya). Подробнее об оптической компенсации в статьях на Habr Модульная сетка — универсальный инструмент организации визуального пространства, который используют и графические, и веб-дизайнеры. Использование сетки при проектировании — часть профессиональной культуры дизайнера. Грубо говоря, она позволяет выравнивать элементы. Уникальное торговое предложение (УТП) — это уникальная характеристика или преимущество продукта/ бренда, выделяющие его перед конкурентами. Обычно именно на УТП маркетологи стараются фокусировать внимание клиента в ходе рекламных кампаний. Базовая линия (англ. baseline, или линия шрифта) — воображаемая прямая линия, проходящая по нижнему краю прямых знаков без учёта свисающих и нижних выносных элементов. В строке символы текста стоят на базовой линии, а нижние выносные элементы текста находятся ниже неё. Adaptive Design — адаптивный дизайн — проектирование сайта с условиями, которые изменяются в зависимости от устройства, базируясь на нескольких макетах фиксированной ширины. Responsive Design — отзывчивый дизайн — проектирование сайта с определенными значениями свойств, например, гибкой сетки макета, которые позволяют одному макету работать на разных устройствах. Mobile First — это метод разработки сайтов, который учитывает, что они будут использоваться в первую очередь на мобильных устройствах. Брейкпоинты — контрольные точки, проходя через которые, дизайн сайта изменяется и адаптируется под новые условия. Переходы от одного диапазона к другому и есть прохождение через контрольные точки. Outline Mode (Ctrl или Cmd+Y) — векторные контуры в Figma. Режим Outline удобно использовать для работы с размерами фреймов и для понимания, из чего состоит векторная форма. В этом режиме видны только векторные контуры слоёв без учёта обводок и заливок. CSS ( англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Canvas (англ. canvas — «холст», рус. канва́с) — элемент HTML5, предназначенный для создания растрового двухмерного изображения при помощи скриптов, обычно на языке JavaScript. WebGL (Webbased Graphics Library) — это библиотека для программного обеспечения, которая расширяет возможности языка программирования JavaScript, позволяя ему создавать интерактивную 3D графику внутри любого совместимого с ней веб-браузера. Код на WebGL выполняется с помощью видеокарты. Cеквенция — секвенция кадров, в целом, это тип сохранения при котором каждый фрейм (кадр) сохраняется в отдельную картинку и имеющий любой вариант формата картинки например jpg, bmp, gif, tiff, png и многие другие. HEX — шестнадцатеричный код цвета — это шестизначное представление цвета в вебе, используется графическими редакторами (пример обозначений: #FFFFFF — белый, #000000 — черный). Состояния кнопки: default — по умолчанию, hover — эффект при наведении, disabled — заблокированное состояние, onclick — при щелчке левой кнопкой мыши на элементе, focus — режим выделения кнопки для слабовидящих (при нажатии кнопки TAB фокус переключается последовательно на каждую кнопку/ссылку.) Customer Journey Map (СJM) — карта взаимодействия потребителя с продуктом, отражает путь клиента к продукту, выявляет проблемные области и подсказывает, как увеличить продажи и повысить лояльность клиентов. Подробнее: Составляем Customer Journey Map: советы и инструменты |