На прошедшей 8 мая конференции — Google IO, компания Google рассказала о обновлении концепции Material Design, и новых инструментах для разработчиков и дизайнеров.

Из заметных стилевых изменений в концепции — Material Design. Появились острые и рубленные углы у компонентов, помимо скруглённых. А иконки имеют пять стилевых решений.

Инструменты для разработки дизайна

Material Theme

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

Theme Editor Home

Gallery

Инструмент для обсуждения дизайна и передачи макетов в разработку от Google открыт для всех. Простыми словами это Zeplin. Который по всей видимости — бесплатен.

Gallery Home

Material Icons

Material Design стал поддерживать иконки в нескольких стилевых решениях:

• Filled
• Outline
• Rounded
• Two-Tone
• Sharp.

Большая и бесплатная библиотека иконок для использования в проектах — https://material.io/tools/icons/?style=baseline

Ссылка на полный обзор новведенений в Material Design —https://design.google/library/making-more-with-material/

Перевод подготовлен специально для канала — dui.
Ссылки на канал в телеграм, вконтакте и фейсбук.

Sketch 47 принёс долгожданную всеми функцию библиотек (Libraries). Функция которая позволяет синхронизировать символы глобально во всех файлах Sketch. Дизайн-системы особенно выигрывают от такой функции: возможность иметь простой способ использования ассетов дизайн-системы, гарантируя, то что они будут актуальны для всех — это мечта дизайнера. После того, как мы попробовали многие другие инструменты, такие как Invision Craft, мы были счастливы увидеть нативную функцию библиотек в Sketch. Вот наши решения и уроки, которые мы получили когда создавали свою дизайн-систему с использованием библиотек.

Цели нашей библиотеки

1. Универсальное хранилище для наших дизайнеров. Один файл, который дизайнеры могли бы использовать в своей работе и всегда иметь актуальные элементы из нашей дизайн-системы.
2. Все элементы в библиотеке должны быть идентичны с нашими компонентами в коде, независимо от платформы, как визуально, так и структурно.
3. Простое обслуживание. Обновление компонентов и их дополнение должно быть простым, чтобы дизайнеры могли получать актуальные материалы без ожиданий и проблем.

Вложенные против одиночных

В этом великолепном видео Sketch Together, Пабло Стэнли (Pablo Stanley) рассказывает, как создавать вложенные библиотеки. Он предлагает разбить все элементы в документе, такие как цвета и компоненты на отдельные Sketch файлы и ссылаться на эти файлы при работе с ними. Таким образом если вы обновите символ в одном файле, он всё равно будет обновлён во всех связанных документах. Другой вариант, поместить все элементы в один файл. Вы не получите удобное разделение, которое даст вам отдельный файл Sketch, но такой вариант был ближе для нас:

1. Упрощается обслуживание, нам нужно открыть только один файл если нужно сделать обновление в библиотеке (цель №3).
2. Дизайнерам потребуется добавить только один файл нашей библиотеки в Sketch (цель №1).

Использование страниц для организации

Сбор всех элементов цвета, иконок и компонентов в один файл — это не первое, что приходит на ум, когда думаешь «лёгкая поддержка». К счастью, вы можете разделить Sketch файл на страницы (Pages) в документе. Вот краткое изложение того, как это сделали мы:

Основные элементы нашей дизайн системы (цвета, типографика, иконки) находятся наверху, остальные наши элементы мы упорядочили в алфавитном порядке. Внизу вы видите две дополнительные страницы (Test Page и Library Preview). Test Page — это страница на которой мы проверяем любые новые символы, которые мы добавляем. Library Preview — использует метод описанный в статье Sketch Hunt, который добавляет нашей библиотеке обложку для предварительного просмотра, при отображение библиотеки в настройках в Sketch Возможность создания обложек для библиотек появилась с выходом Sketch 48.

Названия символов

Символы можно группировать с помощью символа / в названии. Пример наименования и группировки кнопки выглядит так.

При таком наименовании создаётся меню, которое выглядит примерно так, как на следующем изображении.

Добавление цвета

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

Хотя это и не идеальное решение, оно не создаёт слишком много хлопот для наших дизайнеров, так в большинстве случаев им нужно просто выбрать необходимый цвет в панели Overrides. Кроме того, это позволяет использовать цветные прямоугольники для создания фактических компонентов (подробнее об этом ниже). Если мы сделаем обновление для цвета, оно обновит каждый компонент, который использует этот цвет.

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

Последний момент в котором нам нужно было убедиться, что всё получилось сделать аккуратно в символах, это то, что когда дизайнер откроет меню Overrides у цвета, он не будет завален огромным списком других цветов. Чтобы решить эту проблему мы определяем цветные прямоугольники с шагом в 10 пикселей, так как отображение символов в меню Overrides основывается на его размере. Например, цвета бренда имеют размер 20px на 20px, утилитарные цвета — 30px на 30px и так далее. С такой системой если дизайнер захочет переключиться на другой цвет, он увидит только необходимые цвета, а не каждый другой цвет в библиотеке.

