Upload
cocoaheads
View
45
Download
3
Embed Size (px)
Citation preview
Мобильные интерфейсы будущего
Все примеры и картинки вымышлены. Любые совпадения с реальностью случайны.
• 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
• Мутабельные UI• Простая и понятная верстка• Понятный и красивый переход от одного типа контента
к другому• Ретроактивные визуальные компоненты• Open source• Готовые обучаемые модели
Идеи интерфейсов будущего
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] } // ... }