Как это работаетКак сделать первый шаг к созданию собственного приложения
Границы понятий mock-up, wireframe и prototype весьма размыты, и разбираться в отличиях стоит только для того, чтобы поправлять менее дотошных знакомых. Наша же цель куда практичнее, поэтому нам достаточно знать, что чем меньше детализирован ваш макет, тем больше он вайерфрейм. В этом смысле wireframe.cc — как раз то, что нужно.
Создаём проектСразу нажимаем Go premium и регистрируемся на недельный пробный период. Бесплатная версия не даст нам сохранять свои вайерфреймы и делать их кликабельными.
Выбираем тип проекта. Для примера давайте возьмём смартфон.
Добавляем элементыОсобенность интерфейса wireframe.cc в том, что вы сначала выделяете область, а потом решаете, что в ней будет: прямоугольник, блок текста или изображение. Для тех, кто работал в других программах, это может показаться слегка непривычно, но в целом — удобно.
Обозначим прямоугольником место для меню.
СоветНе забывайте почаще сохранять макет, так как, в отличие от десктопных приложений, в wireframe.cc вы потеряете все наработки, если случайно вернётесь на предыдущую страницу или закроете браузер.
Добавим ещё несколько прямоугольников для кнопок «Войти» и «Зарегистрироваться», которые сделаем немного позже, а в центре разместим изображение. Самих изображений в вайерфреймах быть не должно. Несмотря на то что многие программы позволяют вставлять .png и .jpg, тратить на них время на этом этапе не имеет смысла. Достаточно условного обозначения, говорящего на языке проектировщиков: «Я картинка».
Также накидаем несколько маленьких кружков, обозначающих пагинацию (разбиение информации на страницы). Чтобы размножить элемент, его можно скопировать стандартными Ctrl/Cmd + C, Ctrl/Cmd + V или перетянуть элемент в новое место с зажатой клавишей Alt.
ВыравниваемПомимо того что wireframe.cc по умолчанию помогает выравнивать элементы, мы можем воспользоваться стандартным для всех подобных программ инструментом Align.
Чтобы выбрать несколько элементов, мы можем кликнуть на них по очереди, зажав Shift, а можем выделить область, зажав левую кнопку мыши и двигая курсор из правого нижнего угла в левый верхний (движение из левого верхнего угла в правый нижний создаёт новый элемент).
Затем необходимо нажать на пару кнопок, и всё готово: кружки выровнены по одной линии и расстояние между ними получилось одинаковое. Чтобы выровнять блок с кружками относительно картинки, нужно просто выбрать все элементы, сгруппировать их, нажав Ctrl/Cmd + G, затем выбрать элемент, относительно которого производится выравнивание, и применить необходимый тип. То же самое нужно проделать с остальными элементами. Добавить тексты в кнопки, выделить кнопку и текст, выровнять текст внутри кнопки.
Создаём ссылкиВ итоге у нас получился вполне сносный прототип приветственного экрана:
Чтобы создать следующий экран, нажмите на иконку карты сайта и нажмите Add new page. Скопируйте на новую страницу блок с меню, сохраните макет.
Пора превращать наш вайерфрейм в кликабельный прототип. Возвращаемся на первый экран, выделяем прямоугольник, в котором текст «Зарегистрироваться», и кликаем правой кнопкой мыши. В выпавшем меню нажимаем Link, после чего выбираем экран, на который будет вести наша ссылка.
Сохраняем макет и нажимаем Export/Share. Копируем сгенерированную ссылку и вставляем в новую вкладку браузера или нажимаем на иконку с молнией, чтобы перейти в режим просмотра в текущей вкладке.
Неплохо было бы добавить иконку «Назад» на экране регистрации, но максимум, на что мы можем рассчитывать в wireframe.cc, — это кружки и квадратики. Если масштаб нашей идеи никак не хочет смириться с таким примитивизмом, это значит, что нам пора на следующий уровень — к Balsamiq Mockups.
Balsamiq [Online, Mac, Windows, Linux] wireframe.cc + ЗаготовкиВозможности Balsamiq гораздо шире, чем у wireframe.cc, но основные приёмы, сочетания клавиш и инструменты работают по тому же принципу. Рассказать о каждой из особенностей Balsamiq нам не удастся хотя бы потому, что мы сами всех не знаем, поэтому остановимся на самых ценных.
Online или Desktop?Используйте обе. И десктопная, и онлайн-версия Balsamiq сохраняют исходные файлы в формате *.bmml. Браузерное приложение сделано на flash и время от времени тормозит, поэтому создавать мокапы будет удобнее на компьютере, а онлайн-версию использовать в первую очередь для того, чтобы презентовать результат или совместно дорабатывать проект.
(?) Если вам не нравится грубая карандашная эстетика Balsamiq, смените её в меню View → Skin → Wireframe skin.
Инспектор элементовBalsamiq предлагает нам заготовки для всех стандартных интерфейсных элементов, а если нам чего-то не достаёт, в нашем распоряжении огромная библиотека бесплатных символов. Создавая интерфейс, мы только и делаем, что перетягиваем необходимые элементы из UI Library в рабочую область.
(?) UI Library — достаточно громоздкая штука. Настроить её положение на экране можно в меню View → UI Library.
Сразу после добавления элемента появляется окно Inspector, в котором мы видим только те настройки, которые нужны для кастомизации выбранной детали интерфейса. Например, если мы работает с тумблером, то Balsamiq предложит нам 2 возможных состояния именно для тумблера.
Если мы выберем несколько элементов, то сможем отредактировать только общие параметры (например, цвет) и воспользоваться инструментами выравнивания, знакомыми нам по wireframe.cc или любому другому графическому редактору.
(?) Если постоянно возникающее окно Inspector мешает вам работать, закрепите его на панели UI Library: View → Dock Property Inspector.
СимволыПредставьте, что вы сделали 25 экранов приложения, а потом решили поменять местами иконки в верхнем меню. Сделать регулярно используемый объект символом — гораздо проще, чем вносить изменения вручную. Для этого вам понадобится:
Выделить необходимые объекты и, нажав Ctr/Cmd + G, создать из них группу.
Назвать элемент и нажать Convert to symbol.
После этого символ появится во вкладке Project Assets в UI Library. Чтобы отредактировать его, достаточно будет нажать Edit Source в « Инспекторе элементов», и изменения автоматически применятся ко всем копиям символа. Чтобы изменить одну конкретную копию, достаточно дважды на неё кликнуть. Но не забудьте выбрать отредактированный символ и нажать Break apart в «Инспекторе элементов», в противном случае при редактировании исходного символа изменения будут применены и к только что изменённому нами.
Несколько советовНужно размножить выбранный элемент так, чтобы каждый следующий появлялся на заданном расстоянии от предыдущего? Выберите элемент, нажмите Ctrl/Cmd + D, перетащите появившуюся копию на необходимое расстояние и нажимайте эту же комбинацию клавиш столько раз, сколько нужно.
Чтобы создать ссылку, достаточно выбрать элемент и в Inspector назначить файл, на который необходимо перейти по клику. В выпадающем списке вы увидите только те bmml-файлы, которые хранятся в той же папке, что и редактируемый в данный момент макет.
Для того чтобы воспользоваться ссылками, нужно перейти в режим презентации View → Presentation mode.
Остальные базовые функции в Balsamiq либо интуитивно понятны, либо ничем не отличаются от описанных на примере wireframe.cc.
Sketch [Mac] Photoshop + Illustrator — всё, что вам не нужноЕдинственная причина, по которой Sketch можно отнести к инструментам для проектирования, — это его простота. На самом деле его возможностей хватает для создания полноценного, готового к разработке дизайна, но, в отличие от Photoshop и Illustrator, вам не понадобится покупать учебник в трёх томах и записываться на полугодовые курсы. Дело в том, что ни один из ныне существующих продуктов Adobe не задумывался для веба. Бывшие графические дизайнеры по инерции продолжили пользоваться знакомыми им программами, привыкли не обращать внимания на тонны ненужных им функций и изобрели сложную систему «костылей» для подготовки макетов. Безоговорочное лидерство монструозных инструментов задрало планку входа на рынок веб-дизайна на неоправданную высоту. Давайте-ка бросим вызов Adobe и научимся делать красиво без них.
АртбордыКачаем триальную версию Sketch, создаём новый документ и добавляем свой первый артборд, то есть пространство, в котором мы будем рисовать.
Для создания артборда вы можете как выделить определённую область, так и выбрать один из распространённых размеров в Inspector справа.
Не удивляетесь, если экран вашего iPhone кажется вам явно меньше предложенного «Скетчем» артборда. Дело в том, что пиксели на дисплее retina где-то в 2 раза меньше пикселей на экране вашего компьютера, и на небольшой (если мерить в сантиметрах) экран их помещается в среднем в 2 раза больше. Просто уменьшите масштаб до 50 %.
Библиотеки символовВозможности Sketch позволят вам самостоятельно нарисовать дизайн практически любой сложности, например, автор этой иконки утверждает, что работал со Sketch чуть больше месяца:
Но на изучение необходимых инструментов «Скетча» придётся потратить 3-4 часа, а для наших текущих целей этого многовато, поэтому воспользуемся шаблонами:
File → New From Template → iOS UI Design.
Наш предыдущий макет никуда не делся, просто мы открыли ещё один. Если интересно, читаем содержащуюся прямо в макете инструкцию, если нет — сразу открываем страницу с символами, кликнув по надписи Welcome в левом верхнем углу. Переходим на страницу Symbols, запомнив при этом, что страниц в макете может быть несколько.
Копируем все символы, выделив артборды по одному c зажатой клавишей shift (при копировании с помощью cmd + a все элементы наложатся друг на друга), нажимаем Cmd + C, ждём пару секунд и возвращаемся в наш макет. Создаём новую страницу, кликнув на название этой страницы и нажав плюс в самом низу выпавшего списка. Вставляем символы, нажав Cmd + V.
Выбираем Menubar Title, копируем его, возвращаемся на первую страницу и вставляем. Уже знакомые нам направляющие линии помогают поставить элемент туда, куда нам надо. Возвращаемся к символам и дважды кликаем на Navigation bar.
На панели управления элементами слева мы видим «внутренности» символа. Так как весь он нам не нужен, зажав Cmd или Shift выделяем три нижних элемента: Line, Background и Gradient Background, копируем на первую страницу.
Новые элементы перекрыли вставленный ранее символ, но это легко поправить: просто перетаскиваем элемент, который хотим видеть на первом плане выше тех, что нужны нам на фоне.
Давайте заменим текст в верхней плашке на название нашего приложения. Пусть это будет Prankr, приложение для телефонных хулиганов. Заработать на этом вряд ли получится, но у нас всё ещё впереди. Сразу скопируем наш артборд, чтобы с помощью этой болванки проще было делать следующие страницы и в первом артборде клонируем нижнюю строчку меню, чтобы получилось примерно вот так:
Импорт элементов и работа с нимиНа самом деле никакого импорта нет. Мы просто берём нужную нам картинку и перетаскиваем в Sketch. Если ищем иконки — ищем их в SVG, изображения этого формата мы сможем редактировать так, как нам надо. Я взял вот эту иконку телефона, уменьшил её размер, нажал «+» в «Инспекторе элементов» на вкладке Borders, тем самым добавив обводку элементу; обводку сделал потолще, а заливку убрал, сняв галочку около чёрного прямоугольника с надписью Fill. Получилось нечто отдалённо напоминающее дизайн iOS 7.
Возьмём несколько фотографий друзей и перетащим их в Sketch. Вставим овал поверх лица (Insert → Shape → Oval). Чтобы получился идеальный круг, растягивая овал, держим клавишу Shift или просто подгоняем размеры в Inspector справа. Там же делаем круг полупрозрачным, выставляя значение Opacity на 50 %.
Зажав Shift выбираем фотографию и овал и нажимаем кнопку Mask на верхней панели. Получаем круглую аватарку, повторяем эти действия с ещё одной фотографией.
Аватарки надо подписать. Мы можем воспользоваться стандартным инструментом Text, но, так как мы работаем с шаблоном, лучше использовать заготовки с подобранными шрифтами и кеглями.
Кликаем в область, в которой хотим разместить текст, и пишем имена. Используя уже знакомые нам инструменты и подходы, делаем из верхней плашки кнопку «Добавить контакт для розыгрыша». Неплохо будет, если немного скруглить углы плашкам, для этого выбираем все через Shift и двигаем ползунок радиуса:
Тем временем нам приходят в голову новые идеи функций нашего приложения. Если мы не хотим в итоге запутаться в своём же макете, стоит сразу начать группировать элементы. Для этого выделим их и нажмём Cmd + G, после чего дадим группе название, по которому любой человек сможет догадаться, что за элемент перед ним.
Чтобы научиться собирать интерактивные прототипы, нам понадобится сделать второй экран. Пусть это будет экран добавления контакта для розыгрыша. Перенесём группу на второй артборд, сделаем двойной клик по ней и выберем иконку плюса. С помощью инструмента Rotate развернем её так, чтобы получился крестик, нажатие по которому будет возвращать нас к предыдущему состоянию.
Если мы будем держать зажатым Shift, то вращать фигуру сможем кратно 45 градусам. Если понадобится, поправить угол можно будет на панели справа.
Выберем элемент Background и продублируем его на расстоянии в пару пикселей от первого, чтобы как бы отбить нижеследующую зону, но как бы не отбивать. Выглядит неплохо, но круглые углы всё нам портят. Кликаем дважды на элемент, чтобы поверх углов появились кружки, выбираем нужные нам углы и убираем радиус. Так-то лучше.
На самом деле с углами и линиями можно делать гораздо, гораздо больше, Sketch — это полноценный векторный редактор, но пока это нам не нужно. Нам нужно побыстрее заканчивать с макетом. У меня получилось как-то так:
Из того, что мы не умеем, я применил всего один приём: чтобы быстро изменить цвет элемента на уже имеющийся, выберите его, нажмите Ctrl + C и кликните на нужный цвет. Причём цвет может быть как в макете, так и в соседнем окне браузера.