Видео: https://youtu.be/WQFDUYJThls

1. Мобильные интерфейсы
будущего
Все примеры и картинки вымышлены.
Любые совпадения с реальностью случайны.

2. Идея

3. • UI сфера СТОИТ на месте:
• Концепт >> приложение
Идея
Зачем?
• color << Message.getSimilarColor(.red)
• color << Message.effect.notVeryContrast

4. • UI сфера СТОИТ на месте:
• Концепт >> приложение
• Качественные приложения
для разных сфер
Идея
Зачем?

5. • UI сфера СТОИТ на месте:
• Концепт >> приложение
• Качественные приложения
для разных сфер
• UIKit НЕ станет Open source и у
него не будет evolution process
Идея
Зачем?

6. • Потенциал для пользователей:
• Как пользователь будет видеть нужную информацию
• Потенциал для разработчиков:
• Как будут разработчики будут собираться такие
интерфейсы
• Развитие
Это будет исключительно мое ИМХО
Идея
О чем я хочу поговорить

7. Влияющие факторы

8. • Реактивное программирование — парадигма
программирования, ориентированная на потоки данных и
распространение изменений.
• a = b + c
• В императивном программировании `a` будет изменена по
месту вызова
• В реактивном при изменении `b` или `c`
Влияющие факторы
Реактивное программирование

9. Влияющие факторы
Реактивное программирование

10. Влияющие факторы
Реактивное программирование

11. • Чат-боты — это компьютерная программа, которая создана для имитации
речевого поведения человека при общении с одним или несколькими
собеседниками. По отношению к виртуальным собеседникам
употребляется также название программа-собеседник.
• Интересная особенность:
• Чат-боты имеют строгие гайдлайны ввода/получения информации
Влияющие факторы
Чат-боты

12. Влияющие факторы
Чат-боты

13. www.youtube.com/watch?v=ypk-72mhYBk
Влияющие факторы
Backend-driven UIs

14. Влияющие факторы
Watch Kit
20 pt
40%
Cell

15. Влияющие факторы
Watch Kit
Cell
40pt

16. Влияющие факторы
Watch Kit
Cell content
isveryverybig

17. Идеи интерфейсов
будущего

18. • Мутабельные UI
• Простая и понятная верстка
• Понятный и красивый переход от одного типа контента
к другому
• Ретроактивные визуальные компоненты
• Open source
• Готовые обучаемые модели
Идеи интерфейсов будущего

19. Примеры

21. Image
Text
Buttons
(.viewWidth(1),
.content)
(.viewWidth(0.9),
.content)
h = .center
Composition

22. Image
Text
Buttons
(.viewWidth(1),
.content)
(.viewWidth(0.9),
.content)
h = .center
Composition
Text
(.viewWidth(0.8),
.content(16))
h = .center
v = .center
View
(.viewWidth(0.9),
.content)
h = .center
Touchable

23. • Мутабельные UI
• Простая и понятная верстка
• Понятный и красивый переход от одного типа контента
к другому
• “Ретроактивные” визуальные компоненты
• Open source
• Готовые обучаемые модели
Идеи интерфейсов будущего

24. Идеи интерфейсов будущего
Мутабельные UI
struct QuestLevelModel {
var image: Image
var text: Text
var actions: List<CustomActions>
}

25. Идеи интерфейсов будущего
Мутабельные UI
struct QuestLevelBind {
var imageView: ImageView
var textView: TextView
var buttonComponent: Table<ButtonComponent>
}

26. Идеи интерфейсов будущего
Мутабельные UI
struct QuestLevelModel {
var image: Image
var text: Text
var actions: List<CustomActions>
}
struct QuestLevelBind: ModelBindable {
var imageView: ImageView
var textView: TextView
var buttonComponent: Table<MyButtonComponent>
func bind(levelModel: QuestLevelModel) {
imageView << levelModel.image
textView << levelModel.text
buttonComponent.component.text << levelModel.actions.value.text
buttonComponent.component.touch ->> levelModel.actions.value.execute
}
}

27. Идеи интерфейсов будущего
Мутабельные UI
struct QuestLevelBind: ModelBindable, InterfaceDrawable {
var imageView: ImageView
var textView: TextView
var buttonComponent: Table<MyButtonComponent>
func draw() -> [InterfaceComponent] {
return [imageView, textView, buttonComponent]
}
}

28. Идеи интерфейсов будущего
Простая и понятная верстка
struct QuestLevelBind: ModelBindable, InterfaceDrawable {
var imageView: ImageView
var textView: TextView
var buttonComponent: Table<MyButtonComponent>
func draw() -> [InterfaceComponent] {
let separator = Separator()
return [imageView, separator, textView, buttonComponent]
}
}

29. Идеи интерфейсов будущего
Простая и понятная верстка
enum WidthAligment {
case fixed(value: CGFloat)
case content(adjustment: CGFloat)
case viewWidth(percent: CGFloat, adjustment: CGFloat)
}
let text = TextView(width: .viewWidth(percent: 0.8),
height: .content)

30. Идеи интерфейсов будущего
Понятный и красивый переход от одного типа контента к другому
let text = TextView()
text.exchangeAnimation = .custom(configuration: AnimationConfiguration())

31. Идеи интерфейсов будущего
“Ретроактивные” визуальные компоненты
// Actions
protocol Touchable { }
protocol SliderType { }
protocol PickerType { }

32. Идеи интерфейсов будущего
Готовые обучаемые модели
// Actions
protocol Touchable { }
protocol SliderType { }
protocol PickerType { }
// Recommendation System
protocol RecomentationalTouchType: Touchable { }

33. Идеи интерфейсов будущего
Готовые обучаемые модели
// Recommendation System
protocol RecomentationalTouchType: Touchable {
func recomended(minimalSize: CGSize)
func recomended(executionType: ExecutionType)
}

34. Идеи интерфейсов будущего
Готовые обучаемые модели
// Recommendation System
protocol RecomentationalTouchType: Touchable {
func recomended(minimalSize: CGSize)
func recomended(executionType: ExecutionType)
}
protocol RecomentationalTextType {
var textPurpose: TextPurpose { get }
func recomended(minimalFontSize size: CGFloat)
func recomended(fontWeight: ExecutionType)
}

35. Идеи интерфейсов будущего
Готовые обучаемые модели
// Recommendation System
protocol RecomentationalTouchType: Touchable {
func recomended(minimalSize: CGSize)
func recomended(executionType: ExecutionType)
}
protocol RecomentationalTextType {
var textPurpose: TextPurpose { get }
func recomended(minimalFontSize size: CGFloat)
func recomended(fontWeight: ExecutionType)
}
~
Open Source

37. struct MyButton: ViewType, InterfaceDrawable, InterfaceComponent, Touchable {
var rightImage: ImageView
var leftImage: ImageView
var text: TextView
var touch: TouchAction
let width: WidthAligment
let height: HeightAligment
mutating func setup() {
leftImage = ImageView(width: .fixed(value: 20), height: .fixed(value: 20))
leftImage = ImageView(width: .fixed(value: 20), height: .fixed(value: 20))
text = TextView(width: .content(adjustment: 0), height: .content(adjustment: 0))
width = .viewWidth(percent: 0.8, adjustment: 0).lessOrEqual()
}
func draw() -> [InterfaceComponent] {
return [leftImage, text, rightImage]
}
// ...
}

38. Спасибо за
внимание!
Зимин Александр
@ziminalex
azimin@me.com