Оптимизация файлов эскизов: уроки, извлеченные при создании приложения Reduce (пример из практики)

Sketch ввел совершенно новые стандарты размеров файлов. Вы больше не видите 10-гигабайтные файлы Photoshop повсюду. Тем не менее, существуют огромные файлы Sketch, и они замедляют работу Sketch. В результате снижается и ваша продуктивность.

Давайте будем честными: это не файлы дизайна, которые становятся больше по волшебству. Именно дизайнеры заполняют свои файлы неиспользуемыми, неоптимизированными и скрытыми элементами, которые занимают лишнее место.

Мы столкнулись с этой проблемой в нашем стартапе Flawless App. У нас обычно есть отдельный файл Sketch для каждого продукта. Под «продуктом» я подразумеваю наше основное приложение с панелью меню, веб-сайт, социальные материалы, пресс-кит, иллюстрации к статьям в нашем блоге на Medium и так далее. Эти файлы со временем сильно разрастались из-за постоянных итераций и тестирования различных дизайнерских решений. В результате Sketch становилось все труднее и труднее управлять ими с должной производительностью.

Как и любой другой инженер, мы решили написать небольшой скрипт, который автоматически очищает и оптимизирует файлы Sketch.

Скрипты — это здорово, если вы говорите на том же языке, что и Терминал. В конце концов, мы решили, что нам нужен более человеческий подход, чтобы больше людей из команды могли его использовать. Мы также хотели сделать его бесплатным и общедоступным позже.

Первый прототип

Перед рисованием пользовательского интерфейса я имел в виду несколько абстрактных концепций. Основная цель состояла в том, чтобы сделать что-то, что всегда будет у нас под рукой и позволит максимально быстро оптимизировать файлы. Приложение строки меню было очевидным выбором:

1. У нас уже была внутренняя структура для приложений панели меню с множеством реализованных пользовательских функций. Чтобы дать вам некоторую информацию: наш основной продукт, Flawless App, представляет собой приложение строки меню, которое сравнивает ожидаемый дизайн с реализацией разработчика в режиме реального времени. Эта внутренняя структура была создана для нашего основного продукта.
2. Вы можете использовать приложение строки меню, даже если Sketch не открыт.
3. Разработка собственного приложения для macOS была для нас намного быстрее, чем плагин Sketch с CocoaScript (благодаря нашему предыдущему опыту).

Также было важно дать пользователю возможность переключать различные параметры оптимизации для разных файлов.

Вот самый первый вайрфрейм, нарисованный на старомодной бумаге, без причудливых инструментов прототипирования.

Усвоенный урок № 1

Прежде чем делать какой-либо пользовательский интерфейс, прототипы в причудливых инструментах или даже вайрфреймы на бумаге, подумайте, каких целей вам нужно достичь с помощью дизайна. Кто будет его использовать и как пользователь будет взаимодействовать с приложением.

Цветовая палитра и типографика

Обсуждая с командой, мы не обнаружили каких-либо критических проблем с UX в каркасах. Я начал с создания цветовой палитры и выбора схемы шрифта.

Я хотел, чтобы приложение было легким и визуально отличалось от нашего основного продукта Flawless App. Итак, у меня получились следующие палитры:

Первая строка предназначена для цветов текста (плюс светлый фон в начале). Второй ряд предназначен для акцентных цветов. Все цвета были получены из одного основного акцентного цвета путем применения простых правил цветовой системы HSB (H означает оттенок, S — насыщенность и B — яркость).

Допустим, у нас есть базовый цвет #4A90E2 (синий), который равен (212, 67, 89) в HSB. Чтобы получить немного более темный цвет, нам нужно уменьшить яркость, увеличить насыщенность и немного сдвинуть оттенок. Таким образом, мы получим #2477C9, то есть (210, 82, 79) в HSB. Я использовал тот же подход для всех других цветов.

В конце концов, я выбрал первую цветовую палитру (оранжевый). Файлы Sketch и логотип Sketch тоже оранжевого цвета, поэтому с ними наше приложение выглядело бы более органично.

Усвоенный урок № 2

Цвета всегда были для меня сложными. Обычно я трачу много времени на поиск нужного цвета. Вот несколько ресурсов, которые я использую почти ежедневно, чтобы помочь мне исследовать цвета:

• Adobe Kuler может помочь вам найти цветовой компаньон для любого цвета.
• Khroma — это инструмент на основе искусственного интеллекта для создания цветовых палитр на основе ваших предпочтений.
• Статья Эрика Кеннеди «Цвет в дизайне пользовательского интерфейса: (практическая) структура» — настоящая жемчужина. Я прочитал его около восьми месяцев назад, и с тех пор я использовал цветовую систему HSB гораздо больше, чем RGB в Sketch.