Добавление иконок

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

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

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

Добавление текста

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

В итоге мы решили использовать символы и для текста. Дизайнеры могут использовать для редактирования текста, текстовое поля в поле Overrides или просто деттачить символ и редактировать текст как обычно. И так же в Sketch 48 вы можете увеличить текстовое поле Overrides, увеличив текстовое поле символа изначально.

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

Добавление компонентов

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

И это наше намеренное решение, так как мы хотим видеть наши символы, такими же как они должны быть. Один к одному и совпадающими по возможностям с нашими компонентами. Для этого мы называем нашим символы Overrides, так же как называем компоненты в коде. Чтобы сделать их ещё более понятными для наших дизайнеров, в названии компонентов мы используем нижний регистр. Всё то, что на самом деле не является частью компонента (например, блоки паддингов, которые мы ещё обсудим ниже), мы называем заглавными буквами. Сохраняя названия Overrides в символах с одинаковыми с названиями компонентов в коде — отличный способ решить споры между дизайнером и разработчиком при работе над интерфейсом.

Советы и хитрости

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

• Упрощайте всё для себя и дальнейшего использования. Скачайте и установите плагин Symbol Organizer. С помощью него вы сможете организовать ваши символы в алфавитном порядке и группировать объекты по именам. Кроме того, плагин поможет разгрести завал на странице Symbols и сохранит ваше время.
• Порядок слоёв имеет значение. Как они будут упорядочены в символе, в таком же порядке они будут находиться в панели Overrides.

• Стоит в очередной раз повторить здесь, что размер слоев имеет значение. Помните об этом: в таких элементах, как фон, текстовые поля, значки и других. Объекты с одинаковым размером могут группироваться.
• У вас скорее всего будут те символы, которые не нужны вашим дизайнерам, но они могут потребоваться для составления компонентов. Для этой ситуации мы решили создать группу элементов с названием _Building Blocks (группа элементов с нижним подчёркиваем будет находиться внизу списка в меню символов), эта группа также используется как корзина. Все эти элементы остаются на странице соответствующего компонента, но называются с префиксом _Building Blocks, чтобы убедиться, что все они находятся внутри одной группы элементов.

• В настоящее время Sketch не очень хорошо справляется с изменением размера вложенных символов. Чтобы обойти эту проблему, мы создаем так называемые «интервальные блоки (spacing blocks)». Пример того, где это может понадобиться — это кнопки. Вы добавляете кнопку, изменяете текст по умолчанию на более длинный вариант, и тут отступы выходят из строя. Для этого у нас есть символ интервального блога, с возможность показать/скрыть его, который находится в полупрозрачных «блоках». Дизайнеру требуется просто изменить размер кнопки до границы блоков.

Сделаем это доступным

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

Одна из особенностей нашего руководства в начале работы — это инструкции по настройке плагина Sketch Runner. Хотя это немного противоречит одной из наших цели по созданию универсального хранилища, мы всё равно считаем, преимущества использования этого плагина особенно раскрываются при использовании его с нашей библиотекой — это действительно бесценный инструмент.

С плагином Runner для Sketch вы можете быстро вставлять символы, просто набрав их имя, для многих людей это быстрее, чем выбрать символ через раздел меню Symbols. Мы рекомендовали нашим дизайнерам отключить Fuzzy Search в настройках плагина и добавить префикс «_Building Blocks» в список игнорируемых в настройках.

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

Мой телеграм–канал / Вконтакте / Facebook / Dribbble

Создание современной библиотеки в Sketch was originally published in Дизайн-кабак on Medium, where people are continuing the conversation by highlighting and responding to this story.

The objective of the contest to add elements of gamification in the application and motivate the user to visit the app often.

I want to remind about his first idea for the contest https://readymag.com/astract/badoo-contest/

The new idea is that the user not just gets a reward and they hang in his profile in the form of beautiful icons, but they “work” and brings him bonuses.

He can find a coins on the various screens application (such as dating, dialogues or user profiles), open a new awards, to raise their level and collect coins from them.

Coins

At the beginning of each week of the user receives notification about collecting coins. These coins affect the position in city ranking.

It can also collect coins while working with the application.

Awards like a mini game.

Awards open vertically and alternatively. To gain access to the next at the bottom of the award, you need to open the previous.

Each award can be increased up to the third level. Each new level increases the income with this award for the week.

Bonus. If the user has collected a horizontal line of four awards, he gets an additional increase in coins for a week.

• Execution conditions the opening of awards, displayed as a progress bar on the icon.
• Indicator up arrow, symbolizes the possibility of increasing the level.
• All awards, including the inaccessible (with lock), shows the number of received coins. User understands how much they can bring a bonus at the beginning of the week.

