Zeplin — это инструмент для совместной работы команды дизайнеров и разработчиков продукта. Цель этого приложения — по максимуму исключить неточности, передать максимальное количество информации, спецификаций и исходников при минимальных затратах сил и времени. В результате вы сможете спокойно двигаться к конечному продукту, без каких-либо сторонних каналов информации, все будет собрано в одном месте.

Я большой поклонник Zeplin с самого его рождения, пользуюсь им уже почти 2 года. За это время я изучил приложение вдоль и поперек, и избавился от необходимости делать какие-либо спецификации вручную. Фидбек от разработчиков в команде был всегда положительный, хотя раньше это было нашим больным местом — они постоянно просили меня пояснить тут и там, теряли исходники и т.д.

Несмотря на все вышесказанное, всегда были вещи, которые негативно отражались на моем рабочем процессе, замедляли мою работу или попросту были невозможными в текущей версии (на момент написания этого поста). Я начал выписывать все проблемы, собирать отзывы от других дизайнеров и разработчиков, и пытался найти решения для конкретных проблем. Все мои наблюдения собирались с macOS El Capitan, так как я точно знаю, что минимум одна проблема точно решена в приложении под Windows.

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

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

Предупрежу на всякий случай: это будет долго.

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

Когда я переключаюсь со Sketch на Zeplin, я всегда замечаю интерфейс. И особенно в приложении, где погружение (контент — экраны, работа, которую я делаю) играет ключевую роль, я не должен отвлекаться на UI. Не потому, что он некрасивый или не справляется со своей задачей, а просто потому, что он внешне очень сильно отличается от всего другого ПО, которое я использую. И я понимаю, что вы бы хотели добавить немного персональности и характера, но это не единственный путь. Есть несколько способов сделать приложение отличным от других (на примерах Sketch или 1Password), полная замена всех родных элементов — самый легкий путь.

Я буду публиковать скриншоты приложения, писать о недостатках и выдавать свое видение решения вместе с обоснованием (Я использую скрины Spotify в качестве примера экранов моих дизайнов и анонимизированные скриншоты для текущих версий):

Дашборд

Zeplin дашборд
Текущий вид дашборда

Изображение профиля

Zeplin показывает мой юзерпик в виде кнопки в правом верхнем углу. Главная функция этой кнопки — разлогиниться или редактировать настройки профиля (юзерпик, электронный адрес, пароль и платежная информация). И ни первое, ни второе не являются частым действием пользователя. Уведомления или элементы навигации, такие как кнопка “Назад” — являются. Шапка — слишком дорогое место для размещения кнопок, которые вряд ли кто-то нажмет. Я бы предположил, что это своего рода шаблон в стиле веб, так как этот тип действий лучше подходит к строке меню (в “Files” уже есть Logout), а знание, какой пользователь залогинен на данный момент, важнее при обзоре сессий, чем в десктопных настройках. Поэтому я бы посоветовал убрать эту кнопку, и переместить функционал в строку меню.

Иконки экранов

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

Теги

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

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

Экраны

Одной из проблем c представлениями экранов является невозможность выделить и скопипастить заголовки, если нужно упомянуть его где-то в сторонних каналах или быстро переименовать тот же экран в Sketch. Как я ранее говорил, названия экранов обычно длинные, и они имеют разное окончание в зависимости от состояния. Быстрое переименование экранов — еще одна моя больная мозоль, так как кликнуть правой кнопкой мышки и отыскать нужную опцию в контекстном меню быстро — далеко не всегда удобно. В Finder macOS использует медленный двойной клик для переименования файлов, что на деле очень удобно.

Обновления

Самым больным местом в Dashboard я считаю недостаток фидбека в плане обновлений и действий. Центр уведомлений (справа сверху) по идее должен быть неплохим решением для всех последних изменений, в нем можно пролистать обновления для поиска конкретного. Но в плане обзора, что и где изменилось, какие заметки были добавлены и на какие получены ответы, — этого очень не хватает. Показывать, какие экраны важны — одна из задач, которую должен выполнять Dashboard.

