Привет, дорогой читатель!
Не так давно прошел конкурс «GOOGLE MATERIAL DESIGNE».
Суть его состояла в редизайне приложений с учетом последних гайдлайнов по Material Design. Более подробно с конкурсом можно ознакомиться здесь.
Мы также приняли в нем участие, осуществив новое оформление приложения «Эвдик».
Целью редизайна приложения было его улучшение не только в плане визуального дизайна, но и в плане удобства использования (хорошо продуманный интерфейс).
Дизайн новых экранов должен быть эмоциональнее, чем сейчас, интуитивный, вместе с тем преемственный. Кнопки и иконки должны стать понятнее.
Приступим к делу.
В первую очередь был полностью изменен дизайн иконки, который полностью соответствует новому стилю приложения в целом:
Список карточек меняется на плитку из карточек:
До После
Новая иконка выполнена в стиле 3D.
Избавились от плоского стиля в приложении в целом.
Изменился внешний вид бокового меню, появился новый раздел – «Избранное»:
До После
Сравним главные экраны в старой и в новой версиях:
До После
Слова и их перевод находился в элементе списка.
Элемент списка имел имел только одну функцию — копирование перевода текста в буфер обмена.
Слова теперь располагаются в виде отдельных карточек. Каждую карточку можно добавить в новый раздел «Избранное», нажав на данную иконку 
. Смена ее цвета говорит о выполнении данного действия: 
.
В карточках появились кнопки «Копировать»: 
и «Поделиться»: 
.
Есть возможность поменять количество отображаемых на экране столбцов карточек, нажав на кнопку в верхнем правом углу.
Список карточек меняется на плитку из карточек:
Тул бар сдвигается до минимального размера за счет проведения по нему пальцем вверх, к названию раздела применяется анимация и он поднимается наверх, картинка при этом убирается.
Давайте сравним экраны раздела «Разговорник»:
До После
Ранее темы были представлены в виде построчного списка.
В данный момент темы на экране располагаются в виде плиток.
Изменилась типографика, контент стал намного выразительней.
Сворачивание тул бара вызывается путем проведения по нему пальцем снизу вверх или при прокручивании списка элементов меню. Остается только надпись с названием раздела. Картинка при этом убирается.
Изменению подверглось и представление фраз:
До После
Если ранее, как и темы, они выглядели в виде списка, то теперь они представлены в виде плит-карточек.
Хорошее решение – использовать карточки, как контейнеры в том числе и для кнопок: «Слушать», «Копировать», «Поделиться».
В новой версии появилась кнопка «Избранное», с помощью которой, карточка попадает в одноименный раздел: .
Можно изменить количество столбцов с помощью кнопки, располагающейся в верхнем правом углу.
Процесс сворачивания тул бара аналогичен всем процессу для всех вышеописанных окон: вызывается путем проведения по нему пальцем снизу вверх или прокруткой списка. Остается только надпись с названием темы.
Как уже говорилось выше, появился новый раздел «Избранное»:
Здесь располагаются избранные карточки из разделов Словарь и Разговорник.
Здесь все функционирует также, как и в вышеуказанных разделах.
Для удаления карточки, необходимо нажать на кнопку .
Раздел «Условные сокращения» претерпел изменение только в тул баре:
Экран раздела «О программе» оформлен в едином стиле со всеми остальными экранами, оно стало более читабельным. Убрали кнопку Поделиться.
Изменив дизайн приложения, оно стало более удобным и понятным для пользователя. Концепция Material Design облегчает работу разработчиков при проектировании и реализации интерфейсов.