Balsamiq Mockup — отличное приложения для создания мокапов. Ниже небольшой набор правил которые я для себя установил при работе с этим приложением.
Библиотека символов
Однако в нем не совсем очевидно сделана работа с библиотекой символов:
- Их нельзя использовать совместно между разными проектами;
- Нельзя легко создать специальный файл с библиотекой;
- Нельзя обновлять библиотеку так, чтобы обновлялось везде.
Последнее в принципе понятно, т.к. в этом случае не будет работать версионирование: если я поменяю символ в библиотеке, то старый макет перестанет выглядеть так, как он выглядел тогда.
При всем этом есть возможность импортировать bmml-файл с символами. Чтобы получить этот файл сначала нужно сделать Export в bmml zip формат любого проекта, в котором есть каталог символов. Дальше zip-файл нужно разархивировать.
После этого нужно создать каталог Dropbox\Mockups\Symbol Library и внутрь поместить файл Feed Symbol Library.bmml, который взять изнутри zip-файла. Рядом с этим файлом нужно создать каталог assets в который скопировать все картинки, которые в zip-файле лежат рядом с bmml-файлом.
Теперь можно импортировать этот bmml файл в свой проект и библиотека символов окажется в этом проекте. Ее можно использовать.
Идеально если не ведется параллельная работа с несколькими проектами. Тогда при завершении очередного проекта нужно сделать экспорт и обновить библиотеку. После чего начинать работу над новым проектом с импорта библиотеки.
Если библиотека была обновлена, то при повторном импорте будет предложено выбрать какой символ обновить, а какой оставить таким какой он есть. Тем самым можно поддерживать версионирование.
Со временем чтобы действительно поддерживать версионирование я сделал git init в каталоге символов. Теперь значительно удобнее делать diff изменений как по asset-файлам, так и по самим bmml файлам.
Символы
Со временем сами символы в библиотеке тоже могут меняться. И тут возникает вопрос. Нужно ли в библиотеке хранить старые варианты символов или нужно хранить новые. Как пример есть блок справа на всю высоту. Со временем высоту блока справа мы умеьшаем и там появляется еще один блок. Нужно ли для первого блока оставлять старое название, а версии с уменьшенной высотой давать новой название или можно просто отредактировать под свои нужды и все. Я пока решил что буду редактировать текущий символ в библиотеке. Библиотека должны быть набором актуальных символов, а не архивом всего-всего. При необходимости нужный символ можно будет восстановить из более старых макетов.
В текущей версии 3.4.x нет двух очень нужных вещей:
Символы внутри символов
Очень не хватает возможности использования символов внутри символов. То есть строить иерархию интерфейсов не получается. Как пример у меня есть чекбокс с текстом. Я хочу сделать из него символ чекбокс+текст, который просто использовать внутри других символов. Приходится делать break down символу чтобы включить его в более общий интерфейс.
Плейсхолдеры или переменные
Еще одна вещь которой очень не хватает — возможность задавать свойства. Так чтобы из символа получался настоящий контрол.
Например я задал вместо конкретного текста переменную {$text}. И в свойстве символа появилось бы поле для ввода текста. Это очень облегчило бы задачу по созданию повторяющихся элементов с немного разными свойствами. Например чтобы текст отличался и макет выглядел более реалистично.
Можно конечно сделать override свойств символа, но тогда теряется смысл — он перестает выглядеть как символ в библиотеке и обновляться. Кстати что совсем печально — установка свойства Link тоже приводит к тому что символ считается переопределенным.
Поэтому помучившись я пришел к следующему решению. Все такие переопределения я делаю слоем сверху. Немного неудобно, но в итоге возникает меньше неприятных побочных эффектов.
Очень хорошая библиотека готовых символов
Стандартная библиотека не очень большая, но есть отличный проект https://mockupstogo.mybalsamiq.com/projects в котором очень большое количество всевозможных контролов и символов.
Продолжение следует…