Мое предложение по редизайну дашборда выглядит так:

Редизайн дашборда Zeplin
Редизайн дашборда (экраны отображают разные состояния, как например “Выделение” или “Режим редактирования”)

Мой вариант решает все вышеперечисленные недостатки:

  • Экраны представлены с реальным соотношением сторон, поэтому проще видеть полную картину, вместо того, чтобы полагаться на частичный обзор.
  • Заголовки экранов теперь крупнее, и показывается большее количество знаков, так как разрешается еще 1 строка.
  • Заголовки экранов можно переименовать медленным двойным кликом прямо в дашборде (без контекстного меню и открытия дополнительного диалогового окна).
  • На экранах есть иконки, показывающие, есть ли комментарии касательно экрана.
  • Пользователи могут навести на иконку, чтобы увидеть все записи, добавленные к этому экрану. Новые комментарии можно отображать подсвеченной иконкой (посмотрите на 03 Search, где есть минимум 1 новый комментарий).
  • Обновленные экраны (через импорт) обозначены индикатором в виде синей точки рядом с их названием, точно как на домашнем экране iOS или непрочитанные письма в приложении Mail.
  • Теги теперь можно создавать быстро с помощью простой кнопки, и можно создавать пустые теги.
  • На тегах есть количественный индикатор, показывающий число тегированных экранов.

Первые 3 тега — новая опция для удобства работы, я позже объясню ее, когда мы перейдем к экрану Detail (Детали) раздела Notes (заметки).

Есть некоторые изменения в боковой панели, но так как это не меняет взаимодействия, а имеет лишь визуальный характер, мы не будем вдаваться в детали. Только одно пояснение: я добавил много белого пространства (более, чем необходимо) и попытался четче отделить разделы друг от друга. Визуальный шум в некоторых представлениях этого приложения слишком ощутим. Дашборд от этого не сильно страдает, а вот некоторые экраны деталей — да, поэтому я поясню использование разделителей: если контент хорошо сконструирован и не сильно меняется, вы всегда можете использовать свободное пространство и разумное макетирование для отделения разделов друг от друга. Несмотря на это, разделители (нередко) позволяют усилить макет. В Material Design guidelines есть отличная глава о разделителях, и я использовал их в полном соответствии с этими нормами в своем редизайне:

Разделители без полей отделяют неоднотипный контент (например, детали биографии от контактных данных) или элементы контента (например, пункты списка) как в макетах списков, так и в макетах страниц. (…)

Вложенные разделители отделяют контент одного типа, например разделы в списке контактов или письма в ветке писем. (…).

Экран Detail Info

Экран подробной информации Zeplin
Текущий экран Detail (Info)

Перед началом разбора недостатков экрана Detail поговорим о том, что вы уже могли заметить на моем предыдущем редизайне: я не менял родную структуру макета и навигацию — строка заголовка, раздел основного контента, боковая панель. Я думал о возможных изменениях, но всегда приходил именно к такой структуре, так как она действительно неплохо продумана. Имеет смысл в главном фокусе расположить экраны, а всю дополнительную информацию поместить сбоку, разделить на соответствующие разделы, но чтобы она всегда была под рукой. Такой формат также напоминает интерфейс Sketch (откуда, скорее всего, в Zeplin и приходит большинство пользователей), поэтому к такой структуре легко и быстро привыкается.

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

Представление экрана

