96
Рис. 2.32. Макет страницы истории
Рис. 2.33. Шрифт Myriad Variable Concept
2.9.8. Страница описания подкаста
При клике на один из подкастов приложение переведёт на страницу с
описанием подкаста. (рис. 2.34.).
Страница намеренно простая в целях оптимизации, чтобы рассеять внимание,
заметить каждое возможное действие. Фоном служит обложка подкаста, обо-
значенная на макете салатовым цветом. Для каждого подкаста обложка раз-
личается. Стоит отметить, что при запуске подкаста, она имеется у каждого
проекта, являясь графическо-рекламной частью. Тем самым обложки ярко
демонстрируют индивидуальность каждого продукта и поскольку подкастинг
97
современный формат, который зачастую содержит графическую часть только
в обложке (и иногда в логотипе), то к ней приковано чрезвычайно много вни-
мания как зрителей, так и при создании проекта. Поэтому, как правило, об-
ложки и логотипы зачастую заказываются у профессионалов: дизайнеров и
художников. Поэтому те выглядят стильно, соответствуя современным трен-
дам и служат хорошим фоном.
Внизу страницы прописано описание проекта, чтобы пользователь мог
быстро определить интересует ли его данный продукт. При нажатии текст
«раскрывается» занимая полный экран.
В любом состоянии можно «смахнуть» пальцем в сторону и в таком слу-
чае пользователь по падает на страницу описания другого подкаста, что поз-
воляет быстро просматривать множество продуктов.
Если какой-либо подкаст заинтересовал человека, то ему достаточно лишь
нажать на сердечко слева, чтобы добавить произведение в закладки, которые
находятся в личном кабинете, и прослушать в удобное для себя время, не от-
рываясь от просмотра других подкастов.
Но если пользователь желает ознакомиться с произведением в настоя-
щий момент, то достаточно «кликнуть» на иконку справа, что переведёт на
личную страницу подкаста.
98
Рис. 2.34. Страница описания подкаста
2.9.9. Страница подкаста
На личной странице подкаста (рис. 2.10.) располагается обложка и назва-
ние произведения. Помимо этого, так же внимание уделяется рейтингу на ос-
нове популярности в приложении относительно категории, что позволяет
сразу оценить тот или иной подкаст. Так же, снизу расположена подвижная
система хэштегов, из которой видны только самые популярные. Именно че-
рез хэштеги можно попасть на подборку подкастов, а потом и на личную
страницу подкаста.
Чуть ниже располагается три иконки, которые обозначают (слева
направо): переход к чату по подкасту, поиск по эпизодам (по слову или но-
меру), меню перехода по сезонам.
Так же инфографика композиционно отделяет «представительскую»
часть от ленты эпизодов. Каждый эпизод сопровождает описание и возмож-
ность как скачать для оффлайн прослушивания, так и добавить в плейлист.
99
При долгом нажатии на описание, оно раскрывается на весь экран. При нажа-
тии на изображение или название осуществляется переход на страницу эпи-
зода/плей.
Рис. 2.35. Макет страницы подкаста
2.9.10. Страница проигрывателя
Данная страница представляет собой проигрыватель. В неактивном со-
стоянии цвета монохромны, только пользователь может «включить» я яркий
градиент, нажав на кнопку «плея» . На этой странице доступно непосред-
ственное прослушивание аудио. (рис.2.36.)
Снизу располагается плей-меню, которое состоит из возможности остано-
вить/начать прослушивание трека. Так же существует возможность отмотать
назад на 10 секунд (обычно используется при прослушивании плохо услы-
шанного или просто понравившегося фрагмента) и вперёд на 30 секунд
100
(обычно используется, если этап кажется скучным). Значок слева переводит к
странице комментариев, справа – даёт возможность скачать трек.
Полоска-полукруг обозначает протяжённость аудио. В центре находится
круговой визуализатор эквалайзера. Слева указан настоящий таймкод, когда
справа общее время продолжительности. Ползунок графически ориентирует
на каком моменте находится слушатель.
Пиктограммы справа сверху представляют (слева направо): свернуть,
настройка звука, дополнительное меню
Внизу видены комментарии, которые сменяют друг друга в зависимости
от времени, а так же лайков пользователей.
Так же всегда можно «смахнуть» в сторону экран и перейти к следую-
щему или предыдущему эпизоду, что сразу будет с «развёрнутым» описанием
и кнопкой перехода к прослушиванию. (рис.2.38.)
Рис. 2.36. Страницы макета интерфейса
101
Рис. 2.37. Страница макетов настроек
Рис. 2.38. Макет описания соседнего эпизода
102
2.9.11. Страница комментариев
Комментарии сопряжены с чатом. Они строго привязаны по времени, стиму-
лируя общение относительно подкаста. Исключение составляют только ответ
на чужой комментарий.
В комментариях нет возможности оставлять ни стикеры, ни голосовые, в от-
личии от чата. Множество функций специально урезаны и сделано это ради
того, чтобы участники обсуждали конкретно сам подкаст и эти обсуждения
становились частью «контента» приложения. Только понравившиеся другим
участникам комментарии всплывают на странице прослушивания музыки.
Рис. 2.38. Макет страницы комментариев
2.9.12. Разработка интерфейса теста
Данный раздел позволяет алгоритму отбирать библиотеку конкретно
ориентируясь на пользователя, в зависимости от его вариантов ответа. В то
103
же время этот тест напоминает визуальную новеллу, что позволяет оставить
положительное впечатление у ЦА, что любит как игры, так и удобные ин-
струменты. (рис.2.39.)
Алгоритм устроен таким образом, что каждый вариант ответа собирает в
себе определённые предпочтения, облако тегов. После окончания тест–игра
выдаёт результаты-рекомендации на совершенно различные подкасты. Могут
быть перемешены такие разные жанры как романтика и ужас, например. Но
результаты базируются исключительно на ответах пользователя. То есть ал-
горитмы можно назвать кастомными, ориентирующиеся на индивидуаль-
ность каждого участника конкретно.
Основная идея заключается в том, что пользователь буквально создаёт
свою историю через варианты выборов.
Каждый финал истории награждается с помощью достижения, помимо ре-
зультатов теста. Однако. Стоит учитывать, что даже если, например, у двух
пользователей, буде один и тот же финал, это отнюдь не значит, что у них бу-
дут одинаковые результаты. В случае если они пришли к одному финалу че-
рез разные ответы – результаты будут отличаться.
Этим ращение я так же хотела приблизить пользователя к литературе, из
которой в том числе состоят художественные подкасты, ведь для каждого из
них нужен сценарий.
Выбирая визуальное решение, я остановилась на эффекте грубой аппли-
кации, так чтобы очертания угадывались в общей стилизации, но не были че-
ресчур четкими. Таким образом, графика вновь в некотором роде склоняет
пользователя к фантазии и в некем смысле напоминает сон. Сны тоже не
имеют чёткости.
104
Рис. 2.39. Макеты страниц теста
2.10. Стилеобразующие элементы интерфейса
2.10.1. Шрифт
Шрифт использован a_FuturaRound. (рис. 2.14.)
«Футура — типичный представитель гротескного шрифта, созданный между
1924 и 1926 годом немецким дизайнером Паулем Реннером. Отражает в себе
влияние русского конструктивизма и немецкой школы Баухаус.»
Шрифт Futura был задуман как «шрифт будущего», который был заказан из-
дателем Якобом Хенгером. Именно поэтому я остановилась на данном стиле
шрифта.
105
Так же он имеет мягкие, закруглённые формы, что вписывается в общую сти-
листику.
Рис. 2.40. Макеты страниц теста
2.10.2. Цвет
В мобильно приложении используется палитра серых цветов, за исклю-
чением градиента, который появляется во анимации. Так же, плашкой, даю-
щий монохромный эффект служит 85% непрозрачность тёмно-серого цвета.
Цвет даёт концепт того, что именно с приходом пользователя и при его
взаимодействии с приложением, появляется нечто творческое, живое. Таки об-
разом подчёркивая индивидуальность как его, так и продукта.