Александр Зимин — Мобильные интерфейсы будущего

Мобильные интерфейсы будущего

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

Идея

• UI сфера СТОИТ на месте:• Концепт >> приложение

Идея Зачем?

• color << Message.getSimilarColor(.red)

• color << Message.effect.notVeryContrast

• UI сфера СТОИТ на месте:• Концепт >> приложение

• Качественные приложения для разных сфер

Идея Зачем?

• UI сфера СТОИТ на месте:• Концепт >> приложение

• Качественные приложения для разных сфер

• UIKit НЕ станет Open source и у него не будет evolution process

Идея Зачем?

• Потенциал для пользователей:• Как пользователь будет видеть нужную информацию

• Потенциал для разработчиков:• Как будут разработчики будут собираться такие

интерфейсы

• Развитие

Это будет исключительно мое ИМХО

Идея О чем я хочу поговорить

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

• Реактивное программирование — парадигма программирования, ориентированная на потоки данных и распространение изменений.

• a = b + c• В императивном программировании `a` будет изменена по

месту вызова• В реактивном при изменении `b` или `c`

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

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

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

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

• Интересная особенность:• Чат-боты имеют строгие гайдлайны ввода/получения информации

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

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

www.youtube.com/watch?v=ypk-72mhYBk

Влияющие факторы Backend-driven UIs

Влияющие факторы Watch Kit

20 pt

40%

Cell

Влияющие факторы Watch Kit

Cell

40pt

Влияющие факторы Watch Kit

Cell content isveryverybig

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

• Мутабельные UI• Простая и понятная верстка• Понятный и красивый переход от одного типа контента

к другому• Ретроактивные визуальные компоненты• Open source• Готовые обучаемые модели

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

Примеры

Image

Text

Buttons

(.viewWidth(1), .content)

(.viewWidth(0.9), .content) h = .center

Composition

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

• Мутабельные UI • Простая и понятная верстка • Понятный и красивый переход от одного типа контента

к другому • “Ретроактивные” визуальные компоненты • Open source • Готовые обучаемые модели

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

Идеи интерфейсов будущего Мутабельные UI

struct QuestLevelModel { var image: Image var text: Text var actions: List<CustomActions> }

Идеи интерфейсов будущего Мутабельные UI

struct QuestLevelBind { var imageView: ImageView var textView: TextView var buttonComponent: Table<ButtonComponent> }

Идеи интерфейсов будущего Мутабельные 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 } }

Идеи интерфейсов будущего Мутабельные UI

struct QuestLevelBind: ModelBindable, InterfaceDrawable { var imageView: ImageView var textView: TextView var buttonComponent: Table<MyButtonComponent> func draw() -> [InterfaceComponent] { return [imageView, textView, buttonComponent] } }

Идеи интерфейсов будущего Простая и понятная верстка

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] } }

Идеи интерфейсов будущего Простая и понятная верстка

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)

Идеи интерфейсов будущего Понятный и красивый переход от одного типа контента к другому

let text = TextView() text.exchangeAnimation = .custom(configuration: AnimationConfiguration())

Идеи интерфейсов будущего “Ретроактивные” визуальные компоненты

// Actions protocol Touchable { } protocol SliderType { }protocol PickerType { }

Идеи интерфейсов будущего Готовые обучаемые модели

// Actions protocol Touchable { } protocol SliderType { }protocol PickerType { }

// Recommendation System protocol RecomentationalTouchType: Touchable { }

Идеи интерфейсов будущего Готовые обучаемые модели

// Recommendation System protocol RecomentationalTouchType: Touchable { func recomended(minimalSize: CGSize) func recomended(executionType: ExecutionType) }

Идеи интерфейсов будущего Готовые обучаемые модели

// 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) }

Идеи интерфейсов будущего Готовые обучаемые модели

// 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

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] } // ... }

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

Зимин Александр @ziminalex

[email protected]