Экран сам по себе и кружки с уведомлениями мне очень нравятся, я бы разве что немного увеличил эти кружки, чтобы по ним было проще попадать пальцами. Вот и все. Что насчет доступности? Первым обнаруженным больным местом было использование клавиатуры. Для продвинутых пользователей использование горячих клавиш — очевидная необходимость в работе с приложением, и эта функция в какой-то степени существует, но что насчет стандартного использования клавиатуры?
Передвижение по экранам только с помощью кнопок навигации возможно, если они прямо последовательны друг другу, но если мне надо перепрыгнуть на 10 или 15 экранов? Мне понадобится быстро перейти на Dashboard и передвинуться на нужный экран. Сейчас мне надо либо кликнуть на кнопку “назад” вверху слева, либо воспользоваться горячими клавишами (что быстро, но не так интуитивно, как должно быть). Решением может быть использование кнопки Escape для перехода с экрана Detail на Dashboard, передвижение с помощью кнопок навигации и нажатие Enter на нужном экране для входа в детальный обзор экрана снова. Так как на экран Project попадаешь только при переходе между проектами, что не так часто происходит, центральным хабом выступает именно Dashboard. И пользователи должны иметь возможность быстро переходить туда-обратно, используя базовую навигацию (Enter для входа, Escape для выхода — возврата назад на один шаг в навигационной иерархии) между хабом и ответвлениями.

Опции просмотра экрана

Опции просмотра экрана Zeplin

У нас есть 4 отличных элемента интерфейса внизу, все в виде кнопок. Когда я хочу использовать эти кнопки, мне нужно метить очень аккуратно, так как области касания очень маленькие (также кнопки фактически накладываются на скроллбар из-за нехватки границ, что, как я полагаю, является стандартным в macOS).

Я сравнил их с родными кнопками macOS:

кнопки
Слева Zeplin (20pt), справа — родные кнопки macOS (22pt — El Capitan)

Они всего на 2pt больше (20 pt и 22pt), но я думаю, причина, по которой эти кнопки выглядят намного меньше, а следовательно, их труднее нажимать, заключается в том, что они немного невыразительно прорисованы, в них не хватает интуитивности родных кнопок (границы, разные тени для симуляции глубины, фоновый градиент, более высокий контраст на тексте). И хотя разница в размере небольшая, все эти нюансы вместе делают разницу гораздо ощутимее. Я не большой фанат этих крошечных кнопок в macOS, мне бы хотелось сделать кнопки на пару пунктов крупнее, чтобы было проще нажимать.

Иконки Zeplin

Источник: Почему иконка share всегда такая разная?

Когда я впервые увидел кнопку next (вперед), я тут же подумал об опциях расшаривания, так как она очень напоминает более старые иконки для расшаривания, но пртестировав, я был удивлен, так как обнаружил опцию “Pop Screen Out”. Я никогда не пользовался этой опцией. Она больше предназначена для разработчиков, которым нужно сравнивать экраны, и лично я не большой фанат абсолютной “попиксельной идеальности” (звучит странно, учитывая мою недавнюю тираду о паре пунктов в размере кнопок). Но на своем опыте скажу, что такого рода перфекционизм вряд ли когда-либо достигается в силу огромных отличий между графическим представлением желаемого конечного продукта и реальной реализацией ПО (я говорю это вам, настройки текстового макета Sketch). Так что если текст на пару точек сдвинут к верху, приложение точно не рухнет.

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

Текстове метки Zeplin
Текущий экран Detail: если нажать кнопку “+”

Следующая кнопка очень странная, так как по виду она совсем не то, что на самом деле. Кнопка “+” на самом деле просто отображает подсказку, как добавлять комментарий, а не позволяет добавить его. Очень неожиданное поведение для пользователя. При нажатии на кнопку, я бы хотел добавить комментарий, а не узнать про возможные способы его добавления.

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

