Читать


Главная » 2015 » Октябрь » 15 » Урок 13. Рисуем UI набор
11:49
Урок 13. Рисуем UI набор

Я уже как-то затрагивал тему удобного и отзывчивого дизайна. О характеристиках и различиях UI и UX можно почитать здесь. И в данном уроке мы нарисуем небольшой набор UI элементов.

На самом деле для верстальщиков нестандартные наборы UI - настоящая головная боль! Но индивидуальный набор полей для заполнения, селектов, радио- и чекбоксов и других кнопок сделает ваш сайт более привлекательным. Главное не переусердствовать.

В одном из уроков мы рисовали аудио проигрыватель с набором кнопок.  Сейчас займёмся нечто похожим.

Итак, для начала нужно определить для себя несколько простых принципов:

  1. Набор кнопок не должен отвлекать внимание посетителя от главного на сайте, а лишь служить инструментом для получения желаемой информации.
  2. При этом поля и кнопки не должны теряться и сливаться с фоном.
  3. Всё должно быть выполнено в едином стиле.

Начнём с полей для заполнения. Их мы рисовали ещё в уроке, посвящённом авторизации

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

Урок 13. Рисуем UI набор

Сразу придадим краям поля бОльшую выразительность и добавим чуточку объёма, открыв стили слоя двойным щелчком по слою с фигурой:

Урок 13. Рисуем UI набор
Урок 13. Рисуем UI набор

Селект мы нарисуем, добавив полю кнопку выбора. Для этого сначала определим форму кнопки - можно продублировать (напомню горячие клавиши Ctrl+J) поле и уменьшить его до размера кнопки. В стилях слоя поправим внутреннюю тень, изменив цвет на белый, и придадим белой линией объём кнопке:

Урок 13. Рисуем UI набор

Добавим стрелку и селект готов!

Урок 13. Рисуем UI набор

Но у селекта всегда есть выпадающий список и его также необходимо нарисовать. Начнём с подложки. Продублируем поле. В стилях слоя отключим внутреннюю тень. И растянем фигуру по вертикали, выбрав нижние точки:

Урок 13. Рисуем UI набор

Теперь, выбрав цвет, оттенком немного светлее обводки плашки, нарисуем однопиксельную горизонтальную линию и продублируем её, подвигая на равный промежуток:

Урок 13. Рисуем UI набор

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

Урок 13. Рисуем UI набор

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

Урок 13. Рисуем UI набор

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

Урок 13. Рисуем UI набор

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

Урок 13. Рисуем UI набор

Добавим в наш набор ещё и переключалку On/Off - в нашем случае Вкл/Выкл. Этот элемент состоит из подложки (поля) и кнопки, как у селекта. Именно по принципу рисования селекта рисуется и этот элемент. Только вместо стрелки на кнопке значится надпись, а подложка (поле) окрашивается в более насыщенные (тёмные) цвета. Можно продублировать поле и кнопку селекта и уже в стилях этих слоёв поработать над видом нового элемента. Я к примеру, изменил цвет подложки и её обводки, а у кнопки обводку просто отключил. (Если вдруг что-то осталось непонятным, посмотрите в приложенном архиве исходник).

Урок 13. Рисуем UI набор
Урок 13. Рисуем UI набор

А используя, полученные кнопки Вкл/Выкл можно создать ползунок. Кнопке включим обводку - она станет разделителем активной и неактивной частей интервала. Ну а сам интервал составим из тёмно-серой и оранжевой подложек:

Урок 13. Рисуем UI набор

Готово!

Урок 13. Рисуем UI набор

Файл запакован в архив весом 35Кб
Скачать


Категория: Уроки | Просмотров: 700 | Добавил: M-Wizard | Теги: урок, интерфейс, фотошоп, UI | Рейтинг: 0.0/0

Всего комментариев: 0
avatar


НЕКОТОРЫЕ ПУБЛИКАЦИИ БЛОГА