Новая Яндекс.Музыка. Особенности разработки ios-клиента...
DESCRIPTION
Осенью 2013 года мы приняли решение переписать iOS-приложение Яндекс.Музыки. Именно так получилась версия 3.0. В докладе небольшой рассказ о том, что «под капотом» нашего приложения, с какими нестандартными проблемами мы столкнулись при разработке и как с ними справлялись.TRANSCRIPT
![Page 1: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/1.jpg)
![Page 2: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/2.jpg)
Новая Яндекс.Музыка. Особенности
разработки iOS-клиента
Часть 1
Егор Чиглинцев Я.Субботник, Новосибирск, 18.10.2014
![Page 3: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/3.jpg)
3
Работа дизайнера
![Page 4: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/4.jpg)
4
Работа дизайнера
![Page 5: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/5.jpg)
5
Работа программиста
![Page 6: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/6.jpg)
Главное меню
![Page 7: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/7.jpg)
7
Главное меню〉Дает доступ к основным экранам приложения
![Page 8: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/8.jpg)
8
Главное меню〉Дает доступ к основным экранам приложения
〉Делаем снимок экрана и сдвигаем в сторону его
![Page 9: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/9.jpg)
9
Главное меню〉Дает доступ к основным экранам приложения
〉Делаем снимок экрана и сдвигаем в сторону его
〉Фон меняется в зависимости от играющего сейчас трека
![Page 10: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/10.jpg)
10
Главное меню〉Дает доступ к основным экранам приложения
〉Делаем снимок экрана и сдвигаем в сторону его
〉Фон меняется в зависимости от играющего сейчас трека
![Page 11: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/11.jpg)
11
Главное меню
![Page 12: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/12.jpg)
12
Главное меню
![Page 13: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/13.jpg)
13
Главное меню
B
A
C!
C! = B ·(1-α) + A ·α
![Page 14: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/14.jpg)
14
Главное меню
![Page 15: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/15.jpg)
15
Главное меню
B
A
C!
C! = B + A ·α
![Page 16: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/16.jpg)
16
Главное меню
B
A
C!
B
A
C!
C! = B ·(1-α) + A ·α C! = B + A ·α
![Page 17: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/17.jpg)
Главное меню〉Простое смешивание для заголовков
– Менее контрастно, не меняется при движении – Выделенный пункт меню лучше виден
〉Сложение для иконок
– Ярко, празднично – Меняют цвет при движении
17
![Page 18: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/18.jpg)
Цвет текста
![Page 19: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/19.jpg)
Цвет текста〉Необходимо выбирать цвет текста в соответствии с фоном
19
BA C
![Page 20: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/20.jpg)
Цвет текста〉Необходимо выбирать цвет текста в соответствии с фоном
〉Задача актуальна, когда нужно поместить текст на фоне, цвет которого нам заранее не известен
20
BA C
![Page 21: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/21.jpg)
Цвет текста〉На экране рекомендаций
21
![Page 22: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/22.jpg)
Цвет текста〉На экране рекомендаций
〉На экране профиля
22
![Page 23: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/23.jpg)
Цвет текста〉На экране рекомендаций
〉На экране профиля
〉В главном меню
23
![Page 24: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/24.jpg)
Цвет текста〉На экране рекомендаций
〉На экране профиля
〉В главном меню
〉В фотогалерее
24
![Page 25: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/25.jpg)
Цвет текста〉Много способов выбирать контрастные цвета
25
OH GOD WHYМОИ ГЛАЗА
PLEASE DON’T
![Page 26: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/26.jpg)
Цвет текста〉Много способов выбирать контрастные цвета
〉Ограничимся белым и черным текстом
26
ТЁМНЫЙ ФОНТЁМНЫЙ ФОНСВЕТЛЫЙ ФОН
![Page 27: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/27.jpg)
Цвет текста
27
R G BCOLORS
HOW DO THEY WORK?
![Page 28: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/28.jpg)
Цвет текста〉HSV не подходит
〉Цвета с одинаковыми значениями V могут восприниматься как тёмными, так и светлыми
〉Здесь V = max(R,G,B)
28
Hue Saturation Value (Brightness)
H: 280º, S: 100%, V: 100%
H: 250º, S: 100%, V: 100%
![Page 29: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/29.jpg)
Цвет текста〉HSL не подходит
〉Цвета с одинаковыми значениями L могут восприниматься как тёмными, так и светлыми
〉Здесь V = (max(R,G,B)+min(R,G,B))/2
29
Hue Saturation Lightness
H: 280º, S: 100%, V: 50%
H: 250º, S: 100%, V: 50%
![Page 30: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/30.jpg)
Цвет текста〉Mожно рассмотреть Y (luma)
30
Y = 0.21 * R’ + 0.72 * G’ + 0.07 * B’
Y=20%
Y=80%
![Page 31: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/31.jpg)
Неоднородное изображение〉Разобрались с отдельными цветами
〉Как выбрать цвет текста, который располагается поверх фотографии?
31
![Page 32: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/32.jpg)
Неоднородное изображение
32
Тень Усреднение
![Page 33: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/33.jpg)
Глобально или локально?
33
Глобально Локально
![Page 34: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/34.jpg)
Глобально или локально?
34
Тёмный Светлый
![Page 35: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/35.jpg)
Глобально или локально?
35
Глобально Локально
![Page 36: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/36.jpg)
Глобально или локально?
36
Тень Усреднение
〉Есть как плюсы, так и минусы
〉Локальная тень не всегда смотрится хорошо
〉Усреднение не всегда дает удовлетворительные результаты на неоднородном фоне
![Page 37: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/37.jpg)
Что в итоге?
37
〉Глобальная тень в главном меню
![Page 38: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/38.jpg)
Что в итоге?
38
〉Глобальная тень в главном меню
〉Глобальная тень на экране профиля
![Page 39: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/39.jpg)
Что в итоге?
39
〉Глобальная тень в главном меню
〉Глобальная тень на экране профиля
〉Выбор цвета текста в рекомендациях
![Page 40: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/40.jpg)
Что в итоге?
40
〉Глобальная тень в главном меню
〉Глобальная тень на экране профиля
〉Выбор цвета текста в рекомендациях
〉Локальное усреднение и выбор цвета в фотогалерее
![Page 41: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/41.jpg)
Что в итоге?
41
〉Глобальная тень в главном меню
〉Глобальная тень на экране профиля
〉Выбор цвета текста в рекомендациях
〉Локальное усреднение и выбор цвета в фотогалерее
![Page 42: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/42.jpg)
Обучающие экраны
![Page 43: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/43.jpg)
Обучающие экраны〉Полное изменение интерфейса приложения по сравнению с предыдущей версией
〉Как новые, так и старые пользователи могут немного «потеряться»
〉Хотим показывать подсказки в ключевых местах
43
![Page 44: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/44.jpg)
Обучающие экраны〉Хотим показывать «живой» контент
44
![Page 45: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/45.jpg)
Обучающие экраны〉Хотим показывать «живой» контент
45
![Page 46: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/46.jpg)
Обучающие экраны〉Хотим показывать «живой» контент
〉Легко адаптироваться под небольшие изменения дизайна
46
![Page 47: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/47.jpg)
Обучающие экраны〉Хотим показывать «живой» контент
〉Легко адаптироваться под небольшие изменения дизайна
〉Учитывать особенности разных моделей устройств
47
![Page 48: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/48.jpg)
Обучающие экраны〉«Живой» контент изменчив и иногда преподносит сюрпризы
48
![Page 49: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/49.jpg)
Обучающие экраны〉«Живой» контент изменчив и иногда преподносит сюрпризы
〉Наша задача - учесть все возможные ситуации
49
![Page 50: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/50.jpg)
Многое другое
50
![Page 51: Новая Яндекс.Музыка. Особенности разработки iOS-клиента — Егор Чиглинцев](https://reader034.vdocuments.net/reader034/viewer/2022042713/547b2ca4b4af9fd02c8b4686/html5/thumbnails/51.jpg)
Спасибо за внимание!