Пользовательский интерфейс достаточно чистый, когда он сокращен до основы, и есть всего несколько иконок, и все. Но когда он стает на пути пользователя, пытающегося делать свою работу, интерфейс становится бесполезным. Преимущество дизайна цифровых продуктов по сравнению с физическими продуктами заключается в его интерактивной и адаптивной природе пространства. Мы ограничены только кодом, который сами пишем, и можем реагировать на нужды пользователя непосредственно в этот момент. Вот почему я бы призывал к следованию принципу постоянного сокращения. Идея проста: упрощайте пользовательский интерфейс, убирая любой избыточный “помогательный” контент и визуальные подсказки на основе собранных данных о вашем пользователе. Давайте посмотрим на 2 последних примера: у нас есть фальшивая кнопка, которая прячет длинную текстовую подсказку. Использование мышки или клавиатуры не вызывает трудностей, так почему бы не отобразить подсказку пользователю без необходимости нажимать на кнопку, и спрятать ее сразу после того, как он поймет процесс? Можно, например, убрать подсказку после 3 успешно добавленных комментариев за одну сессию или добавить текст подсказки через неделю отсутствия активности, если не было добавлено ни одного комментария, и убрать подсказку после успешного добавления комментария. То же самое касается кнопки “Pop Screen Out” — не помешало бы добавить текстовую подсказку сразу, чтобы лучше пояснить назначение кнопки, и убрать ее после нескольких успешных взаимодействий. Очевидность всегда побеждает, так что делайте текстовые метки и подсказки на старте, убирая их, как только вы убедились, что пользователю они больше не понадобятся (и показывайте их снова, если пользователи вдруг забыли).

Мы подходим к последней кнопке, моему самому большому непониманию во всем приложении: кнопка для показа/скрывания комментариев. Сначала я хочу похвалить разработчиков за использование забавных обезьянок-эмодзи. Мне правда нравится, эти эмодзи навсегда закреплены в моей памяти за Zeplin. Но, несмотря на это, решение далеко не удачное в плане удобства:

Zeplin Экран Detail
Экран Detail: что есть что?

Эти кнопки на самом деле не кнопки — это переключатель (toggle). Большая разница между кнопкой и переключателем в том, что кнопка описывает действие, которое будет совершено, или направление, куда вы перейдете при ее нажатии (“Cancel”, “Save”, “Back”, “Projects”…), а переключатель описывает текущее состояние интерфейса или настройку (“On/Off”). Кроме того, могут быть примеры переключателей, которые на самом деле действия — например, обычные элементы управления аудио: Проигрывание/Пауза — это переключатель, который показывает не текущее состояние, а действие, которое вы можете совершить. Но двусмысленность — не единственная проблема этого переключателя. Неважно, додумался ли я, что это переключатель, так как даже в этом случае я никогда не узнаю, в каком состоянии я на данный момент нахожусь. Эмодзи настолько крошечные, что их трудно отличить. И даже когда я рассмотрел, открыты глаза или закрыты, я уже забыл, что нужно сделать — нажать, чтобы показать или спрятать комментарии.

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

Боковая панель

Боковfя панель Zeplin

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

Обсудим цель боковой панели в отношении опций просмотра экрана. Опции просмотра экрана отображают набор действий по изменению вида всех экранов в проекте — масштаб, добавление комментариев, показывание/скрывание комментариев. Каждая настройка, которую вы меняете здесь, затрагивает экран, который вы просматриваете, как и все другие экраны (за исключением кнопки “Pop Screen Out”, но было бы логичнее разместить эту кнопку поближе к самому экрану, а не держать ее в сторонке).

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

Также я не уверен насчет наименований опций. Я не могу точно вспомнить, как Photoshop называет макетные опции, но в Sketch опция называется Layout (Макет), а не Grid (сетка). И если я прав в том, что большинство пользователей приходят в Zeplin из Sketch, имело бы смысл придерживаться той же терминологии, чтобы избежать неразберихи.

Я предлагаю такой редизайн первой вкладки экрана Detail:

