Как я работаю с Balsamiq Mockup


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 в котором очень большое количество всевозможных контролов и символов. 

Продолжение следует… 

Нашли ошибку? Выделите и нажмите Ctrl+Enter.

Оставьте комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *