Ui элементы psd. Использование библиотеки UI-элементов. Основные элементы пользовательского интерфейса

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

Если вы не знает от чего оттолкнуться (или у вас уже есть идея, но вы хотите сэкономить время, воспользовавшись шаблонами) вам могут прийти на выручку сервисы по типу 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 может приятно удивить по возможностям, функциональности и расширяемости проекта.

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

Использование плоских элементов интерфейса, незаметно, но уверенно так, перетекло в с выходом на сцену Windows 8 и её довольно минималистичным стилем «Metro». Плоский дизайн с его минималистическим подходом, сосредоточен прежде всего на удобстве использования на различных типа пользовательских устройств, как на настольных ПК, так и на смартфонах с сенсорным управлением. Отличительной особенностью плоских дизайнов, являются четкие линии, двумерные объекты, яркие цвета, четко выделенные ссылки и шрифт текста без засечек. Дабы не отвлекать внимание пользователей от важных элементов, вся декоративная мишура, полностью отсутствует.

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

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

1. Featherweight UI

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

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

2. Modern Touch UI Kit

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

3. Vertical Infinity

4. Square UI Free

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

5. Flat Design UI Components

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

6. Metro Tiles UI Kit

Бесплатный, довольно богатый и великолепно прорисованный набор UI-компонентов от PixelKit. Комплект включает в себя множество элементов пользовательского интерфейса, распределенные на слои и объединенные в PSD файле, его дизайн идеально подойдет для разработки веб-проектов и мобильных приложений. С первого взгляда на оформление компонентов, угадывается стиль графического интерфейса Wihdows 8, точно отчерченные края элементов, мягкие сине-голубые тона и отлично-читаемый шрифт.

7. Flat Rounded Square UI Kit

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

8. Flat Design UI Pack

Настоящий тяжеловес (125 МБ!) среди подобных PSD-комплектов элементов пользовательского интерфейса. Детально проработанный до мелочей, плоский дизайн компонентов набора, впечатляет и настраивает на творческую работу. Данный UI-комплект можно бесплатно использовать как в частных, так и в коммерческих проектах, лишь бы в радость, да на пользу дела.

10. Bootflat 1.0.1

В завершение обзора, предлагаю на ваше рассмотрение, своего рода коллекцию HTML, CSS, JS и компонентов, для быстрой разработки интерфейсов веб-сайтов — «Bootflat», построенную на широко-известной платформе Twitter Bootstrap 3. Интуитивно понятный инструмент, включающий в себя легкие плагины и компоненты, но с богатыми функциями Bootstrap. Поддержка HTML5 и CSS3, отличная цветовая схема и стиль основанный на улучшенном стиле Bootstrap 3. Bootflat полностью адаптивна, а значит не возникнет проблем с отображением элементов на экранах всех типов пользовательских устройств. Все компоненты платформы легко расширяются и редактируются. Bootflat является проектом с открытым исходным кодом, так что смело используйте все его возможности без ограничений и создавайте свой собственный стиль.

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

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

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

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

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

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

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

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

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

Обновление: Некоторые свойства и методы фабрики в версии 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); } });