Редизайн экрана Detail Zeplin
Редизайн экрана Detail
  • Простые взаимодействия с клавиатурой: нажмите Escape для возврата назад на Dashboard.
  • Стандартные кнопки управления macOS (немного крупнее и ярче родных).
  • Добавлен переключатель сетки в виде разворачивающейся кнопки — нажмите на основную область кнопки, чтобы включить или отключить сетку. Нажмите на индикатор дропдауна, чтобы войти в настройки сетки.
  • Я заменил иконку “Pop Out Screen” и добавил метку (вопреки нормам macOS HIG (руководство по созданию интерфейсов) — они выступают за то, чтобы никогда не использовать изображение и метку для командных кнопок)
  • Вставил текстовую подсказку для добавления комментариев (принципы прогрессивного сокращения — подсказка перестанет отображаться, если вы активный пользователь этой опции)
  • Изменил переключатель на командные кнопки, оставил эмодзи-обезьянок и добавил метку, чтобы стало понятно, что происходит при нажатии на кнопку.
  • Разделил разделы боковой панели более явно.
  • Добавил опцию States

Опция: States

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

  1. Вариации / альтернативы одного и того же экрана для продуктовой команды или менеджера, чтобы выбрать конечный вид или
  2. Разные состояния одного и того же экрана. Так как я хочу избегать по максимуму путаницы, в итоге у меня оказалась масса экранов, с которыми динамика интерфейса становится более понятной. Например, “Что произойдет, если проскроллить вниз?” или “Как будет выглядеть окно, если расширить текстовую метку далеко вправо?”.

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

Взаимодействия с этой опцией могли бы начаться прямо в Sketch: парсинг названий слоев помог бы задать паттерны вроде НазваниеЭкрана*НазваниеСостояния, и Zeplin мог бы автоматически группировать все слои с одним и тем же префиксом (а артборд с названием НазваниеЭкрана был бы родительским экраном), а все, что идет за звездочкой, было бы названием состояния.

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

Экран Detail Colors

экрана Detail Zeplin
Текущая версия экрана Detail (Colors)

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

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

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

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

Редизайн экрана деталей цветов Zeplin
Редизайн экрана деталей цветов
  • Я увеличил отображение цветов
  • Добавил пустое пространство между элементами списка.

Экран Detail Assets

Текущая версия экрана Detail
Текущая версия экрана Detail (Assets)

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

Формулировка может сбить с толку: в этом примере Zeplin расценивает каждый отдельный файл как исходник, и можно подумать, что тут только 3 исходника, и в случае экспорта в PNG (5 файлов — mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi  — для каждого отдельного исходника) получится 15 файлов, а не исходников. Я бы не удивился, если бы узнал, что некоторые действительно называют каждый файл исходником, так что это всего лишь маленькая ремарка.

В этом примере есть только несколько исходников, так что посчитать не сложно. И да, вы можете сказать, что количество видно по SVG-исходникам, но все это странные уловки для очень простой проблемы, правда.

Меня также смутил тот же тип неинформативной графики (оранжевый кружок, белый текст) для двух очень разных типов файлов, что потенциально может привести к неожиданным результатам экспорта. Цветовое обозначение разных типов файлов и/или добавление других визуальных подсказок для демонстрации различий между всевозможными типами файлов имеет огромное значение для уверенности в результатах экспорта. Говоря об ожидаемых результатах я твердо настаиваю, что 2 иконки кнопок без текстовых меток (и без функционала кнопок) рядом друг с другом — опасное решение.

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

Редизайн экрана Detail Assets Zeplin
Редизайн экрана Detail Assets
  • Четкое отображение количества исходников на экране
  • Использование метафоры “файл”, иконок и цветов для разделения двух типов файла (PNG = растровый, SVG = векторный), а также добавлены некоторые детали по типу стека файлов для PNG, чтобы было понятно, что там несколько файлов на 1 исходник.
  • Незначительное дополнение функционала: я добавил конечный размер экспорта для отслеживания аномалий.
  • Использование нажимных кнопок с понятными метками позволяет пользователю сфокусировать все внимание на кнопках, и даже не читать ничего слева.
  • Превью исходников отображают корректные границы.

Экран Detail Notes

Текущая версия экрана Detail (Notes) Zeplin
Текущая версия экрана Detail (Notes)

Мы добрались к самому важному аспекту целого приложения для меня: вкладка Notes и заметки на экране. На нее я потратил больше всего времени как дизайнер.

