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




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

Задача: разработать UI-кит и макеты экранов для дневника походов в туалет. Поехали!

Пустой проект
Пустой проект

Ссылки на остальные части

Организация

Первым делом кликаем дважды на «Untitled» вверху и переименовываем наш проект, чтобы легко искать его в списке, а также чтобы было красивенько. 

Изменение имени
Изменение имени

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

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

Добавление страницы
Добавление страницы

 

Созданные страницы
Созданные страницы

На странице UI-кит я создам фрейм (F), в который буду добавлять компоненты: выбираем инструмент Frame, растягиваем его по экрану.

Создаем фрейм для UI
Создаем фрейм для UI

В правой части в параметрах меняем значения длины W (Width) и H (Height) на нужные нам. 

Задаем размеры для фрейма
Задаем размеры для фрейма

Переходим на страницу «Экран приветствия». 

Страница с экраном, инструмент Frame
Страница с экраном, инструмент Frame

Что здесь будет

На этом экране мы будем проектировать самый первый экран, который видит юзер, запустивший приложение. 

 

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

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

Экран для Android
Экран для Android

Кликаем на Android и получаем готовый фрейм 360 на 640 пикселей. 

Теперь у нас все готово для создания элементов управления и для их размещения на экране. 

 

Помогла ли вам эта статья?

Вы уже голосовали
Добавить комментарий

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