After receiving the new award. Users are invited to immediately raise level award to the second level for the publication in social networks.

While working with the application the user can receive to various alerts. For example, he was overtaken by a rival in the city ranking.

Sidebar

In the side menu show the list of leaders in the city ranking.

Leaderboard

City rating is formed on the number of coins earned in a week. Global rating on total amount of all coins.

At the end of the week Leader receives bonus coins. For holding leadership position in a few weeks, you receive a special status.

Screen map

Additional links:

1. Screen map in high definition https://www.dropbox.com/s/ac8rg2v2kh1sna4/screen-map-badoo-v2.jpg?dl=0
2. All screens in high quality https://www.dropbox.com/sh/vvb6fyl20osuaom/AAB4cmhwBvggr0UjmRzyyXTqa?dl=0

После того, как я приобрёл Sketch и собрал набор необходимых плагинов, я перестал совсем запускать Photoshop.

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

1. Sketch Runner (http://goo.gl/JHqbwE) — мастхэв плагин. С помощью него можно забыть, в каком меню находится нужная вам команда. Просто вводите её через клавиатуру.
2. Craft (https://goo.gl/Nij4Pr) — набор плагинов, который наполнит дизайн реальными данными, сформирует библиотеку ассетов и продублирует слои в реальном времени.
3. Content generator (https://goo.gl/7AjTT5) — генерирует различный контент. Имена, текст, изображения, аватарки пользователей.
4. Compo (https://goo.gl/j0lntB) — превратит текстовый блок в кнопку и адаптирует её размеры после изменения текста.
5. Font Finder (https://goo.gl/Ovcf06) — отображает список всех используемых шрифтов в документе и позволяет выбрать слои с нужным типом.
6. Pixel perfecter (https://goo.gl/00dLIR) — найдёт все полупиксельные слои.
7. Remove unused symbols (https://goo.gl/I3NcwQ) — удаляет неиспользуемые символы в документе.
8. Rename it (https://goo.gl/0mYdLP) — групповое переименовывание слоёв.
9. Sort me (https://goo.gl/DnqyB3) — отсортирует слои и артборды.
10. Swap elements (https://goo.gl/hECnEl) — меняет позиции двух элементов местами.
11. Lazy exportable (https://goo.gl/w3lyWb) — делает в пару кликов слои, группы, символы экспортируемыми.
12. Open color (http://goo.gl/VXHV1r) — мощный плагин для осмысленной работы с цветом. Формирует библиотеки цветовых схем и позволяет изменять цвет в макете в пару кликов.
13. Typograph (http://goo.gl/Apm3um) — приведёт ваш текст в порядок.
14. Marketch (https://goo.gl/zfvBRC) — генерирует дизайн спецификации в html файл. Некая альтернатива Zeplin и Sympli.
15. Marvel (http://goo.gl/34Dzpm) — плагин для выгрузки артбордов в одноимённый сервис прототипирования. Раньше использовал для этого Invision, но мне не нравится его механизм импорта и медленная работа при большом количестве артбордов.
16. Crystal (https://goo.gl/NTiDK6) приложение для просмотра дизайн макетов в реальном времени на Android устройствах.

Задача конкурса заключалась в переносе недостающих функций диалогов из полной версии сайта «ВКонтакте» в мобильное iOS приложение. В результате требовалось представить своё видение четырёх основных экранов приложения:

1. Список диалогов (основной экран);
2. Открытый диалог с одним собеседником;
3. Открытый диалог с несколькими собеседниками (Беседа);
4. Экран с информацией о беседе.

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

И так, поехали!

Список диалогов

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

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

Открытый диалог с одним собеседником

Все основные функции диалогов перенёс в выпадающее меню, которое можно вызвать нажатием на название беседы. Дополнительное меню содержит такие функции:

• Поиск внутри диалогов;
• Показать все материалы беседы;
• Добавление новых участников в беседу;
• Режим «Не беспокоить».

Если про две последние опции (добавление участников и режим «Не беспокоить») я думаю всё понятно без лишних слов, то я расскажу подробнее про первые две — поиск внутри диалогов и показ всех материалов беседы.

Поиск внутри сообщений — с помощью поиска можно быстро и легко найти нужное сообщение, стоит только ввести нужно слово.
Если же требуется перейти к определённой дате, тут вам поможет кнопка быстрого перехода к нужной дате.

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

Переход к самому сообщению осуществляется свайпом. В режим просмотра фотографии из документов, так же добавил переход напрямую к сообщению.

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

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

Открытый диалог с несколькими собеседниками

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

Страница с информацией о беседе

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

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

Спасибо за внимание!

Другие мои проекты вы можете посмотреть на Dribbble и Behance
Подписывайтесь!