Поговорим сначала о боковой панели: она страдает от того же недостатка разделения между разделами веток обсуждений, как и другие вкладки. Без использования разделителей или контраста не совсем понятно, какие заметки сгруппированы, а какие нет. На начало новой ветки намекает только крошечный пробел между узкими цветными полосами заметок. Кроме того, полное визуальное разъединение в представлении основного контента еще больше затрудняет возможность как-то связать родственные комментарии. Комментарии слева имеют пять основных идентификаторов: фигура (представлена в виде кругов), цвет (каждый комментарий имеет свой цвет заливки с белыми границами), и пространственные опции (отображая легкую падающую тень, создается иллюзия приподнятости), и уникальную текстовую строку (индекс комментария начинается с 1, увеличивается на 1 с каждым новым комментарием, он уникален и никогда не меняется, а также отображает цвет как свою отдельную опцию идентификации). Боковая панель убирает 2 из 4 этих идентификатора — фигуру и пространственные опции), и полностью отделяет цвет и уникальную строку текста, показывая один параметр далеко слева, а второй — далеко справа (также меняется цвет текста и строка с добавлением символа решетки спереди).

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

В начале я упоминал, что Zeplin — это инструмент для совместной работы между дизайнерами и разработчиками. Но это далеко не все, для чего он может использоваться. Я также использую его для общения с продукт-менеджерами или заказчиками, для получения фидбека, обсуждения функционала, идей или просто для оценки ( даже “Отличная работа” сыграет важную роль в понимании, правильно ли я двигаюсь). И хотя Zeplin предлагает разные цвета для комментариев, мне всегда эта опция казалась недостаточно используемой. Цвета можно выбирать произвольно, можно не добавлять никаких меток, что само по себе неплохо, так как позволяет командам создавать свой собственный рабочий стиль, придавая смысл каждому цвету. Но с другой стороны, слишком много кастомизаций сложно оптимизировать, и в итоге создать слаженный рабочий формат может быть проблематично.

Редизайн странички Detail Notes Zeplin
Редизайн странички Detail Notes

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

  • Сократить количество цветов заметок до 3, каждому цвету назначить уникальные метки.

Это будут метки To Do (красный), Comment (синий), Done (зеленый) — RGB рулит.

Отличие между оранжевым и красным, желтым и зеленым всегда вызывали проблемы (особенно для меня, так как я страдаю легкой формой зелено-красной монохромазии — около 10% мужского населения страдает этим расстройством), именно этим и обусловлен выбор таких 3 цветов, так как они обеспечивали отличный контраст.

Каждая новая заметка начинается как красная типа To Do, но потом можно изменять статус на Comment или Done (как и в текущей цветовой системе). Можно назначать исполнителей для заданий, упомянув их при открытии заметки.

Комментарии — это заметки, которые не требуют никаких действий, они используются для пояснения определенного поведения (взаимодействия, анимации, переходы, навигация и т.д.).

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

Этого можно достичь 2 способами:

  1. В боковой панели сделать фильтр, который бы позволял показывать все заметки, только заметки типа To Do, Comment и Done в сегментированном элементе управления, чтобы можно было переключаться между сегметами, а также счетчик, чтобы сразу можно было видеть, сколько заданий ждут выполнения, а сколько уже выполнены.
  2. Как видно на Дашборде, как только добавляются заметки любого типа, автоматически появляются отобранные теги для этой заметки. Эти теги повторяют название заметок, логика реализована так:
    Тег To Do: все экраны как минимум с одной заметкой To Do будут тегированы этим тегом.
    Тег Comment: все экраны с как минимум одной заметкой Comment будут тегированы этим тегом.
    Тег Done: все экраны с минимум одной заметкой Done и без заметок To Do будут тегированы этим тегом.
Редизайн тегов Dashboard Zeplin
Редизайн тегов Dashboard

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

