Создание планировщика задач. Урок 1. Делаем прототип.
Шаг 1. Что мы проектируем?
Допустим, мы хотим создать некое приложение - планировщик задач. Это будет просто список дел, которые у нас накопились и мы хотим понять когда мы их все планируем выполнить.
Шаг 2. Из чего это будет состоять?
Это будет одностраничное приложение, состоящее из нескольких компонентов:
В рамках прототипа приложение будет выглядеть так:
Такой прототип можно набросать от руки или в любом другом графическом редакторе. Никаких правил дизайна мы пока не соблюдаем, просто рисуем бездушные серые прямоугольники и добавляем текст. Основная задача сейчас - понять примерное расположение наших компонентов.
Шаг 3. Какие есть возможности у пользователя?
Давайте подумаем, что может сделать пользователь, увидев наше приложение.
1. Есть поле для ввода. Значит он что-то может ввести.
2. Есть кнопка. Пользователь нажимает на кнопку. Если в поле есть текст - он добавится и станет задачей в нашем списке. А если нет, что произойдет?
Может ничего не произойти. А можем подсказать пользователю - введите задачу.
3. Задача в списке. Изначально ей должна быть присвоена какая-то дата. Допустим, сегодняшняя. Но что если пользователь захочет ее поменять? Дадим ему эту возможность. По клику на поле с календарем возникнет окошко с выбором даты.
4. Также может быть такое, что задача могла быть добавлена случайно. Мы вправе ее удалить. Для этого можем разработать кнопку удаления рядом с задачей.
Мы набросали некоторые случаи взаимодействия пользователя с нашим приложением, можем внести правки в наш прототип.
А зачем мы вообще делаем прототип?
Таким образом мы декомпозируем нашу задачу и позволяем мозгу одновременно не думать о том, как сразу отрисовать красиво и при этом удобно.
Прототипирование помогает сосредоточиться на основных целях пользователя, на уже существующих "прямоугольниках" представить будущий образ приложения и представить как будет вести себя пользователь с этими компонентами. В процессе прототипирования может добавиться новая функция и отрисовать ее в рамках серых квадратов намного проще, нежели переделывать готовый цветной макет.
В следующем уроке будем рисовать полноценный макет, по всем принципам веб-дизайна.