Что касается типографики, в большинстве случаев лучше всего использовать шрифт по умолчанию для собственного приложения macOS, если только вы не создаете что-то супер-нестандартное. Время рендеринга сокращается, и его легче реализовать во время разработки. Но я был так взволнован возможностью попробовать Монтсеррат в родном приложении для macOS, что не смог устоять.

Усвоенный урок № 3

Есть много отличных ресурсов для изучения шрифтов. Тем не менее, я использую старомодные Google Fonts, чтобы получить представление о том или ином шрифте.

Первая итерация дизайна

Я начал именно с того, что нарисовал в начальном каркасе. Вот общий поток пользователей в приложении:

1. Перетащите файл Sketch.
2. Выберите параметры оптимизации.
3. Уменьшить выбранный файл.
4. Сохрани это.

Я делал проекты в Sketch, и меня полностью устраивал пользовательский интерфейс. Поскольку раньше я разрабатывал приложения для панели меню, размер текста и поля были для меня вполне стандартными. Тем не менее, в первой итерации были некоторые заметные проблемы, о которых я расскажу позже.

Усвоенный урок № 4

Если вы никогда раньше ничего не проектировали для macOS, обязательно ознакомьтесь с комплектом Facebook Desktop Design Kit. Там вы найдете все общие элементы пользовательского интерфейса macOS. И это даст вам представление о размерах и смещениях элементов пользовательского интерфейса. Для приложения строки меню macOS размер шрифта от 12 до 14 пунктов является абсолютно нормальным.

Проблема № 1: пропущенное состояние

Все было отлично, за исключением того, что я забыл построить состояние посередине, когда приложение будет обрабатывать файл Sketch. Как я знаю по опыту, пропущенное состояние на этапе проектирования равняется головной боли на этапе разработки.

Как часто разработчики жалуются, что дизайнеры работают в вакууме? Вы знаете, они говорят о проблемах с отсутствующими состояниями в середине, пустыми состояниями, использованием идеальных наборов данных и так далее.

Усвоенный урок № 5

Перед отправкой дизайна разработчикам убедитесь, что вы ничего не забыли. Убедитесь, что вы указали все состояния, чтобы разработчики не спрашивали вас позже: «Как это должно выглядеть в [каких-то особых условиях]?» Хороший способ найти такие пропущенные состояния — использовать инструмент прототипирования. До сих пор плагин Craft для Sketch (созданный Invision) с его функцией прототипирования является самым быстрым способом проведения такого тестирования.

Проблема № 2: Слишком много пользовательских элементов

Вы почти всегда будете проектировать для конкретной платформы. В нашем случае это была macOS. И в macOS уже есть несколько стандартных элементов. Поэтому, если ваш продукт не будет работать без индивидуального решения, используйте стандартные элементы там, где они имеют смысл. Разработчики также будут вам благодарны.

Помня об этих мыслях, я удалил пользовательские флажки и заменил их на стандартные. Я также упростил окно прогресса, удалив все ненужные пользовательские индикаторы.

Усвоенный урок № 6

Чтобы получить представление об элементах по умолчанию для каждой платформы, я предлагаю просмотреть эти материалы:

• iOS: ресурсы Apple по дизайну пользовательского интерфейса, доступные для Sketch, Photoshop и Adobe XD.
• Android: комплект материалов для дизайна
• macOS: настольный комплект Facebook

Проблема № 3: Недостаточно акцента в конце

После пары сеансов обратной связи с командой стало ясно, что финальный экран перегружен. Не было никаких указаний на то, насколько размер файла изменился после оптимизации. Итак, я сделал отдельный экран с красивой иллюстрацией сжатого файла и меткой с информацией о размере файла.

Усвоенный урок № 7

Мы используем Slack как основное место для общения. Send to Slack — это небольшой плагин, который передает артборд из Sketch напрямую в канал Slack. Это было очень удобно для сеансов обратной связи с командой. Делитесь чаще, делитесь чаще.

Выпуск № 4: Большие маленькие детали

Описанные ниже проблемы были обнаружены во время разработки. Но я все равно размещу их здесь, чтобы сохранить структуру статьи.

Я начал реализовывать дизайн. Сразу после первого запуска я понял, что у пользователя нет возможности выйти из приложения.

Мы также хотели распространять наше приложение по собственным каналам, а не через Mac App Store. Поэтому для нас было критически важно добавить в приложение систему автообновления. И пользователь должен иметь возможность видеть текущую версию и проверять наличие обновлений. В итоге я получил меню, в котором эта информация и дополнительные действия представлены в одном месте.

Последней упущенной деталью стала функция закрытия оптимизированного файла и возврата на главный экран без сохранения. Я добавил ту же кнопку «закрыть», что и в окне «список оптимизаций» в правом верхнем углу.

Усвоенный урок № 8

Тесное сотрудничество с разработчиками всегда полезно. Даже в моем случае, когда один и тот же человек занимается дизайном и разработкой, сложно сразу увидеть все проблемы. Мне пришлось начать сборку, чтобы увидеть эти функциональные проблемы. В любом случае, постарайтесь привлечь разработчиков как можно скорее. Вы можете получить много ценной информации о функциональных вещах.

