Вжух, и ты нарисовал дизайн приложения: опыт разработки интерфейса без дизайнера
"Дизайнер" — это довольно обобщенное понятие. Разные дизайнеры занимаются разными вещами, но в этой статье речь пойдет про супер-человека, который придает приложению хороший вид. В общем, как бы то ни было, это статья для тех, кому нужно сделать интерфейс своими руками.
Предположим, завтра вам назначили встречу с инвесторами, а у вас нет дизайнера или он есть, но заболел, или ушел в себя, или у него кризис, или у вас в команде его никогда не было. И что делать? Как подбираться к дизайну?
На всякий случай, напомню, что мы работаем над мобильным приложением Walkerie для iOS - аудиогид, готовые маршруты для пеших прогулок по Москве.
Итак, представьте себе людей, которые умеют рисовать примерно на таком уровне:
*Наши художественные навыки*
Будучи командой без бюджета, но с энтузиазмом, перед нами обозначилась задача: сделать интерфейс. И сделать его надо руками программиста и меня, человека, который хорошо рисует прямые линии и неплохо складывает слова в предложения.
Разумнее всего начать с изучения гайдлайнов Apple. Во-первых, у Apple хороший дизайн, который задает тенденции. Во-вторых, приложение у нас на iOS и глупо упускать их гайд. В-третьих, все ответы на вопросы там: и про навигацию, и про компановку, и про все-все. Есть на русском даже: https://medium.com/ios-guidelines-in-russian
Далее изучили популярные приложения в AppStore, а также приложения конкурентов. Выписали списком, что нравится, что не нравится, что они придумали хорошего, что у них не получилось. Изучали также приложения из PlayMarket, хотя это было больше для кругозора, чтобы понять, насколько платформы отличаются. Но и там нашлись интересные фишки!
Теперь рисуем от руки на бумаге всевозможные варианты всех экранов, экспериментируем с формами, расположением, другими элементами. Согласитесь, нарисовать такой прототип – это не так сложно. С прямыми линиями у нас все ок, помните?
Далее выбрали оптимальные варианты и тут начинаются страдания: визуализация.
Photoshop – Illustrator – Sketch
Когда у нас есть костяк из блоков на бумаге, неплохо бы его перенести в компьютер и начать заниматься дизайном. И если с формами все понятно, то самый ужас начинается с цветами. Кажется, что это очень просто и легко, но, на самом деле, может пройти вечность, пока вы осознаете, что любимые цвета не сочетаются, что тени и полутени только все портят, что обалденный полупрозрачный цвет не видно, да и вообще «чего-то не хватает».
Можно, конечно, открыть новый файл и рисовать все с нуля.
Можно взять скрины собственного приложения и пытаться в него внести новые элементы.
Можно сделать скрины чужих приложений и в их структуру попробовать вписать свою концепцию.
Есть много разных ухищрений, но у нас не сработало ничего, кроме как работа со своим, существующим дизайном. И самое главное, что мы вынесли для себя: поменять дизайн с нуля очень сложно, лучше менять его итеративно, постепенно усложняя и внедряя какие-то элементы: сначала тень на кнопку, через месяц шрифт другой, через неделю цвет заголовка и тд.
Вот некоторые результаты наших творческих изысканий. Главное в этом деле — никаких табу, захотели нарисовать краба — рисуем :)
Наконец, я вспомнила, что умею работать в After Effects и Premier, которые могут помочь нам с анимацией, чтобы было понятнее, как совершаются переходы, скроллы и прочее. Если вам не кажется, что After Effects – это адовый набор функций, кнопочек и окошек, то можно там реализовать свою идею с анимацией. Но на это уйдет тоже несколько часов.
Попробовали другой вариант анимации, предложенный Apple. Смотрите первую часть видео: https://developer.apple.com/videos/play/wwdc2014/223/
Если не хотите смотреть, краткий пересказ: делаете скриншоты приложений, подгоняете их под свою структуру и свои экраны, далее каждый экран – это один слайд. Переход между слайдами – это переход между экранами. Здесь уже все возможности Key Note и Power Point в ваших руках :)
Эта возня с визуализацией анимации вовсе не лишняя. Если научиться все делать быстро, то можно впоследствии избежать таких фраз как: "сделай переход в другую сторону" или "а почему тут ничего не происходит", "а как оно двигаться будет?", "а сделаешь, чтобы это вжух-вжух и поменялось?".
В общем, таким простыми (непростыми) путями пытались сделать себе интерфейс. В настоящее время наше приложение выглядит так:
Как видите, даже умея рисовать только лишь прямые линии, подсматривая решения у конкурентов и вдохновляясь работами более опытных товарищей можно сделать приемлемый дизайн для приложения, которым будет приятно пользоваться :)
