Разработка дизайна приложения (3)




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

Ссылки на другие части

Давайте посмотрим, что у нас получается

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

Для входа в этот режим жмем кнопку проигрывателя в верхней части экрана. 

Запуск презентации
Запуск презентации

Окно презентации находится в отдельной вкладке. 

Презентация проекта
Презентация проекта

Состояния заполнения

Визуальный язык

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

Красный цвет — плохое самочувствие, зеленый — хороший. Градиент между ними будет показывать оттенки ощущений.

Чем выше наполнение, тем обильнее разродился пользователь в тот день. 

Переходим на страницу «UI-кит».

Компонент
Компонент

Сейчас у нас есть один компонент под названием «Число». Продублируем его:

Дубль компонента
Дубль компонента

Новый элемент является экземпляром «Числа», а так как мы будем менять размеры одного из его прямоугольников, нам это не подходит. Чтобы убрать наследование, выбираем Detach instance в контекстном меню, либо жмем сочетание Command + Option + B. 

Detach instance
Detach instance

Теперь это обычный элемент, который мы можем полностью изменять, и он не наследует ничего от «Числа». 

Элемент
Элемент

Выберем в древе слоев «Заполнение» и изменим его высоту вот так:

Слой "заполнение"
Слой «заполнение»
Слой "заполнение"
Слой «заполнение»

Переименуем получившийся фрейм:

Меняем название
Меняем название

Продублируем его:

Дубликат элемента
Дубликат элемента

И изменим в нем высоту заполнения таким образом:

Меняем название
Меняем название

Переименуем его тоже.

И сделаем эти два фрейма компонентами (Cmnd + Option + K):

Новые компоненты
Новые компоненты

Итого мы имеем три компонента с разным наполнением. 

Вернемся на страницу «Экран приветствия»:

Страница "Экран приветствия"
Страница «Экран приветствия»

Напоминаю, что здесь у нас собран календарь из одинаковых компонентов, и теперь мы заменим часть из них на новые. 

Для этого выбираем элемент:

Элемент
Элемент

И переключаем параметр Instance:

Изменение родительского компонента
Изменение родительского компонента

Теперь выберем заполнение этого элемента и изменим его цвет (цвет у экземпляров компонента менять можно):

Изменяем цвет слоя
Изменяем цвет слоя

Смотрим на результат: 

Результат
Результат в презентации

Аналогичным образом изменим еще несколько элементов:

Результат
Результат

Предполагаем, что часть чисел еще не отмечены, поэтому в этих числах мы скроем слой с заполнением. Для этого вернемся на страницу «UI-кит» и создадим еще один компонент: «Не заполнено». 

Компонент без слоя заполнения
Компонент без слоя заполнения

Переходим на страницу с экраном и меняем остаток на «Не заполнено»:

Выбираем несколько элементов
Выбираем несколько элементов
Меняем для них родителя
Меняем для них родителя

 

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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:


По теме:


Бесплатные иконки

Векторные и растровые иконки, бесплатные для коммерческого использования

Анимированные SVG иконки Изометрические иконки