Подготовьте дизайн к разработке

В конце концов, итерации дизайна были закончены. Ну, с технической точки зрения, итерации дизайна никогда не заканчиваются. Итак, допустим, мы достигли достаточно хорошего состояния, когда можно переходить к разработке.

Перед реализацией дизайна я зафиксировал расстояние между элементами, убедившись, что все элементы выровнены по 4-пиксельным направляющим. Такое ориентированное на гидов мышление окупится на этапе разработки.

Усвоенный урок № 9

Когда все элементы выстроены правильно, время разработки значительно сократится. Поскольку я также отвечал за разработку, я получил все свойства непосредственно из Sketch. Но определенно имеет смысл убедиться, что все элементы находятся в правильных местах, что все цвета взяты из одной палитры и что активы готовы для нескольких разрешений.

Логотип и имя

И последнее, но не менее важное: название для нашего приложения появилось довольно быстро. Мне на ум пришли два слова: «уменьшить» и «уменьшить». Я проверил Product Hunt, и слово «уменьшение» уже использовалось, поэтому мы выбрали «уменьшить».

Логотип был для меня настоящей борьбой. Поскольку это приложение для строки меню, мне пришлось сначала создать значок для строки меню.

Поскольку значок строки меню должен быть размером 16 × 16 пикселей, лучше не использовать какие-либо крошечные элементы. Иконка должна быть различимой и в то же время разборчивой.

После нескольких дней борьбы с простыми формами я сдался и открыл раздел «Избранные» в Google Fonts. Я искал красивый изогнутый шрифт, который бы хорошо подходил для логотипа (а также для значка строки меню). В конце концов появился шрифт Pacifico, и он идеально подходил для наших целей.

Усвоенный урок № 10

Помните, что в macOS есть две версии строки меню: темная и светлая. Подготовьте значок в строке меню для обоих. Кроме того, проверьте, как ваш значок работает с фоном выбора по умолчанию. По умолчанию, когда пользователь нажимает на значок строки меню, macOS выделяет его тем цветом, который пользователь выбрал в своих общих настройках. (У Apple есть отличное руководство по цветам в macOS.) Чтобы протестировать его, я создал символы для всех цветов по умолчанию, чтобы можно было переключаться между ними и смотреть, как значок выглядит с разным фоном.

Используя акцентные цвета из исходной цветовой палитры, я поместил букву «R» в круг с крошечной изогнутой рамкой. На тот момент логотип меня вполне устраивал.

Заключение

Есть еще много возможностей для улучшения. Как я уже говорил, итерация дизайна никогда не заканчивается. Но если вы будете повторять бесконечно, продукт навсегда останется мокапом. Доставка лучше быстрая. Короткие итерации означают более быструю обратную связь, а более быстрая обратная связь означает лучший продукт. Приложение Reduce было сделано за полторы недели, потому что нашей главной задачей было сделать его быстрым и полезным.

Мы получили много положительных отзывов от нашей команды. Оказывается, приложение строки меню намного быстрее и понятнее в использовании, чем скрипт терминала. Кроме того, во время нашего публичного запуска сообщество дало нам много идей о функциях, которые мы могли бы реализовать дальше, и о том, как мы можем улучшить приложение.

Вот подведение итогов того, чему мы научились при создании приложения Reduce:

• Прежде чем создавать каркасы или прототипы, подумайте о целях и вариантах использования продукта.
• Используйте такие инструменты, как Adobe Color и Khroma, чтобы быстрее выбрать правильную цветовую палитру. Базовое понимание цветовой системы HSB также поможет.
• Не бойтесь экспериментировать с пользовательскими шрифтами.
• Каждая платформа имеет свой собственный набор стандартов. Изучите их перед проектированием.
• Используйте инструмент прототипирования, чтобы получить представление о полном потоке.
• Не перегружайте свой дизайн пользовательскими элементами. Иногда лучше придерживаться элементов управления по умолчанию для данной платформы.
• Получите отзывы о своем дизайне как можно раньше.
• Привлекайте разработчиков как можно раньше. Вы можете получить ценную информацию о функциональных элементах и ​​о том, сколько времени уйдет на реализацию этой «маленькой градиентной кнопки со спиральной анимацией».
• Используйте стандартную сетку платформы, чтобы выровнять все элементы. Разработчики скажут вам спасибо за это позже.
• Протестируйте свой дизайн для различных вариантов использования (например, светлая и темная строка меню), прежде чем завершить работу над пользовательским интерфейсом.

Если вы считаете, что приложение Reduce также может упростить вашу жизнь (и ваши файлы Sketch), вы можете скачать его бесплатно. И, пожалуйста, дайте нам обратную связь. Мы считаем, что это самое ценное, что можно получить от пользователей.