В продолжение привожу изменения в дизайне:

  • Заметки на боковой панели отображают только исходную заметку с индикатором количества ответов. Основные взаимодействия (ответ, изменение типа заметки) и вспомогательные опции (редактирование, удаление) все еще осуществляются на главном представлении контента. Также визуальное разделение заметок в боковой панели и заметок на основном представлении теперь исчезло, так как теперь они выполнены в одном стиле.
  • Попап с заметками на главном представлении контента автоматически открывается для показа области ввода контента. Следовательно, требуется на один клик меньше, чтобы добавить диалог. Я долго думал над тем, куда поместить кнопку для смены типа заметки, и решил поместить ее рядом с полем ввода ответа, чтобы побудить к постингу ответов при изменении типа. Загрузили недостающий исходник? Уведомите других в комментарии.
  • Последний штрих в заметках — дополнительная опция, позволяющая вам связывать экраны в комментариях, чтобы можно было легко перескакивать по экранам. Эта опция могла бы пригодиться для создания простых прототипов навигации в ответ на извечные вопросы типа “Куда ведет эта кнопка?”.

Импорт и загрузка

Импорт и загрузка в Zeplin

Процесс загрузки
Текущий импорт и прогресс загрузки

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

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

Редизайн диалога Import Zeplin
Редизайн диалога Import

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

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

После нескольких итераций я пришел к выводу, что для гладкой работы мы не можем просто выкидывать на пользователя диалог за диалогом, это должно происходить незаметно, чтобы совсем не отпугнуть пользователей от работы в приложении. С подобными мыслями я пришел к постоянной, расширяемой статусной строке, в которой содержатся все импортированные экраны, ее можно скроллить по горизонтали (из-за возможностей ОС с ее тачпадами и Magic Mouse, проблем с доступностью элементов возникнуть не должно).

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

Редизанй приложения Zeplin

Редизайн процесса загрузки Zeplin
Редизайн процесса загрузки (если добавляется новый экран, вы можете добавить описание вместо лога изменений)

Я не знаю, почему Zeplin использует недетерминантные прогресс-бары для загрузки, наверное, это связано с техническими сложностями. И очень зря, потому что было бы очень удобно видеть насколько быстро (или медленно) происходит загрузка. Поэтому я включил это в редизайн, но с поправкой, что на деле это реализовать будет гораздо сложнее.

Вот так выглядит конечный экран Detail:

Экран Detail History

экран Detail History zeplin
Новая функция: экран Detail History

Вкладка History включает временную метку, человека, ответственного за изменение (не обязательно это должен быть импорт экрана), запись лога изменений и снимок экрана (кликабельный для увеличения). Я думал о глубине, которую может привнести эта функция, но решил в пользу более детального снимка экрана, т.е. Снимок — это всего лишь картинка, а не интерактивный экран с собственным описанием, цветами, исходниками или заметками. Это бы значительно усложнило взаимодействие с ним, что точно не нужно Zeplin.

Это был последний созданный мной экран, и чтобы расставить точки над i, я перечислю некоторые вещи, которые я не сделал, и пояснить, почему:

  • Обзор проекта

Это очень простое представление, и так как пользователь почти не проводит времени за ним, я решил пропустить его редизайн, так как это будет всего лишь визуальная полировка и ничего более.

  • Всплывающее меню уведомлений

Это важное представление, но я также решил его не переделывать, так как проект стал бы еще больше, а он итак выдался крупным.

  • Руководство по стилю

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

  • Дизайн сценария работы с тегами

Я бы хотел видеть больше способов взаимодействия с тегами и добавить некоторые операторы логики (потому что сейчас есть только И и ИЛИ, а вот даже простое ВЫЧИТАНИЕ помогло бы серьезно), но я не смог придумать простую реализацию, поэтому оставил эту затею.

  • Улучшение навигации по вкладкам сайдбара

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

Спасибо за то, что дочитали до этой точки. Ваши комментарии приветствуются, так что делитесь впечатлениями по поводу моих концептов UI, идеями по редизайну, функционалу. Критика также важна.