Меню
ГлавнаяФото и видео

Ui элементы. Наборы элементов интерфейса UI для фотошопа. Yellow User элементы интерфейса

Обновление: Некоторые свойства и методы фабрики в версии 1.8 были изменены. Данная статья актуальна только для версий jQuery UI 1.7.x

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

Элементы интерфейса создаются функцией $.widget, в качестве параметров которой передается название и прототип:

$.widget("ui.myWidget", { … });

Свойства

    this.element

    Элемент, который используется для создания экземпляра плагина. Это поле всегда содержит jQuery объект с одним элементом. Если при создании виджета была использована выборка с несколькими элементами, то для каждого элемента из коллекции будет создан свой экземпляр.

    this.options

    Настройки экземпляра, которые при создании объединяются с настройками по умолчанию, определенными в $.ui.myWidget.defaults . Если у плагина есть какие-то метаданные, то они тоже объединяются с настройками.

    this.namespace

    Пространство имен плагина (в нашем примере это «ui»). Обычно не используется внутри плагинов.

    this.name

    Имя плагина (например, «myWidget»). Также редко используется внутри плагина как и пространство имен.

    this.widgetEventPrefix

    Это свойство используется для определения названия событий, которые генерирует плагин. Например, у диалогового окна есть функция обратного вызова callback close . Когда выполняется эта функция, генерируется событие «dialogclose». Название события - конкатенированные префикс события и название функции обратного вызова. Префикс по умолчанию совпадает с названием виджета, но может быть заменен. Например, для плагина draggable были бы не приемлемы названия событий «draggablestart» и т.п. По этому, меняя префикс на «drag», получаем названия «dragstart» и т.п. Требуемое значение нужно установить $.ui.myWidget.eventPrefix .

    this.widgetBaseClass

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

    Element.addClass(this.widgetBaseClass + "-active").

    Это свойство широко используется в фабрике и абстрактных плагинах типа $.ui.mouse .

Методы

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

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

    Используется для получения и изменения настроек плагина после создания экземпляра. Сигнатура метода аналогична css и attr . Вы можете указать только имя, чтобы получить значение настройки, имя и значение, чтобы изменить настройку или объект для изменения нескольких настроек. Этот метод внутри вызывает _getData или _setData .

    _getData

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

    _setData

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

    _setData(‘disabled’, false) .

    Вспомогательный метод, который вызывает _setData(‘disabled’, true) .

    _trigger

    Метод должен использоваться для запуска функций обратного вызова. Обязательным параметром метода является название функции, который нужно выполнить. Все функции так же генерируют события. Так же вы можете передать объект event , который вызвал запуск. Например, событие перетаскивания «drag» было вызвано событием «mousemove», поэтому в метод _trigger должно быть передано исходное значение события. Третьим параметром может быть произвольные данные, которые передаются в функцию и обработчик события.

Когда плагин переопределяет методы из $.widget.prototype , то оригинальные методы тоже должны быть вызваны:

$.widget("ui.myPlugin", { destroy: function() { this.element.removeAttr("something"); $.widget.prototype.destroy.apply(this, arguments); } });

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

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

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


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



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


Скопируйте код интересующих вас элементов и вставьте на странице своего сайта.


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

После сохранения изменений на странице отображаются нужные элементы:

Пользовательский интерфейс (на англ. user interface, UI) коротко говорят ЮИ - это среда взаимодействия пользователя с компьютером. Это кнопки, меню, радиокнопки, чек-боксы и многое другое. Сейчас не понятно, ниже все заумные словечки объясню. Если человек пользуется мобильным телефоном, то приложения или браузер - это пользовательский интерфейс.

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

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

Тексты (заголовки)

Когда человек в вебе первое, с чем он сталкивается, это тексты и заголовки. Поэтому, нам как дизайнерам, важно прорабатывать сразу все заголовки в одном макете. Заголовки, обычно, называются H1, H2 … Hn, потому что так они называются в тегах html.
В данном случае первый заголовок - это H1, далее H2 и так далее. Первый - это наиболее значимый заголовок. В лендинге это может быть на первом экране, дальше по низсходящей. В макетах нужно показывать все зголовки, чтобы верстальщик понимал, где какой тег ставить.

Ссылки

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

Кнопки

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

Радиобаттон и чек-боксы

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

Формы

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

Попап

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

Пагинация

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

Хлебные крошки

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

Прелоадер

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

Таблицы

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

Меню

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

Гуглятся легко «курсор png». Если показываешь сайт на маке (используешь mock-up c макбуком), то нужно использовать правый курсор, если в PC (например, mock-up с inernet explorer), то левый.

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

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

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

Green WebUI Kit

Набор интерфейса Green WebUI Kit - включает в себя практически все элементы которые могут понадобится - верхнее меню навигации, кнопки (OK, Cancel, Buy Now, Download Now), стикер «распродажа», форму для логина, «болванку» слайдера и элементы подписки - RSS, E-mail и прочее.

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

Yellow User элементы интерфейса

Yellow User Interface Elements - набор содержит 11 элементов интерфейса желтого цвета в их числе кнопки (Download, Submit, Buy Now, поиск), секции (Featured и дата), полосы прокрутки и прогресса. Все слои в PSD файле удобно сгруппированы, поэтому вы без труда можете вносить коррективы в тот или иной элемент UI. Цвет так же легко может быть изменен на тот что требуется вам (в наборе Green WebUI, разумеется, тоже).

К сожалению, Yellow UI Elements включает в себя меньшее количество элементов, нежели Green WebUI Kit, поэтому не исключаю что часть элементов вам придется позаимствовать из других наборов или дорисовывать самостоятельно.

Soft UI Kit

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

Transparent Glass UI

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

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

P.S. Если вам нужно найти гибкую систему под интернет магазине — magento сommerce может приятно удивить по возможностям, функциональности и расширяемости проекта.